/*******************************************************************************
*                                    MARK:[*]                                  *
*******************************************************************************/
@font-face {
   font-family: 'Google Sans';
   src: url('/assets/fonts/GoogleSans-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
}

@font-face {
   font-family: 'Google Sans';
   src: url('/assets/fonts/GoogleSans-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: 'Google Sans';
   src: url('/assets/fonts/GoogleSans-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
}

:root {
   /* Paleta ClickUp Style */
   --sidebar-bg: #2c3e50;
   --sidebar-hover: #34495e;
   --sidebar-active: #3498db;
   
   /* Colores de estado */
   --verde: #27ae60;
   --amarillo: #f1c40f;
   --naranja: #e67e22;
   --rojo: #e74c3c;
   --azul: #3498db;
   --gris: #95a5a6;
   
   /* Fondos */
   --fondo: #f8f9fa;
   --fondo-tarjeta: #ffffff;
   --borde: #e9ecef;
   
   /* Texto */
   --texto-principal: #2c3e50;
   --texto-secundario: #7f8c8d;
   --blanco: #ffffff;
   
   /* Legacy (compatibilidad) */
   --azul-fuerte: var(--azul);
   --azul-medio: #2980b9;
   --azul-suave: #ebf5fb;
   --negro: var(--texto-principal);
   --gris-oscuro: var(--sidebar-bg);
   --gris-suave-fondo: var(--fondo);
   --gris-texto: #f8f9fa;
   --primario: var(--azul);
   
   /* Inputs */
   --input-bg: #ffffff;
   --input-border: #e9ecef;
   
   --letra: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ========================================================================== */
/*                              DARK MODE                                     */
/* ========================================================================== */
[data-theme="dark"] {
   --sidebar-bg: #1a1a2e;
   --sidebar-hover: #16213e;
   --sidebar-active: #0f3460;

   --fondo: #0f0f1a;
   --fondo-tarjeta: #1a1a2e;
   --borde: #2a2a3e;

   --texto-principal: #e0e0e0;
   --texto-secundario: #8888a0;
   --blanco: #e0e0e0;

   --azul-fuerte: #5dade2;
   --azul-medio: #3498db;
   --azul-suave: #1a2a3e;
   --negro: #e0e0e0;
   --gris-oscuro: #1a1a2e;
   --gris-suave-fondo: #12121e;
   --gris-texto: #e0e0e0;
   
   --input-bg: #12121e;
   --input-border: #2a2a3e;

   color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
   html:not([data-theme="light"]) {
      --sidebar-bg: #1a1a2e;
      --sidebar-hover: #16213e;
      --sidebar-active: #0f3460;
      --fondo: #0f0f1a;
      --fondo-tarjeta: #1a1a2e;
      --borde: #2a2a3e;
      --texto-principal: #e0e0e0;
      --texto-secundario: #8888a0;
      --blanco: #e0e0e0;
      --azul-fuerte: #5dade2;
      --azul-medio: #3498db;
      --azul-suave: #1a2a3e;
      --negro: #e0e0e0;
      --gris-oscuro: #1a1a2e;
      --gris-suave-fondo: #12121e;
      --gris-texto: #e0e0e0;
      --input-bg: #12121e;
      --input-border: #2a2a3e;
      color-scheme: dark;
   }
}

html {
   overflow: hidden;
}

body {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   font-family: var(--letra);
   margin: 0;
   width: 100%;
   height: 100dvh;
   background-color: var(--fondo);
   color: var(--texto-principal);
   overflow-x: hidden;
}

abbr {
   cursor: help;
}

hr {
   width: 100%;
   border: 1px solid var(--gris-oscuro);
   margin-top: .2rem;
   margin-bottom: .2rem;
   border-radius: 100%;
}

button {
   font-family: var(--letra);
}

/*Colores*/
.rojo {
   color: var(--rojo) !important;
   stroke: var(--rojo) !important;
}

.blanco {
   color: var(--gris-texto) !important;
   stroke: var(--gris-suave-fondo) !important;
}

.azul {
   color: var(--azul-fuerte) !important;
   stroke: var(--azul-fuerte) !important;
}

.resaltado {
   color: var(--negro);
}

.texto-gris {
   color: #4D5656;
}

svg {
   width: 1.2em;
   height: 1.2em;
}

.linea {
   display: flex;
   flex-direction: row;
   width: 100%;
}

img,
video {
   border-radius: .3rem;
}

/*******************************************************************************
 *                                  MARK:[Textos]                              *
 *******************************************************************************/
h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;
   text-wrap: balance;
}

h1 {
   font-size: 3rem;
   text-transform: capitalize;
}

h2 {
   font-size: 1.8rem;
}

h3 {
   font-size: 1.3rem;
}

label {
   font-size: 1.2rem;
   font-weight: 500;
   cursor: pointer;
}

/*******************************************************************************
 *                              MARK:[Botones]                                  *
 *******************************************************************************/
.btn-p, .btn-s, .btn-d, .btn-t {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   padding: 0.6rem 1.5rem;
   border-radius: 0.4rem;
   font-size: 0.95rem;
   font-weight: 500;
   font-family: var(--letra);
   cursor: pointer;
   transition: all 0.2s ease;
   border: none;
   text-decoration: none;
   white-space: nowrap;
}

/* Botón primario */
.btn-p {
   background-color: var(--azul);
   color: white;
}
.btn-p:hover {
   background-color: var(--azul-medio);
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

/* Botón secundario */
.btn-s {
   background-color: var(--fondo);
   color: var(--texto-principal);
   border: 1px solid var(--borde);
}
.btn-s:hover {
   background-color: var(--borde);
}

/* Botón danger/eliminar */
.btn-d {
   background-color: var(--rojo);
   color: white;
}
.btn-d:hover {
   background-color: #c0392b;
}

/* Botón transparente */
.btn-t {
   background-color: transparent;
   color: var(--texto-secundario);
   border: 1px solid var(--borde);
}
.btn-t:hover {
   background-color: var(--fondo);
   color: var(--texto-principal);
}

/* Footer versión - estilo FichApp */
footer#version {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: fixed;
   bottom: .5rem;
   right: 1rem;
   left: auto !important;
   width: auto !important;
   background: light-dark(rgb(255 255 255 / 70%), rgb(29 35 39 / 70%));
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
   border-radius: .4rem;
   padding: .2rem .5rem;
   transition: .3s;
   z-index: 9999;
}
footer#version span {
   color: light-dark(#202020, white);
}

/*******************************************************************************
 *                              MARK:[Formularios]                              *
 *******************************************************************************/
form {
   max-width: 600px;
   margin: 0 auto;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
   width: 100%;
   padding: 0.65rem 0.9rem;
   border: 1px solid var(--input-border) !important;
   border-radius: 0.35rem;
   font-size: 0.95rem;
   font-family: var(--letra);
   background-color: var(--input-bg) !important;
   color: var(--texto-principal) !important;
   transition: border-color 0.2s, box-shadow 0.2s;
   box-sizing: border-box;
   height: 2.75rem;
}

/* Corregir autocomplete del navegador */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
   -webkit-text-fill-color: var(--texto-principal) !important;
   background-color: var(--input-bg) !important;
}

input:focus,
select:focus,
textarea:focus {
   outline: none;
   border-color: var(--azul);
   box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.12);
}

/* Estilos para inputs inválidos - profesional */
/* No mostrar nada hasta que el usuario intente enviar o pierda el foco */
input:invalid,
select:invalid,
textarea:invalid {
   background-color: var(--input-bg) !important;
}

/* Solo mostrar error después de interacción del usuario */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
   background-color: #fff8f8 !important;
   border-color: #dc3545 !important;
}

