/*******************************************************************************
 *                                 [Estilo CSS]                                *
 *******************************************************************************/
/*******************************************************************************
 *                                      [*]                                     *
 *******************************************************************************/
:root {
   --azul: #5865c3;
   --rojo: #c70039;
   --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: 86vh;
   font-family: "Franklin-regular", Arial, Helvetica, sans-serif;
   margin: 8rem 0 0 0;
   background-color: rgb(252, 252, 252);

}

/*******************************************************************************
 *                                [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%;
}

.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;
}

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

.textoblanco {
   color: white;
}

.transition {
   transition: .3s;
}

/*Vlad*/
.margen1 {
   margin: 1rem;
}

/*Agregado beta 24w06c*/
.wrap {
   flex-wrap: wrap;
}

/*Agregado beta 24w06c*/
.no-wrap {
   flex-wrap: nowrap;
}

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

h2 {}

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;
}

input {
   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;
}

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

input:where(:hover, :focus) {
   background-color: whitesmoke;
}

/*******************************************************************************
 *                                 [Encabezado]                                *
 *******************************************************************************/
header {
   display: flex;
   align-items: center;
   justify-content: center;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: var(--azul);
   box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
   z-index: 40;
   height: 8rem;
}

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

header a,
header a svg {
   transition: .5s;
}

header a {
   width: 10rem;
   height: 6rem;
}

header a:where(:focus, :hover) {
   background-color: rgba(255, 255, 255, .9);
   color: var(--azul);
   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;
}

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

header a:where(:focus, :hover) svg {
   fill: var(--azul);
}

header a:active {
   outline: 3px solid white;
   /*Modificado beta 24w22b*/
   background-color: #c70039;
}

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

#infosesion {
   display: flex;
   flex-direction: column;
   height: 100%;
   gap: .5rem;
   max-width: 50%;
   /*Actualizado beta 24w17a*/
}

#infosesion span {
   color: white;
}

#infosesion span {
   font-weight: bold;
}

#infosesion span span {
   font-style: italic;
}

#finalizar_jornada svg {
   fill: white;
   background-color: #c70039;
}

#veralmaran svg {
   fill: white;
   background-color: mediumseagreen;
}

#botonesfinalizar {
   display: flex;
   align-items: center;
   justify-content: center;
}

#menus {
   display: flex;
   flex-direction: row;
   gap: 1rem;
   justify-content: end;
   height: 8rem;
   overflow: visible;
}

#menu {
   height: 8rem;
}


#menu-usuario,
/*Agregado beta 24w05d*/
#menu-usuario1,
/*Agregado beta 24w22b*/
#menu-usuario2 {
   width: 22rem;
   height: 0;
   visibility: hidden;
   opacity: 0;
   transition: .3s;
   position: relative;
   top: 0;
   left: 0;/*Modificado beta 24w33e*/
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   border-radius: .4rem;
   background-color: var(--azul);
   box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

/*Agregado beta 24w05d*/
#menu-usuario1,
#menu-usuario2

/*Agregado beta 24w22b*/
   {
   display: none;
   left: -23rem;
}

#btn-menu:is(:hover, :focus)+#menu-usuario,
#btn-menu:is(:hover, :focus)+#menu-usuario1,
/*Agregado beta 24w05d*/
#btn-menu2:is(:hover, :focus)+#menu-usuario2,
/*Agregado beta 24w22b*/
#menu-usuario:is(:hover, :focus),
/*Agregado beta 24w05d*/
#menu-usuario1:is(:hover, :focus),
#menu-usuario2:is(:hover, :focus) {
   height: fit-content;
   visibility: visible;
   opacity: 1;
}

/*Agregado beta 24w05d*/
#btn-menu:is(:hover, :focus)+#menu-usuario1,
#menu-usuario1:is(:hover, :focus),
/*Agregado beta 24w22b*/
#btn-menu2:is(:hover, :focus)+#menu-usuario2,
#menu-usuario2:is(:hover, :focus) {
   top: 8rem;
   /*Actualizado beta 24w19d*/
   display: flex;
   margin-right: -23rem;
   /*Actualizado beta 24w22b*/
}

#btn-menu:is(:hover, :focus) svg,
#menu-usuario1:is(:hover, :focus)~#btn-menu:is(:hover, :focus) svg,
#btn-menu2:is(:hover, :focus) svg,
#menu-usuario2:is(:hover, :focus)~#btn-menu2: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: 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%,
   70% {
      box-shadow: rgba(136, 165, 191, 0.48) 3px 2px 10px 0px, rgba(255, 255, 255, 0.8) -3px -2px 10px 0px;
   }

   100% {}
}

#noti-ico svg {
   width: 1.2rem;
   height: 1.2rem;
}

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

.noti-correcto {
   fill: seagreen;
}

.noti-error {
   fill: #c70039;
}

/*******************************************************************************
 *                                  [Cuerpo]                                   *
 *******************************************************************************/
main,
#main {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 80%;
   gap: .2rem;
   margin: 3rem 0;
}

/*Agregado beta 24w03b*/
#main {
   margin-bottom: 10rem !important;
}

.usuario {
   background-color: white;
   height: fit-content;
   padding: 2rem 1rem;
   border: 1px solid grey;
   border-radius: .3rem;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#jornada {
   background-color: #5865c3;
}

