/* ===== tokens.css ===== */
/* ============================================================ */
/*  TOKENS — fuente única de las variables de diseño             */
/*  Se carga SIEMPRE la primera. Ninguna otra hoja debe          */
/*  hardcodear colores, radios, sombras ni tamaños de fuente:    */
/*  todo se consume desde aquí.                                  */
/* ============================================================ */
:root {

  /* ---------- Color · base ---------- */
  --apple-system-background: #f5f5f7;
  --apple-system-grouped-background: #f2f2f7;
  --apple-system-white: #ffffff;

  --apple-label: #000000;
  --apple-label-strong: #1d1d1f;
  --apple-secondary-label: rgba(0, 0, 0, 0.6);
  --apple-tertiary-label: rgba(0, 0, 0, 0.3);

  --apple-separator: rgba(0, 0, 0, 0.1);
  --apple-separator-light: #eaeaea;

  /* ---------- Color · acentos semánticos ---------- */
  --apple-system-blue: #007aff;      /* acción principal, foco, enlaces */
  --apple-system-green: #34c759;     /* guardar, confirmar, activo */
  --apple-system-red: #ff3b30;       /* eliminar, error, inactivo */
  --apple-system-orange: #ff9500;    /* editar, aviso */
  --apple-system-yellow: #ffcc00;    /* borrador */
  --apple-system-gray: #8e8e93;      /* neutro */
  --apple-system-indigo: #5856d6;
  --apple-system-purple: #af52de;
  --apple-system-green-excel: #1d6f42;   /* verde corporativo Excel */

  /* Hover derivados del color base (nunca inventes un hover suelto) */
  --apple-system-blue-hover: #0066d6;
  --apple-system-green-hover: #2cb14e;
  --apple-system-red-hover: #e0352b;
  --apple-system-orange-hover: #e68a00;

  /* ---------- Color · rellenos y superficies ---------- */
  --apple-fill: rgba(120, 120, 128, 0.12);
  --apple-fill-tertiary: rgba(118, 118, 128, 0.08);
  --apple-bg-primary: var(--apple-system-grouped-background);   /* inputs, chips, bloques de código sobre tarjeta */
  --apple-bg-secondary: var(--apple-system-white);              /* tarjetas y paneles */

  /* ---------- Espaciado · escala base 4px ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ---------- Radio de borde ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

  /* ---------- Tipografía ---------- */
  --apple-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                     'Helvetica Neue', Arial, sans-serif;
  --apple-font-mono: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;

  --font-size-xs: 11px;    /* cabeceras de tabla, etiquetas de filtro */
  --font-size-sm: 13px;    /* tamaño de trabajo: tablas, botones, formularios */
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---------- Foco ---------- */
  --apple-focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.15);

  /* ---------- Capas (z-index) ---------- */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal: 1000;
  --z-toast: 10000;
}

/* ===== base.css ===== */
/* ============================================================ */
/*  BASE — reset mínimo, tipografía, contenedores y utilidades   */
/* ============================================================ */

/* box-sizing global: evita el desbordamiento clásico de los inputs
   a ancho completo con padding (ancho 100% + padding = se sale de la celda). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--apple-font-sans);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--apple-label);
  background-color: var(--apple-system-background);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--apple-label);
  letter-spacing: -0.01em;
}

code, pre, .mono {
  font-family: var(--apple-font-mono);
}

/* ---------- Contenedores ---------- */
.apple-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-5);
}

/* Tarjeta / panel blanco: la superficie por defecto del contenido */
.apple-card {
  background: var(--apple-system-white);
  border: 1px solid var(--apple-separator);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-4) 0;
  box-shadow: var(--shadow-sm);
}

/* ---------- Utilidades ---------- */
.apple-text-center { text-align: center; }
.apple-text-muted  { color: var(--apple-secondary-label); }

.apple-mt-1 { margin-top: var(--space-2); }
.apple-mt-2 { margin-top: var(--space-4); }
.apple-mt-3 { margin-top: var(--space-5); }
.apple-mb-1 { margin-bottom: var(--space-2); }
.apple-mb-2 { margin-bottom: var(--space-4); }
.apple-p-1  { padding: var(--space-2); }
.apple-p-2  { padding: var(--space-4); }

@media (max-width: 768px) {
  .apple-container { padding: var(--space-4); }
  .apple-card      { padding: var(--space-4); }
}

