/*******************************************************************************
*                                 [Estilo CSS]                                *
*******************************************************************************/
/*******************************************************************************
*                                      [*]                                     *
*******************************************************************************/
:root {
   --azul-fuerte: #29245a;
   --azul-suave: #36b3e8;
   --rojo: #c70039;
   --gris: #0D1E28;
   --verde: rgb(0, 170, 0);
}

@font-face {
   font-family: 'Franklin-regular';
   src: url('../fonts/LibreFranklin-Regular.ttf') format('truetype');
}

@font-face {
   font-family: 'Franklin-bold';
   src: url('../fonts/LibreFranklin-Bold.ttf') format('truetype');
}

@font-face {
   font-family: 'Franklin-bolder';
   src: url('../fonts/LibreFranklin-ExtraBold.ttf') format('truetype');
}

@font-face {
   font-family: 'Franklin-thin';
   src: url('../fonts/LibreFranklin-Thin.ttf') format('truetype');
}

body {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   /*min-height: 66vh;*/
   font-family: "Franklin-regular", Arial, Helvetica, sans-serif;
   /*margin: 8rem 0 0 0;*/
   margin: 0;
   width: 100%;
   background-color: rgb(252, 252, 252);
   overflow-x: hidden;
}

abbr {
   cursor: help;
}
hr{
   width: 100%;
}

/*******************************************************************************
 *                                [Clases Flex]                                *
 *******************************************************************************/
.flex {
   display: flex;
}

.anchocompleto {
   width: 100%;
}

.caja {
   width: 80%;
}

.row {
   flex-direction: row;
}

.column {
   flex-direction: column;
}

.textocentrado {
   text-align: center;
}

.centrado {
   justify-content: center;
}

.between {
   justify-content: space-between;
}

.alinear {
   align-items: center;
}

.supercentrado {
   align-items: center;
   justify-content: center;
}

.alturacompleta {
   height: 100%;
}
.pa01{
   padding: .1rem;
}
.pa02{
   padding: .2rem;
}
.pa03{
   padding: .3rem;
}
.pa04{
   padding: .4rem;
}
.pa05{
   padding: .5rem;
}
.pa06{
   padding: .6rem;
}
.pa07{
   padding: .7rem;
}
.pa08{
   padding: .8rem;
}
.pa09{
   padding: .9rem;
}
.pa1{
   padding: 1rem;
}
.gap01 {
   gap: .1rem;
}

.gap05 {
   gap: .5rem;
}

.gap1 {
   gap: 1rem;
}

.gap2 {
   gap: 2rem;
}

.gap3 {
   gap: 3rem;
}

.gap4 {
   gap: 4rem;
}

.gap5 {
   gap: 5rem;
}

.gap6 {
   gap: 6rem;
}

.gap7 {
   gap: 7rem;
}

.gap8 {
   gap: 8rem;
}

.wrap {
   flex-wrap: wrap;
}

.no-wrap {
   flex-wrap: nowrap;
}

.rojo {
   color: var(--rojo) !important;
   fill: var(--rojo) !important;
}

/*******************************************************************************
 *                          [Encabezados y párrafos]                           *
 *******************************************************************************/
h1 {
   font-family: "Franklin-bold", Arial, Helvetica, sans-serif;
   font-size: 3rem;
   margin: 0;
}

h2 {
   margin: 0;
}

h3 {
   margin: 0;
}

h4,
h5,
h6 {
   margin: 0;
}

h4 {
   margin-top: -1.5rem;
}

label {
   font-family: "Franklin-bold", Arial, Helvetica, sans-serif;
   font-size: 1.5rem;
   cursor: pointer;
}

/*******************************************************************************
 *                                 [Encabezado]                                *
 *******************************************************************************/
#encabezado {
   display: flex;
   align-items: center;
   justify-content: center;
   /*position: absolute;
   top: 0;
   left: 0;
   width: 100dvw;*/
   background-color: var(--gris);
   box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
   height: 8rem;
   padding-left: 2rem;
}