.contenedores,
#jornada {
   display: flex;
   flex-direction: column;
   text-align: start;
   width: 100%;
   background-color: var(--azul);
   transition: .3s;
   border: 1px solid grey;
   padding: .5rem 1rem;
   color: white;
}

#jornada fieldset {
   display: flex;
   flex-direction: column;
   gap: .5rem;
}

.contenedores {
   max-width: 97.5%;
   background-color: #fff;
   color: #0f0f0f;
   border: none;
   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;
   transition: .4s;
}

.contenedores:where(:hover, :focus) {
   background-color: #e2e2e2;
}

.contenedores:target {
   background-color: #fff;
}

.contenedores:target .acor-flecha {
   transform: rotate(0deg);
}

.contenedores:target a {
   transition: .4s;
   box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
}

.contenedores:where(:hover, :focus) .acor-flecha {
   transform: rotate(45deg);
}

.contenedores a {
   color: #0f0f0f;
   text-decoration: none;
   font-weight: bold;
   font-size: 1.4rem;
   display: flex;
   flex-direction: row;
   padding-bottom: .2rem;
}

.contenedores .centro {
   display: flex;
   width: 100%;
   justify-content: center;
}

.contenedores>section {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   max-height: 0;
   text-align: justify;
   transition: max-height .25s ease;
   display: flex;
   align-items: flex-start;
   justify-content: center;
}

.contenedores:target>section {
   max-height: 1000vh;
}

.contenedores>a>section {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 1rem;
}

.contenedores .acor-flecha {
   margin-right: 1rem;
   transition: .4s;
}

.contenedores .acor-flecha svg {
   transform: rotate(-90deg);
   font-size: 1.4rem;
   fill: rgba(0, 0, 0, .7);
   transition: .3s;
}

.contenedores:target .acor-flecha svg {
   transform: rotate(0deg);
}

.btn,
.btn1,
/*Agregado beta P24w05d*/
.btn3,
/*Agregado beta P24w04b*/
#convertirpdf,
/*Agregado beta P24w04b*/
#enlacenoexiste,
/*Agregado beta P24w05d*/
.enlacenoexiste,
#enlacenoxiste,
#hombre,
#mujer {
   font-size: .8rem;
   margin-top: 1rem;
   color: rgba(50, 50, 93, 0.8);
   background-color: white;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   border-radius: .3rem;
   padding: .5rem .3rem;
   transition: .3s;
   border: 1px solid gray;
   font-weight: bold;
   cursor: pointer !important;
}

#enlacenoexiste,
/*Agregado beta P24w05d*/
.enlacenoexiste,
#enlacenoxiste {
   font-size: .8rem !important;
   color: rgba(50, 50, 93, 0.8) !important;
}

.btn,
.btn1,
/*Agregado beta P24w04b*/
#convertirpdf,
/*Agregado beta P24w04b*/
#enlacenoexiste,
/*Agregado beta P24w05d*/
.enlacenoexiste {
   margin-top: 0 !important;
   text-decoration: none;
}

/*Agregado beta P24w05d*/
.btn3 {
   margin: 0;
}

#mujer {
   margin-left: 1rem;
}

:is(.btn, .btn1,
   /*Agregado beta P24w05d*/
   .btn3

   /*Agregado beta P24w04b*/
   , #convertirpdf,
   /*Agregado beta P24w04b*/
   #enlacenoxiste,
   #enlacenoexiste,
   /*Agregado beta P24w05d*/
   .enlacenoexiste):where(:hover, :focus) {
   box-shadow: none;
}

/*Agregado beta 24w04b*/
.btn2 {
   margin-top: 1rem !important;
}


.btn,
#convertirpdf,
.btn1

/*Agregado beta P24w04b*/
   {
   font-size: 1.4rem;
   margin-bottom: 1rem;
}

/*Agregado beta P24w04b*/
.btn1 {
   align-items: center;
   justify-content: center;
}

/*Agregado beta P24w04b*/
.btn1 svg {
   margin-bottom: -.2rem;
   fill: var(--azul);
}

/*Agregado beta P24w04b*/
.sen {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   flex-wrap: nowrap;
   font-size: 1rem;
}

/*Agregado beta P24w04b*/
.sen svg {
   margin-bottom: .1rem;
   padding: .2rem;
   fill: forestgreen;
}

/*Agregado beta P24w04b*/
#convertirpdf {
   background-color: #e00241;
   color: white;
   fill: white;
}

/*Agregado beta P24w04b*/
#seccionbtnconvertir {
   margin: 2rem;
}

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

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

/*Agregado beta P24w04b*/
#convertirpdf:where(:focus, :hover) {
   background-color: white;
   color: #e00241;
}

/*Agregado beta P24w04b*/
#convertirpdf:where(:focus, :hover) svg:nth-of-type(1) {
   fill: #e00241;
}

.btn,
#enlacenoexiste {
   margin-top: 0 !important;
   text-decoration: none;
}

:is(.btn, #enlacenoxiste, #enlacenoexiste):where(:hover, :focus) {
   box-shadow: none;
}

.btn {
   font-size: 1.4rem;
   margin-bottom: 1rem;
}

#enlacenoxiste.ahorasiexiste {
   cursor: auto !important;
   background-color: rgb(0, 170, 0);
   color: white;
}