/* ===== sidebar.css ===== */
/* ============================================================ */
/*  LAYOUT — cascarones de la aplicación                         */
/*    · .app-shell  → sidebar + contenido (páginas de dentro)    */
/*    · .auth-shell → tarjeta centrada (login, sin sidebar)      */
/*                                                              */
/*  El sidebar NO venía en BIPRO UI (su README lo excluía por    */
/*  ser específico del portal original). Se añade AQUÍ, al       */
/*  sistema, y no al <style> de una pantalla: regla nº 1 de      */
/*  DESIGN.md. Solo usa tokens de tokens.css.                    */
/* ============================================================ */

/* ---------- Cascarón: sidebar fijo + contenido desplazable ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-main {
  flex: 1;
  min-width: 0; /* sin esto, una tabla ancha desborda el flex en vez de hacer scroll */
}

/* ---------- Sidebar ----------
   En escritorio se colapsa a un rail de solo iconos y se expande al pasar el
   ratón (bloque @media min-width:769px, más abajo). En móvil pasa a barra
   superior (@media max-width:768px). Aquí solo van las reglas comunes. */
.sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: var(--apple-system-white);
  border-right: 1px solid var(--apple-separator);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid var(--apple-separator);
}

.sidebar-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--apple-system-blue);
  color: var(--apple-system-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.sidebar-brand-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--apple-label-strong);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---------- Navegación ---------- */
.sidebar-nav {
  flex: 1;
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
  overflow-x: hidden; /* en el rail colapsado, las etiquetas se recortan sin barra horizontal */
}

.sidebar-section {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--apple-tertiary-label);
  padding: var(--space-4) var(--space-3) var(--space-2);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--apple-label-strong);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

/* Etiqueta de texto de un enlace/botón del sidebar. En el rail colapsado se
   oculta (ver @media min-width:769px); aquí solo evita que envuelva. */
.sidebar-label {
  white-space: nowrap;
}

.sidebar-link:hover {
  background: var(--apple-fill-tertiary);
}

.sidebar-link .sidebar-icon {
  width: 18px;
  text-align: center;
  color: var(--apple-secondary-label);
  flex-shrink: 0;
}

/* Módulo activo: azul, el color de la acción/selección */
.sidebar-link.activo {
  background: rgba(0, 122, 255, 0.1);
  color: var(--apple-system-blue);
}

.sidebar-link.activo .sidebar-icon {
  color: var(--apple-system-blue);
}

/* Módulo aún no construido: visible pero inerte, para que se vea el mapa
   de la aplicación sin prometer que funciona. */
.sidebar-link.deshabilitado {
  color: var(--apple-tertiary-label);
  cursor: not-allowed;
  pointer-events: none;
}

.sidebar-link.deshabilitado .sidebar-icon {
  color: var(--apple-tertiary-label);
}

.sidebar-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--apple-fill);
  color: var(--apple-secondary-label);
}

/* ---------- Pie: usuario y salir ---------- */
.sidebar-footer {
  padding: var(--space-3);
  border-top: 1px solid var(--apple-separator);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--apple-fill);
  color: var(--apple-label-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

.sidebar-user-info {
  min-width: 0; /* permite que el text-overflow funcione dentro del flex */
}

.sidebar-user-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--apple-label-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-rol {
  font-size: var(--font-size-xs);
  color: var(--apple-secondary-label);
}

.sidebar-logout {
  width: 100%;
  margin-top: var(--space-2);
}

/* ---------- Escritorio: rail colapsable (se abre al pasar el ratón) ----------
   El sidebar queda fijo como un rail estrecho de solo iconos. Al pasar el ratón
   —o al enfocar con el teclado (Tab)— se expande a su ancho completo
   SUPERPONIÉNDOSE al contenido (no lo empuja), para poder pinchar las secciones. */
@media (min-width: 769px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 72px;                 /* rail colapsado: cabe el icono con su padding */
    overflow: hidden;            /* recorta las etiquetas mientras está estrecho */
    z-index: var(--z-sticky);
    transition: width 0.2s ease, box-shadow 0.2s ease;
  }

  .sidebar:hover,
  .sidebar:focus-within {
    width: 248px;
    box-shadow: var(--shadow-lg);   /* se eleva por encima del contenido */
  }

  /* El contenido solo reserva el ancho del rail; la expansión va por encima. */
  .app-main {
    margin-left: 72px;
  }

  /* Texto oculto en el rail y visible al expandir. Se usa opacity (no display)
     para conservar el hueco y que abrir/cerrar no provoque saltos de layout. */
  .sidebar-brand-name,
  .sidebar-section,
  .sidebar-badge,
  .sidebar-user-info,
  .sidebar-label {
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .sidebar:hover .sidebar-brand-name,
  .sidebar:hover .sidebar-section,
  .sidebar:hover .sidebar-badge,
  .sidebar:hover .sidebar-user-info,
  .sidebar:hover .sidebar-label,
  .sidebar:focus-within .sidebar-brand-name,
  .sidebar:focus-within .sidebar-section,
  .sidebar:focus-within .sidebar-badge,
  .sidebar:focus-within .sidebar-user-info,
  .sidebar:focus-within .sidebar-label {
    opacity: 1;
  }
}

/* ---------- Cascarón de autenticación (login, sin sidebar) ---------- */
.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-5);
}