input:user-invalid:focus,
select:user-invalid:focus,
textarea:user-invalid:focus {
   border-color: #dc3545 !important;
   box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

input::placeholder,
textarea::placeholder {
   color: #adb5bd;
   font-style: italic;
   opacity: 1;
}

select {
   cursor: pointer;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237f8c8d'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 0.7rem center;
   background-size: 1.2rem;
   padding-right: 2.5rem;
}

/* Contenedor de formulario mejorado */
.form-container,
.form-ticket-container,
section.caja {
   background: var(--fondo-tarjeta);
   padding: 1.5rem 2rem;
   border-radius: 0.5rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   margin: 1rem auto;
   border: 1px solid var(--borde);
}

/* Footer de formulario con botones alineados */
form footer,
form .form-actions {
   display: flex;
   justify-content: space-between;
   gap: 0.75rem;
   margin-top: 1.5rem;
   padding-top: 1rem;
   border-top: 1px solid var(--borde);
}

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

.anchocompleto {
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
}

.alturacompleta {
   height: 100%;
}

.caja {
   width: 60%;
   max-width: 900px;
   margin: 0 auto;
   box-sizing: border-box;
}

.caja > * {
   max-width: 100%;
   box-sizing: border-box;
}

.caja-media {
   width: 50%;
   max-width: 700px;
   margin: 0 auto;
   box-sizing: border-box;
}

.caja-peque {
   width: 45%;
   max-width: 600px;
   margin: 0 auto;
   box-sizing: border-box;
}

.row {
   flex-direction: row;
}

.column {
   flex-direction: column;
}

.textocentrado {
   text-align: center;
}

.justificado {
   justify-content: center;
}

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

.alinear {
   align-items: center;
}

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

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

.pa2 {
   padding: 2rem;
}

.pa3 {
   padding: 3rem;
}

.pa4 {
   padding: 4rem;
}

.pa5 {
   padding: 5rem;
}

.gap01 {
   gap: .1rem;
}

.gap02 {
   gap: .2rem;
}

.gap03 {
   gap: .3rem;
}

.gap04 {
   gap: .4rem;
}

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

/*******************************************************************************
 *                              MARK:[Encabezado]                              *
 *******************************************************************************/
#encabezado {
   display: flex;
   flex-direction: row;
   gap: 1rem;
   width: 100%;
   background-color: var(--gris-oscuro);
   padding: .4rem;
   box-shadow: rgb(0 0 0 / 0.1) 0px 4px 6px -1px, rgb(0 0 0 / 0.06) 0px 2px 4px -1px;
}