.producto-extra-nombre,
.agregar-producto-cant,
.agregar-producto-select {
   border: none !important;
   border-radius: .3rem;
   outline: none;
}

.agregar-producto-cant {
   width: 3rem !important;
   padding: .5rem;
   text-align: center;
}

/*Agregado desde beta 24w02a*/
.agr-ext-sn-cant {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   gap: .5rem;
}

.productos-extras {
   display: flex;
   flex-direction: column;
   padding: 1rem;
}

/*Agregado beta 24w05b*/
.productos-extras-mod {
   margin-top: 1rem !important;
}

.agregarserviciobtn,
.agregarserviciobtn1 {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   margin-left: .5rem;
   gap: 1rem;
   margin-top: .5rem;
}

.agregarserviciobtn1 {
   height: auto;
}

.agregarserviciobtn input[type=submit] {
   transition: .3s;
}

.agregarserviciobtn input[type=submit]:where(:focus, :hover) {
   background-color: rgb(0, 150, 0);
}

fieldset {
   border: 2px solid white;
   padding: 1rem;
}

legend {
   font-size: 1.4rem;
}

.btneliminar,
.btnmodificar,
.agregar {
   background-color: rgba(250, 0, 0, .9);
   fill: white;
   padding: .5rem .5rem;
   border-radius: 20px;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   line-height: 1px;
   border: none;
   cursor: pointer;
   font-size: 1rem;
   transition: .5s;
}

:is(.btneliminar, .btnmodificar, .agregar):where(:focus, :hover) {
   box-shadow: none;
   background-color: rgba(255, 255, 255, .9) !important;
}

.btneliminar:where(:focus, :hover) svg {
   animation: eliminacion 1s infinite ease-in-out;
   fill: rgba(250, 0, 0, .9);
}

/*Agregado beta 24w05e*/
.ani-btn-eliminar:where(:hover, :focus) {
   animation: eliminacion2 .1s infinite;
}

/*Agregado beta 24w04e*/
#eliminar {
   background-color: #c70039;
   color: white;
   padding: .5rem;
   border: none !important;
   cursor: pointer;
   border-radius: .3rem;
   transition: .3s;
}

/*Agregado beta 24w04e*/
#eliminar:where(:focus, :hover) {
   background-color: #e00241;
}

.btnmodificar:where(:focus, :hover) svg {
   animation: modificar 1s infinite ease-in-out;
   fill: darkblue;
}

.agregar:where(:focus, :hover) svg {
   animation: modificar 1s infinite ease-in-out;
   fill: var(--verde);
}

@keyframes eliminacion {
   0% {}

   40% {
      transform: rotate(10deg);
   }

   60% {
      transform: rotate(-10deg);
   }

   100% {}
}

/*Agregado beta 24w05e*/
@keyframes eliminacion2 {
   0% {}

   40% {
      transform: rotate(.5deg);
   }

   60% {
      transform: rotate(-.5deg);
   }

   100% {}
}

@keyframes modificar {
   0% {}

   40% {
      transform: translateY(1px);
   }

   60% {
      transform: translateY(-1px);
   }

   100% {}
}

.contenedoreliminar,
.contenedormodificar {
   display: flex;
   height: 100%;
   align-items: center;
   margin-right: 1rem;
}

.btnmodificar {
   background-color: darkblue;
   margin-left: 1rem;
}

.agregar {
   background-color: var(--verde);
}

#seleccioncentro {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: var(--azul);
   border-radius: .3rem;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
   color: white;
   padding: 2rem 1rem;
   text-align: center;
   gap: 1rem;
   width: 50%;
   margin: 3rem 0;
}

#seleccioncentro fieldset {
   border-color: white;
   border-radius: .3rem;
   padding-bottom: 2rem;
}

#seleccioncentro h1 {
   color: white;
   margin: .5rem;
}

#enlacescentro {
   margin-top: 1rem;
}

#seleccioncentro a {
   text-decoration: none;
   background-color: rgb(254, 254, 254);
   border-radius: .3rem;
   padding: .8rem;
   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;
   transition: .3s;
   color: black;
}

#seleccioncentro a:where(:hover, :focus) {
   box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
   color: var(--rojo);
   background-color: rgb(251, 251, 251);
}

#cantidadempleados {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   margin-bottom: 1rem;
}

#cantidadempleados h4 {
   margin-top: 0;
}

#cantidadempleados form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   align-items: center;
   justify-content: center;
}

#cantempleados {
   width: auto;
   padding: .4rem;
   outline: none;
   text-align: center;
}

#enlacescentro {
   display: flex;
   flex-direction: column;
   gap: 2rem;
}

.ref,
.acor-ref {
   background-color: rgba(0, 0, 0, .85);
   color: #fff;
   padding: .2rem .3rem;
}

.sn,
.formservicios select {
   border: 1px solid #ccc;
   font-size: 1.4rem;
   width: 14rem;
   padding: .2rem .2rem;
   border-radius: .3rem;
}

.esc-cant {
   width: 4rem !important;
}

.producto-cantidad {
   gap: .5rem;
}

.contenedorescandallo {
   display: flex;
   text-align: start;
   align-items: flex-start;
}