.auth-box {
  width: 100%;
  max-width: 400px;
}

.auth-brand {
  text-align: center;
  margin-bottom: var(--space-6);
}

.auth-brand .sidebar-brand-icon {
  margin: 0 auto var(--space-4);
}

.auth-brand h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.auth-brand p {
  font-size: var(--font-size-sm);
  color: var(--apple-secondary-label);
  margin: var(--space-1) 0 0;
}

/* Los campos del login van apilados, no en fila */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-nota {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--apple-secondary-label);
  margin-top: var(--space-5);
}

/* ---------- Móvil: el sidebar pasa a barra superior ---------- */
@media (max-width: 768px) {
  .app-shell {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--apple-separator);
  }

  .sidebar-nav {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: var(--space-3);
  }

  .sidebar-section,
  .sidebar-badge {
    display: none;
  }

  .sidebar-link {
    margin-bottom: 0;
    white-space: nowrap;
  }
}

/* ===== buttons.css ===== */
/* ============================================================ */
/*  BOTONES — componente canónico                                */
/*                                                              */
/*  Un único set de botones: clase base .btn + una variante de   */
/*  color. Nunca crees un botón nuevo por página.                */
/*  Base = 13px, padding 8px 14px, radio 8px.                    */
/* ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Variantes semánticas ---------- */

/* Primario: la acción principal de la pantalla (UNA por vista) */
.btn-primary {
  background: var(--apple-system-blue);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--apple-system-blue-hover); }

/* Secundario: acciones neutras (cancelar, volver, opciones) */
.btn-secondary {
  background: #f0f0f5;
  color: var(--apple-label);
}
.btn-secondary:hover:not(:disabled) { background: #e5e5ea; }

/* Éxito: guardar / crear / confirmar positivo */
.btn-success {
  background: var(--apple-system-green);
  color: #fff;
}
.btn-success:hover:not(:disabled) { background: var(--apple-system-green-hover); }

/* Peligro: eliminar / acciones destructivas */
.btn-danger {
  background: var(--apple-system-red);
  color: #fff;
}
.btn-danger:hover:not(:disabled) { background: var(--apple-system-red-hover); }

/* Edición: el naranja es SIEMPRE "Editar" / modo edición */
.btn-warning {
  background: var(--apple-system-orange);
  color: #fff;
}
.btn-warning:hover:not(:disabled) { background: var(--apple-system-orange-hover); }

/* Contorno: acción secundaria con énfasis */
.btn-outline {
  background: var(--apple-system-white);
  border: 1px solid var(--apple-separator);
  color: var(--apple-system-blue);
}
.btn-outline:hover:not(:disabled) {
  background: rgba(0, 122, 255, 0.06);
  border-color: var(--apple-system-blue);
}

/* Texto / enlace (ghost): acción terciaria sin fondo.
   "Ver todos", "Expandir", "Volver", acciones dentro de una celda. */
.btn-link {
  background: transparent;
  color: var(--apple-system-blue);
  padding: 6px 10px;
}
.btn-link:hover:not(:disabled) { background: rgba(0, 122, 255, 0.08); }

/* Excel: verde corporativo, exclusivo de exportar/importar */
.btn-excel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--apple-system-green-excel);
  color: #fff;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-excel:hover { background: #165c36; }

/* ---------- Modificadores de tamaño ---------- */

.btn-sm {
  padding: 5px 10px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: 11px 22px;
  font-size: var(--font-size-base);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
}

/* ---------- Solo icono — acciones de fila ---------- */
/* Estilo "chip": cuadrado con fondo de color tenue. Se usa dentro de la
   columna Acciones de una tabla. Siempre .btn .btn-icon + modificador. */
.btn-icon {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--apple-secondary-label);
}
.btn-icon:hover:not(:disabled) { background: rgba(0, 0, 0, 0.09); }