#encabezado a {
   text-decoration: none;
   color: white;
   font-size: 1.3rem;
   gap: .5rem;
   border-radius: .3rem;
   padding: 1rem .4rem;
}

#encabezado a,
#encabezado a svg {
   transition: .5s;
}

#encabezado a {
   width: 10rem;
   height: 6rem;
}

#encabezado a:where(:focus, :hover) {
   background-color: rgba(255, 255, 255, .9);
   color: var(--gris);
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

#encabezado a svg {
   font-size: 1.4rem;
   fill: var(--azul-fuerte);
   background-color: white;
   padding: 1rem;
   border-radius: 20px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   width: 2rem;
   height: 2rem;
}

#encabezado a:where(:focus, :hover) svg {
   fill: var(--gris);
}

#encabezado a:active {
   border: 3px solid white;
   background-color: #c70039;
}

#encabezado {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

#otros-enlaces {
   margin-left: -11rem;
   margin-right: 4rem;
}

#inicio-logo:where(:hover, :focus) {
   background-color: var(--azul-fuerte) !important;
}

#zona-menu {
   display: flex;
   flex-direction: column;
   width: 22rem;
   height: 8rem;
}

#menu-usuario,
#menu-usuario1 {
   width: 22rem;
   height: 0;
   visibility: hidden;
   opacity: 0;
   transition: .3s;
   position: relative;
   top: 0;
   left: -11rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   border-radius: .4rem;
   background-color: var(--gris);
   box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

#menu-usuario1 {
   display: none;
   z-index: 41;
   /*left: -22dvi;*/
}

#btn-menu:is(:hover, :focus)+#menu-usuario,
#btn-menu:is(:hover, :focus)+#menu-usuario1,
#menu-usuario:is(:hover, :focus),
#menu-usuario1:is(:hover, :focus) {
   height: auto;
   visibility: visible;
   opacity: 1;
}

#menu-usuario:is(:hover, :focus) {
   top: 8rem !important;
}

#btn-menu:is(:hover, :focus)+#menu-usuario1,
#menu-usuario1:is(:hover, :focus) {
   top: 0rem;
   display: flex;
   margin-right: -14dvi;
}

#btn-menu:is(:hover, :focus) svg,
#menu-usuario1:is(:hover, :focus)~#btn-menu:is(:hover, :focus) svg {
   transform: rotate(90deg);
}

/*******************************************************************************
 *                                [Notificación]                               *
 *******************************************************************************/
#notificacion {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-start;
   position: fixed;
   top: -5rem;
   left: .5rem;
   opacity: 0;
   background-color: var(--azul-fuerte);
   color: white;
   /*border: 1px solid goldenrod;*/
   border-left: 5px solid goldenrod;
   border-radius: .3rem;
   gap: .5rem;
   padding: .2rem .5rem;
   font-size: 1.5rem;
   animation: 8s notificacion 1 ease-in;
   z-index: 9999;
}

@keyframes notificacion {
   0% {}

   10%,
   85% {
      opacity: 1;
      top: 5rem;
   }

   20%,
   80% {
      box-shadow: rgb(255 255 255 / 0.6) 0px 2px 4px, rgb(255 255 255 / 0.6) 0px 7px 13px -3px, rgba(255 255 255 / 0.2) 0px -3px 0px inset;
   }

   100% {}
}

#noti-ico svg {
   width: 1.2rem;
   height: 1.2rem;
   background-color: white;
   border-radius: 50%;
   padding: .1rem;
}

#noti-ico {
   line-height: 1px;
}

.noti-correcto {
   fill: seagreen;
}

.noti-error {
   fill: #c70039;
}

/*******************************************************************************
 *                                 [Formularios]                                *
 *******************************************************************************/
input,
select {
   font-family: "Franklin-regular", Arial, Helvetica, sans-serif;
   font-size: 1.4rem;
}

input:invalid {
   background-color: rgba(200, 0, 0, .2);
}

:is(input, select) {
   transition: .3s;
   outline: none;
}