.lista-productos {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

fieldset.productos {
   border-color: #0f0f0f;
   padding: 1rem;
   border-radius: .3rem;
   margin: 2rem;
   padding: 2rem;
}

fieldset.productos h3 {
   font-size: 1.3rem;
}

/*Agregado desde beta 24w04e*/
fieldset.extras {
   border-color: #c70039;
}

.agregar-producto-extra {
   background-color: var(--azul);
   color: white;
   padding: 2rem;
   border: 1px solid grey;
   border-radius: .3rem;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   margin-bottom: 2rem;
   margin-left: 2rem;
}

.contenedorescandallo {
   display: flex;
   flex-direction: column;
   align-items: start;
   justify-content: center;
   gap: 1rem;
}

.contenedorescandallo :is(input, select, textarea) {
   font-size: 1.4rem;
}

.formescandallo {
   display: flex;
   margin-left: 4rem;
}

#serviciovacio {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   padding: 2rem .5rem;
   position: fixed;
   width: 100%;
   left: 0;
   bottom: 0;
   z-index: 20;
   background-color: whitesmoke;
   box-shadow: rgba(0, 0, 0, 0.45) 0px -15px 20px -20px;
   color: #0f0f0f;
}

#serviciovacio input {
   border: none;
   border-radius: .3rem;
   padding: .2rem;
}

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

#serviciovacio select {
   background-color: white;
   padding: .2rem .5rem;
}

.contenidoservicio {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: center;
   padding: 1rem;
}

.formservicios {
   display: flex;
   flex-direction: row;
   justify-content: center;
}

/*Agregado desde beta 24w02a*/
#barra-usuarios {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   flex-wrap: wrap;
}

/*Agregado desde beta 24w03a*/
.deshabilitado {
   background-color: #ccc !important;
   pointer-events: none;
}

/*Agregado desde beta 24w03c*/
.traslado {
   background-color: rgba(0, 0, 0, 0.1) !important;
}

/*Agregado desde beta 24w03c*/
#inventario tr:not(.traslado) td.r {
   border-bottom: 2px solid black !important;
}

/*Agregado desde beta 24w03c*/
#inventario td:not(.r) {
   border: 1px dotted gray;
}

/*Agregado desde beta 24w03e*/
.linea {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: .4rem;
   padding: .1rem;
}

/*Agregado desde beta 24w04e*/
.linea1 {
   margin-top: .5rem;
}

/*Agregado desde beta 24w04e*/
.mod-servicio {
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   padding: 1rem;
   border-radius: .3rem;
}

/*Agregado beta 24w04e*/
.agre-servicio {
   color: #c70039;
}

/*Agregado desde beta 24w03e*/
.datos-ad {
   font-size: 1rem;
}

/*Agregado beta P24w04c*/
#lista-traspasos {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   position: fixed;
   left: 1rem;
   bottom: 1rem;
   background-color: white;
   border: 1px solid gray;
   height: 10rem;
   max-height: 10rem;
   overflow-y: scroll;
   padding: .5rem;
   border-radius: .3rem;
   transition: .5s;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   z-index: 10;
}

/*Agregado beta P24w04c*/
#ocultar-lista {
   fill: #c70039;
   position: fixed;
   left: 1rem;
   bottom: 12rem;
   z-index: 20;
}

/*Agregado beta P24w04c*/
#ocultar-lista svg {
   cursor: pointer;
   background-color: white;
   border-radius: 50%;
   padding: .3rem;
   border: 1px solid gray;
   box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
   transition: .3s;
}

/*Agregado beta P24w04c*/
#ocultar-lista:where(:hover, :focus) #lista-traspasos {
   opacity: 0;
}

#ocultar-lista:where(:hover, :focus) svg {
   background-color: #c70039;
   fill: white;
}

/*Agregado beta P24w04c*/
#lista-traspasos:hover {
   opacity: 1 !important;
}

/*Agregado beta P24w04c*/
#lista-traspasos h4 {
   margin: 0;
}

/*Agregado beta P24w04c*/
#lista-traspasos td {
   padding: 0;
}

/*Agregado beta P24w04c*/
#tabla-lista,
#tabla-lista :is(th, td, tr, td) {
   background-color: rgba(0, 0, 0, 0);
   border: none;
}

/*Agregado beta P24w04c*/
#tabla-lista button {
   font-size: 1.2rem;
   transition: .3s;
}

/*Agregado beta P24w04c*/
#tabla-lista {
   border-collapse: separate;
}

/*Agregado beta P24w04c*/

#tabla-lista tr:where(:hover, :focus) button {
   background-color: #e00241;
   color: white;
}

/*Agregado beta P24w04c*/
.list-elm {
   width: 100%;
   height: 100%;
   cursor: pointer;
   background-color: none;
   border: none;
}

/*Agregado beta 24w05d*/
#mod-jornada {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
}

/*Agregado beta 24w05d*/
#mod-jornada input[type=date] {
   min-width: fit-content;
}

/*Agregado beta 24w05d*/
#mod-jornada input[type=number] {
   max-width: 8rem;
}

/*Agregado beta 24w10d*/
#cargando svg {
   fill: var(--azul);
   animation: 1.2s rotacion infinite ease-in-out;
}

@keyframes rotacion {
   100% {
      transform: rotate(360deg);
   }
}

