/* ================================
   VARIABLES GLOBALES (ROOT)
   ================================ */
:root {                                                                   /* Define variables CSS globales para tema claro */
  /* ===== Colores Badges ===== */
  --badge-bg: transparent;                  /* Fondo base de los badges */ /* Variable para fondo base de badges */
  --dot-blue: #2B74FF;                      /* Color principal del punto azul */ /* Variable para color azul de punto */
  --dot-blue-bg: rgba(43, 116, 255, 0.1);   /* Fondo del badge azul */ /* Variable para fondo de badge azul */
  --dot-purple: #8A4FFF;                    /* Color principal del punto morado */ /* Variable para color morado de punto */
  --dot-purple-bg: rgba(138, 79, 255, 0.1); /* Fondo del badge morado */ /* Variable para fondo de badge morado */
  --dot-green: #22C55E;                      /* Color principal del punto verde */ /* Variable para color verde de punto */
  --dot-green-bg: rgba(34, 197, 94, 0.1);   /* Fondo del badge verde */ /* Variable para fondo de badge verde */
  --dot-red: #DC2626;                       /* Color principal del punto rojo */ /* Variable para color rojo de punto */
  --dot-red-bg: rgba(220, 38, 38, 0.1);     /* Fondo del badge rojo */ /* Variable para fondo de badge rojo */
  --dot-yellow: #FACC15;                    /* Color principal del punto amarillo */ /* Variable para color amarillo de punto */
  --dot-yellow-bg: rgba(250, 204, 21, 0.1); /* Fondo del badge amarillo */ /* Variable para fondo de badge amarillo */
  --dot-black: #000;                        /* Color principal del punto negro */ /* Variable para color negro de punto */
  --dot-black-bg: rgba(0, 0, 0, 0.05);      /* Fondo del badge negro */ /* Variable para fondo de badge negro */
  --dot-white: #FFF;                        /* Color principal del punto blanco */ /* Variable para color blanco de punto */
  --dot-white-bg: rgba(255, 255, 255, 0.2); /* Fondo del badge blanco */ /* Variable para fondo de badge blanco */

  /* ===== AG Grid Buttons ===== */
  --btn-bg: #fff;        /* Fondo de botones AG Grid (tema claro) */ /* Variable para fondo de botones en tema claro */
  --btn-border: #d0d5dd; /* Borde de botones AG Grid */ /* Variable para borde de botones en tema claro */
  --btn-color: #808080;  /* Color del texto de botones AG Grid */ /* Variable para color de texto de botones */

  /* ===== AG Grid Rows ===== */
  --ag-row-even-bg: #f4f6fb;    /* Fondo de filas pares en tablas AG Grid */ /* Variable para fondo de filas pares */
  --ag-row-odd-bg: #ffffff;     /* Fondo de filas impares */ /* Variable para fondo de filas impares */
  --ag-row-even-color: #1F2936; /* Color de texto de filas pares */ /* Variable para color texto filas pares */
  --ag-row-odd-color: #1F2936;  /* Color de texto de filas impares */ /* Variable para color texto filas impares */

  /* ===== Enlaces AG Grid ===== */
  --link-email: #1D4ED8; /* Color de enlaces de email en tablas */ /* Variable para color de enlaces email */
  --link-phone: #059669; /* Color de enlaces de teléfono */ /* Variable para color de enlaces teléfono */
  --link-maps: #7C3AED;  /* Color de enlaces de mapas */ /* Variable para color de enlaces mapas */

  /* ===== Encabezados AG Grid ===== */
  --ag-header-icon-color: #1F2936; /* Color de los íconos en headers de AG Grid */ /* Variable para color iconos header */
  --ag-header-icon-size: 14px;     /* Tamaño de los íconos */ /* Variable para tamaño iconos header */
  --ag-header-icon-offset: 1px;    /* Ajuste vertical de íconos */ /* Variable para ajuste vertical iconos */
  --ag-header-text-color: #1F2936; /* Color del texto de los headers */ /* Variable para color texto header */
  --ag-header-text-size: 14px;     /* Tamaño del texto de los headers */ /* Variable para tamaño texto header */
  --ag-header-line-height: 1.2;    /* Altura de línea de los headers */ /* Variable para altura línea header */
  --ag-header-gap: 6px;            /* Espacio entre icono y texto en headers */ /* Variable para espacio icono-texto */

  /* ===== Tooltips ===== */
  --tooltip-bg: #f8fafc;     /* Fondo de tooltips */ /* Variable para fondo de tooltips */
  --tooltip-border: #d0d5dd; /* Borde de tooltips */ /* Variable para borde de tooltips */
  --tooltip-title: #111827;  /* Color del título del tooltip */ /* Variable para color título tooltip */
  --tooltip-text: #374151;   /* Color del contenido del tooltip */ /* Variable para color contenido tooltip */

  /* ===== Notiflix ===== */
  --nf-bg: #ffffff;                 /* Fondo de las notificaciones */ /* Variable para fondo notificaciones */
  --nf-title: #055BBB;              /* Color del título */ /* Variable para color título notificaciones */
  --nf-message: #000;               /* Color del mensaje */ /* Variable para color mensaje notificaciones */
  --nf-ok-bg: #055BBB;              /* Fondo del botón OK */ /* Variable para fondo botón OK */
  --nf-cancel-bg: #939393;          /* Fondo del botón Cancelar */ /* Variable para fondo botón Cancelar */
  --nf-overlay: rgba(0, 0, 0, 0.9); /* Fondo semi-transparente de overlay */ /* Variable para fondo overlay */

  /* ===== Modal Winbox ===== */
  --modal-bg: #ffffff;             /* Fondo del modal */ /* Variable para fondo modal */
  --modal-color: #000000;          /* Color del texto dentro del modal */ /* Variable para color texto modal */
  --modal-border: rgba(0,0,0,.15); /* Borde del modal (footer) */ /* Variable para borde modal */
  --modal-header-bg: linear-gradient(150deg, hsl(223, 70%, 35%), hsl(223, 90%, 20%)); /* Fondo gradiente del header */ /* Variable para fondo gradiente header */
  --scrollbar-track: #edf0f7; /* Variable para color track scrollbar */
  --scrollbar-thumb: #6b7280; /* Variable para color thumb scrollbar */
  --scrollbar-thumb-hover: #edf0f7; /* Variable para color thumb scrollbar hover */

  /* ===== AG Grid Overlay ===== */
  --ag-overlay-text-color: #555;               /* Color del texto en overlays personalizados */ /* Variable para color texto overlays */
  --ag-overlay-font-family: Arial, sans-serif; /* Fuente de overlays */ /* Variable para fuente overlays */

  /* ===== Inputs ===== */
  --simple-input-icon-color: #6b7280;       /* Color de los íconos dentro de inputs */ /* Variable para color iconos inputs */
  --input-focus-border: rgba(0, 0, 0, 0.3); /* Color del focus del input */ /* Variable para color border focus */

  /* ===== Select2 ===== */
  --select2-option-color: dark;                              /* Color del texto de todas las opciones */ /* Variable para color opciones */
  --select2-option-selected-color: #0F172A;                  /* Color del texto de opción seleccionada */ /* Variable para color texto opción seleccionada */
  --select2-option-selected-bg: rgba(17, 33, 75, 0.08);      /* Fondo de opción seleccionada */ /* Variable para fondo opción seleccionada */
  --select2-option-hover-color: black;                       /* Color del texto de opción hover seleccionada */ /* Variable para color texto hover */
  --select2-option-hover-bg: rgba(6, 101, 208, 0.2);         /* Fondo de opción hover seleccionada */ /* Variable para fondo hover */
  --select2-search-hover: #d1d8ea;                           /* Color del border del hover busqueda */ /* Variable para color border hover búsqueda */
  --select2-clear-btn: dark;                                 /* Color boton de limpiar campo */ /* Variable para color botón limpiar */
  --select2-border-selection: rgba(0, 0, 0, 0.15) !important; /* Color del borde de la seleccion */ /* Variable para color borde selección */
  --select2-background: #edf0f7;                             /* Color del fondo del select2 */ /* Variable para fondo select2 */
  --select2-background-focus: #dfe4f1;                       /* Color de fondo sin focus */ /* Variable para fondo select2 focus */
  --select2-error: #fae5dd;                                  /* Color de error */ /* Variable para color error */

  /* ===== FilePond Avatar ===== */
  --fp-bg: #edf0f7;                        /* Fondo del contenedor FilePond */ /* Variable para fondo FilePond */
  --fp-border: #f8f9fa;                    /* Borde del avatar */ /* Variable para borde avatar */
  --fp-shadow: 0 4px 12px rgba(0,0,0,.08); /* Sombra suave */ /* Variable para sombra */
  --fp-label-color: #6b7280;               /* Color del texto "Arrastrar archivo" */ /* Variable para color texto label */
  --fp-label-icon: #9ca3af;                /* Color del icono */ /* Variable para color ícono */
  --fp-bg-color: #fae5dd;                  /* Color de required */ /* Variable para color required */
  --fp-lb: #63676e;                        /* Color del texto input */ /* Variable para color texto input */

  /* ===== Editor Modal ===== */
  --editor-bg: var(--modal-bg);               /* Fondo principal del modal editor */ /* Variable heredada fondo editor */
  --editor-color: var(--modal-color);         /* Color del texto dentro del editor */ /* Variable heredada color texto editor */
  --editor-border: var(--modal-border);       /* Borde del modal editor */ /* Variable heredada borde editor */
  --editor-header-bg: var(--modal-header-bg); /* Fondo del header del editor */ /* Variable heredada fondo header editor */
  --editor-toolbar-bg: #f9fafb;               /* Fondo de la barra de herramientas */ /* Variable fondo toolbar editor */
  --editor-btn-bg: var(--btn-bg);             /* Fondo de botones del editor */ /* Variable heredada fondo botones editor */
  --editor-btn-border: var(--btn-border);     /* Borde de botones */ /* Variable heredada borde botones editor */
  --editor-btn-color: var(--btn-color);       /* Color del ícono/texto de botones */ /* Variable heredada color botones editor */
  --editor-btn-hover-bg: #eef2f7;             /* Fondo hover de botones */ /* Variable fondo hover botones editor */
  --editor-overlay: rgba(0,0,0,.75);          /* Fondo oscuro del overlay */ /* Variable fondo overlay editor */

  /* ===== MODAL DE CREDENCIALES (SIMPLE CREDENTIALS MODAL) ===== */
  --cred-bg: rgba(255, 255, 255, 0.95);        /* Fondo del card con efecto cristal (tema claro) */ /* Variable fondo card credenciales */
  --cred-input-bg: rgba(249, 250, 251, 0.8);   /* Fondo de los campos de usuario/contraseña */ /* Variable fondo inputs credenciales */
  --cred-border: rgba(0, 0, 0, 0.08);          /* Color del borde de campos y botón secundario */ /* Variable borde credenciales */
  --cred-text: #0f172a;                        /* Color principal del texto (títulos y campos) */ /* Variable color texto principal */
  --cred-text-light: #334155;                  /* Color de texto secundario (no usado actualmente) */ /* Variable color texto secundario */
  --cred-text-muted: rgba(0, 0, 0, 0.45);      /* Color del texto de labels (USUARIO/CONTRASEÑA) */ /* Variable color texto labels */
  --cred-accent: #2563eb;                      /* Color de acento principal (hover, icono shield) */ /* Variable color acento */
  --cred-accent-light: rgba(37, 99, 235, 0.1); /* Fondo del badge "credencial" */ /* Variable fondo badge acento */
  --cred-accent-start: #3b82f6;                /* Color inicial del gradiente en botón primario */ /* Variable inicio gradiente */
  --cred-accent-end: #8b5cf6;                  /* Color final del gradiente en botón primario */ /* Variable fin gradiente */
  --cred-success: #10b981;                     /* Color verde para feedback de copiado exitoso */ /* Variable color éxito */
  --cred-success-dark: #059669;                /* Verde más oscuro para gradiente de éxito */ /* Variable color éxito oscuro */

  /* ===== Formularios ===== */
  --form-label-color: #212529; /* Color del texto de las etiquetas de formulario (labels) */ /* Variable color labels formulario */

  /* ===== Card Sections ===== */
  --section-title-color: #6b7280;  /* Color del texto de los títulos de sección dentro de cards */ /* Variable color títulos sección */
  --section-title-bg: #f8f9fa;     /* Fondo del encabezado de la sección en la card */ /* Variable fondo títulos sección */
  --section-title-border: #dee2e6; /* Color del borde inferior del encabezado de sección */ /* Variable borde títulos sección */
  --section-border-card: #dfe4f1;  /* Color del borde de la card */ /* Variable borde card */

  /* ===== Flatpickr ===== */
  --flatpickr-bg: #edf0f7; /* Color del fondo */ /* Variable fondo flatpickr */

  /* ===== Accordion ===== */
  --accordion-icon-filter: invert(0%); /* 0% mantiene negro */ /* Variable filtro iconos acordeón */
  --bs-border-color: #dfe4f1;          /* Color del borde */ /* Variable color borde bootstrap */

  /* ===== Colores de letras ===== */
  --text-color: black;
}