.btn-icon.edit { background: rgba(255, 149, 0, 0.12); color: #c93400; }
.btn-icon.edit:hover:not(:disabled) { background: rgba(255, 149, 0, 0.2); }

.btn-icon.delete { background: rgba(255, 59, 48, 0.10); color: #d70015; }
.btn-icon.delete:hover:not(:disabled) { background: rgba(255, 59, 48, 0.18); }

.btn-icon.view { background: rgba(0, 122, 255, 0.10); color: #0066d6; }
.btn-icon.view:hover:not(:disabled) { background: rgba(0, 122, 255, 0.18); }

.btn-icon.save { background: rgba(52, 199, 89, 0.14); color: #248a3d; }
.btn-icon.save:hover:not(:disabled) { background: rgba(52, 199, 89, 0.24); }

.btn-icon.cancel { background: rgba(0, 0, 0, 0.06); color: var(--apple-secondary-label); }
.btn-icon.cancel:hover:not(:disabled) { background: rgba(0, 0, 0, 0.12); }

/* Toggle de registro: on = reactivar (verde), off = desactivar (naranja) */
.btn-icon.toggle-on { background: rgba(52, 199, 89, 0.12); color: #248a3d; }
.btn-icon.toggle-on:hover:not(:disabled) { background: rgba(52, 199, 89, 0.22); }
.btn-icon.toggle-off { background: rgba(255, 149, 0, 0.12); color: #c93400; }
.btn-icon.toggle-off:hover:not(:disabled) { background: rgba(255, 149, 0, 0.22); }

/* Grupo de acciones dentro de una celda de tabla */
.row-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
}

/* Botón a ancho completo (login, acciones de un panel estrecho) */
.btn-block {
  width: 100%;
  justify-content: center;
}

/* ===== toolbar.css ===== */
/* ============================================================ */
/*  CABECERA DE PÁGINA + PESTAÑAS                                */
/*                                                              */
/*  Patrón único de cabecera: título (y subtítulo) a la          */
/*  izquierda, acciones a la derecha. Los botones de acción NO   */
/*  cuelgan de los filtros ni van sueltos por la página.         */
/*  Orden fijo de acciones: [Maestro] [Nuevo] [Excel] [Editar]   */
/* ============================================================ */

.page-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.page-title-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.page-title-left h1 {
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  color: var(--apple-label);
  margin: 0;
}

.page-title-left .page-subtitle {
  font-size: var(--font-size-sm);
  color: var(--apple-secondary-label);
  margin: 2px 0 0;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------- Pestañas ---------- */
.apple-tabs {
  display: flex;
  border-bottom: 1px solid var(--apple-separator);
  margin-bottom: var(--space-6);
}

.apple-tab {
  padding: var(--space-3) var(--space-5);
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--apple-secondary-label);
  cursor: pointer;
  position: relative;
}

.apple-tab.active {
  color: var(--apple-system-blue);
}

.apple-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--apple-system-blue);
  border-radius: 3px 3px 0 0;
}

@media (max-width: 768px) {
  .page-title-bar { flex-direction: column; align-items: flex-start; }
  .page-actions   { width: 100%; overflow-x: auto; }
}

/* ===== forms.css ===== */
/* ============================================================ */
/*  FORMULARIOS — campos, etiquetas y controles                  */
/*                                                              */
/*  Patrón: .form-field = etiqueta encima + control debajo.      */
/*  Borde fino, esquinas de 8px y anillo de foco azul.           */
/* ============================================================ */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

.form-field label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--apple-label);
}

.form-field .field-help {
  font-size: var(--font-size-xs);
  color: var(--apple-secondary-label);
}

/* Fila de campos (formularios de varias columnas) */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---------- Controles ---------- */
.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="date"],
.form-field select,
.form-field textarea,
.apple-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--apple-separator);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--apple-label);
  background: var(--apple-system-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.apple-input:focus {
  outline: none;
  border-color: var(--apple-system-blue);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}

.form-field input:disabled,
.form-field select:disabled,
.apple-input:disabled {
  background: var(--apple-system-grouped-background);
  color: var(--apple-secondary-label);
  cursor: not-allowed;
}

.form-field input::placeholder,
.apple-input::placeholder {
  color: var(--apple-tertiary-label);
}

/* Estado de error de validación */
.form-field.has-error input,
.form-field.has-error select,
.apple-input.has-error {
  border-color: var(--apple-system-red);
}
.form-field .field-error {
  font-size: var(--font-size-xs);
  color: var(--apple-system-red);
}

/* Indicador de campo obligatorio */
.required-indicator {
  color: var(--apple-system-red);
  margin-left: 2px;
}

/* ---------- Interruptor (switch) ---------- */
.apple-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
}
.apple-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.apple-slider {
  position: absolute;
  inset: 0;
  background: var(--apple-separator);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: 0.4s;
}
.apple-slider::before {
  content: "";
  position: absolute;
  height: 28px;
  width: 28px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.4s;
}
.apple-switch input:checked + .apple-slider { background: var(--apple-system-blue); }
.apple-switch input:checked + .apple-slider::before { transform: translateX(20px); }