/*Agregado beta 24w16c*/
.autocomplete-results {
   width: 100%;
   background: #fff;
   border: 1px solid #ddd;
   border-top: none;
   max-height: 200px;
   overflow-y: auto;
}


.autocomplete-results div {
   padding: 10px;
   cursor: pointer;
   border-bottom: 1px solid #ddd;
}

.autocomplete-results div:hover {
   background-color: #f0f0f0;
}

#resultadosServiciosResultados,
#resultadosUsuariosResultados {
   position: absolute;
   bottom: 16dvh;
   left: 0;
   width: 100%;
   background: white;
   border: 1px solid #ddd;
   border-bottom: none;
   max-height: 38dvh;
   min-height: 38dvh;
   overflow-y: auto;
   z-index: 1000;
   display: none;
}

#resultadosUsuariosResultados {
   flex-direction: column-reverse;
}

:is(#resultadosServiciosResultados, #resultadosUsuariosResultados) .cerrar {
   background-color: white;
   padding: 0;
   margin: 0;
   border-radius: 50%;
   border: none;
   fill: var(--rojo);
   position: fixed;
   right: .5rem;
   cursor: pointer;
   transition: .3s;
}

:is(#resultadosServiciosResultados, #resultadosUsuariosResultados) .cerrar:where(:focus, :hover) {
   opacity: .6;
}

#resultadosUsuariosResultados .cerrar {
   margin-bottom: 34.5dvh;
}

/*Agregado beta 29w19d*/
#no-hay-datos {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   text-align: center;
   background-color: var(--rojo);
   color: white;
   padding: .5rem;
   border-radius: .3rem;
   border: 1px solid #ccc;
   width: 10rem;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

/*******************************************************************************
 *                                [Formularios]                                *
 *******************************************************************************/
#login,
#login2 {
   width: 45vh;
   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;
}

#login2 {
   height: auto;
   align-items: center;
   justify-content: center;
}

#login2 form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   justify-content: center;
   padding: 2rem 1rem;
}

#login input {
   border: 1px solid #ccc;
   padding: .5rem;
   background-color: whitesmoke;
   border-radius: .4rem;
}

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

#login input[type=text] {
   width: 60%;
}

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

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

#dar-baja-btn,
#iniciar-sesion {
   cursor: pointer;
   background-color: var(--azul);
   color: white;
   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;
}

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

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

#mostrarcontra {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   width: 13% !important;
   /*Modificado beta 24w07b*/
   height: 5.4vh;
   /*Modificado beta 24w07b*/
   cursor: pointer;
   margin-left: -5px;
   background-color: darkslategrey;
   border: none;
   border-radius: 0 .4rem .4rem 0;
}

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

.nomostrar {
   background-color: #c70039 !important;
}

main input[type=submit],
#main input[type=submit] {
   cursor: pointer;
}

/*Recaptcha*/
.grecaptcha-badge {
   width: 70px !important;
   overflow: hidden !important;
   transition: all 0.3s ease !important;
   left: -2px !important;
   bottom: 20px !important;
}

.grecaptcha-badge:hover {
   width: 256px !important;
}

select {
   font-size: 1.4rem;
   border-radius: .3rem;
   cursor: pointer;
}

option {
   cursor: pointer;
}

textarea {
   min-height: 1.9rem;
   max-height: 10rem;
   min-width: 15rem;
   max-width: 20rem;
   height: 1.9rem;
   width: 15rem;
   border-radius: .3rem;
   border: 1px solid gray;
   background-color: whitesmoke;
}

.observaciones {
   display: flex;
   flex-direction: column;
   gap: .2rem
}

.formagregar {
   height: 2rem;
}

.formagregar label {
   font-size: 1rem;
}

/*De Vlad*/
.columna {
   width: 40%;
   display: flex;
   flex-direction: column;
   gap: 2rem;
   justify-content: space-between;
}

#formpedido,
#formagregarcol,
#formagregar,
#nuevocentro {
   width: 100vh;
   height: 100%;
   background-color: rgba(250, 250, 250, 1);
   border: 1px solid lightgray;
   padding: 2rem 1rem;
   border-radius: .3rem;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 1.4rem;
   flex: 2;
   align-items: center;
   justify-content: space-evenly;
   margin: 1em;

}

#formagregarcol>section {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
}

/*yeray*/
#formpedido>section,
#formagregar>section,
#nuevocentro>section {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
}

#formpedido>section {
   flex-direction: column;
}

#formagregarcol .mitad,
#formagregar .mitad,
#nuevocentro .mitad {
   display: flex;
   flex-direction: column;
   width: 47%;
}

/*Agregado beta 24w04d*/
.cuarto {
   width: 23%;
}

#formagregarcol input[type=text],
#formagregar input[type=text],
#nuevocentro input[type=text],
input[type=mail],
input[type=number],
select {
   width: 100%;
}

.boton-crear,
.boton-crear-centro {
   background-color: #1853d1;
   border: none;
   color: white;
   padding: 10px 20px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 10px;
   cursor: pointer;
   border-radius: 5px;
}

.boton-crear:hover,
.boton-crear-centro:hover {
   background-color: #1147bd;
}