textarea:where(:hover, :focus) {
   background-color: whitesmoke;
   border: 1px solid #4D5656 !important;
}

input:where(:hover, :focus) {
   background-color: whitesmoke;
}
#formlogin button,
input,
input:valid,
select {
   border: none;
   outline: none;
   background-color: var(--gris);
   color: white;
   padding: .5rem;
   border-bottom: 2px solid var(--azul-suave);
   border-radius: 1rem .3rem;
   transition: .6s;
}

input:invalid {
   background-color: var(--rojo) !important;
   border-bottom: 2px solid var(--gris);
   animation: invalido 0.5s ease;
}

input::placeholder {
   color: rgb(255 255 255 /.8);
   font-style: italic;
}

:is(input, select):focus {
   background-color: var(--azul-fuerte);
}
.disabled,
input:disabled {
   background-color: #888 !important; 
   border-bottom: 2px solid var(--gris);
   cursor: not-allowed !important;
}

@keyframes invalido {
   0% {
      transform: translateX(0);
   }

   20% {
      transform: translateX(-5px);
   }

   40% {
      transform: translateX(5px);
   }

   60% {
      transform: translateX(-5px);
   }

   80% {
      transform: translateX(5px);
   }

   100% {
      transform: translateX(0);
   }
}

button {
   font-family: "Franklin-regular", Arial, Helvetica, sans-serif;
}

select {
   cursor: pointer;
}

#login {
   min-width: 25dvw;
   min-height: 35dvh;
   background-color: rgba(250, 250, 250, 1);
   border: 1px solid lightgray;
   padding: 2rem 1rem;
   border-radius: .3rem;
   display: flex;
   flex-direction: column;
   gap: 1.4rem;
   align-items: center;
   margin-top: 15dvh;
}

#login form {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-evenly;
   min-height: 35dvh;
}

#login input {
   border: 1px solid #ccc;
   padding: .5rem;
   background-color: whitesmoke;
   border-radius: .4rem;
   color: var(--gris);
   width: 100%;
}

#login input:where(:focus, :hover) {
   border: 1px solid #0f0f0f;
   background-color: #e9e9e9;
}

#formlogin button{
   background-color: var(--gris);
   color: white;
}

#dar-baja-btn {
   cursor: pointer;
   border: none;
   padding: .5rem 2rem;
   border-radius: .4rem;
   font-size: 1.4rem;
   box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
   transition: .3s;
}

#dar-baja-btn:where(:hover, :focus) {
   background-color: #4650a0;
   box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

#contraseña {
   width: 80% !important;
}

#mostrarcontra {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   width: 15% !important;
   height: 5.2dvh;
   cursor: pointer;
   margin-left: -5%;
   background-color: darkslategrey;
   border: none;
   border-radius: 0 .4rem .4rem 0 !important;
   border: 1px solid rgb(0 0 0 / 0) !important;
   z-index: 100;
}

#mostrarcontra svg {
   font-size: 1.4rem;
   fill: white;
}

.nomostrar {
   background-color: #c70039 !important;
   border: 1px solid var(--gris) !important;
}

#login footer {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: center;
   justify-content: center;
}

/*Formularios Crear y modificar*/
#cu {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   background-color: rgb(0 0 0 / .05);
   margin-top: 2rem;
   padding: 2rem;
   border: 1px solid rgba(0, 0, 0, 0.18);
   border-radius: .4rem;
   box-shadow: rgb(100 100 111 / 0.3) 0px 7px 29px 0px;
}

#login input[type=submit],
#cu input[type=submit] {
   margin-top: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   width: fit-content;
   cursor: pointer;
   clip-path: polygon(8% 0, 100% 0%, 92% 100%, 0% 100%);
   padding: .5rem 1rem;
   border: none;
   transition: .3s;
}

:is(#login, #cu) input[type=submit]:where(:hover, :focus) {
   background-color: var(--azul-fuerte);
}

#cu select {
   width: 100%;
}

#cu .column {
   width: 100%;
}

#cu input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(100%);
}

