/* ============================================================================
   gc-ui.css — Capa visual compartida · operadora.grupocarbon.mx
   Grupo Carbon · 24-Ago-2026

   QUÉ ES: la hoja común pendiente desde el pase del 03-Jul-2026 (sección 3 del
   HANDOFF, "gc-ui.css compartido ⏭ Omitido"). Unifica el acabado visual de las
   6 pantallas sin tocar su HTML, su JS ni su lógica de negocio.

   CÓMO SE CARGA: con un <link> al FINAL del <head>, después del <style> inline
   de cada página. Así gana en empates de especificidad y puede corregir lo que
   haga falta. Cada página conserva su paleta propia (sbc_socios sigue vino/oro).

   REGLA DE SEGURIDAD: esta hoja NO altera geometría de layout — nada de width,
   height, display, position, float, grid-template ni flex-direction sobre
   selectores existentes. Solo color, sombra, radio, transición, foco, tipografía
   y cifras. Por eso es reversible: se quita el <link> y todo vuelve atrás.

   PARA REVERTIR: borrar la línea <link ... gc-ui.css> del <head> de la página.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* Tipografía — dirección ya establecida por rh_dashboard, extendida al resto */
  --gc-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --gc-font-display: 'Space Grotesk', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --gc-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;

  /* Escala de elevación — antes cada pantalla inventaba su propia sombra */
  --gc-e1: 0 1px 2px rgba(13, 17, 23, .06), 0 1px 3px rgba(13, 17, 23, .04);
  --gc-e2: 0 2px 4px rgba(13, 17, 23, .06), 0 4px 12px rgba(13, 17, 23, .07);
  --gc-e3: 0 6px 16px rgba(13, 17, 23, .09), 0 12px 32px rgba(13, 17, 23, .08);
  --gc-e4: 0 12px 28px rgba(13, 17, 23, .12), 0 24px 56px rgba(13, 17, 23, .12);

  /* Escala de radios */
  --gc-r-sm: 6px;
  --gc-r: 10px;
  --gc-r-lg: 14px;
  --gc-r-xl: 20px;

  /* Movimiento */
  --gc-t-fast: .12s cubic-bezier(.4, 0, .2, 1);
  --gc-t: .2s cubic-bezier(.4, 0, .2, 1);
  --gc-t-slow: .34s cubic-bezier(.22, 1, .36, 1);

  /* Foco — un solo anillo para todo el subdominio */
  --gc-ring: 0 0 0 3px rgba(21, 101, 192, .32);
  --gc-ring-c: #1565C0;
}

/* --------------------------------------------------- 2. BASE TIPOGRÁFICA */
body {
  font-family: var(--gc-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Los títulos toman la display; se excluyen los que viven dentro de tablas */
h1, h2, h3 {
  font-family: var(--gc-font-display);
  letter-spacing: -.015em;
}

/* No secuestrar contextos monoespaciados ya existentes */
code, pre, kbd, samp,
[style*="monospace"], .mono, .code {
  font-family: var(--gc-font-mono);
}

::selection { background: rgba(21, 101, 192, .22); }

/* ------------------------------------------------- 3. FIRMA: CIFRAS FIJAS */
/* El corazón de esta suite son columnas de números que deben cuadrar: nómina,
   cuotas IMSS, bases SBC, costos por unidad. Con cifras proporcionales un 1 mide
   menos que un 8 y las columnas bailan. tabular-nums las clava a un ancho fijo,
   así el ojo detecta un dígito de más sin leer la cifra completa.
   Es la mejora funcional de mayor impacto de toda esta hoja. */
table, th, td,
input[type="number"], input[type="text"], input[type="date"],
select, output, progress,
.num, .cifra, .monto, .total, .kpi, .metric, .metric-val,
.card-val, .stat, .stat-val, .big, .val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Cifras a la derecha para comparar magnitudes de un vistazo */
td.num, th.num, td.monto, td.total, td.cifra,
td[align="right"], th[align="right"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ 4. TABLAS */
/* Sin tocar layout: solo legibilidad de filas y encabezados pegajosos. */
table { border-collapse: collapse; }

tbody tr {
  transition: background-color var(--gc-t-fast);
}
tbody tr:hover {
  background-color: rgba(21, 101, 192, .045);
}

/* Encabezado que no se pierde al hacer scroll en tablas largas */
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-clip: padding-box;
}

/* Cebrado sutil solo si la página no definió ya el suyo */
tbody tr:nth-child(even) { background-color: rgba(13, 17, 23, .018); }
tbody tr:nth-child(even):hover { background-color: rgba(21, 101, 192, .055); }

/* Contenedor con scroll horizontal para tablas anchas en pantallas chicas */
.tw, .table-wrap, .tbl-wrap, .tabla-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ------------------------------------------------- 5. CONTROLES Y BOTONES */
button, .btn, .tb, input, select, textarea {
  font-family: inherit;
  transition: background-color var(--gc-t), border-color var(--gc-t),
              box-shadow var(--gc-t), color var(--gc-t), transform var(--gc-t-fast);
}

button:not(:disabled):active,
.btn:not(:disabled):active {
  transform: translateY(1px);
}

button:disabled, .btn:disabled,
input:disabled, select:disabled, textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Campos: el foco se ve, no solo se adivina */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gc-ring-c);
  box-shadow: var(--gc-ring);
}