/*Vlad*/
.boton-crear-izquierda {
   background-color: #1853d1;
   border: none;
   color: white;
   padding: 10px 20px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 10px;
   cursor: pointer;
   border-radius: 5px;
   width: 21%;
}

.boton-crear-izquierda:hover {
   background-color: #1147bd;
}

#btntraspaso {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   margin-top: 1rem;
   /*Agregado beta 24w04c*/
   font-size: 1.4rem;
   background-color: royalblue;
   color: white;
   border: 2px dashed white;
   outline: none;
   padding: .5rem;
   border-radius: .3rem;
   cursor: pointer;
   transition: .3s;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#btntraspaso:where(:hover, :focus) {
   background-color: #1147bd;
   box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.trasl-alma,
.trasl-fecha,
.trasl-cant,
.ns,
.refnom,
.form-chk {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   border: 1px solid silver;
}

.form-chk {
   width: 5.2rem;
}

.refnom {
   width: 35rem;
   justify-content: flex-start;
   gap: 1rem;
}

.ns {
   width: 12rem;
}

.trasl-cant {
   width: 4rem;
}

.trasl-fecha {
   width: 10rem;
}

.trasl-alma {
   width: 20rem;
}

.trasl-lab {
   display: flex;
   flex-direction: row;
   gap: 1rem;
   font-size: 1.4rem;
   font-weight: 400;
   cursor: pointer;
   transition: .2s;
}

.trasl-lab:where(:hover, :focus) {
   background-color: #ccc;
}

/*Agregado beta 24w04d*/
.seleccionado {
   background-color: gold;
}

/*Agregado beta 24w04d*/
.form-chk {
   display: none;
}

.obligatorio {
   font-weight: bolder;
   color: var(--rojo);
   font-size: 1.2rem;
   margin-left: .2rem;
}

#agregararticulobtn,
#eliminararticulobtn {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 2rem;
   height: 2rem;
   border: none;
   border-radius: 50%;
   position: fixed;
   left: 5rem;
   bottom: 5rem;
   transition: .3s;
}

#agregararticulobtn {
   background-color: mediumseagreen;
}

#eliminararticulobtn {
   left: 2rem;
   bottom: 5rem;
}

:is(#agregararticulobtn, #eliminararticulobtn):where(:hover, :focus) {
   box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

.agregado label {
   color: rgb(158, 102, 46);
}

.completado,
.no-completado {
   font-size: 1rem;
   height: 100%;
   border: none;
   background-color: rgba(0, 0, 0, 0);
   width: 100%;
   text-align: center;
   cursor: pointer;
}

.no-completado {
   fill: var(--rojo);
}

.completado {
   fill: var(--verde);
}

.hide {
   display: none;
}

/*Agregado beta 24w07b*/
.formagregar input[type=number] {
   width: 3rem;
}

/*Agregado beta 24w10d*/
#cargando svg {
   fill: var(--azul);
   animation: 1.2s rotacion infinite ease-in-out;
}

@keyframes rotacion {
   100% {
      transform: rotate(360deg);
   }
}

/*Switch Agregado beta 24w10d*/
.label {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   color: #394a56;
}

.label-text {
   margin-left: 16px;
}

.toggle {
   isolation: isolate;
   position: relative;
   height: 30px;
   width: 60px;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: -8px -4px 8px 0px #ffffff,
      8px 4px 12px 0px #d1d9e6,
      4px 4px 4px 0px #d1d9e6 inset,
      -4px -4px 4px 0px #ffffff inset;
}

.toggle-state {
   display: none;
}

.indicator {
   height: 100%;
   width: 200%;
   background-color: var(--rojo);
   border-radius: 15px;
   transform: translate3d(-75%, 0, 0);
   transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
   box-shadow: -8px -4px 8px 0px #ffffff,
      8px 4px 12px 0px #d1d9e6;
}

.toggle-state:checked~.indicator {
   transform: translate3d(25%, 0, 0);
   background-color: var(--azul);
}

/*******************************************************************************
 *                               [Aviso eliminar]                              *
 *******************************************************************************/
#aviso {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 3rem;
}

#aviso section {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
   width: 100%;
}

#cancelar,
#darbaja {
   font-size: 1.5rem;
   text-decoration: none;
   background-color: var(--azul);
   color: white;
   padding: 1rem .5rem;
   border-radius: .3rem;
   transition: .3s;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

#darbaja {
   border: none;
   background-color: #c70039;
}

#cancelar:where(:hover, :focus) {
   background-color: #6371db;
}

#darbaja:where(:hover, :focus) {
   background-color: #e00241;
}

/*******************************************************************************
 *                                   [Tablas]                                  *
 *******************************************************************************/
table {
   border-collapse: collapse;
   border: 5px solid var(--azul);
}

th,
td {
   border: 2px solid gray;
   padding: .2rem;
   transition: .2s;
}

tr:hover td,
thead:hover th {
   background-color: rgba(88, 101, 195, .8);
}

td:hover,
th:hover {
   background-color: rgba(88, 101, 195, 1) !important;
   color: white;
   border: 2px solid #c70039;
}

thead {
   background-color: #5865c3;
   color: white;
}

.par {
   background-color: rgba(88, 101, 195, .2);
}

.impar {
   background-color: rgba(88, 101, 195, .5);
}

.enlacetabla {
   display: flex;
   text-decoration: none;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   color: #0f0f0f;
}