/* ===== filters.css ===== */
/* ============================================================ */
/*  PANEL DE FILTROS — barra de desplegables sobre la tabla      */
/*                                                              */
/*    .filters-bar-container                                     */
/*      .filters-title      ("Filtros")                          */
/*      .filters-toolbar                                         */
/*        .filter-group  (.filter-label + .filter-select|.multiselect)
/*        .filters-actions  (botón limpiar, a la derecha)        */
/* ============================================================ */

.filters-bar-container {
  background: var(--apple-system-white);
  border: 1px solid var(--apple-separator);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

.filters-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--apple-secondary-label);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.filters-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filter-label {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  color: var(--apple-tertiary-label);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.filter-select {
  padding: 7px 10px;
  border: 1px solid var(--apple-separator);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--apple-label);
  background: var(--apple-system-white);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 130px;
}
.filter-select:focus {
  outline: none;
  border-color: var(--apple-system-blue);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}
.filter-select:disabled {
  background: var(--apple-system-grouped-background);
  color: var(--apple-secondary-label);
  cursor: not-allowed;
}

.filters-actions {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  margin-left: auto;
}

/* ---------- Desplegable de selección múltiple ---------- */
/* Reemplazo canónico de los "dropdown" sueltos. El panel de opciones
   lo inyecta el JS; aquí va solo el botón y sus estados. */
.multiselect {
  position: relative;
  min-width: 160px;
}

.multiselect-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 7px 10px;
  border: 1px solid var(--apple-separator);
  border-radius: var(--radius-md);
  background: var(--apple-system-white);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--apple-label);
  cursor: pointer;
  transition: all 0.2s ease;
}
.multiselect-btn:hover { border-color: var(--apple-system-blue); }

.multiselect.active .multiselect-btn {
  border-color: var(--apple-system-blue);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}

.multiselect-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiselect-label.has-selection {
  color: var(--apple-system-blue);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 768px) {
  .filters-toolbar { flex-direction: column; align-items: stretch; }
  .filters-actions { margin-left: 0; justify-content: flex-end; }
  .filter-select,
  .multiselect { min-width: auto; width: 100%; }
}

/* ===== tables.css ===== */
/* ============================================================ */
/*  TABLAS — componente canónico                                 */
/*                                                              */
/*  Estructura completa:                                         */
/*    .table-container                                           */
/*      .table-header   (.table-title + .results-count)          */
/*      .table-scroll                                            */
/*        table.apple-table                                      */
/*      .pagination-bar                                          */
/*                                                              */
/*  Cabecera plana (sin degradados), fija al hacer scroll,       */
/*  filas alternas y hover azul.                                 */
/* ============================================================ */

/* ---------- Contenedor ---------- */
.table-container {
  background: var(--apple-system-white);
  border: 1px solid var(--apple-separator);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Tablas de pocas columnas: limita el ancho para que no se estiren
   dejando huecos enormes entre valores. Envuelve toolbar + filtros + tabla. */
.tabla-estrecha {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.table-header {
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--apple-separator);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.table-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--apple-label);
}

.results-count {
  font-size: var(--font-size-xs);
  color: var(--apple-secondary-label);
  padding: 2px var(--space-2);
  background: rgba(0, 122, 255, 0.08);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
}

/* ---------- Tabla ---------- */
.apple-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.apple-table thead th {
  background: var(--apple-system-grouped-background);
  color: var(--apple-label);
  padding: var(--space-3);
  text-align: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--apple-separator);
  white-space: nowrap;
  position: sticky;            /* cabecera fija al hacer scroll */
  top: 0;
  z-index: 2;
}

.apple-table td {
  padding: 10px var(--space-3);
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--apple-separator);
  color: var(--apple-label);
}

.apple-table tbody tr:last-child td { border-bottom: none; }

/* Filas alternas (zebra): gris muy sutil para seguir la fila con la vista */
.apple-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.022); }

/* El hover SIEMPRE gana sobre la zebra (declarado después) */
.apple-table tbody tr:hover { background: rgba(0, 122, 255, 0.06); }

/* ---------- Ordenación por columna ---------- */
.apple-table th.ordenable {
  cursor: pointer;
  user-select: none;
}
.apple-table th.ordenable:hover { color: var(--apple-system-blue); }

.sort-icon {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.4;                      /* inactivo */
}
.sort-icon.activo {
  opacity: 1;
  color: var(--apple-system-blue);   /* activo */
}

/* ---------- Scroll horizontal con afordancia ---------- */
/* El scroll lo gestiona el wrapper, no la tabla (así la cabecera sigue sticky).
   Añade/quita .show-left / .show-right desde JS según scrollLeft. */