#cu input[type="time"]::-moz-calendar-picker-indicator,
input[type="date"]::-moz-calendar-picker-indicator {
   filter: invert(100%);
}

#cu input[type="color"] {
   width: 100%;
   height: 3rem;
   border: none;
   outline: none;
}
/*Búsqueda por usuarios*/
#lista-usuarios{
   display: flex;
   flex-direction: column;
   align-items: start;
   justify-content: flex-start;
   overflow-y: auto;
   max-height: 15rem;
   background-color: var(--gris);
   color: white;
   padding: .5rem;
   border-radius: .3rem;
   border: 2px solid var(--azul-suave);
   scrollbar-color: var(--azul-suave) var(--gris);
}

#lista-usuarios label input[type="checkbox"]{
   background-color: white;
   accent-color: var(--azul-suave);
   width: 1rem;
   height: 1rem;
   cursor: pointer;
   outline: none;
   border: none;
}
#lista-usuarios label{
   width: 100%;
}
#lista-usuarios label:where(:focus,:hover){
   background-color: var(--rojo);
}

#busqueda-linea{
   display: flex;
   flex-flow: row wrap;
   gap: .5rem;
   margin-bottom: 1rem;
}

/*******************************************************************************
 *                                   [Cuerpo]                                  *
*******************************************************************************/
main {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   min-width: 100%;
}

main h1 {
   text-transform: capitalize;
   text-align: center;
}

main>article {
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 83dvh;
   padding-bottom: 2dvh;
   gap: 2rem;
}

main>article>h1 {
   margin-top: 2rem;
}
#formlogin button,
/*Botón crear*/
#cancelar,
#btn-eliminar,
.btn-crear,
dialog .btn-crear {
   font-size: 1.4rem;
   text-decoration: none;
   background-color: var(--gris);
   color: white;
   border: 2px solid var(--azul-fuerte);
   padding: .4rem;
   border-radius: .3rem 1rem;
   transition: .6s;
   cursor: pointer;
}
dialog .btn-crear{
   background-color: var(--azul-fuerte);
}
#formlogin button:where(:hover, :focus),
:is(#cancelar, #btn-eliminar, .btn-crear, dialog .btn-crear):where(:hover, :focus) {
   background-color: var(--azul-fuerte);
   border: 2px solid var(--azul-suave);
   border-radius: 1rem .3rem;
}
dialog .btn-crear:where(:hover, :focus){
   background-color: var(--azul-suave) !important;
   border: 2px solid var(--azul-fuerte) !important;
}
/*Botón eliminar*/
#btn-eliminar {
   background-color: var(--rojo);
   border-radius: 1rem .3rem;
}

#btn-eliminar:where(:hover, :focus) {
   background-color: var(--gris);
   border: 2px solid var(--rojo);
   border-radius: .3rem 1rem;
}

/*No hay*/
.nohay {
   display: flex;
   flex-flow: row nowrap;
   width: 100%;
   justify-content: center;
   align-items: center;
   font-size: 1.4rem;
}

.nohay span {
   background-color: var(--rojo);
   color: white;
   border-radius: .3rem;
   padding: .3rem;
   border: 1px solid var(--gris);
}

/*Modificar y eliminar botones*/
:is(.modificar, .eliminar) {
   background-color: rgb(255 255 255 / .8);
   padding: .4rem;
   transition: .3s;
}

:is(.modificar, .eliminar):where(:hover, :focus) {
   background-color: var(--azul-fuerte);
   fill: white;
}

/*Notificaciones eliminación (dialog)*/
#showdialog {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: rgb(0 0 0 / .3);
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 100;
   padding: 0;
   margin: 0;
   overflow: hidden;
   display: none;
}

#dialog {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: none;
   border-radius: .3rem;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
   gap: 0;
}

#dialog header {
   align-items: flex-end;
   justify-content: flex-end;
   margin-bottom: -2.5rem;
}

#dialog fieldset {
   border-radius: .3rem;
}

#dialog fieldset legend {
   text-align: center;
}