#cantidadgenerar {
   outline: none !important;
   display: flex;
   text-align: center;
   width: 2.5rem;
   border: 1px solid gray;
   -moz-appearance: textfield;
   border-radius: .3rem;
}

#cantidadgenerar:hover {
   outline: none;
}

#cantidadgenerar::-webkit-inner-spin-button,
#cantidadgenerar::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

#reducir,
#aumentar {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   width: 2rem;
   height: 2rem;
   border: none;
   cursor: pointer;
   transition: .2s;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

:is(#reducir, #aumentar):where(:hover) {
   background-color: #ccc;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

:is(#reducir, #aumentar):where(:focus) {
   background-color: #a5a5a5;
}

:is(#reducir, #aumentar):where(:focus) svg {
   fill: white;
}

.hombre {
   fill: #1853d1;
}

.mujer {
   fill: deeppink;
}

#seleccionhombre,
#seleccionmujer,
#seleccionambos {
   cursor: pointer;
}

#radio-hombre,
#radio-mujer,
#radio-ambos {
   display: none;
}

#span-hombre,
#span-mujer,
#span-ambos {
   transition: .3s;
   border-radius: .3rem;
   padding: .5rem;
}

#radio-hombre:checked~#span-hombre,
#radio-mujer:checked~#span-mujer,
#radio-ambos:checked~#span-ambos {
   background-color: whitesmoke;
   color: var(--rojo);
   box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

/*Búsqueda de ingresos*/
#ingresos_empleados,
#ingresos_centros,
#ingresos_servicios {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   max-height: 15rem;
   overflow-y: auto;
}

:is(#ingresos_empleados, #ingresos_centros, #ingresos_servicios) label {
   font-family: "Franklin-regular", Arial, Helvetica, sans-serif;
   display: flex;
   flex-direction: row;
   width: 100%;
   font-size: 1.2rem;
   font-weight: 400;
   user-select: none;
   padding: .3rem .5rem;
   margin: 0;
   transition: .3s;
}

#ingresos_empleados .chkempleado:checked+label,
#ingresos_centros .chkcentro:checked+label,
#ingresos_servicios .chkservicio:checked+label {
   background-color: var(--azul);
   color: white;
}

#marcar_todos_empleados,
#desmarcar_todos_empleados,
#marcar_todos_centros,
#desmarcar_todos_centros,
#marcar_todos_servicios,
#desmarcar_todos_servicios {
   font-size: 1.4rem;
   border: none;
   color: var(--azul);
   background-color: transparent;
   outline: 1px solid var(--azul);
   padding: .3rem .5rem;
   cursor: pointer;
   transition: .3s;
}

#desmarcar_todos_empleados,
#desmarcar_todos_centros,
#desmarcar_todos_servicios {
   color: var(--rojo);
   outline: 1px solid var(--rojo);
}

:is(#marcar_todos_empleados, #marcar_todos_centros, #marcar_todos_servicios):where(:focus, :hover) {
   color: white;
   outline: 1px solid white;
   background-color: var(--azul);
}

:is(#desmarcar_todos_empleados, #desmarcar_todos_centros, #desmarcar_todos_servicios):where(:focus, :hover) {
   color: white;
   outline: 1px solid white;
   background-color: var(--rojo);
}

#barra_busqueda {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

#barra_busqueda fieldset {
   border: 1px solid gray;
   border-radius: .3rem;
}

/* Acordeones */
details {
   border: 1px solid #aaa;
   border-radius: 4px;
   overflow: hidden;
   transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
   max-height: 2.5em;
   /* Altura del summary más padding */
   padding: 0.5em 0.5em 0;
   width: 40rem;
}

summary:where(:hover, :focus) {
   cursor: pointer;
}

details article {
   margin-top: .5rem;
   margin-bottom: .5rem;
}

summary {
   font-weight: bold;
   margin: -0.5em -0.5em 0;
   padding: 0.5em;
   text-align: left;
   background-color: var(--azul);
   color: white;
   transition: .5s;
}

summary::marker,
details svg {
   fill: var(--azul);
   color: white;
}

details[open] {
   max-height: 9999rem;
   padding: 0.5em;
   background-color: whitesmoke;
}

details[open] summary,
details[open] details[open] summary {
   border-bottom: 1px solid #aaa;
   background-color: var(--rojo);
}

details[open] details summary {
   background-color: var(--azul);
}

details[open] details {
   width: fit-content;
}

.detalles {
   display: flex;
   flex-direction: column;
   gap: .5rem;
   align-items: flex-start;
   padding-top: .5rem;
}

details details summary span {
   margin-top: -1.2rem;
   margin-left: .5rem;
   padding-top: .6rem;
}

details details summary .ref {
   margin-top: -.8rem;
}

details .precio {
   color: darkgreen;
   background-color: white;
   border-radius: .3rem;
   padding: .2rem;
   margin-left: .5rem;
}

/*******************************************************************************
 *                                [Pie de página]                               *
 *******************************************************************************/
#version {
   display: flex;
   position: fixed;
   right: 1rem;
   bottom: 1rem;
   background-color: white;
   border-radius: .5rem;
   border: 1px solid lightgray;
   padding: .2rem .5rem;
   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;
}