.table-scroll { overflow-x: auto; }
.table-scroll > table { display: table; }

.table-scroll-wrap { position: relative; }

.table-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 4;                  /* por encima de la cabecera sticky */
}
.table-shadow-left {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.13), rgba(0, 0, 0, 0));
}
.table-shadow-right {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.13), rgba(0, 0, 0, 0));
}
.table-scroll-wrap.show-left .table-shadow-left { opacity: 1; }
.table-scroll-wrap.show-right .table-shadow-right { opacity: 1; }

/* ---------- Paginación ---------- */
/* 25 filas por defecto; opciones 25 / 50 / 100 / 200. */
.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 14px;
  border-top: 1px solid var(--apple-separator);
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--apple-secondary-label);
}
.pagination-info label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.page-size-select {
  padding: 4px 6px;
  border: 1px solid var(--apple-separator);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  background: var(--apple-system-white);
  cursor: pointer;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px var(--space-3);
  border: 1px solid var(--apple-separator);
  border-radius: var(--radius-sm);
  background: var(--apple-system-white);
  font-family: inherit;
  font-size: var(--font-size-xs);
  color: var(--apple-label);
  cursor: pointer;
  transition: all 0.15s ease;
}
.pagination-btn:hover:not(:disabled) {
  border-color: var(--apple-system-blue);
  color: var(--apple-system-blue);
}
.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-current {
  font-size: var(--font-size-xs);
  color: var(--apple-secondary-label);
}

/* ---------- Filtro por columna (tipo Excel, embudo en la cabecera) ---------- */
.filter-icon {
  margin-left: 6px;
  font-size: 9px;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.filter-icon:hover  { opacity: 0.85; color: var(--apple-system-blue); }
.filter-icon.activo { opacity: 1;    color: var(--apple-system-blue); }

.col-filter-popup {
  position: absolute;
  z-index: var(--z-modal);
  width: 240px;
  background: var(--apple-system-white);
  border: 1px solid var(--apple-separator);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
}

/* El popup se inyecta en <body>: fuerza tipografía normal (la cabecera es uppercase) */
.col-filter-popup,
.col-filter-popup * {
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}

.col-filter-search input {
  width: 100%;
  padding: 6px var(--space-2);
  border: 1px solid var(--apple-separator);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.col-filter-all {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) 2px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--apple-label);
  border-bottom: 1px solid var(--apple-separator);
  cursor: pointer;
}

.col-filter-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}

.col-filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  font-size: var(--font-size-sm);
  color: var(--apple-label);
  cursor: pointer;
}
.col-filter-item:hover { background: var(--apple-system-grouped-background); }

.col-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: var(--space-2);
  margin-top: 4px;
  border-top: 1px solid var(--apple-separator);
}

.col-filter-loading {
  padding: var(--space-4);
  text-align: center;
  color: var(--apple-secondary-label);
  font-size: var(--font-size-sm);
}

@media (max-width: 1200px) {
  .apple-table { display: block; overflow-x: auto; }
}

/* ===== edit-mode.css ===== */
/* ============================================================ */
/*  MODO EDICIÓN DE TABLAS — estándar                            */
/*                                                              */
/*  La tabla arranca SIEMPRE en modo lectura. "Editar" entra en  */
/*  modo edición; los cambios NO se guardan celda a celda: se    */
/*  acumulan y se aplican en lote con Guardar (una transacción). */
/*                                                              */
/*  Tres señales visuales obligatorias:                          */
/*    1. Marco naranja en el contenedor de la tabla              */
/*    2. Píldora "Modo edición activo" junto al título           */
/*    3. Borde rojo en toda celda cuyo valor haya cambiado       */
/* ============================================================ */

/* ---------- 1. Marco naranja mientras se edita ---------- */
/* Se añade .edit-mode-active al contenedor de la PÁGINA (no al que se
   reemplaza por AJAX: al refrescar innerHTML conservaría la clase). */
.edit-mode-active .table-container {
  border-color: var(--apple-system-orange);
  box-shadow: 0 0 0 2px rgba(255, 149, 0, 0.2);
}

/* ---------- 2. Píldora "Modo edición activo" ---------- */
.edit-mode-indicator {
  display: none;                 /* .visible la muestra */
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 149, 0, 0.15);
  color: var(--apple-system-orange);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.edit-mode-indicator.visible { display: inline-flex; }

/* ---------- 3. Celda modificada: borde rojo ---------- */
/* Se marca comparando con data-original; si el valor vuelve al original,
   se quita la marca. Se mantiene hasta guardar o descartar. */