/* ================================
   TEMA OSCURO
   ================================ */
html.dark {                                                               /* Clase para activar tema oscuro en el documento */
  /* ===== AG Grid Buttons ===== */
  --btn-bg: #1f2937;     /* Fondo de los botones en tema oscuro */ /* Variable fondo botones en tema oscuro */
  --btn-border: #344054; /* Borde de los botones */ /* Variable borde botones en tema oscuro */
  --btn-color: #808080;  /* Color del texto de los botones */ /* Variable color texto botones en tema oscuro */

  /* ===== AG Grid Rows ===== */
  --ag-row-even-bg: #1f2836 !important;    /* Fondo de filas pares */ /* Variable fondo filas pares oscuro */
  --ag-row-odd-bg: #252f3f !important;     /* Fondo de filas impares */ /* Variable fondo filas impares oscuro */
  --ag-row-even-color: #e5e7eb !important; /* Color de texto filas pares */ /* Variable color texto filas pares oscuro */
  --ag-row-odd-color: #e5e7eb !important;  /* Color de texto filas impares */ /* Variable color texto filas impares oscuro */

  /* ===== Enlaces AG Grid ===== */
  --link-email: #93C5FD; /* Color enlaces de email */ /* Variable color enlaces email oscuro */
  --link-phone: #6EE7B7; /* Color enlaces de teléfono */ /* Variable color enlaces teléfono oscuro */
  --link-maps:  #D8B4FE; /* Color enlaces de mapas */ /* Variable color enlaces mapas oscuro */

  /* ===== Encabezados AG Grid ===== */
  --ag-header-icon-color: #ffffff; /* Color iconos de encabezados */ /* Variable color iconos header oscuro */
  --ag-header-text-color: #ffffff; /* Color texto de encabezados */ /* Variable color texto header oscuro */

  /* ===== Tooltips AG Grid ===== */
  --tooltip-bg: #0b1220;     /* Fondo de tooltips */ /* Variable fondo tooltips oscuro */
  --tooltip-border: #243047; /* Borde de tooltips */ /* Variable borde tooltips oscuro */
  --tooltip-title: #ffffff;  /* Color del título del tooltip */ /* Variable color título tooltip oscuro */
  --tooltip-text: #e5e7eb;   /* Color del contenido del tooltip */ /* Variable color contenido tooltip oscuro */

  /* ===== Notiflix ===== */
  --nf-bg: #2C2C2C;                 /* Fondo de notificaciones */ /* Variable fondo notificaciones oscuro */
  --nf-title: #D8D4D4;              /* Color del título */ /* Variable color título notificaciones oscuro */
  --nf-message: #ffffff;            /* Color del mensaje */ /* Variable color mensaje notificaciones oscuro */
  --nf-ok-bg: #055BBB;              /* Fondo del botón OK */ /* Variable fondo botón OK oscuro */
  --nf-cancel-bg: #939393;          /* Fondo del botón Cancelar */ /* Variable fondo botón Cancelar oscuro */
  --nf-overlay: rgba(0, 0, 0, 0.9); /* Fondo semi-transparente del overlay */ /* Variable fondo overlay oscuro */

  /* ===== Modal Winbox ===== */
  --modal-bg: #1F2936;                   /* Fondo del modal */ /* Variable fondo modal oscuro */
  --modal-color: #ffffff;                /* Color del texto dentro del modal */ /* Variable color texto modal oscuro */
  --modal-border: rgba(255,255,255,.12); /* Borde del footer del modal */ /* Variable borde modal oscuro */
  --modal-header-bg: linear-gradient(150deg, hsl(223, 65%, 35%), hsl(223, 80%, 20%)); /* Fondo gradiente del header */ /* Variable fondo header modal oscuro */
  --scrollbar-track: #222f3e; /* Variable track scrollbar oscuro */
  --scrollbar-thumb: #354a61; /* Variable thumb scrollbar oscuro */
  --scrollbar-thumb-hover: #222f3e; /* Variable thumb scrollbar hover oscuro */

  /* ===== AG Grid Overlay ===== */
  --ag-overlay-text-color: #ffffff; /* Color del texto en overlays personalizados */ /* Variable color texto overlays oscuro */

  /* ===== Inputs ===== */
  --simple-input-icon-color: #9ca3af;        /* Color de iconos dentro de inputs */ /* Variable color iconos inputs oscuro */
  --input-focus-border: rgba(0, 0, 0, 0.3);  /* Color del focus del input */ /* Variable color focus inputs oscuro */

  /* ===== Select2 ===== */
  --select2-option-color: white;                             /* Color de todas las opciones */ /* Variable color opciones oscuro */
  --select2-option-selected-color: #F8FAFC;                  /* Color del texto de opción seleccionada */ /* Variable color texto opción seleccionada oscuro */
  --select2-option-selected-bg: rgba(76, 124, 203, 0.08);    /* Fondo de opción seleccionada */ /* Variable fondo opción seleccionada oscuro */
  --select2-option-hover-color: #fff;                        /* Color del texto de opción hover seleccionada */ /* Variable color texto hover oscuro */
  --select2-option-hover-bg: rgba(6, 101, 208, 0.15);        /* Fondo de opción hover seleccionada */ /* Variable fondo hover oscuro */
  --select2-search-hover: #303745;                           /* Color del border del hover busqueda */ /* Variable color border hover búsqueda oscuro */
  --select2-clear-btn: white;                                /* Color boton de limpiar campo */ /* Variable color botón limpiar oscuro */
  --select2-border-selection: rgba(0, 0, 0, 0.3) !important; /* Color del borde de la seleccion */ /* Variable borde selección oscuro */
  --select2-background: #191d24;                             /* Color del fondo del select2 */ /* Variable fondo select2 oscuro */
  --select2-background-focus: #161920;                       /* Color de fondo sin focus */ /* Variable fondo select2 focus oscuro */
  --select2-error: rgba(127,29,29,.85);                      /* Color de error */ /* Variable color error oscuro */

  /* ===== FilePond Avatar ===== */
  --fp-bg: #191d24;                        /* Fondo del contenedor FilePond */ /* Variable fondo FilePond oscuro */
  --fp-border: rgba(255,255,255,.12);      /* Borde del avatar */ /* Variable borde avatar oscuro */
  --fp-shadow: 0 6px 14px rgba(0,0,0,.65); /* Sombra más profunda */ /* Variable sombra oscura */
  --fp-label-color: #cbd5f5;               /* Texto claro */ /* Variable color texto label oscuro */
  --fp-label-icon: #94a3b8;                /* Icono claro */ /* Variable color ícono oscuro */
  --fp-bg-color: rgba(127,29,29,.85);      /* Color de required */ /* Variable color required oscuro */
  --fp-lb: #717579;                        /* Color del texto input */ /* Variable color texto input oscuro */

  /* ===== Editor Modal ===== */
  --editor-bg: var(--modal-bg);               /* Fondo principal del modal editor */ /* Variable heredada fondo editor oscuro */
  --editor-color: var(--modal-color);         /* Color del texto dentro del editor */ /* Variable heredada color texto editor oscuro */
  --editor-border: var(--modal-border);       /* Borde del modal editor */ /* Variable heredada borde editor oscuro */
  --editor-header-bg: var(--modal-header-bg); /* Fondo del header del editor */ /* Variable heredada fondo header editor oscuro */
  --editor-toolbar-bg: #020617;               /* Fondo de la barra de herramientas */ /* Variable fondo toolbar editor oscuro */
  --editor-btn-bg: var(--btn-bg);             /* Fondo de botones del editor */ /* Variable heredada fondo botones editor oscuro */
  --editor-btn-border: var(--btn-border);     /* Borde de botones */ /* Variable heredada borde botones editor oscuro */
  --editor-btn-color: white;                  /* Color del ícono/texto de botones */ /* Variable color botones editor oscuro */
  --editor-btn-hover-bg: #020617;             /* Fondo hover de botones */ /* Variable fondo hover botones editor oscuro */
  --editor-overlay: rgba(0,0,0,.85);          /* Fondo oscuro del overlay */ /* Variable fondo overlay editor oscuro */

  /* ===== MODAL DE CREDENCIALES (SIMPLE CREDENTIALS MODAL) ===== */
  --cred-bg: rgba(17, 25, 40, 0.95);             /* Fondo del card para tema oscuro */ /* Variable fondo card credenciales oscuro */
  --cred-input-bg: rgba(0, 0, 0, 0.3);           /* Fondo de campos en tema oscuro */ /* Variable fondo inputs credenciales oscuro */
  --cred-border: rgba(255, 255, 255, 0.08);      /* Borde más claro para resaltar sobre fondo oscuro */ /* Variable borde credenciales oscuro */
  --cred-text: #ffffff;                          /* Texto principal blanco */ /* Variable color texto principal oscuro */
  --cred-text-light: #e2e8f0;                    /* Texto secundario gris claro */ /* Variable color texto secundario oscuro */
  --cred-text-muted: rgba(255, 255, 255, 0.5);   /* Labels con opacidad para tema oscuro */ /* Variable color texto labels oscuro */
  --cred-accent: #3b82f6;                        /* Azul más brillante para tema oscuro */ /* Variable color acento oscuro */
  --cred-accent-light: rgba(59, 130, 246, 0.15); /* Fondo del badge con opacidad */ /* Variable fondo badge acento oscuro */
  --cred-accent-start: #3b82f6;                  /* Azul brillante para gradiente en dark */ /* Variable inicio gradiente oscuro */
  --cred-accent-end: #8b5cf6;                    /* Morado brillante para gradiente en dark */ /* Variable fin gradiente oscuro */
  --cred-success: #34d399;                       /* Verde más claro para mejor visibilidad en dark */ /* Variable color éxito oscuro */
  --cred-success-dark: #10b981;                  /* Verde medio para gradiente */ /* Variable color éxito oscuro medio */

  /* ===== Formularios ===== */
  --form-label-color: #ffffff;                   /* Color del texto de las etiquetas de formulario (labels) en tema oscuro */ /* Variable color labels formulario oscuro */

  /* ===== Card Sections ===== */
  --section-title-bg: #222f3e;                   /* Fondo del encabezado de la sección en la card (tema oscuro) */ /* Variable fondo títulos sección oscuro */
  --section-title-color: #b6bed1;                /* Color del texto de los títulos de sección dentro de cards (tema oscuro) */ /* Variable color títulos sección oscuro */
  --section-title-border: rgba(255,255,255,.08); /* Color del borde inferior del encabezado de sección (tema oscuro) */ /* Variable borde títulos sección oscuro */
  --section-border-card: #2c323f;  /* Color del borde de la card */ /* Variable borde card oscuro */

  /* ===== Flatpickr ===== */
  --flatpickr-bg: #191d24;                     /* Color del fondo */ /* Variable fondo flatpickr oscuro */

  /* ===== Accordion ===== */
  --accordion-icon-filter: invert(100%); /* 100% convierte negro en blanco */ /* Variable filtro iconos acordeón oscuro */
  --bs-border-color: #20242d;            /* Color del borde */ /* Variable color borde bootstrap oscuro */

  /* ===== Colores de letras ===== */
  --text-color: white;
}

/* ================================
   1. Campos de Entrada (input)
   ================================ */
input::-ms-reveal,  /** Oculta el ícono de mostrar contraseña en Internet Explorer y Edge */ /* Oculta el botón de revelar contraseña en IE/Edge */
input::-ms-clear {  /** Oculta el botón de limpiar campo en Internet Explorer y Edge */ /* Oculta el botón de limpiar campo en IE/Edge */
  display: none; /* Oculta completamente los elementos */
}

/* ================================
   2. Select2 (listas desplegables)
   ================================ */

/* ----------------
   Contenedor general
   ---------------- */
.select2-selection { /* Estilo para el contenedor de selección de Select2 */
  border-color: var(--select2-border-selection) !important; /* Color del borde usando variable con prioridad */
  box-shadow: none !important; /* Elimina cualquier sombra */
  background-color: var(--select2-background) !important; /* Color de fondo usando variable */
}

.select2-selection.error { /* Estilo para estado de error en Select2 */
  background-color: var(--select2-error) !important; /* Fondo de error usando variable */
}

/* Estado con foco */
.select2-selection:focus, /* Estilo para cuando el elemento tiene foco */
.select2-selection--focus { /* Estilo para clase de foco de Select2 */
  background-color: var(--select2-background-focus) !important; /* Fondo al recibir foco */
}

.select2-dropdown { /* Estilo para el dropdown desplegable de Select2 */
  border-color: var(--select2-border-selection) !important; /* Borde del select */ /* Color del borde del dropdown */
  background-color: var(--select2-background) !important;   /* Color de fondo del dropdown */ /* Fondo del dropdown */
}