#version:hover {
   box-shadow: none;
}
/*Dialogs*/
#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;
   opacity: 1;
   animation: .2s aparecer 1 ease-in-out;
}

.desaparecer {
   opacity: 1;
   animation: .3s desaparecer 1 ease-in-out;
}

/*Animación aparecer*/
@keyframes aparecer {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

/*Animación desaparecer*/
@keyframes desaparecer {
   from {
      opacity: 1;
   }

   to {
      opacity: 0;
   }
}

dialog {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   width: fit-content;
   padding: 1rem 1.2rem;
   border: none;
   border-radius: .3rem;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
   gap: 0;
   opacity: 1;
   animation: .2s aparecer-arriba 1 ease-in-out;
   max-height: 90%;
}

.desaparecer-abajo {
   opacity: 1;
   margin-top: 0;
   animation: .3s desaparecer-abajo 1 ease-in-out;
}

/*Animación aparecer arriba*/
@keyframes aparecer-arriba {
   from {
      opacity: 0;
      margin-top: 5rem;
   }

   to {
      opacity: 1;
      margin-top: 0;
   }
}

/*Animación desaparecer abajo*/
@keyframes desaparecer-abajo {
   from {
      opacity: 1;
      margin-top: 0;
   }

   to {
      opacity: 0;
      margin-top: 5rem;
   }
}

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

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;
}

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

#d-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
}

/*******************************************************************************
 *                                 [Responsive]                                *
 *******************************************************************************/
@media only screen and (max-width: 751px) {

   /*Agregado beta 24w22b*/
   table {
      overflow-x: auto;
      margin: 1rem;
   }

   /*Agregado beta 24w22b*/
   .row {
      flex-wrap: wrap;
   }

   section {
      width: 100%;
   }

   /*Agregado beta 24w22b*/
   header a svg {
      font-size: 1rem;
      width: .8em;
      height: .8em;
   }

   /*Agregado beta 24w22b*/
   header a {
      width: fit-content;
   }

   #encabezado {
      /*justify-content: flex-start;*/
      /*Modificado beta 24w22b*/
      gap: 0;
      /*Modificado beta 24w22b*/
      padding: .5rem;
   }

   #menus {
      gap: 0;
   }

   #menus section a svg,
   #menu-usuario a svg {
      width: 7rem !important;
      height: 7em;
   }


   main,
   #main {
      width: 98%;
      /*Agregado desde beta 24w02a*/
      margin: .5rem 0 3rem 0;
   }

   #login,
   #login2 {
      width: 42vh;
      height: auto;
   }

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

   #mostrarcontra {
      height: 5.7vh;
   }

   #formagregarservicio {
      flex-direction: column;
   }

   #jornada {
      width: 97%;
      padding: .2rem;
      margin-bottom: 20rem;
      overflow: hidden;
   }

   #menu-usuario,
   #menu-usuario1,
   /*Agregado beta24w22b*/
   #menu-usuario2 {
      /*Agregado beta24w19d*/
      position: absolute;
      left: 5px;
      right: 0;
      top: 8rem;
      margin: 0;
   }

   fieldset {
      padding: .3rem;
   }

   .contenedores {
      padding: .5rem;
      width: 94%;
   }

   .contenedores a {
      font-size: 1rem;
   }

   #seleccioncentro,
   #seleccioncentro fieldset {
      width: 90%;
   }

   fieldset section,
   .formservicios {
      flex-direction: column;
   }

   .contenidoservicio {
      /*Agregado desde beta 24w02a*/
      width: 90%;
      padding: 1rem;
   }

   /*Agregado beta 24w06c*/
   .contenedores .agregar-producto-extra {
      margin-top: 7rem;
   }

   /*#jornada fieldset{
      width: 80% !important;
   }*/
   fieldset.productos {
      margin: 0;
      padding: .2rem;
      width: 95%;
   }

   .producto-cantidad {
      flex-wrap: wrap;
   }

   .agregar-producto-extra {
      margin-left: 0;
      height: 26vh;
      padding: 1rem;
      margin-bottom: 0 !important;
   }

   .agregar-producto-extra .row {
      flex-wrap: wrap;
   }

   .servicio {
      gap: .2rem;
   }

   #serviciovacio {
      gap: .2rem;
      /*Agregado desde la beta 24w02a*/
      justify-content: flex-start;
   }

   /*Agregado desde la beta 24w02a*/
   #formpedido,
   #nuevocentro,
   .mitad {
      width: auto !important;
   }

   /*Agregado desde la beta 24w02a*/
   #nuevocentro {
      flex-direction: column;
   }

   #serviciovacio section:first-child {
      width: 74%;
   }

   .nombrearticulo {
      display: none;
   }

   .producto-cantidad {
      gap: .4rem;
   }

   .contenedoreliminar,
   .contenedormodificar {
      align-items: initial;
   }

   .formescandallo {
      margin-left: .5rem;
   }

   #version {
      right: .2rem;
      bottom: .2rem;
   }

   /*Agregado beta 24w16d*/
   #resultadosServiciosResultados,
   #resultadosUsuariosResultados {
      bottom: 0;
   }

   #resultadosUsuariosResultados {
      bottom: 33%;
   }

   #resultadosUsuariosResultados .cerrar {
      margin-bottom: 32dvh;
   }
}