.cell-input {
  width: 100%;
  padding: 4px 6px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: center;
  border-radius: 4px;
}
.cell-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--apple-system-blue);
  background: var(--apple-system-white);
}
.cell-input:read-only {
  cursor: default;
}

.cell-input.modified {
  box-shadow: inset 0 0 0 2px var(--apple-system-red);
  background: rgba(255, 59, 48, 0.06);
}

/* Variante para celdas con borde real en vez de input sin borde */
td.modified {
  box-shadow: inset 0 0 0 2px var(--apple-system-red);
  background: rgba(255, 59, 48, 0.06);
}

/* ---------- Barra de edición (encima de la tabla) ---------- */
.edit-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.edit-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--apple-secondary-label);
}

.edit-status.activo {
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 149, 0, 0.15);
  color: var(--apple-system-orange);
  font-weight: var(--font-weight-medium);
}

.edit-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ===== badges.css ===== */
/* ============================================================ */
/*  BADGES DE ESTADO + CELDAS TRUNCADAS                          */
/*                                                              */
/*  Etiqueta de una columna de estado o categoría:               */
/*  verde = positivo/activo · rojo = inactivo/rechazado ·        */
/*  azul = informativo/categoría · naranja = pendiente.          */
/* ============================================================ */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.badge.on   { background: rgba(52, 199, 89, 0.12); color: #248a3d; }
.badge.off  { background: rgba(255, 59, 48, 0.10); color: #d70015; }
.badge.info { background: rgba(0, 122, 255, 0.12); color: #0066d6; }
.badge.warn { background: rgba(255, 149, 0, 0.12); color: #c93400; }

/* ---------- Variante en mayúsculas (estados de flujo) ---------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-2);
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-badge.status-draft    { background: rgba(255, 204, 0, 0.15);   color: #b38f00; }
.status-badge.status-approved { background: rgba(52, 199, 89, 0.15);   color: #248a3d; }
.status-badge.status-rejected { background: rgba(255, 59, 48, 0.15);   color: #d70015; }
.status-badge.status-pending  { background: rgba(255, 149, 0, 0.15);   color: #c93400; }
.status-badge.status-active   { background: rgba(0, 122, 255, 0.15);   color: #0066cc; }
.status-badge.status-inactive { background: rgba(142, 142, 147, 0.15); color: #636366; }

/* ---------- Celdas truncadas (con title="" para ver el texto completo) ---------- */
.cell-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-truncate-long {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== cards.css ===== */
/* ============================================================ */
/*  CARDS DE OPCIÓN — rejilla de accesos (p. ej. pantalla inicio)*/
/*                                                              */
/*  Tarjetas que llevan a cada módulo. Neutras por defecto (el   */
/*  color se reserva para significado); al pasar el ratón se     */
/*  elevan. La variante .deshabilitado es para módulos aún no    */
/*  construidos: inertes, apagadas y con badge "Próximamente".   */
/*  Solo tokens de tokens.css.                                   */
/* ============================================================ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.option-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 150px;
  padding: var(--space-5);
  background: var(--apple-system-white);
  border: 1px solid var(--apple-separator);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--apple-label);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

/* Solo las tarjetas activas (un <a>) reaccionan al ratón. */
a.option-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--apple-fill);
  transform: translateY(-2px);
}

a.option-card:focus-visible {
  outline: none;
  box-shadow: var(--apple-focus-ring);
}

.option-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--apple-fill);
  color: var(--apple-secondary-label);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
}

.option-card-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--apple-label-strong);
}

.option-card-desc {
  font-size: var(--font-size-sm);
  color: var(--apple-secondary-label);
  line-height: 1.45;
}

/* Empuja el pie (badge) al fondo cuando la tarjeta crece. */
.option-card-foot {
  margin-top: auto;
  padding-top: var(--space-1);
}

/* Módulo aún no construido: visible pero inerte. */
.option-card.deshabilitado {
  cursor: not-allowed;
  pointer-events: none;
  background: var(--apple-system-grouped-background);
  box-shadow: none;
}

.option-card.deshabilitado .option-card-title {
  color: var(--apple-secondary-label);
}

/* ===== modals.css ===== */
/* ============================================================ */
/*  MODALES — caja centrada sobre fondo oscurecido               */
/*                                                              */
/*    .modal-overlay(.visible)                                   */
/*      .modal-box (.modal-box--ancho)                           */
/*        .modal-header  (h2 + .modal-close)                     */
/*        .modal-body                                            */
/*        .modal-actions                                         */
/*                                                              */
/*  Abrir/cerrar = añadir/quitar .visible en el overlay.         */
/*  La edición de un registro se hace SIEMPRE en modal, no en    */
/*  línea dentro de la tabla.                                    */
/* ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-5);
}

.modal-overlay.visible { display: flex; }

.modal-box {
  background: var(--apple-system-white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

.modal-box--ancho { max-width: 640px; }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--apple-separator);
}

.modal-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--apple-label);
}

.modal-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--apple-secondary-label);
  cursor: pointer;
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--apple-system-grouped-background); }

.modal-body {
  padding: 18px var(--space-5);
  overflow-y: auto;
}

/* Nota informativa dentro del modal (barra azul a la izquierda) */
.modal-desc {
  background: rgba(0, 122, 255, 0.04);
  border-left: 3px solid var(--apple-system-blue);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--apple-secondary-label);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Aviso destructivo: cuando la acción borra o vacía datos */