#dialog fieldset>section {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
}

#dialog b {
   color: var(--rojo);
}

#dialog form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding-bottom: 1rem;
}

#cancelar.cerrar {
   background-color: rgb(255 255 255 / 1);
   border: none;
   fill: var(--gris);
   width: 2rem;
   height: 2rem;
   position: relative;
   top: -1.2dvh;
   right: -.8dvw;
}


/*Encabezado de inicio que muestra las semanas*/
#mostrar-semana,
#semana {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   width: 100%;
}

#mostrar-semana {
   flex-direction: column;
   gap: 1rem;
}

#semana {
   margin-top: 2rem;
   margin-bottom: 1rem;
   justify-content: space-evenly;
   width: 60%;
}

.cuadricula,
#semana span {
   background-color: #eee;
   width: 7dvw;
   height: 2dvh;
   padding: 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;
}

#dia-act {
   background-color: darkgreen !important;
}

#semana-ant,
#semana-sig {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   background-color: var(--gris);
   color: white;
   position: relative;
   padding-left: 1.2dvw;
   border: none;
   cursor: pointer;
   font-size: 1rem;
   transition: .3s;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#semana-sig {
   padding-right: 1.2dvw;
   padding-left: 0;
}

#semana-ant svg,
#semana-sig svg {
   width: 4dvw;
   height: 4dvh;
}

#semana-ant svg:first-child,
#semana-sig svg:last-child {
   fill: var(--gris);
   width: 2dvw;
   height: 2dvh;
   margin-top: 1.2dvh;
   z-index: 2;
   position: absolute;
   left: .8dvw;
   bottom: 5%;
}

#semana-sig svg:last-child {
   left: auto;
   right: .9dvw;
}

#semana-ant svg:nth-child(2),
#semana-sig svg:nth-child(2) {
   margin-left: -1dvw;
   fill: white;
   z-index: 1;
   position: absolute;
   top: 18%;
   left: .8dvw;
}

#semana-sig svg:nth-child(2) {
   left: auto;
   right: 0;
}

:is(#semana-ant, #semana-sig) span {
   background-color: rgb(0 0 0 / 0);
}

:is(#semana-ant, #semana-sig):where(:focus, :hover) {
   background-color: var(--azul-fuerte);
   box-shadow: none;
}

/*Área trabajo*/
#area {
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   padding-bottom: 4rem;
}

#area table {
   margin: 0 4dvw;
}

#area thead {
   position: sticky;
   top: 0;
   z-index: 10;
}

.tab-header {
   pointer-events: none;
}

#area .tb-dia {
   padding: 0;
   width: 10dvw;
}

#area .tb-dia>section {
   display: flex;
   flex-flow: row nowrap;
   justify-content: start;
   align-items: flex-start;
   width: 100%;
   height: 100%;
   gap: .5rem;
}

#area .tb-dia section a {
   padding: 0;
   background-color: #eee;
   border-radius: .4rem;
   fill: var(--gris);
   width: 3rem;
   transition: .3s;
   border: 1px solid var(--gris);
}

#area .tb-dia section a:where(:focus, :hover) {
   background-color: var(--azul-fuerte);
   fill: white;
}

.empleado {
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-around;
   align-items: center;
   border: 1px solid black;
   font-size: 1rem;
   padding: 0 .2rem;
   border-radius: .5rem;
   gap: .2rem;
   cursor: help;
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

#area .tb-dia section .empleado a {
   padding: 0;
   background-color: rgb(0 0 0 / 0);
   border-radius: 0;
   fill: var(--rojo);
   width: fit-content;
   border: none;
   position: static;
   top: 0;
   transition: .3s;
}

#area .tb-dia section .empleado a:where(:hover,:focus){
   fill: var(--azul-fuerte);
}
#area h4{
   margin-top: 0;
   text-align: center;
}