#enlaces {
   display: flex;
   flex-direction: row;
   width: 100%;
   justify-content: flex-end;
   gap: 1rem;
   padding-right: .5rem;
}

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

#btn-lateral {
    position: fixed;
    left: 0;
    top: 0;
    border: none;
    background-color: transparent;
    width: 3rem;
    height: 3rem;
    padding-left: .5rem;
    color: var(--gris-texto);
    z-index: 22;
}

#encabezado-lateral {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 12rem;
    height: 100%;
    background-color: var(--sidebar-bg);
    position: fixed;
    left: -9rem;
    top: 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    transition: .3s ease-in-out;
    overflow-x: hidden;
    z-index: 20;
}

#encabezado-lateral.activo {
    left: 0;
}
#encabezado-lateral.activo~main {
    padding-left: 14rem;
}

#encabezado-lateral section {
    padding-top: 3rem;
}

#encabezado-lateral a {
    width: 100%;
    height: 2.8rem;
    gap: .6rem;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: .4s;
    align-items: center;
    padding-left: 1.5rem;
    font-size: 0.95rem;
}

#icono-incidencias-count,
b,
#encabezado-lateral a svg {
    text-decoration: none !important;
    transition: stroke .2s ease;
    fill: none;
}

#encabezado-lateral #cerrar_sesion {
    background-color: var(--rojo);
    color: white;
    margin-bottom: 1rem;
}

#encabezado-lateral #cerrar_sesion svg {
    stroke: white;
}

#encabezado-lateral #cerrar_sesion:hover {
    background-color: #c0392b;
}

#encabezado-lateral section a.activo {
    background-color: var(--sidebar-active);
    color: white;
}

#encabezado-lateral section a.activo svg {
    stroke: white;
}

#encabezado-lateral a:where(:hover, :focus) {
    background-color: var(--sidebar-hover);
    color: white;
}

#encabezado-lateral a:where(:hover, :focus) svg {
    stroke: white;
}