/* ----------------
   Texto seleccionado (render)
   ---------------- */
.select2-container--default .select2-selection__rendered { /* Estilo para el texto renderizado en Select2 */
  max-width: calc(100% - 3.4rem); /* Evita que el texto se meta debajo del botón clear */ /* Ancho máximo dejando espacio para botón */
  white-space: nowrap;            /* No permite salto de línea */ /* Texto en una sola línea */
  overflow: hidden;               /* Oculta el exceso de texto */ /* Esconde contenido que desborda */
  text-overflow: ellipsis;        /* Agrega "..." al final */ /* Añade puntos suspensivos al final */
}

/* ----------------
   Botón clear (limpiar selección)
   ---------------- */
.select2-container--default .select2-selection__clear { /* Estilo para botón de limpiar selección */
  position: absolute; /* Posicionamiento absoluto */
  right: 0.5rem; /* Distancia desde la derecha */
  top: 50%; /* Posición superior al 50% */
  transform: translateY(-50%); /* Centrado vertical perfecto */
  width: 22px; /* Ancho del botón */
  height: 22px; /* Alto del botón */
  display: inline-flex; /* Visualización como flex en línea */
  align-items: center; /* Centrado vertical de contenido */
  justify-content: center; /* Centrado horizontal de contenido */
  cursor: pointer; /* Cambia el cursor a puntero */
  color: transparent !important; /* Oculta la "x" original */ /* Hace transparente el texto original */
}

/* Ícono basurero (Font Awesome Pro) */
.select2-container--default .select2-selection__clear::after { /* Pseudo-elemento para el ícono de limpiar */
  content: "\f2ed"; /* Código Unicode del ícono de basurero de Font Awesome */
  font: var(--fa-font-solid); /* Aplica la fuente sólida de Font Awesome */
  font-size: 14px; /* Tamaño del ícono */
  color: #dc3545; /* Color rojo del ícono */
  position: absolute; /* Posicionamiento absoluto */
}

/* ----------------
   Lista de opciones
   ---------------- */
.select2-results__option { /* Estilo para opciones en los resultados de Select2 */
  color: var(--select2-option-color) !important; /* Color base del texto */ /* Color de texto usando variable */
  word-wrap: break-word; /* Permite romper palabras largas */
  line-height: 1.4; /* Altura de línea */
}

/* Opción resaltada (hover / teclado) */
.select2-container--default
.select2-results__option--highlighted[aria-selected] { /* Opción resaltada por hover o navegación por teclado */
  color: #fff !important; /* Texto blanco */
  background-color: #0665D0 !important; /* Fondo azul */
}

/* Opción al pasar el mouse en las opciones */
.select2-container--default
.select2-results__option[aria-selected="true"] { /* Opción que tiene el atributo seleccionado */
  color: var(--select2-option-hover-color) !important; /* Color de texto hover usando variable */
  background-color: var(--select2-option-hover-bg) !important; /* Fondo hover usando variable */
}

/* Opcion seleccionada o marcada */
.select2-results__option--selected { /* Opción actualmente seleccionada */
  color: var(--select2-option-selected-color) !important; /* Color de texto para opción seleccionada */
  background-color: var(--select2-option-selected-bg) !important; /* Fondo para opción seleccionada */
}

.select2-results__option mark.soft-mark { /* Estilo para marcado suave dentro de opciones */
  background-color: rgba(255, 255, 0, 0.3); /* clásico amarillo */ /* Fondo amarillo semitransparente */
  color: inherit;                           /* mantiene el color original del texto */ /* Hereda el color del texto padre */
  padding: 0 2px;                           /* un poquito de espacio a los lados */ /* Espaciado horizontal */
  border-radius: 2px;                       /* bordes suaves */ /* Bordes redondeados */
}

.select2-search__field:focus { /* Estilo para campo de búsqueda de Select2 al recibir foco */
  border-color: var(--select2-search-hover) !important; /* Color del borde usando variable */
  box-shadow: none !important; /* Sin sombra */
  outline: none !important; /* Sin contorno */
}

/* Contenedor completo */
.select2-container--disabled {
  cursor: not-allowed !important; /* Cursor prohibido SIEMPRE visible */
}

/* Caja principal */
.select2-container--disabled .select2-selection {
  pointer-events: none;
}

.select2-container--default .select2-results>.select2-results__options {
  max-height: 150px !important;
  overflow-y: auto
}

/* ================================
   3. Animaciones (preferencia reducción)
   ================================ */
@media (prefers-reduced-motion: reduce) { /** Reduce animaciones para usuarios con preferencia de movimiento reducido */ /* Media query para preferencia de movimiento reducido */
  .fa-beat, .fa-beat-fade, .fa-bounce, .fa-fade, /** Aplica a todas las animaciones de Font Awesome */ /* Selectores de animaciones de Font Awesome */
  .fa-flip, .fa-pulse, .fa-shake, .fa-spin, .fa-spin-pulse { /* Continuación de selectores de animaciones */
    -webkit-animation-delay: var(--fa-animation-delay, 0) !important; /* Retardo de animación con variable */
    animation-delay: var(--fa-animation-delay, 0) !important; /* Retardo de animación */
    -webkit-animation-duration: var(--fa-animation-duration, 2s) !important; /* Duración de animación */
    animation-duration: var(--fa-animation-duration, 2s) !important; /* Duración de animación */
    -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite) !important; /* Número de iteraciones */
    animation-iteration-count: var(--fa-animation-iteration-count, infinite) !important; /* Número de iteraciones */
  }
}

/* ================================
   4. Ag Grid: Filas, Encabezados y Más
   ================================ */
.ag-row-number-cell { /** Estilo para celdas de números de fila en AG Grid */ /* Clase para celdas de números de fila */
  display: flex !important;           /** convierte la celda en un contenedor flex para alinear su contenido */ /* Display flex */
  align-items: center !important;     /** centra verticalmente el contenido dentro de la celda */ /* Centrado vertical */
  justify-content: center !important; /** centra horizontalmente el contenido dentro de la celda */ /* Centrado horizontal */
}

.ag-header-cell-sortable .ag-header-cell-label { /** Estilo para etiquetas de encabezados ordenables en AG Grid */ /* Estilo para labels de headers ordenables */
  display: flex !important;           /* hace que el contenido del header sea un contenedor flex */ /* Display flex */
  justify-content: center;            /* centra horizontalmente el contenido principal (texto + iconos) */ /* Centrado horizontal */
  align-items: center;                /* centra verticalmente el contenido principal */ /* Centrado vertical */
  position: relative;                 /* necesario para que los elementos absolutos dentro, como el indicador de ordenamiento, se posicionen respecto a este contenedor */ /* Posicionamiento relativo */
  white-space: nowrap;                /* evita que el texto se rompa en varias líneas */ /* Texto sin saltos */
  padding-right: 20px;                /* deja espacio a la derecha para que el sort indicator no se superponga al texto */ /* Padding derecho para espacio del indicador */
  overflow: hidden;                   /* corta cualquier contenido que se salga del contenedor evitando desbordes */ /* Oculta contenido desbordado */
}

.ag-header-cell-text { /** Estilo para texto en encabezados de AG Grid */ /* Estilo para texto en headers */
  display: inline-flex;               /** convierte el texto y el ícono en un contenedor inline-flex para mantenerlos en línea */ /* Display inline-flex */
  align-items: center;                /** centra verticalmente los elementos internos (texto + ícono) */ /* Centrado vertical */
  gap: 6px;                            /** espacio entre el ícono y el texto */ /* Espacio entre ícono y texto */
  text-overflow: ellipsis;            /** si el texto es demasiado largo, lo corta con "..." */ /* Puntos suspensivos */
  overflow: hidden;                   /** oculta el texto que se desborda del contenedor */ /* Oculta desbordamiento */
  white-space: nowrap;                /** evita que el texto se rompa en varias líneas */ /* Texto en una línea */
  min-width: 0;                        /** permite que el ellipsis funcione correctamente dentro de flex containers */ /* Ancho mínimo para permitir ellipsis */
}

.ag-sort-indicator-container { /** Contenedor para indicadores de ordenamiento en AG Grid */ /* Contenedor de indicadores de orden */
  position: absolute !important;       /** saca el indicador del flujo normal y lo posiciona de manera absoluta */ /* Posicionamiento absoluto */
  right: 4px;                          /** lo alinea a 4px del borde derecho del contenedor */ /* Alineado a la derecha */
  top: 50%;                            /** lo coloca verticalmente en el centro del contenedor */ /* Centrado vertical */
  transform: translateY(-50%);         /** ajusta el centro vertical exacto */ /* Ajuste fino de centrado */
}

.ag-tooltip { /** Estilo para tooltips en AG Grid */ /* Estilo para tooltips */
  max-width: 250px !important;        /** limita el ancho máximo del tooltip para que no sea demasiado grande */ /* Ancho máximo */
  font-size: 10.5pt !important;       /** define el tamaño de fuente del tooltip */ /* Tamaño de fuente */
  padding: 5px !important;            /** espacio interno dentro del tooltip */ /* Padding interno */
  word-wrap: break-word !important;   /** permite que las palabras largas se rompan y no se salgan del tooltip */ /* Rompe palabras largas */
  text-align: left !important;        /** alinea el texto del tooltip a la izquierda */ /* Alineación izquierda */
}

.ag-picker-field-display { /** Campo de visualización de selección en AG Grid */ /* Estilo para campo de visualización de selector */
  text-align: center; /* centrar el input de numero de registros en la hoja */ /* Centrado horizontal */
}

/* AG Grid – Filas alternadas por tema */
/*.ag-row-even {
  background-color: var(--ag-row-even-bg) !important;
  color: var(--ag-row-even-color) !important;
}*/

/*.ag-row-odd {
  background-color: var(--ag-row-odd-bg) !important;
  color: var(--ag-row-odd-color) !important;
}*/

/* ================================
   5. Badges: Libreria personalizada
   ================================ */
.badges { /** Contenedor principal para badges */ /* Contenedor de badges */
  display: flex !important; /* Display flex */
  flex-direction: column !important; /* Dirección columna */
  gap: 6px !important; /* Espaciado entre badges */
}

.badge { /** Estilo base para badges */ /* Clase base para badges */
  display: inline-flex !important; /* Display inline-flex */
  align-items: center !important; /* Centrado vertical */
  justify-content: center !important; /* Centrado horizontal */
  gap: 6px !important; /* Espacio entre elementos */
  border-radius: 6px !important; /* Bordes redondeados */
  font-weight: 600 !important; /* Grosor de fuente */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, /* Fuentes del sistema */
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji" !important; /* Continuación fuentes */
  line-height: 1 !important; /* Altura de línea */
  user-select: none !important; /* No seleccionable */
  white-space: nowrap !important; /* Sin saltos de línea */
  color: color-contrast(var(--dot) vs #000, #fff) !important; /* Color de contraste automático */
  min-width: 80px !important; /* Ancho mínimo */
  padding: 3px 12px !important; /* Padding interno */
}

/* Animación de latido */
@keyframes pulse-dot { /** Define animación de pulso para puntos de badges */ /* Animación para puntos de badges */
  0%, 100% { /* Inicio y fin de animación */
    transform: scale(1); /* Escala normal */
    opacity: 1; /* Opacidad completa */
  }
  50% { /* Mitad de la animación */
    transform: scale(1.4); /* Escala aumentada */
    opacity: 0.8; /* Opacidad reducida */
  }
}

/* Aplicar animación solo al dot */
.badge__dot { /** Estilo para puntos en badges */ /* Elemento punto dentro del badge */
  border-radius: 50% !important; /* Forma circular */
  background: var(--dot) !important; /* Fondo con variable */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06) !important; /* Sombra interna */
  flex-shrink: 0; /* Evita que se encoja */

  /* Efecto latido */
  animation: pulse-dot 1.5s ease-in-out infinite; /* Animación de pulso */
}

/* Texto */
.badge__label { /** Estilo para etiquetas de texto en badges */ /* Etiqueta de texto del badge */
  text-align: center; /* Centrado de texto */
}

/* Tamaños Badges */
.badge--sm { /** Badge tamaño pequeño */ /* Badge pequeño */
  font-size: 11px !important; /* Tamaño de fuente */
  padding: 3px 6px !important; /* Padding reducido */
  gap: 4px !important; /* Espacio reducido */
}
.badge--sm .badge__dot { /** Punto para badge tamaño pequeño */ /* Punto para badge pequeño */
  width: 6px !important; /* Ancho del punto */
  height: 6px !important; /* Alto del punto */
  flex: 0 0 6px !important; /* Flex basis */
}

.badge--md { /** Badge tamaño mediano */ /* Badge mediano */
  font-size: 13px !important; /* Tamaño de fuente */
  padding: 5px 8px !important; /* Padding mediano */
  gap: 6px !important; /* Espacio mediano */
}
.badge--md .badge__dot { /** Punto para badge tamaño mediano */ /* Punto para badge mediano */
  width: 8px !important; /* Ancho del punto */
  height: 8px !important; /* Alto del punto */
  flex: 0 0 8px !important; /* Flex basis */
}