/*Agregado beta 24w11b*/
/*Botón copiar*/
#area thead button{
   position: relative;
   right: -.5rem;
   background-color: rgb(0 0 0 /0);
   border: none;
   fill: white;
   cursor: pointer;
   transition: .3s;
}
#area thead button:is(:hover,:focus){
   fill: var(--azul-suave);
}
/*Agregado beta 24w11b*/
/*Área lista de máquinas a copiar día*/
#lista-maquinas-copiar{
   display: flex;
   flex-direction: column;
   gap: .5;
   flex-wrap: nowrap;
   max-height: 40dvh;
   overflow-y: auto;
   scrollbar-color: var(--azul-suave) var(--azul-fuerte);
   border: 1px solid var(--gris);
   border-radius: .3rem;
}
/*Agregado beta 24w11b*/
/*Pegar*/
#pegar svg{
   fill: var(--rojo);
}
/*Agregado beta 24w11c*/
/*Eliminar día*/
.cp-eliminar{
   bottom: -2px;
}
.cp-eliminar:where(:hover,:focus){
   fill: white !important;
}

#convertirpdf {
   background-color: #e00241;
   color: white;
   fill: white;
   font-size: 1.4rem;
   border: none;
   padding: .5rem;
   transition: .6s;
   cursor: pointer;
   border-radius: 1rem .3rem;
}

#convertirpdf svg:nth-of-type(1) {
   z-index: 1 !important;
   margin-left: 1rem;
}

#convertirpdf svg:nth-of-type(2) {
   margin-left: -2.6rem;
   margin-right: 1.5rem;
   z-index: 3 !important;
   fill: var(--verde);
}

#convertirpdf:where(:focus, :hover) {
   background-color: white;
   color: #e00241;
   outline: 1px solid var(--gris);
}

#convertirpdf:where(:focus, :hover) svg:nth-of-type(1) {
   fill: #e00241;
}
/*Agregado beta 24w11e*/
.dragemp .empleado{
   cursor: move !important;
}
.dragemp.over{
   border: 1px dotted #ccc;
}
.drop{
   min-height: 2rem;
   width: 100%;
}
/*******************************************************************************
 *                                   [Tablas]                                  *
*******************************************************************************/
table {
   border-collapse: collapse;
   font-size: 1.2rem;
}

table#busqueda{
   border-collapse: separate;
}
table#busqueda td,
#empleados-no-asig{
   vertical-align: top;
}
table#busqueda tr.tab-fecha-impar{
   background-color: rgb(41 36 90 /.2);
}
table#busqueda tr.tab-fecha-par{
   background-color: rgb(41 36 90 /.4);
}
/*table#busqueda :is(th,tr,td){
   border: none;
}*/
table,
th,
tr,
td {
   border: 1px solid var(--gris);
}

#area table :is(thead, th),
thead {
   background-color: var(--gris);
   color: white;
   border: 1px solid white;
}

td.no-padding {
   padding: 0;
}

tr:nth-child(even) {
   background-color: rgb(41 36 90 /.2);
}

tr:nth-child(odd) {
   background-color: rgb(41 36 90 /.4);
}

#area tr:nth-child(even) {
   background-color: rgb(210 210 210 / .4);
}

#area tr:nth-child(odd) {
   background-color: rgb(210 210 210 / 1);
}

tr {
   transition: .3s;
}
table#busqueda tr td:hover,
tr:hover {
   background-color: rgb(54 179 232 /.4);
}

#area tr:hover {
   background-color: rgb(54 179 232 /.4);
}

#area td:hover {
   background-color: rgb(34 139 34 / .5);
}

#area .tb-dia a,
.table-modificar,
.table-eliminar {
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
}

/*******************************************************************************
 *                                [Pie de página]                               *
 *******************************************************************************/
#version {
   display: flex;
   position: fixed;
   right: 0;
   bottom: 0;
   background-color: var(--gris);
   color: white;
   padding: .5rem .5rem .5rem 1.4rem;
   font-style: italic;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   transition: .3s;
   z-index: 30;
   clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
   /*padding-left: 1rem;*/
}

#version:hover {
   box-shadow: none;
   background-color: var(--azul-fuerte);
}