#encabezado-lateral:not(.activo) a {
    width: auto;
    padding-right: 1rem;
    margin-right: -10rem;
    padding-left: 10rem;
    gap: 2rem;
}

#encabezado-lateral:not(.activo) a span {
    transition: .1s;
    visibility: hidden;
}

#encabezado-lateral:not(.activo) #btn-tema {
    width: auto;
    padding-right: 1rem;
    margin-right: -10rem;
    padding-left: 10rem;
    gap: 2rem;
}

#encabezado-lateral:not(.activo) #btn-tema span {
    transition: .1s;
    visibility: hidden;
}

#btn-lateral svg {
    transform: rotate(0deg);
    transition: transform .3s ease, stroke .3s ease;
    transform-origin: 50% 50%;
    transform-box: fill-box;
}

.activo~#btn-lateral svg {
    transform: rotate(180deg);
}

/*******************************************************************************
 *                             MARK:[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: #fff8ed;
   color: #3f2c01;
   border-left: 5px solid gold;
   border-radius: .3rem;
   gap: .5rem;
   padding: .2rem .5rem;
   font-size: 1rem;
   max-width: 90%;
   animation: 8s notificacion 1 ease-in;
   z-index: 102;
}

@keyframes notificacion {
   0% {}

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

   20%,
   80% {
      box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
   }

   100% {}
}

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

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

.noti-correcto {
   color: seagreen;
   stroke: seagreen;
}

.noti-error {
   color: #c70039;
   stroke: #c70039;
}

.disabled,
input:disabled {
   background-color: #888 !important;
   cursor: not-allowed !important;
}

#contraseña {
   flex: 1;
   min-width: 0;
   border-radius: 0.35rem 0 0 0.35rem;
}

#mostrarcontra {
   cursor: pointer;
   width: 3rem;
   border-radius: 0 0.35rem 0.35rem 0;
   background-color: var(--fondo);
   border: 1px solid var(--borde);
   border-left: none;
   display: flex;
   align-items: center;
   justify-content: center;
}

#mostrarcontra svg {
   stroke: var(--texto-secundario);
   width: 1rem;
   height: 1rem;
}

#mostrarcontra:where(:focus, :hover) {
   background-color: var(--borde);
}



#formulario>section {
   width: 100%;
   justify-content: center;
   align-content: space-between;
}

/**
* MARK: radios
*/

#radio-cliente,
#radio-empleado,
.radios {
   display: none;
}

#span-cliente,
#span-empleado,
.span-radio {
   transition: .3s;
   border-radius: .3rem;
   padding: .5rem;
   user-select: none;
}

#radio-cliente:checked~#span-cliente,
#radio-empleado:checked~#span-empleado,
.radios:checked~.span-radio {
   background-color: whitesmoke;
   color: var(--azul-fuerte);
   box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

/*******************************************************************************
 *                                MARK:[Cuerpo]                                *
*******************************************************************************/
main {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
   padding-bottom: 6rem;
   transition: .3s ease-in-out;
}

#login {
   margin-top: 15dvh;
   width: 22rem;
   padding: 2rem 0;
   background-color: var(--fondo-tarjeta);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   border-radius: 0.5rem;
   border: 1px solid var(--borde);
}

#login img {
   width: 20rem;
   height: fit-content;
   margin-bottom: .5rem;
}

#login h1 {
   text-align: center;
   padding-bottom: 1rem;
   font-size: 1.5rem;
}

#login form {
   padding: 0 2.5rem;
   max-width: none;
}

#login footer {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: none;
   padding-top: 0.5rem;
   margin-top: 0.5rem;
}

#iniciar-sesion {
   margin-top: .5rem;
   background-color: var(--azul);
   color: white;
   border: none;
   padding: 0.65rem 2rem;
   font-size: 0.95rem;
   font-family: var(--letra);
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
   border-radius: 0.35rem;
   width: 100%;
}

#iniciar-sesion:where(:focus, :hover) {
   background-color: var(--azul-medio);
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}






.btn-modificar svg {
   width: 1.5rem;
   height: 1.5rem;
}

#btn-inicio {
   left: 1rem;
   right: auto;
}

.modificar {
   border: none;
   background-color: transparent;
   color: var(--azul-fuerte);
   stroke: var(--azul-fuerte);
}