/* -------------------------------------------------------------- 6. FOCO */
/* afirme no tenía ni un :focus-visible; portal y kc_activos solo parcial.
   Un anillo consistente en todo lo que se puede tabular. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--gc-ring-c);
  outline-offset: 2px;
  border-radius: var(--gc-r-sm);
}

/* El navegador no debe dibujar su anillo encima del nuestro */
:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------- 7. SCROLLBARS */
* { scrollbar-width: thin; scrollbar-color: rgba(13, 17, 23, .26) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(13, 17, 23, .22);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(13, 17, 23, .38); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Sobre fondo carbon la barra clara se pierde: se invierte */
.gc-hdr::-webkit-scrollbar-thumb,
header::-webkit-scrollbar-thumb,
aside::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, .22);
}

/* -------------------------------------------------------- 8. ELEVACIONES */
/* Solo se retoca la sombra, nunca el tamaño ni la posición de la tarjeta. */
.card, .tool-card, .panel, .box, .kpi-card, .metric-card, .login-card {
  transition: box-shadow var(--gc-t), transform var(--gc-t), border-color var(--gc-t);
}
.tool-card:hover, .kpi-card:hover, .metric-card:hover {
  box-shadow: var(--gc-e3);
}

/* --------------------------------------------------------- 9. IMPRESIÓN */
/* Esta suite genera reportes que se imprimen (SBC Socios, Lista de Raya,
   resumen ejecutivo de RH). Antes salían con la navegación encima. */
@media print {
  header, aside, nav, .hamburger, .drawer-backdrop, .side-link,
  .hdr-search, .hdr-user, .no-print, .btn, button {
    display: none !important;
  }
  body { background: #fff !important; color: #000 !important; }
  .card, .panel, .box, table {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    break-inside: avoid;
  }
  thead { display: table-header-group; }   /* repite encabezado en cada hoja */
  tr, img { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
  @page { margin: 14mm; }
}

/* ------------------------------------------------------------ 10. MÓVIL */
@media (max-width: 640px) {
  /* Área táctil mínima usable en controles chicos */
  button, .btn, .tb, [role="button"] { min-height: 40px; }
  /* iOS hace zoom si el input mide menos de 16px */
  input, select, textarea { font-size: max(16px, 1em); }
}

/* ------------------------------------------- 11. MOVIMIENTO REDUCIDO */
/* Solo rh_dashboard lo respetaba. Ahora las 6. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------- 12. CORRECCIONES PUNTUALES */

/* Portal · el badge "Activo" está en position:absolute arriba a la derecha y
   .card-name ocupa todo el ancho, así que el título corría por debajo del badge
   y los dos se encimaban. Bug previo a esta hoja (verificado con y sin ella).
   Se reserva el carril del badge; la elipsis del título sigue funcionando. */
.tool-card .card-name { padding-right: 68px; }

/* ------------------------------------------------------ 13. UTILIDADES */
.gc-tnum { font-variant-numeric: tabular-nums; }
.gc-mono { font-family: var(--gc-font-mono); }
.gc-hairline { border: 0; border-top: 1px solid rgba(13, 17, 23, .1); }
[hidden] { display: none !important; }