.badge--lg { /** Badge tamaño grande */ /* Badge grande */
  font-size: 14px !important; /* Tamaño de fuente */
  padding: 6px 10px !important; /* Padding grande */
  gap: 7px !important; /* Espacio grande */
}
.badge--lg .badge__dot { /** Punto para badge tamaño grande */ /* Punto para badge grande */
  width: 10px !important; /* Ancho del punto */
  height: 10px !important; /* Alto del punto */
  flex: 0 0 10px !important; /* Flex basis */
}

.badge--xl { /** Badge tamaño extra grande */ /* Badge extra grande */
  font-size: 16px !important; /* Tamaño de fuente */
  padding: 8px 14px !important; /* Padding extra grande */
  gap: 8px !important; /* Espacio extra grande */
}
.badge--xl .badge__dot { /** Punto para badge tamaño extra grande */ /* Punto para badge extra grande */
  width: 12px !important; /* Ancho del punto */
  height: 12px !important; /* Alto del punto */
  flex: 0 0 12px !important; /* Flex basis */
}

/* Colores Badges usando variables root */
.dot-blue   { --dot: var(--dot-blue);   background: var(--dot-blue-bg);   border: 1px solid var(--dot); }   /** Badge azul */ /* Clase para badge azul */
.dot-purple { --dot: var(--dot-purple); background: var(--dot-purple-bg); border: 1px solid var(--dot); } /** Badge morado */ /* Clase para badge morado */
.dot-green  { --dot: var(--dot-green);  background: var(--dot-green-bg);  border: 1px solid var(--dot); }  /** Badge verde */ /* Clase para badge verde */
.dot-red    { --dot: var(--dot-red);    background: var(--dot-red-bg);    border: 1px solid var(--dot); }    /** Badge rojo */ /* Clase para badge rojo */
.dot-yellow { --dot: var(--dot-yellow); background: var(--dot-yellow-bg); border: 1px solid var(--dot); } /** Badge amarillo */ /* Clase para badge amarillo */
.dot-black  { --dot: var(--dot-black);  background: var(--dot-black-bg);  border: 1px solid var(--dot); }  /** Badge negro */ /* Clase para badge negro */
.dot-white  { --dot: var(--dot-white);  background: var(--dot-white-bg);  border: 1px solid var(--dot); }  /** Badge blanco */ /* Clase para badge blanco */

/* ================================
   6. Botones Ag Grid
   ================================ */