.seleccionado {
   background-color: gold;
   transition: background-color 0.5s ease;
}

.deseleccionado {
   background-color: whitesmoke;
   transition: background-color 0.5s ease;
}

/*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;
   color: var(--gris);
   stroke: var(--gris);
   width: 2rem;
   height: 2rem;
   position: relative;
   top: -1.2dvh;
   right: -.8dvw;
}


/* 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;
   padding: 0.5em 0.5em 0;
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

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

details article {
   margin-top: .5rem;
   margin-bottom: .5rem;
   margin-left: -.5rem;
   width: 100%;
}

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

summary::marker {
   color: var(--azul);
}

details[open] {
   max-height: 9999rem;
   padding: 0.5em;
   background-color: whitesmoke;
   animation: .3s desplegando 1 ease-in;
}

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

@keyframes desplegando {
   from {
      max-height: 3rem;
   }

   to {
      max-height: 50rem;
   }
}

.encabezado-acordeon {
   width: 100%;
   padding: 0 1rem;
   margin-top: -1.3rem;
}

.contable {
   margin-right: 1.5rem;
   background-color: var(--rojo);
   width: 1.6rem;
   height: 1.6rem;
   text-align: center;
   border-radius: 50%;
   transition: .3s;
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

details[open] .contable {
   background-color: var(--gris);
}


.no-hay {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   width: fit-content;
   font-style: italic;
   outline: thick double #282828;
   border-radius: .4rem;
   padding: .4rem;
}

.contenedor-crud {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   background-color: var(--fondo-tarjeta);
   padding: 1rem 1.25rem;
   border: 1px solid var(--borde);
   border-radius: 0.5rem;
   transition: all 0.2s ease;
}

.contenedor-crud:hover {
   border-color: var(--azul);
   box-shadow: 0 4px 12px rgba(52, 152, 219, 0.08);
}

.contenedor-crud header {
   margin-bottom: 0.25rem;
}

.contenedor-crud header strong {
   font-size: 1rem;
   color: var(--texto-principal);
}

.contenedor-crud .texto-gris {
   font-size: 0.85rem;
   color: var(--texto-secundario);
}

.contenedor-crud :is(a, button) {
   all: unset;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 2rem;
   height: 2rem;
   background-color: var(--fondo);
   border-radius: 0.375rem;
   cursor: pointer;
   transition: all 0.2s ease;
}

.contenedor-crud :is(a, button) svg {
   width: 1rem;
   height: 1rem;
   fill: none !important;
}

.contenedor-crud :is(a, button):hover {
   background-color: var(--azul-suave);
}

.contenedor-crud button.eliminar:hover {
   background-color: #fef2f2;
}

.error-message {
   font-size: 1rem;
   color: white;
   background-color: var(--rojo);
   margin-top: 0.5rem;
   animation: invalido 0.5s ease;
   width: 16rem;
   padding: .3rem;
   border-radius: .4rem;
}

.input-error {
   border: 1px solid red;
}

table {
   border-collapse: collapse;
   width: 100%;
   font-family: sans-serif;
   margin-bottom: 20px;
}

th,
td {
   border: 1px solid #ccc;
   padding: 8px;
   text-align: left;
   vertical-align: top;
}

th {
   background-color: #f7f7f7;
}

#cargando{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

/*******************************************************************************
 *                                  MARK:[Footer]                              *
 *******************************************************************************/
#version {
   display: flex;
   width: 100%;
   justify-content: center;
   position: fixed;
   bottom: 0;
   color: #484848;
   padding: .5rem;
   font-style: italic;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   transition: .3s;
   z-index: 30;
}

/*******************************************************************************
 *                                MARK:[Responsive]                            *
 *******************************************************************************/

@media screen and (max-width:720px) {
   .caja {
      width: 100%;
   }

   .caja-media {
      width: 90%;
   }

   .btn-p,
   .btn-s,
   .btn-t,
   .btn-d {
      font-size: 1rem;
   }

   .gap1 {
      gap: .5rem;
   }

   #formulario .flex.row {
      flex-direction: column;
   }
   #formulario label .flex.row{
      flex-direction: row;
   }

   #formulario>section {
      width: auto;
   }

   #formulario h4 {
      text-align: center;
   }

   textarea {
      width: 100%;
      max-width: 15rem;
   }
}