.modal-warn {
  background: rgba(255, 59, 48, 0.06);
  border-left: 3px solid var(--apple-system-red);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: #d70015;
  margin-bottom: 14px;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 0 var(--space-5) var(--space-5);
}

/* ---------- Zona de subida de archivos (drag & drop) ---------- */
.upload-zone {
  border: 2px dashed var(--apple-separator);
  border-radius: var(--radius-lg);
  padding: 30px var(--space-5);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: var(--space-4);
}

.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--apple-system-blue);
  background: rgba(0, 122, 255, 0.03);
}

.upload-zone.file-loaded {
  border-color: var(--apple-system-green);
  border-style: solid;
  background: rgba(52, 199, 89, 0.04);
}

.upload-zone .upload-placeholder i {
  font-size: 28px;
  color: var(--apple-tertiary-label);
  margin-bottom: var(--space-2);
}
.upload-zone .upload-placeholder p {
  font-size: var(--font-size-sm);
  color: var(--apple-secondary-label);
  margin: 0;
}

/* ---------- Barra de progreso ---------- */
.progress-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--apple-system-grouped-background);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--apple-system-blue);
  transition: width 0.2s ease;
}
.progress-text {
  font-size: var(--font-size-xs);
  color: var(--apple-secondary-label);
  margin-top: 6px;
  text-align: center;
}

/* ===== feedback.css ===== */
/* ============================================================ */
/*  FEEDBACK — toasts, loader y avisos                           */
/*                                                              */
/*  Toda respuesta a una acción del usuario (guardar, borrar,    */
/*  importar) se comunica con un toast; nunca con alert().       */
/*  Ver js/toast.js para showToast(mensaje, tipo).               */
/* ============================================================ */

/* ---------- Toasts ---------- */
.toast-container {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  min-width: 300px;
  max-width: 400px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--apple-system-blue);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: toast-slide-in 0.3s ease-out forwards;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateX(100%);
  backdrop-filter: blur(10px);
}

.toast.success { border-left-color: var(--apple-system-green); }
.toast.error   { border-left-color: var(--apple-system-red); }
.toast.warning { border-left-color: var(--apple-system-yellow); }
.toast.info    { border-left-color: var(--apple-system-blue); }

.toast-icon {
  font-size: 18px;
  min-width: 18px;
}
.toast.success .toast-icon { color: var(--apple-system-green); }
.toast.error   .toast-icon { color: var(--apple-system-red); }
.toast.warning .toast-icon { color: var(--apple-system-yellow); }
.toast.info    .toast-icon { color: var(--apple-system-blue); }

.toast-message {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--apple-label-strong);
  line-height: 1.4;
}

@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-fade-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

/* ---------- Loader a pantalla completa ---------- */
.loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  display: none;              /* .visible lo muestra */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.loader-overlay.visible { display: flex; }

/* ---------- Spinner ---------- */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0, 122, 255, 0.2);
  border-top-color: var(--apple-system-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.spinner-lg { width: 34px; height: 34px; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Recarga parcial de una zona (AJAX) ---------- */
/* Añade .cargando al contenedor .zona-recargable mientras dura el fetch:
   son pseudo-elementos, sobreviven al swap de innerHTML y no piden markup. */
.zona-recargable { position: relative; }

.zona-recargable.cargando::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-lg);
  z-index: 40;
}

.zona-recargable.cargando::before {
  content: '';
  position: absolute;
  top: 72px;
  left: 50%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border: 3px solid rgba(0, 122, 255, 0.2);
  border-top-color: var(--apple-system-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 41;
}

/* ---------- Avisos en línea ---------- */
.alert {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin: var(--space-4) 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.alert-info    { background: rgba(0, 122, 255, 0.10); color: #0055d4; }
.alert-success { background: rgba(52, 199, 89, 0.10); color: #248a3d; }
.alert-warning { background: rgba(255, 149, 0, 0.10); color: #8a6d00; }
.alert-error   { background: rgba(255, 59, 48, 0.10); color: #d70015; }