/* Botón tema claro */
.btn-agGrid-white { /** Botón AG Grid para tema claro */ /* Botón tema claro */
  background-color: var(--ag-button-background-color, #fff); /* Fondo con variable o blanco */
  border: 1px solid var(--ag-borders-secondary-color, #ccc); /* Borde con variable o gris */
  color: var(--ag-button-text-color, #000); /* Color texto con variable o negro */
  font-family: var(--ag-font-family, Arial, sans-serif); /* Fuente con variable o Arial */
  font-size: var(--ag-font-size, 14px); /* Tamaño fuente con variable */
  padding: 6px 12px; /* Padding interno */
  border-radius: 4px; /* Bordes redondeados */
  cursor: pointer; /* Cursor puntero */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
}
.btn-agGrid-white:hover { /** Efecto hover para botón tema claro */ /* Hover botón tema claro */
  background-color: var(--ag-button-hover-background-color, #d9e5f3); /* Fondo hover con variable */
  color: var(--ag-button-text-color, #000); /* Color texto hover */
}

/* Botón tema oscuro */
.btn-agGrid-dark { /** Botón AG Grid para tema oscuro */ /* Botón tema oscuro */
  background-color: var(--ag-button-background-color, #2e3b4e); /* Fondo oscuro con variable */
  border: 1px solid var(--ag-borders-secondary-color, #555); /* Borde oscuro */
  color: var(--ag-button-text-color, #f0f0f0); /* Color texto claro */
  font-family: var(--ag-font-family, Arial, sans-serif); /* Fuente */
  font-size: var(--ag-font-size, 14px); /* Tamaño fuente */
  padding: 6px 12px; /* Padding */
  border-radius: 4px; /* Bordes */
  cursor: pointer; /* Puntero */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transición */
}
.btn-agGrid-dark:hover { /** Efecto hover para botón tema oscuro */ /* Hover botón tema oscuro */
  background-color: var(--ag-button-hover-background-color, #3c4d62); /* Fondo hover */
  color: var(--ag-button-text-color, #f0f0f0); /* Color texto hover */
}

/* Botón tema claro dentro de Ag Grid */
.btn-inside-agGrid-white { /** Botón interno AG Grid para tema claro */ /* Botón interno tema claro */
  background-color: var(--ag-button-background-color, #fff); /* Fondo claro */
  border: 1px solid var(--ag-borders-secondary-color, #ccc); /* Borde */
  color: var(--ag-button-text-color, #000); /* Color texto */
  font-family: var(--ag-font-family, Arial, sans-serif); /* Fuente */
  font-size: var(--ag-font-size, 14px); /* Tamaño */
  width: 100%; /* Ancho completo */
  height: 30px; /* Alto fijo */
  border-radius: 4px; /* Bordes */
  cursor: pointer; /* Puntero */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transición */
}
.btn-inside-agGrid-white:hover { /** Efecto hover para botón interno tema claro */ /* Hover botón interno claro */
  background-color: var(--ag-button-hover-background-color, #d9e5f3); /* Fondo hover */
  color: var(--ag-button-text-color, #000); /* Color texto hover */
}

/* Botón tema oscuro dentro de Ag Grid */
.btn-inside-agGrid-dark { /** Botón interno AG Grid para tema oscuro */ /* Botón interno tema oscuro */
  background-color: var(--ag-button-background-color, #2e3b4e); /* Fondo oscuro */
  border: 1px solid var(--ag-borders-secondary-color, #555); /* Borde oscuro */
  color: var(--ag-button-text-color, #f0f0f0); /* Color texto claro */
  font-family: var(--ag-font-family, Arial, sans-serif); /* Fuente */
  font-size: var(--ag-font-size, 14px); /* Tamaño */
  width: 100%; /* Ancho completo */
  height: 30px; /* Alto fijo */
  border-radius: 4px; /* Bordes */
  cursor: pointer; /* Puntero */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transición */
}
.btn-inside-agGrid-dark:hover { /** Efecto hover para botón interno tema oscuro */ /* Hover botón interno oscuro */
  background-color: var(--ag-button-hover-background-color, #3c4d62); /* Fondo hover */
  color: var(--ag-button-text-color, #f0f0f0); /* Color texto hover */
}

/* ================================
   7. Tamaños personalizados para botones
   ================================ */
.btnx-xs { /** Botón extra pequeño */ /* Botón extra pequeño */
  width: 18px !important; /* Ancho */
  height: 18px !important; /* Alto */
  font-size: 9px !important; /* Tamaño fuente */
}
.btnx-xs i { /** Iconos para botón extra pequeño */ /* Iconos dentro de botón extra pequeño */
  font-size: 11px !important; /* Tamaño ícono */
}

.btnx-sm { /** Botón pequeño */ /* Botón pequeño */
  width: 22px !important; /* Ancho */
  height: 22px !important; /* Alto */
  font-size: 10px !important; /* Tamaño fuente */
}
.btnx-sm i { /** Iconos para botón pequeño */ /* Iconos botón pequeño */
  font-size: 12px !important; /* Tamaño ícono */
}

.btnx-md { /** Botón mediano */ /* Botón mediano */
  width: 28px !important; /* Ancho */
  height: 28px !important; /* Alto */
  font-size: 12px !important; /* Tamaño fuente */
}
.btnx-md i { /** Iconos para botón mediano */ /* Iconos botón mediano */
  font-size: 14px !important; /* Tamaño ícono */
}

.btnx-lg { /** Botón grande */ /* Botón grande */
  width: 36px !important; /* Ancho */
  height: 36px !important; /* Alto */
  font-size: 14px !important; /* Tamaño fuente */
}
.btnx-lg i { /** Iconos para botón grande */ /* Iconos botón grande */
  font-size: 16px !important; /* Tamaño ícono */
}

/* ================================
   8. Utilidades Generales
   ================================ */
.no-select { /** Evita selección de texto */ /* Clase para evitar selección */
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none; /* Estándar */
}

.no-text-cursor-select { /* Clase para evitar selección de cursor de texto */
  user-select: none; /* No seleccionable */
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none; /* Firefox */
  /*caret-color: transparent;*/ /* Comentado, podría ocultar cursor */
}

.no-text-cursor-select::selection { /* Para selección dentro del elemento */
  background: transparent; /* Fondo transparente al seleccionar */
}

.truncated-text { /** Texto truncado con puntos suspensivos */ /* Clase para texto truncado */
  white-space: nowrap !important; /* Sin saltos */
  overflow: hidden !important; /* Oculta desbordamiento */
  text-overflow: ellipsis !important; /* Puntos suspensivos */
}

.text-justify { /** Texto justificado */ /* Clase para texto justificado */
  text-align: justify; /* Alineación justificada */
}

/* ================================
   9. Botones compactos (<span> integrado)
   ================================ */
.compact-input-group { /** Grupo de entrada compacto */ /* Grupo de input compacto */
  display: flex; /* Flexbox */
  align-items: stretch; /* Estira items para misma altura */
}

.compact-input-group .compact-btn { /** Botón compacto */ /* Botón dentro de grupo compacto */
  cursor: pointer; /* Puntero */
  user-select: none; /* No seleccionable */
  height: auto; /* Alto automático */
  padding: 0 10px; /* Padding horizontal */
  display: inline-flex; /* Flex en línea */
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  border-radius: 0.375rem; /* Bordes redondeados */
  border: 1px solid #ced4da; /* Borde gris */
  margin-left: -1px; /* Margen negativo para unir con input */
  box-shadow: none; /* Sin sombra */
  outline: none; /* Sin contorno */
}

.compact-input-group .compact-btn-primary { /** Botón compacto primario */ /* Botón primario compacto */
  background: linear-gradient(180deg, #1A7BE6, #044A9C); /* Gradiente azul */
  border-color: #044A9C; /* Color borde */
  color: #ffffff; /* Texto blanco */
}

.compact-input-group .compact-btn-primary i { /** Iconos para botón compacto primario */ /* Iconos en botón primario */
  color: #fff !important; /* Color blanco */
}

.compact-input-group .compact-btn:hover { /** Efecto hover para botón compacto */ /* Hover botón compacto */
  background-color: #e9ecef; /* Fondo gris claro */
}

.compact-input-group .compact-btn-primary:hover { /** Efecto hover para botón compacto primario */ /* Hover botón primario */
  background: linear-gradient(180deg, #1F86F2, #033F85); /* Gradiente más oscuro */
}

.compact-input-group .compact-btn:focus, /** Estados focus y active para botón compacto */ /* Focus botón compacto */
.compact-input-group .compact-btn:active { /* Active botón compacto */
  outline: none; /* Sin contorno */
  box-shadow: none; /* Sin sombra */
}

.compact-input-group .input-group-text, /** Estilos para texto de grupo de entrada y controles de formulario */ /* Texto de grupo input */
.compact-input-group .form-control { /* Control de formulario */
  border-color: rgba(0, 0, 0, 0.15) !important; /* Color borde semitransparente */
}

@media (max-width: 575.98px) { /** Estilos responsivos para pantallas muy pequeñas */ /* Media query para móvil */
  .compact-input-group .compact-btn { /* Botón compacto en móvil */
    font-size: 13px; /* Tamaño fuente */
    padding: 0 8px; /* Padding reducido */
  }
}

.simple-input-icon { /* Color del icono del input */ /* Clase para ícono en input */
  color: var(--simple-input-icon-color); /* Color usando variable */
}

/* ================================
   10. Global Focus & Reset
   ================================ */
/* Focus y active unificado para inputs, textarea, select, button y .form-control */
.form-control:focus, /* Estilo para focus en form-control */
.form-select:focus, /* Focus en form-select */
input:focus, /* Focus en input */
textarea:focus, /* Focus en textarea */
select:focus { /* Focus en select */
  outline: none !important; /* Sin contorno */
  box-shadow: none !important; /* Sin sombra */
  border-color: var(--input-focus-border) !important; /* Color borde con variable */
}

/* Reset anillo de focus en WebKit */
input::-webkit-focus-ring-color, /* Para inputs en WebKit */
textarea::-webkit-focus-ring-color, /* Para textareas en WebKit */
select::-webkit-focus-ring-color { /* Para selects en WebKit */
  color: transparent; /* Color transparente */
  background: transparent; /* Fondo transparente */
  -webkit-focus-ring-color: rgba(0, 0, 0, 0) !important; /* Anillo de foco transparente */
}

/* Prevención de tap highlights para todos los elementos */
*, *::before, *::after { /* Todos los elementos y pseudoelementos */
  -webkit-tap-highlight-color: transparent; /* Color de tap highlight transparente */
}

/* Box-sizing consistente para controles de formulario */
input, /* Todos los inputs */
textarea, /* Todos los textareas */
select, /* Todos los selects */
button, /* Todos los botones */
.form-control { /* Clase form-control */
  box-sizing: border-box !important; /* Box-sizing border-box */
}

/* ================================
   11. Colores
   ================================ */
.color-blue { /** Clase para color azul */ /* Clase de color azul */
  background: #2967c3 !important; /* Fondo azul */
  color: white !important; /* Texto blanco */
}

.color-blue * { /** Todos los elementos hijos con color azul */ /* Todos los hijos de .color-blue */
  color: white !important; /* Texto blanco */
}

/* ================================
   12. Lightbox: Libreria de galeria
   ================================ */
.lightbox, /** Prevención de selección de usuario para lightbox */ /* Lightbox */
.lightbox * { /** Todos los elementos dentro de lightbox */
  user-select: none; /* No seleccionable */
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}

.lightbox img { /** Prevención de interacciones con imágenes en lightbox */ /* Imágenes dentro de lightbox */
  pointer-events: none; /* No eventos de ratón */
  -webkit-user-drag: none; /* No arrastrable en Safari */
}

/* ================================
   13. AG Grid Buttons: Botones dentro de la tabla
   ================================ */
.button-group { /** Grupo de botones */ /* Grupo de botones */
  display: flex; /* Flexbox */
  gap: 6px; /* Espacio entre botones */
  justify-content: center; /* Centrado horizontal */
  align-items: center; /* Centrado vertical */
}

.btn-standard { /** Botón estándar */ /* Botón estándar */
  display: inline-flex; /* Flex en línea */
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  width: 28px; /* Ancho fijo */
  height: 28px; /* Alto fijo */
  padding: 0; /* Sin padding */
  border: 1px solid var(--btn-border); /* Borde con variable */
  border-radius: 6px; /* Bordes redondeados */
  background: var(--btn-bg); /* Fondo con variable */
  color: var(--btn-color); /* Color texto con variable */
  font-size: 12px; /* Tamaño fuente */
  cursor: pointer; /* Puntero */
  /*transition: all 0.2s ease-in-out;*/ /* Comentado, podría tener transición */
}

.btn-standard i { /** Iconos para botón estándar */ /* Iconos dentro de botón estándar */
  font-size: 14px; /* Tamaño ícono */
}

.btn-standard:disabled { /** Botón estándar deshabilitado */ /* Botón deshabilitado */
  opacity: 0.5; /* Opacidad reducida */
  cursor: not-allowed; /* Cursor no permitido */
}

/* ================================
   14. Fondo del index
   ================================ */
.bg-image { /** Imagen de fondo */ /* Clase para imagen de fondo */
  position: relative; /* Posición relativa */
}

.overlay { /** Overlay para imagen de fondo */ /* Overlay */
  position: absolute; /* Posición absoluta */
  top: 0; /* Arriba */
  left: 0; /* Izquierda */
  width: 100%; /* Ancho completo */
  height: 100%; /* Alto completo */
  background: rgba(69, 97, 157, 0.7); /* Fondo azul semitransparente */
  z-index: 1; /* Capa 1 */
}

.p-3 { /** Contenedor con padding */ /* Clase con padding */
  position: relative; /* Posición relativa */
  z-index: 2; /* Capa 2 */
}

/* ================================
   14. Evitar interaciones del usuario
   ================================ */

.no-copy { /** Clase para prevenir copia y selección */ /* Clase para evitar copia */
  /* Evita selección de texto */
  -webkit-user-select: none; /* Chrome, Safari */ /* No selección Safari */
  -moz-user-select: none;    /* Firefox */ /* No selección Firefox */
  -ms-user-select: none;     /* IE/Edge antiguos */ /* No selección IE */
  -webkit-touch-callout: none; /* iOS */ /* No menú contextual iOS */
  user-select: none; /* No selección */

  /* Evita arrastrar contenido (imágenes, texto) */
  -webkit-user-drag: none; /* No arrastrar Safari */

  /* Evita menú contextual (click derecho) */
  pointer-events: auto; /* Eventos de puntero automáticos */
}

/* ================================
   15. Prohibir el uso de impresiones
   ================================ */

@media print { /** Estilos específicos para impresión */ /* Media query para impresión */

  /* Oculta todo el contenido */
  body * { /* Todos los elementos dentro de body */
    display: none !important; /* Ocultos al imprimir */
  }

  /* Logo centrado y vertical */
  body::before { /** Logo que aparece al imprimir */ /* Pseudo-elemento antes de body */
    content: url("/assets/media/various/logotipo.webp"); /* Contenido imagen logo */
    position: fixed; /* Fijo en pantalla */
    top: 40%; /* 40% desde arriba */
    left: 50%; /* 50% desde izquierda */
    transform: translate(-50%, -50%) scale(0.4); /* Centrado y escalado */
    opacity: 0.3; /* Opacidad reducida */
  }

  /* Texto centrado y vertical */
  body::after { /** Texto que aparece al imprimir */ /* Pseudo-elemento después de body */
    content: "PROHIBIDO LAS IMPRESIONES"; /* Texto de advertencia */
    position: fixed; /* Fijo */
    top: 65%; /* 65% desde arriba */
    left: 50%; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Centrado exacto */
    font-size: 42px; /* Tamaño fuente grande */
    font-weight: bold; /* Negrita */
    color: rgba(0, 0, 0, 0.35); /* Negro semitransparente */
    white-space: nowrap; /* Sin saltos */
  }
}

/* ================================
   16. Alineaciones de texto
   ================================ */

.justify-left { /** Texto justificado con alineación izquierda */ /* Justificado con última línea izquierda */
  text-align: justify !important; /* Texto justificado */
  text-justify: inter-word !important; /* Justificado entre palabras */
  text-align-last: left !important; /* Última línea izquierda */
  hyphens: auto !important; /* Separación silábica automática */
}

/* ================================
   17. Efectos de dropdown
   ================================ */

.dropdown-toggle::after { /** Transición para flecha de dropdown */ /* Pseudo-elemento flecha dropdown */
  transition: transform 0.2s ease; /* Transición suave */
}

.dropdown-toggle[aria-expanded="true"]::after { /** Rotación de flecha cuando dropdown está expandido */ /* Flecha cuando está expandido */
  transform: rotate(180deg); /* Rotación 180 grados */
}

/* ================================
   18. Responsabilidad para movil
   ================================ */

/*Ocultar contenido que no sea para desktop*/
@media (max-width: 767.98px) { /** Ocultar elementos en dispositivos móviles */ /* Media query móvil */
  .desktop { /* Elementos de escritorio */
    display: none !important; /* Ocultos en móvil */
  }
  .ag-paging-row-summary-panel{ /** Ocultar panel de resumen de paginación en AG Grid en móviles */ /* Panel resumen paginación */
    display: none !important; /* Oculto en móvil */
  }
}

/* ================================
   19. Arreglar AG Grid bug en chrome scroll
   ================================ */

.ag-horizontal-left-spacer, .ag-horizontal-right-spacer { /** Ocultar espaciadores horizontales en AG Grid */ /* Espaciadores horizontales */
    visibility: hidden; /* Ocultos */
}

.ag-body-horizontal-scroll-viewport { /** Scroll horizontal para viewport de AG Grid */ /* Viewport scroll horizontal */
    overflow-x: auto; /* Scroll horizontal automático */
}

/* ================================
   19. Formateos de celdas Ag grid enlaces
   ================================ */

/*.link-email,
.link-phone,
.link-maps {
  text-decoration: none;
  font-weight: 500;
}*/

.link-email { color: var(--link-email) !important; } /** Color para enlace de email */ /* Color email */
.link-phone { color: var(--link-phone) !important;  letter-spacing: 0.1em;} /** Color para enlace de teléfono */ /* Color teléfono y espaciado */
.link-maps  { color: var(--link-maps) !important; }  /** Color para enlace de mapas */ /* Color mapas */

.link-email:hover, /** Efecto hover para enlaces */ /* Hover enlaces email */
.link-phone:hover, /* Hover enlaces teléfono */
.link-maps:hover { /* Hover enlaces mapas */
  text-decoration: underline; /* Subrayado al hover */
}

/* ================================
   20. Custom AG Grid Header
   ================================ */

.custom-header { /** Encabezado personalizado para AG Grid */ /* Header personalizado */
  display: inline-flex; /* Flex en línea */
  align-items: center; /* Centrado vertical */
  gap: var(--ag-header-gap); /* Espacio con variable */
  vertical-align: middle; /* Alineación vertical media */
  white-space: nowrap; /* Sin saltos */
}

.custom-header-icon { /** Icono para encabezado personalizado */ /* Icono header */
  display: flex; /* Flex */
  align-items: center; /* Centrado vertical */
  line-height: 1; /* Altura línea */
}

.custom-header-icon i { /** Estilo para iconos en encabezado personalizado */ /* Ícono dentro de header */
  font-size: var(--ag-header-icon-size); /* Tamaño variable */
  color: var(--ag-header-icon-color); /* Color variable */
  padding-bottom: var(--ag-header-icon-offset); /* Padding inferior con variable */
}

.custom-header-text { /** Texto para encabezado personalizado */ /* Texto header */
  font-size: var(--ag-header-text-size); /* Tamaño variable */
  line-height: var(--ag-header-line-height); /* Altura línea variable */
  color: var(--ag-header-text-color); /* Color variable */
  display: flex; /* Flex */
  align-items: center; /* Centrado vertical */
  overflow: hidden; /* Oculta desbordamiento */
  text-overflow: ellipsis; /* Puntos suspensivos */
}

.custom-tooltip { /** Tooltip personalizado */ /* Tooltip personalizado */
  padding: 10px 12px; /* Padding */
  border-radius: 6px; /* Bordes */
  background-color: var(--tooltip-bg); /* Fondo variable */
  border: 1px solid var(--tooltip-border); /* Borde variable */
  color: var(--tooltip-text); /* Color texto variable */
  font-family: Arial, Helvetica, sans-serif; /* Fuente */
  font-size: 13px; /* Tamaño */
  max-width: 240px; /* Ancho máximo */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); /* Sombra */
  white-space: normal; /* Saltos normales */
}

.custom-tooltip__title { /** Título para tooltip personalizado */ /* Título tooltip */
  font-weight: 600; /* Negrita */
  font-size: 14px; /* Tamaño */
  margin-bottom: 4px; /* Margen inferior */
  color: var(--tooltip-title); /* Color variable */
}

.custom-tooltip__content { /** Contenido para tooltip personalizado */ /* Contenido tooltip */
  font-weight: 400; /* Normal */
  color: var(--tooltip-text); /* Color variable */
  word-break: normal; /* Sin forzar saltos */
  overflow-wrap: break-word; /* Rompe palabras si es necesario */
  white-space: normal; /* Saltos normales */
}

/* ========================================
   21. WINBOX MODAL (OPTIMIZADO)
   ======================================== */

/* ================================
   CONTENEDOR PRINCIPAL
   ================================ */
.winbox.app-modal, /* Clase para winbox modal app */
.winbox.modern { /* Clase para winbox modern */
  border-radius: var(--winbox-radius, 18px); /* Radio variable o 18px */
  overflow: hidden !important; /* Oculta desbordamiento */
  background: var(--modal-header-bg, linear-gradient(150deg, #2a3f7a, #1a2a4a)) !important; /* Fondo gradiente */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Sombra */
  animation: popup 0.3s ease forwards; /* Animación de aparición */
}

/* Maximizado */
.winbox.app-modal.max, /* Winbox maximizado */
.winbox.modern.max { /* Winbox modern maximizado */
  border-radius: 0 !important; /* Sin bordes redondeados */
}

/* ================================
   HEADER
   ================================ */
.winbox.app-modal .wb-header, /* Header de winbox app modal */
.winbox.modern .wb-header { /* Header de winbox modern */
  background: var(--modal-header-bg, linear-gradient(150deg, #2a3f7a, #1a2a4a)) !important; /* Fondo gradiente */
  border-bottom: 1px solid var(--modal-border, rgba(255,255,255,0.08)); /* Borde inferior */
}

/* Drag */
.winbox.app-modal .wb-drag { /* Área de arrastre */
  cursor: default; /* Cursor por defecto */
  -webkit-user-select: none; /* Chrome, Safari */ /* No selección Safari */
  -moz-user-select: none;    /* Firefox */ /* No selección Firefox */
  -ms-user-select: none;     /* IE/Edge antiguos */ /* No selección IE */
  -webkit-touch-callout: none; /* iOS */ /* No menú contextual iOS */
  user-select: none; /* No selección */
  -webkit-user-drag: none; /* No arrastrar Safari */
  pointer-events: auto; /* Eventos de puntero automáticos */
}

/* ================================
   TÍTULO
   ================================ */
.winbox.app-modal .wb-title, /* Título en winbox app modal */
.winbox.modern .wb-title { /* Título en winbox modern */
  color: white !important; /* Color blanco */
  font-size: 14px; /* Tamaño */
  font-weight: 600; /* Negrita */
  padding-left: 16px; /* Padding izquierdo */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Sombra texto */
}

/* ================================
   BODY
   ================================ */
.winbox.app-modal .wb-body, /* Cuerpo en winbox app modal */
.winbox.modern .wb-body { /* Cuerpo en winbox modern */
  margin: 0 !important; /* Sin margen */
  overflow: hidden !important; /* Oculta desbordamiento */
  background: var(--modal-bg, transparent); /* Fondo variable */
  color: var(--modal-color, white); /* Color variable */
  font-family: Arial, sans-serif; /* Fuente */
  font-size: 12pt; /* Tamaño */
}

/* Contenedor interno sin scroll */
.winbox.app-modal .wb-body > div, /* Contenedor dentro del body */
.winbox.modern .wb-body > div { /* Contenedor dentro del body modern */
  height: 100%; /* Alto 100% */
  overflow: hidden; /* Sin scroll */
}

/* ================================
   SCROLL SOLO EN MODAL_BODY
   ================================ */
.winbox.app-modal #modal_body, /* Elemento con id modal_body */
.winbox.modern #modal_body { /* Elemento con id modal_body en modern */
  height: 100%; /* Alto 100% */
  overflow-y: auto !important; /* Scroll vertical */
  -webkit-overflow-scrolling: touch; /* Scroll suave iOS */

  /* Firefox */
  scrollbar-width: auto; /* Ancho scrollbar */
  scrollbar-color: var(--scrollbar-thumb, var(--cred-accent, #3b82f6)) /* Color thumb scrollbar */
                   var(--scrollbar-track, rgba(0, 0, 0, 0.05)); /* Color track scrollbar */
}

/* ================================
   CONTROLES
   ================================ */
.winbox.app-modal .wb-control, /* Controles en winbox app modal */
.winbox.modern .wb-control { /* Controles en winbox modern */
  padding-right: 16px; /* Padding derecho */
}

.winbox.app-modal .wb-control *, /** Todos los elementos dentro de controles */
.winbox.modern .wb-control * { /** Todos los elementos dentro de controles modern */
  opacity: 0.9; /* Opacidad */
  margin-left: 4px; /* Margen izquierdo */
  transition: opacity 0.15s ease; /* Transición */
}

.winbox.app-modal .wb-control *:hover, /* Hover en controles */
.winbox.modern .wb-control *:hover { /* Hover en controles modern */
  opacity: 1; /* Opacidad completa */
}

/* ================================
   BOTONES
   ================================ */
/* Base común */
.winbox.app-modal #btn-limpiar, /* Botón limpiar */
.winbox.app-modal #btn-guardar, /* Botón guardar */
.winbox.modern #btn-limpiar, /* Botón limpiar modern */
.winbox.modern #btn-guardar { /* Botón guardar modern */
  display: inline-flex !important; /* Flex en línea */
  align-items: center !important; /* Centrado vertical */
  justify-content: center !important; /* Centrado horizontal */
  gap: 0.55rem !important;          /* un poco más separación entre icono y texto */ /* Espacio icono-texto */
  min-width: 100px !important;       /* ligeramente más ancho */ /* Ancho mínimo */
  padding: 0.55rem 1.1rem !important; /* más alto y ancho */ /* Padding */
  border-radius: 12px !important; /* Bordes */
  font-size: 0.9rem !important;      /* ligeramente más grande */ /* Tamaño */
  font-weight: 500; /* Grosor */
  cursor: pointer; /* Puntero */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Transición */
}

/* Botón primario - Guardar */
.winbox.app-modal #btn-guardar, /* Botón guardar */
.winbox.modern #btn-guardar { /* Botón guardar modern */
  background: var(--nf-ok-bg) !important; /* Fondo variable */
  color: #f8f8f8 !important; /* Color texto */
  border: none !important; /* Sin borde */
}

.winbox.app-modal #btn-guardar:hover, /* Hover guardar */
.winbox.modern #btn-guardar:hover { /* Hover guardar modern */
  transform: translateY(-2px); /* Elevación */
  filter: brightness(1.05); /* Brillo */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Sombra */
}

.winbox.app-modal #btn-guardar:active, /* Active guardar */
.winbox.modern #btn-guardar:active { /* Active guardar modern */
  transform: translateY(0); /* Vuelve a posición */
}

/* Botón secundario - Limpiar */
.winbox.app-modal #btn-limpiar, /* Botón limpiar */
.winbox.modern #btn-limpiar { /* Botón limpiar modern */
  background: var(--nf-cancel-bg) !important; /* Fondo variable */
  color: #f8f8f8 !important; /* Color texto */
  border: none !important; /* Sin borde */
}

.winbox.app-modal #btn-limpiar:hover, /* Hover limpiar */
.winbox.modern #btn-limpiar:hover { /* Hover limpiar modern */
  transform: translateY(-2px); /* Elevación */
  filter: brightness(1.05); /* Brillo */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Sombra */
}

.winbox.app-modal #btn-limpiar:active, /* Active limpiar */
.winbox.modern #btn-limpiar:active { /* Active limpiar modern */
  transform: translateY(0); /* Vuelve */
}

/* Iconos dentro de botones */
.winbox.app-modal #btn-limpiar i, /* Ícono limpiar */
.winbox.app-modal #btn-guardar i, /* Ícono guardar */
.winbox.modern #btn-limpiar i, /* Ícono limpiar modern */
.winbox.modern #btn-guardar i { /* Ícono guardar modern */
  font-size: 0.9rem; /* Tamaño */
  color: var(--cred-text-muted, rgba(255,255,255,0.8)); /* Color variable */
}

.winbox.app-modal #btn-limpiar:hover i, /* Hover ícono limpiar */
.winbox.app-modal #btn-guardar:hover i, /* Hover ícono guardar */
.winbox.modern #btn-limpiar:hover i, /* Hover ícono limpiar modern */
.winbox.modern #btn-guardar:hover i { /* Hover ícono guardar modern */
  color: var(--cred-accent, #3b82f6); /* Color variable */
}

/* ================================
   SCROLLBAR (WebKit)
   ================================ */
.winbox.app-modal #modal_body::-webkit-scrollbar, /* Scrollbar webkit en modal_body */
.winbox.modern #modal_body::-webkit-scrollbar { /* Scrollbar webkit en modal_body modern */
  width: 8px; /* Ancho */
}

.winbox.app-modal #modal_body::-webkit-scrollbar-track, /* Track scrollbar */
.winbox.modern #modal_body::-webkit-scrollbar-track { /* Track scrollbar modern */
  background: var(--scrollbar-track, rgba(0, 0, 0, 0.05)); /* Fondo variable */
  border-radius: 4px; /* Bordes */
}

.winbox.app-modal #modal_body::-webkit-scrollbar-thumb, /* Thumb scrollbar */
.winbox.modern #modal_body::-webkit-scrollbar-thumb { /* Thumb scrollbar modern */
  background: var(--scrollbar-thumb, var(--cred-accent, #3b82f6)); /* Fondo variable */
  border-radius: 4px; /* Bordes */
}

.winbox.app-modal #modal_body::-webkit-scrollbar-thumb:hover, /* Hover thumb scrollbar */
.winbox.modern #modal_body::-webkit-scrollbar-thumb:hover { /* Hover thumb scrollbar modern */
  background: var(--scrollbar-thumb-hover, #2563eb); /* Fondo hover variable */
}

/* ================================
   RESPONSIVE
   ================================ */
/* Responsive: botón ancho completo en móvil */
@media (max-width: 768px) { /* Media query móvil */
  .winbox.app-modal #btn-limpiar, /* Botón limpiar */
  .winbox.app-modal #btn-guardar, /* Botón guardar */
  .winbox.modern #btn-limpiar, /* Botón limpiar modern */
  .winbox.modern #btn-guardar { /* Botón guardar modern */
    width: 100% !important; /* Ancho completo */
  }
}

/* ================================
  22. AG GRID - CUSTOM OVERLAY
   ================================ */

.ag-custom-overlay { /* Overlay personalizado AG Grid */
  display: flex; /* Flex */
  flex-direction: column; /* Columna */
  align-items: center; /* Centrado horizontal */
  justify-content: center; /* Centrado vertical */
  height: 100%; /* Alto 100% */
  text-align: center; /* Texto centrado */
  font-family: var(--ag-overlay-font-family); /* Fuente variable */
  color: var(--ag-overlay-text-color); /* Color variable */
  padding: 20px; /* Padding */
  box-sizing: border-box; /* Box-sizing border-box */
}

.ag-custom-overlay__image { /* Imagen en overlay */
  margin-bottom: 20px; /* Margen inferior */
  display: flex; /* Flex */
  justify-content: center; /* Centrado */
  width: 100%; /* Ancho completo */
}

.ag-custom-overlay__image img { /* Imagen dentro de overlay */
  max-width: 150px; /* Ancho máximo */
  max-height: 150px; /* Alto máximo */
  width: auto; /* Ancho automático */
  height: auto; /* Alto automático */
}

.ag-custom-overlay__text { /* Texto en overlay */
  font-size: 14px; /* Tamaño */
  word-wrap: break-word; /* Rompe palabras */
}

/* ================================
  23. TIPPY TOOLTIP - TEMA CUSTOM
   ================================ */

.tippy-box[data-theme~='custom'] { /* Caja tippy con tema custom */
  background-color: var(--tooltip-bg); /* Fondo variable */
  border: 1px solid var(--tooltip-border); /* Borde variable */
  color: var(--tooltip-text); /* Color variable */
  border-radius: 6px; /* Bordes */
  font-size: 13px; /* Tamaño */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); /* Sombra */
}

.tippy-box[data-theme~='custom'] .tippy-content { /* Contenido tippy */
  padding: 10px 12px; /* Padding */
}

/* Arrow sincronizado con el tema */
.tippy-box[data-theme~='custom'][data-placement^='top'] > .tippy-arrow::before { /* Flecha arriba */
  border-top-color: var(--tooltip-bg); /* Color variable */
}

.tippy-box[data-theme~='custom'][data-placement^='bottom'] > .tippy-arrow::before { /* Flecha abajo */
  border-bottom-color: var(--tooltip-bg); /* Color variable */
}

.tippy-box[data-theme~='custom'][data-placement^='left'] > .tippy-arrow::before { /* Flecha izquierda */
  border-left-color: var(--tooltip-bg); /* Color variable */
}

.tippy-box[data-theme~='custom'][data-placement^='right'] > .tippy-arrow::before { /* Flecha derecha */
  border-right-color: var(--tooltip-bg); /* Color variable */
}

/* ================================
  24. Badget de validaciones inputs
   ================================ */

.input-status-container { /* Contenedor de estado input */
  display: grid; /* Grid */
  grid-template-columns: 1fr auto; /* error a la izquierda, badge a la derecha */ /* Columnas: 1fr y auto */
  align-items: start; /* Alinear al inicio */
  gap: 0.5rem; /* separación entre columnas */ /* Espacio entre columnas */
  margin-top: 0.25rem; /* Margen superior */
}

.error { /* Clase error */
  grid-column: 1 / 2; /* Columna 1 */
}

.has-value { /* Clase tiene valor */
  grid-column: 2 / 3; /* Columna 2 */
  justify-self: end; /* fija a la derecha */ /* Justificado al final */
}

/* --- Responsivo: móvil --- */
@media (max-width: 576px) { /* Media query móvil */
  .input-status-container { /* Contenedor estado */
    grid-template-columns: 1fr; /* solo una columna */ /* Una columna */
    gap: 0.25rem; /* Espacio reducido */
  }

  .error { /* Clase error */
    grid-column: 1 / 2; /* ocupa toda la fila */ /* Columna 1 */
  }

  .has-value { /* Clase tiene valor */
    grid-column: 1 / 2; /* debajo del error */ /* Columna 1 */
    justify-self: start; /* se puede dejar a la izquierda, o cambiar a center/derecha */ /* Justificado inicio */
  }
}

/* ================================
   25. FILEPOND - AVATAR CIRCULAR
   ================================ */

/*
.filepond--root {
  width: 180px;
  margin: 0 auto 20px;
}
*/

#avatar-container-usuario .filepond--root { /* Contenedor avatar usuario */
  width: 180px;        /* Ancho fijo del contenedor del avatar */ /* Ancho fijo */
  margin: 0 auto 20px; /* Centrado horizontal y margen inferior */ /* Centrado y margen */
}

#avatar-container-empleado .filepond--root { /* Contenedor avatar empleado */
  width: 250px;        /* Ancho fijo del contenedor del avatar */ /* Ancho fijo */
  margin: 0 auto 20px; /* Centrado horizontal y margen inferior */ /* Centrado y margen */
}

/* ----------------
   Panel principal (el "drop zone")
   ---------------- */
.filepond--panel-root { /* Panel raíz de FilePond */
  background: var(--fp-bg);           /* Fondo dinámico según tema */ /* Fondo variable */
  border: 1px solid var(--fp-border); /* Borde dinámico */ /* Borde variable */
  box-shadow: var(--fp-shadow);       /* Sombra suave o profunda según tema */ /* Sombra variable */
  border-radius: 50%;                 /* Forma completamente circular */ /* Circular */
}

/* ----------------
   Estado de error (campo requerido no válido)
   ---------------- */

/* borde visible */
.filepond--root.is-invalid-avatar .filepond--panel-root { /* Estado inválido en avatar */
  border-color: var(--select2-border-selection) !important; /* Borde variable */
  background-color: var(--select2-error) !important; /* Fondo error variable */
}

/* fallback ultra fiable para FilePond */
.filepond--root.is-invalid-avatar .filepond--panel-root { /* Fallback inválido */
  outline: 3px solid var(--select2-border-selection); /* Contorno variable */
  outline-offset: -2px; /* Desplazamiento contorno */
}

/* cubrir capas internas de filepond */
.filepond--root.is-invalid-avatar .filepond--panel-top, /* Panel top inválido */
.filepond--root.is-invalid-avatar .filepond--panel-center, /* Panel center inválido */
.filepond--root.is-invalid-avatar .filepond--panel-bottom { /* Panel bottom inválido */
  border-color: var(--select2-border-selection) !important; /* Borde variable */
}

/* ----------------
   Label de arrastrar archivo
   ---------------- */
.filepond--drop-label { /* Label de drop */
  color: var(--fp-lb);  /* Texto dinámico */ /* Color variable */
  background-color: var(--flatpickr-bg); /* Fondo variable */
  border-radius: 50%; /* Adaptado a la forma circular */ /* Circular */
}

/* ----------------
   Label de accion
   ---------------- */
.filepond--label-action { /* Acción del label */
  color: var(--fp-lb) !important;  /* Texto dinámico */ /* Color variable */
}

/* fondo en error */
.filepond--root.is-invalid-avatar .filepond--drop-label { /* Drop label inválido */
  background-color: var(--select2-error); /* Fondo error variable */
}

/* ----------------
   Icono de acción (dentro del label)
   ---------------- */
.filepond--label-action { /* Acción label (repetido) */
  color: var(--fp-label-icon); /* Color del ícono de carga */ /* Color variable */
}

/* ----------------
   Previsualización de imagen
   ---------------- */
.filepond--image-preview-wrapper, /* Wrapper preview */
.filepond--image-preview { /* Preview imagen */
  border-radius: 50%; /* Asegura recorte circular de la imagen cargada */ /* Circular */
}

/* ================================
   26. MODAL EDITOR DE IMAGEN
   ================================ */

/* ----------------
   Botón de cierre (header)
   ---------------- */
.editor-header .close-btn { /* Botón cerrar en header editor */
  width: 25px; /* Ancho */
  height: 25px; /* Alto */
  border-radius: 50%;  /* Circular para estética moderna */ /* Circular */
  background: rgba(255,255,255,.15); /* Fondo translúcido tipo glass */ /* Fondo semitransparente */
  border: 1px solid rgba(255,255,255,.25); /* Borde suave */ /* Borde semitransparente */
  display: flex; /* Flex */
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  cursor: pointer; /* Puntero */
  transition: all .2s ease; /* Transición */
  backdrop-filter: blur(4px); /* Efecto de vidrio esmerilado */ /* Filtro blur */
}

/* Ícono del botón cerrar */
.editor-header .close-btn i { /* Ícono dentro de botón cerrar */
  font-size: 1.25rem; /* Tamaño */
  color: #fff;   /* Siempre blanco para contraste sobre gradiente */ /* Blanco */
}

/* Hover: mayor visibilidad y leve zoom */
.editor-header .close-btn:hover { /* Hover botón cerrar */
  background: rgba(255,255,255,.25); /* Fondo más claro */
  transform: scale(1.05); /* Escala */
}

/* Active: efecto de presionado */
.editor-header .close-btn:active { /* Active botón cerrar */
  transform: scale(.95); /* Escala reducida */
}

/* Focus: accesibilidad con teclado */
.editor-header .close-btn:focus-visible { /* Focus visible */
  outline: 2px solid rgba(255,255,255,.7); /* Contorno */
  outline-offset: 2px; /* Desplazamiento */
}

/* ----------------
   Modal overlay (fondo oscuro)
   ---------------- */
.editor-modal { /* Modal editor */
  position: fixed; /* Fijo */
  inset: 0;                        /* Ocupa toda la pantalla */ /* 0 en todos lados */
  background: var(--editor-overlay); /* Fondo oscuro variable según tema */ /* Fondo variable */
  display: flex; /* Flex */
  justify-content: center; /* Centrado horizontal */
  align-items: center; /* Centrado vertical */
  z-index: 9999;                  /* Superpone a todo */ /* Z-index alto */
  opacity: 0;                     /* Oculto por defecto */ /* Transparente */
  transition: opacity 0.3s ease;  /* Suave aparición */ /* Transición */
}

/* Modal activo (visible) */
.editor-modal.active { /* Modal activo */
  opacity: 1; /* Visible */
}

/* ----------------
   Contenedor principal del modal (caja blanca/dark)
   ---------------- */
.editor-box { /* Caja del editor */
  background: var(--editor-bg); /* Fondo variable */
  color: var(--editor-color); /* Color variable */
  border: 1px solid var(--editor-border); /* Borde variable */
  border-radius: 16px; /* Bordes */
  width: 95%; /* Ancho 95% */
  max-width: 900px; /* Ancho máximo */
  height: 85%; /* Alto 85% */
  display: flex; /* Flex */
  flex-direction: column; /* Columna */
  overflow: hidden; /* Esquinas redondeadas limpias */ /* Oculta desbordamiento */
  box-shadow: 0 20px 50px rgba(0,0,0,0.2); /* Sombra */
  transform: scale(0.95); /* Animación de entrada */ /* Escala reducida */
  transition: transform 0.3s ease; /* Transición */
}

/* Escala natural al activarse */
.editor-modal.active .editor-box { /* Caja editor en modal activo */
  transform: scale(1); /* Escala normal */
}

/* ----------------
   HEADER DEL MODAL
   ---------------- */
.editor-header { /* Header editor */
  display: flex; /* Flex */
  justify-content: space-between; /* Espacio entre */
  align-items: center; /* Centrado vertical */
  padding: 14px 20px; /* Padding */
  border-bottom: 1px solid var(--editor-border); /* Borde inferior */
  background: var(--editor-header-bg); /* Gradiente dinámico según tema */ /* Fondo variable */
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05); /* Sombra interna */
}

/* Título del modal */
.editor-header h3 { /* Título en header */
  margin: 0; /* Sin margen */
  font-size: 18px; /* Tamaño */
  font-weight: 600; /* Negrita */
  color: #fff;  /* Siembre blanco sobre gradiente */ /* Blanco */
}

/* ----------------
   BODY: Área de visualización de imagen
   ---------------- */
.editor-body { /* Cuerpo editor */
  flex: 1; /* Ocupa todo el espacio disponible */ /* Flex 1 */
  background: #020617; /* Fondo oscuro fijo para resaltar la imagen */ /* Azul oscuro */
  display: flex; /* Flex */
  justify-content: center; /* Centrado horizontal */
  align-items: center; /* Centrado vertical */
  overflow: hidden; /* Evita scroll interno */ /* Sin scroll */
  position: relative; /* Posición relativa */
}

/* Imagen dentro del body */
.editor-body img { /* Imagen en cuerpo */
  max-width: 100%; /* Ancho máximo 100% */
  max-height: 100%; /* Alto máximo 100% */
  border-radius: 8px; /* Bordes suaves */ /* Bordes */
  transition: transform 0.3s ease; /* Preparado para zoom/rotación */ /* Transición */
}

/* ----------------
   TOOLBAR: Botones de edición
   ---------------- */
.editor-toolbar { /* Toolbar editor */
  display: flex; /* Flex */
  flex-wrap: wrap; /* Wrap */
  gap: 8px; /* Espacio */
  padding: 7px 14px; /* Padding */
  border-top: 1px solid var(--editor-border); /* Borde superior */
  background: var(--editor-toolbar-bg); /* Fondo dinámico */ /* Fondo variable */
  justify-content: center; /* Centrado */
}

/* Botones y selectores de la barra */
.editor-toolbar button, /* Botones toolbar */
.editor-toolbar select { /* Select toolbar */
  width: 44px; /* Ancho */
  height: 40px; /* Alto */
  display: flex; /* Flex */
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  border: 1px solid transparent; /* Borde transparente */
  border-radius: 12px;          /* Bordes redondeados modernos */ /* Bordes */
  background: var(--editor-btn-bg); /* Fondo variable */
  color: var(--editor-btn-color); /* Color variable */
  cursor: pointer; /* Puntero */
  font-size: 16px; /* Tamaño */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Sombra */
  transition: all 0.2s ease; /* Transición */
  position: relative;           /* Necesario para tooltips */ /* Posición relativa */
}

/* Ajuste específico para selects (más anchos) */
.editor-toolbar select { /* Select en toolbar */
  width: 100px; /* Ancho */
  font-size: 14px; /* Tamaño */
  text-align: center; /* Centrado */
}

/* Evita que el ícono capture eventos de puntero */
.editor-toolbar button i { /* Ícono en botón toolbar */
  pointer-events: none; /* No eventos */
}

/* ----------------
   Hover en botones: levitación
   ---------------- */
.editor-toolbar button:hover { /* Hover botones toolbar */
  background: var(--editor-btn-hover-bg); /* Fondo hover variable */
  transform: translateY(-2px); /* Elevación */
  box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* Sombra */
}

/* ----------------
   Botones de acción especial
   ---------------- */
.editor-toolbar .primary { /* Botón primario */
  background: #3b82f6;          /* Azul fijo (neutral) */ /* Azul */
  color: #fff; /* Blanco */
  box-shadow: 0 4px 12px rgba(59,130,246,0.3); /* Sombra azul */
}

.editor-toolbar .primary:hover { /* Hover primario */
  background: #2563eb;          /* Azul más oscuro en hover */ /* Azul oscuro */
}

.editor-toolbar .danger { /* Botón peligro */
  background: #ef4444;          /* Rojo fijo */ /* Rojo */
  color: #fff; /* Blanco */
  box-shadow: 0 4px 12px rgba(239,68,68,0.3); /* Sombra roja */
}

.editor-toolbar .danger:hover { /* Hover peligro */
  background: #dc2626;          /* Rojo más oscuro */ /* Rojo oscuro */
}

/* ----------------
   Tooltips personalizados para botones
   ---------------- */
.editor-toolbar button[title]::after { /* Tooltip para botones con title */
  content: attr(title);         /* Toma el texto del atributo title */ /* Contenido del title */
  position: absolute; /* Absoluto */
  bottom: 110%;                /* Aparece arriba del botón */ /* Posición superior */
  left: 50%; /* Izquierda 50% */
  transform: translateX(-50%); /* Centrado horizontal */
  background: rgba(31,41,55,0.9); /* Fondo oscuro semitransparente */ /* Fondo oscuro */
  color: #fff; /* Blanco */
  padding: 4px 8px; /* Padding */
  border-radius: 6px; /* Bordes */
  font-size: 12px; /* Tamaño */
  white-space: nowrap; /* Sin saltos */
  opacity: 0;                  /* Oculto por defecto */ /* Transparente */
  pointer-events: none; /* No eventos */
  transition: opacity 0.2s ease, bottom 0.2s ease; /* Transición */
}

/* Tooltip visible al hacer hover */
.editor-toolbar button:hover::after { /* Hover para mostrar tooltip */
  opacity: 1; /* Visible */
  bottom: 130%;               /* Se desplaza ligeramente hacia arriba */ /* Posición ajustada */
}

@media (max-width: 600px) { /* Media query móvil */
  /* Aumenta altura relativa en pantallas pequeñas */
  .editor-box { /* Caja editor */
    height: 95%; /* Alto 95% */
  }

  /* Botones más compactos */
  .editor-toolbar button, /* Botones toolbar */
  .editor-toolbar select { /* Select toolbar */
    width: 36px; /* Ancho reducido */
    height: 36px; /* Alto reducido */
    font-size: 14px; /* Tamaño reducido */
  }

  /* Selector más angosto */
  .editor-toolbar select { /* Select en móvil */
    width: 70px; /* Ancho reducido */
  }
}

/* ================================
   27. DROPDOWN
   ================================ */

.fixed-dropdown { /* Dropdown fijo */
  padding: 0.25rem 0; /* Padding vertical */
}

.fixed-dropdown .dropdown-item { /* Item de dropdown */
  display: block; /* Bloque */
  width: 100%; /* Ancho completo */
  white-space: normal; /* Saltos normales */
  word-break: break-word; /* Rompe palabras */
  overflow-wrap: anywhere; /* Rompe donde sea necesario */
  line-height: 1.3; /* Altura línea */
  font-size: 0.875rem; /* Tamaño */
  padding: 0.35rem 0.75rem; /* Padding */
}

/* ================================
   28. MODAL DE CREDENCIALES
   ================================ */

/* ----------------
   Wrapper del modal (Bootstrap override)
   ---------------- */
.cred-modal .modal-content { /* Contenido modal credenciales */
  border: none !important; /* Sin borde */
  background: transparent !important; /* Fondo transparente */
}

/* ----------------
   Card principal del modal
   ---------------- */
.cred-card { /* Card credenciales */
  position: relative !important; /* Posición relativa */
  overflow: hidden !important; /* Oculta desbordamiento */
  border-radius: 24px !important; /* Bordes */
  border: 1px solid rgba(255,255,255,0.1) !important; /* Borde */
  background: var(--cred-bg) !important; /* Fondo variable */
  backdrop-filter: blur(20px) !important; /* Blur */
  -webkit-backdrop-filter: blur(20px) !important; /* Blur Safari */
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important; /* Sombra */
  animation: credSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Animación */
}

/* Animación de aparición */
@keyframes credSlideUp { /* Animación deslizamiento arriba */
  from { /* Desde */
    opacity: 0; /* Transparente */
    transform: translateY(20px) scale(0.98); /* Desplazado y escalado */
  }
  to { /* Hasta */
    opacity: 1; /* Visible */
    transform: translateY(0) scale(1); /* Posición normal */
  }
}

/* ----------------
   HEADER
   ---------------- */
.cred-header { /* Header credenciales */
  padding: 1.5rem 1.5rem 0.5rem 1.5rem !important; /* Padding */
  border: none !important; /* Sin borde */
}

/* Título */
.cred-title { /* Título credenciales */
  display: flex !important; /* Flex */
  align-items: center !important; /* Centrado vertical */
  gap: 0.5rem !important; /* Espacio */
  font-size: 1.1rem !important; /* Tamaño */
  font-weight: 600 !important; /* Negrita */
  letter-spacing: -0.02em !important; /* Espaciado */
  color: var(--cred-text) !important; /* Color variable */
}

/* Ícono del título */
.cred-title i { /* Ícono título */
  font-size: 1.2rem !important; /* Tamaño */
  color: var(--cred-accent) !important; /* Color variable */
}

/* ----------------
   BODY
   ---------------- */
.cred-body { /* Cuerpo credenciales */
  padding: 0.5rem 1.5rem 1rem 1.5rem !important; /* Padding */
}

/* Grupo de campos */
.cred-field-group { /* Grupo de campo */
  position: relative !important; /* Posición relativa */
  margin-bottom: 1.25rem !important; /* Margen inferior */
}

/* Label */
.cred-label { /* Label credenciales */
  display: flex !important; /* Flex */
  justify-content: space-between !important; /* Espacio entre */
  align-items: center !important; /* Centrado vertical */
  margin-bottom: 0.5rem !important; /* Margen inferior */
  font-size: 0.7rem !important; /* Tamaño */
  font-weight: 600 !important; /* Negrita */
  text-transform: uppercase !important; /* Mayúsculas */
  letter-spacing: 0.05em !important; /* Espaciado */
  color: var(--cred-text-muted) !important; /* Color variable */
}

/* Campo de credencial */
.cred-field { /* Campo credenciales */
  padding: 0.875rem 1rem !important; /* Padding */
  border-radius: 16px !important; /* Bordes */
  font-family: 'SF Mono','Fira Code','Fira Mono','Roboto Mono',monospace !important; /* Fuente monoespaciada */
  font-size: 0.9rem !important; /* Tamaño */
  background: var(--cred-input-bg) !important; /* Fondo variable */
  color: var(--cred-text) !important; /* Color variable */
  border: 1.5px solid var(--cred-border) !important; /* Borde variable */
  word-break: break-all !important; /* Rompe todo */
  backdrop-filter: blur(10px) !important; /* Blur */
  -webkit-backdrop-filter: blur(10px) !important; /* Blur Safari */
  box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; /* Sombra */
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important; /* Transición */
  user-select: text !important; /* Seleccionable */
  -webkit-user-select: text !important; /* Safari */
  -moz-user-select: text !important; /* Firefox */
  -ms-user-select: text !important; /* IE */
}

/* Hover del campo */
.cred-field:hover { /* Hover campo */
  border-color: var(--cred-accent) !important; /* Borde variable */
  box-shadow: 0 4px 12px rgba(59,130,246,0.15) !important; /* Sombra */
  transform: translateY(-1px) !important; /* Elevación */
}

/* Focus accesible */
.cred-field:focus-within { /* Focus dentro del campo */
  border-color: var(--cred-accent) !important; /* Borde variable */
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important; /* Sombra */
  outline: none !important; /* Sin contorno */
}

/* ----------------
   FOOTER
   ---------------- */
.cred-footer { /* Footer credenciales */
  display: flex !important; /* Flex */
  justify-content: flex-end !important; /* Al final */
  gap: 0.75rem !important; /* Espacio */
  padding: 0.1rem 1.5rem 1.5rem 1.5rem !important; /* Padding */
  border: none !important; /* Sin borde */
}

/* ----------------
   BOTONES BASE
   ---------------- */
.cred-btn { /* Botón base credenciales */
  display: inline-flex !important; /* Flex en línea */
  align-items: center !important; /* Centrado vertical */
  justify-content: center !important; /* Centrado horizontal */
  gap: 0.4rem !important;             /* un poco menos de espacio entre icono y texto */ /* Espacio */
  min-width: 88px !important;         /* más compacto horizontalmente */ /* Ancho mínimo */
  padding: 0.42rem 0.9rem !important; /* menos alto */ /* Padding */
  border-radius: 12px !important;     /* un poco más fino visualmente */ /* Bordes */
  border: none !important; /* Sin borde */
  font-size: 0.82rem !important;      /* ligeramente menor */ /* Tamaño */
  font-weight: 600 !important; /* Negrita */
  letter-spacing: -0.01em !important; /* Espaciado */
  cursor: pointer !important; /* Puntero */
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important; /* Transición */
}

/* ----------------
   Botón primario
   ---------------- */
.cred-btn-primary { /* Botón primario */
  color: #f8f8f8 !important; /* Color texto */
  background: var(--nf-ok-bg) !important; /* Fondo variable */
  font-size: 15px !important; /* Tamaño */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; /* Sombra */
}

.cred-btn-primary:hover { /* Hover primario */
  transform: translateY(-2px) !important; /* Elevación */
  filter: brightness(1.05); /* Brillo */
}

.cred-btn-primary:active { /* Active primario */
  transform: translateY(0) !important; /* Vuelve */
}

/* ----------------
   Botón secundario
   ---------------- */
.cred-btn-secondary { /* Botón secundario */
  color: #f8f8f8 !important; /* Color texto */
  background: var(--nf-cancel-bg) !important; /* Fondo variable */
  font-size: 15px !important; /* Tamaño */
  border: none !important; /* Sin borde */
}

.cred-btn-secondary:hover { /* Hover secundario */
  transform: translateY(-2px) !important; /* Elevación */
  filter: brightness(1.05); /* Brillo */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important; /* Sombra */
}

.cred-btn-secondary:active { /* Active secundario */
  transform: translateY(0) !important; /* Vuelve */
}

.cred-btn:disabled { /* Botón deshabilitado */
  opacity: 0.7 !important; /* Opacidad */
  cursor: not-allowed !important; /* Cursor no permitido */
  transform: none !important; /* Sin transformación */
  box-shadow: none !important; /* Sin sombra */
}

/* ----------------
   Feedback de copiado exitoso
   ---------------- */
.cred-copy-success { /* Éxito al copiar */
  background: linear-gradient(135deg, var(--cred-success, #10b981), var(--cred-success-dark, #059669)) !important; /* Gradiente éxito */
  color: #fff !important; /* Blanco */
  border-color: transparent !important; /* Borde transparente */
}

.cred-copy-success i { /* Ícono en éxito */
  color: #fff !important; /* Blanco */
}

/* ----------------
   Badge informativo
   ---------------- */
.cred-badge { /* Badge credenciales */
  padding: 0.25rem 0.75rem !important; /* Padding */
  border-radius: 100px !important; /* Bordes */
  font-size: 0.7rem !important; /* Tamaño */
  font-weight: 600 !important; /* Negrita */
  letter-spacing: 0.02em !important; /* Espaciado */
  background: var(--cred-accent-light) !important; /* Fondo variable */
  color: var(--cred-accent) !important; /* Color variable */
  border: 1px solid rgba(59,130,246,0.2) !important; /* Borde */
}

/* ----------------
   Texto de requerimeintos
   ---------------- */
.cred-pass-checklist .rule { /* Regla en checklist */
  display: flex; /* Flex */
  gap: 8px; /* Espacio */
  line-height: 1.4; /* Altura línea */
}

.rule-icon { /* Ícono regla */
  width: 16px; /* Ancho */
  text-align: center; /* Centrado */
  font-size: 0.8rem; /* Tamaño */
  flex-shrink: 0; /* No encoger */
  position: relative; /* Relativo */
  top: 2px;  /* Ajusta este valor según necesites */ /* Desplazamiento */
}

.rule-text { /* Texto regla */
  color: var(--cred-text-muted); /* Color variable */
  flex: 1; /* Flex 1 */
  word-break: break-word; /* Rompe palabras */
}

/* ----------------
   Animación pulse (copiado)
   ---------------- */
@keyframes credPulse { /* Animación pulso */
  0%,100% { transform: scale(1); } /* Escala normal */
  50% { transform: scale(1.05); } /* Escala aumentada */
}

.cred-pulse { /* Clase pulso */
  animation: credPulse 0.3s ease !important; /* Animación */
}

@keyframes popup { /* Animación popup */
  0% { /* Inicio */
    opacity: 0; /* Transparente */
    transform: translateY(20px) scale(0.98); /* Desplazado y escalado */
  }
  100% { /* Fin */
    opacity: 1; /* Visible */
    transform: translateY(0) scale(1); /* Normal */
  }
}

/* ================================
   29. Formularios
   ================================ */

.form-label { /* Label formulario */
  color: var(--form-label-color); /* Color variable */
  font-weight: 500; /* Grosor */
}

.section-title { /* Título sección */
  /*font-weight: 600;*/ /* Comentado */
  color: var(--section-title-color) !important; /* Color variable */
  background-color: var(--section-title-bg) !important; /* Fondo variable */
  border-bottom: 1px solid var(--section-title-border) !important; /* Borde inferior */
}

.section-title i { /* Ícono en título sección */
  color: var(--ag-header-icon-color) !important; /* Color variable */
}

/* ================================
   30. Calendario
   ================================ */

.flatpickr-settings { /* Configuración flatpickr */
  background-color: var(--flatpickr-bg) !important; /* Fondo variable */
}

.flatpickr-input.error { /* Input flatpickr con error */
  border-color: var(--select2-border-selection) !important; /* Borde variable */
  background-color: var(--select2-error) !important; /* Fondo error variable */
}

.flatpickr-wrapper { /* Wrapper flatpickr */
  width: 100% !important; /* Ancho completo */
  display: block !important; /* Bloque */
  margin-top: -1px; /* Margen superior negativo */
}

.flatpickr-wrapper .form-control { /* Form control dentro de wrapper */
  width: 100% !important; /* Ancho completo */
}

.flatpickr-calendar.static { /* Calendario estático */
  left: 50% !important; /* Izquierda 50% */
  transform: translateX(-50%) !important; /* Centrado horizontal */
}

/* ================================
   31. Acordion de las cards
   ================================ */

/* Quitar el outline y efecto de focus al hacer clic */
.accordion-button:focus { /* Botón acordeón focus */
  box-shadow: none !important; /* Sin sombra */
  outline: 0 !important; /* Sin contorno */
}

.accordion-button::after, /* Pseudo-elemento después del botón */
.accordion-button:not(.collapsed)::after { /* Pseudo-elemento cuando no está colapsado */
  filter: var(--accordion-icon-filter); /* Filtro variable */
  transition: none; /* Sin transición */
}

.accordion-button.section-title { /* Botón acordeón con clase section-title */
    padding: 0.5rem 1rem; /* reduce altura */ /* Padding reducido */
    font-size: 1rem;      /* opcional */ /* Tamaño */
}

.accordion-header { /* Header acordeón */
    margin-bottom: 0; /* Sin margen inferior */
}

.card { /* Card */
  border: 1px solid var(--section-border-card) !important; /* Borde variable */
}

/* ================================
   32. Tipografia de notiflix de errores al actualizar o insertar records en los modulos
   ================================ */

.error-insert {
  font-weight: 700;
  color: #ffc107;
}

.error-message {
  max-width: 500px;   /* limita el ancho */
  line-height: 1.5;   /* espacio entre líneas */
  word-wrap: break-word;
}