/*******************************************************************************
 *                         NOTIFICACIONES DE TICKETS                           *
 *******************************************************************************/

.notif-tickets {
   position: fixed;
   top: 1rem;
   right: 1rem;
   max-width: 400px;
   background: white;
   border-radius: 0.5rem;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
   z-index: 9999;
   transform: translateX(120%);
   transition: transform 0.3s ease;
   border-left: 4px solid var(--azul-fuerte);
}

.notif-tickets.show {
   transform: translateX(0);
}

.notif-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 1rem;
   background: var(--azul-fuerte);
   color: white;
   border-radius: 0.5rem 0.5rem 0 0;
}

.notif-header svg {
   flex-shrink: 0;
   stroke: white;
}

.notif-header strong {
   flex: 1;
   font-size: 0.95rem;
}

.notif-close {
   background: transparent;
   border: none;
   color: white;
   font-size: 1.5rem;
   cursor: pointer;
   padding: 0;
   line-height: 1;
   opacity: 0.8;
}

.notif-close:hover {
   opacity: 1;
}

.notif-list {
   list-style: none;
   padding: 0.75rem 1rem;
   margin: 0;
   max-height: 150px;
   overflow-y: auto;
}

.notif-list li {
   padding: 0.4rem 0;
   border-bottom: 1px solid #eee;
   font-size: 0.9rem;
   color: var(--texto-principal);
}

.notif-list li:last-child {
   border-bottom: none;
}

.notif-link {
   display: block;
   text-align: center;
   padding: 0.75rem;
   background: var(--gris-suave-fondo);
   color: var(--azul-fuerte);
   text-decoration: none;
   font-weight: 500;
   border-radius: 0 0 0.5rem 0.5rem;
}

.notif-link:hover {
   background: var(--azul-suave);
}

/* Badge de tickets en el sidebar */
.badge-tickets {
   background: var(--rojo);
   color: white;
   font-size: 0.7rem;
   padding: 0.15rem 0.4rem;
   border-radius: 10px;
   margin-left: auto;
   font-weight: bold;
   animation: pulse 2s infinite;
}

@keyframes pulse {
   0%, 100% { transform: scale(1); }
   50% { transform: scale(1.1); }
}

/*******************************************************************************
 *                         THEME TOGGLE BUTTON                                 *
 *******************************************************************************/
#btn-tema {
   background: transparent;
   border: none;
   color: rgba(255, 255, 255, 0.7);
   cursor: pointer;
   padding: 0.6rem 1.5rem;
   display: flex;
   align-items: center;
   gap: 0.6rem;
   font-size: 0.95rem;
   font-family: var(--letra);
   width: 100%;
   transition: 0.4s;
}
#btn-tema:hover {
   background-color: var(--sidebar-hover);
   color: white;
}
#btn-tema svg {
   width: 1.2em;
   height: 1.2em;
   stroke: currentColor;
   fill: none;
}

/*******************************************************************************
 *                         DARK MODE OVERRIDES                                 *
 *******************************************************************************/
[data-theme="dark"] dialog {
   background-color: var(--fondo-tarjeta);
   color: var(--texto-principal);
}

[data-theme="dark"] #showdialog {
   background-color: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] details[open] {
   background-color: var(--fondo-tarjeta);
}

[data-theme="dark"] summary {
   background-color: var(--sidebar-bg);
}

[data-theme="dark"] details[open] summary {
   background-color: var(--rojo);
}

[data-theme="dark"] .seleccionado {
   background-color: var(--azul);
   color: white;
}

[data-theme="dark"] .deseleccionado {
   background-color: var(--fondo-tarjeta);
}

[data-theme="dark"] th {
   background-color: var(--fondo-tarjeta);
}

[data-theme="dark"] #notificacion {
   background-color: var(--fondo-tarjeta);
   color: var(--texto-principal);
   border-left-color: var(--azul);
}