/* ==========================================================================
   Tigre Social · ui.css  ·  requiere tokens.css cargado antes
   Copiar a: shared/css/ui.css
   Reemplaza los .card / .btn / .badge / .kpi / .table-wrap de cada módulo.
   Nada de colores hardcodeados en las vistas: usar estas clases.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --- Layout -------------------------------------------------------------- */
.page      { max-width: 1320px; margin: 0 auto; padding: var(--sp-6); }
.stack     { display: flex; flex-direction: column; gap: var(--sp-4); }
.row       { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.row-split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); }
.grid      { display: grid; gap: var(--sp-3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* --- Header de módulo ---------------------------------------------------- */
.app-header {
  height: var(--header-h); padding: 0 var(--sp-6);
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  position: sticky; top: 0; z-index: 20;
}
.app-header__logo { height: 30px; width: auto; display: block; }
.app-nav { display: flex; align-items: center; gap: var(--sp-1); }
.app-nav a {
  font-size: 14px; color: var(--ink-3); padding: 7px 12px;
  border-radius: var(--r-sm); text-decoration: none; transition: background var(--t-fast);
}
.app-nav a:hover { background: var(--page); color: var(--ink); text-decoration: none; }
.app-nav a[aria-current="page"] { background: var(--page); color: var(--ink); font-weight: 600; }
.app-header__burger { display: none; }

/* --- Títulos ------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
}
h1, .h1 {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h1);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.1; color: var(--ink);
}
h2, .h2 { margin: 0; font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.01em; }
.subtitle { margin: 0; font-size: 14px; color: var(--ink-4); }
.muted    { color: var(--ink-4); }
.mono     { font-family: var(--font-mono); }

/* --- Tarjeta ------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.card__head {
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.card__title { font-size: var(--fs-lead); font-weight: 600; color: var(--ink); }
.card__hint  { font-size: var(--fs-label); color: var(--ink-4); }
.card__body  { padding: 18px; }

/* --- KPI ----------------------------------------------------------------- */
.kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.kpi__label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}
.kpi__value {
  font-family: var(--font-display); font-size: var(--fs-kpi); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.1; color: var(--ink);
}
.kpi--primary .kpi__value { color: var(--brand); }  /* solo el KPI principal */
.kpi__foot { font-size: 11.5px; color: var(--ink-4); }

/* --- Botones ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 9px 16px; border: 0; border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast);
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--primary   { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }
.btn--secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); font-weight: 500; }
.btn--secondary:hover { background: var(--page); color: var(--ink); text-decoration: none; }
.btn--quiet     { background: var(--page); color: var(--ink); font-weight: 500; }
.btn--quiet:hover { background: var(--surface-3); }
.btn--ghost     { background: transparent; color: var(--ink-4); font-weight: 500; }
.btn--ghost:hover { background: var(--page); color: var(--ink); }
.btn--danger    { background: var(--danger); color: #fff; }
.btn--danger:hover { background: var(--brand-dark); }
.btn--block     { width: 100%; }
.btn[disabled]  { opacity: .5; cursor: not-allowed; }

/* Botón de ícono (acciones de fila) */
.btn-icon {
  width: 30px; height: 30px; border: 0; background: transparent;
  border-radius: var(--r-sm); color: var(--ink-4);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.btn-icon:hover { background: var(--page); color: var(--ink); }
.btn-icon--danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn-icon svg { width: 15px; height: 15px; }

/* --- Chips de filtro ----------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 0; border-radius: var(--r-pill);
  background: var(--page); color: var(--ink-2);
  font-family: var(--font-sans); font-size: var(--fs-meta); font-weight: 500;
  cursor: pointer; transition: background var(--t-fast);
}
.chip:hover { background: var(--surface-3); }
.chip[aria-pressed="true"], .chip--active { background: var(--brand); color: #fff; font-weight: 600; }
.chip svg { width: 14px; height: 14px; }

/* --- Badges de estado ---------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.badge--ok      { color: var(--ok);      background: var(--ok-soft); }
.badge--warn    { color: var(--warn);    background: var(--warn-soft); }
.badge--danger  { color: var(--brand-dark); background: var(--danger-soft); }
.badge--info    { color: var(--info);    background: var(--info-soft); }
.badge--neutral { color: var(--ink-3);   background: var(--surface-3); }

/* Punto de categoría: reemplaza las píldoras grandes dentro de las tablas */
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; background: var(--ink-mute); }
.dot--brand { background: var(--brand); }
.dot--accent { background: var(--accent); }
.dot--warn { background: var(--warn); }
.dot--ok { background: var(--ok); }

/* --- Formularios --------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-label); font-weight: 500; color: var(--ink-2); }
.field__label .req { color: var(--brand); }
.field__hint  { font-size: 12px; color: var(--ink-4); }

.input, .select, .textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-sans); font-size: 14px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { resize: vertical; min-height: 72px; }
.input:hover, .select:hover, .textarea:hover { border-color: #D9D2CA; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--focus-ring);
}
.input[type="date"], .input[type="time"], .input--mono { font-family: var(--font-mono); }
.input::placeholder, .textarea::placeholder { color: var(--ink-mute); }
.input--invalid { border-color: var(--danger); }

/* Buscador con ícono */
.search { position: relative; display: flex; align-items: center; flex: 1; min-width: 240px; }
.search svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--ink-4); pointer-events: none; }
.search .input { padding-left: 33px; }

/* Radios como tarjeta (formato de intervención) */
.radio-card {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); background: var(--surface);
  font-size: 14px; color: var(--ink-2); cursor: pointer;
}
.radio-card:hover { background: var(--surface-2); }
.radio-card--on { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); font-weight: 500; }

/* --- Tabla --------------------------------------------------------------- */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.table-wrap__toolbar {
  padding: 12px var(--sp-4); border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
table.table { width: 100%; border-collapse: collapse; }
.table thead th {
  padding: 9px var(--sp-4); text-align: left; background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4);
}
.table tbody td {
  padding: 8px var(--sp-4); height: var(--row-h);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-cell); color: var(--ink-3); vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); cursor: pointer; }
.table td.is-key { font-size: 14px; font-weight: 500; color: var(--ink); }
.table td.is-mono, .table th.is-mono { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.table td.is-num { text-align: right; font-family: var(--font-mono); }
.table td.is-actions { text-align: right; white-space: nowrap; }
.table td.is-actions .btn-icon + .btn-icon { margin-left: 2px; }

/* --- Paginación ---------------------------------------------------------- */
.pager {
  padding: 11px var(--sp-4); background: var(--surface-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.pager__count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); }
.pager__pages { display: flex; align-items: center; gap: 5px; }
.pager a, .pager span.pager__page {
  min-width: 30px; height: 30px; padding: 0 6px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); text-decoration: none;
}
.pager a:hover { background: var(--page); color: var(--ink); text-decoration: none; }
/* La página actual y la deshabilitada se pintan sobre <span class="pager__page">,
   así que necesitan la misma especificidad que la regla de arriba. */
.pager .is-current, .pager span.pager__page.is-current { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; }
.pager .is-disabled, .pager span.pager__page.is-disabled { color: #B8B1AA; pointer-events: none; }

/* --- Pasos del formulario ------------------------------------------------ */
.steps { background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 var(--sp-6); display: flex; align-items: stretch; gap: 2px; overflow-x: auto; }
.step { display: flex; align-items: center; gap: 9px; padding: 13px 14px; font-size: 14px; color: var(--ink-3); white-space: nowrap; text-decoration: none; }
.step__num { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--ink-4); font-family: var(--font-mono); font-size: 11.5px; display: flex; align-items: center; justify-content: center; }
.step--on { border-bottom: 2px solid var(--brand); margin-bottom: -1px; color: var(--ink); font-weight: 600; }
.step--on .step__num { background: var(--brand); color: #fff; }
.step--done .step__num { background: var(--ok-soft); color: var(--ok); }
.progress { width: 90px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 3px; background: var(--brand); }

/* --- Mensajes / autoguardado -------------------------------------------- */
.flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font-size: 13.5px; }
.flash--ok     { background: var(--ok-soft);     color: var(--ok); }
.flash--warn   { background: var(--warn-soft);   color: var(--warn); }
.flash--danger { background: var(--danger-soft); color: var(--brand-dark); }
.flash--info   { background: var(--info-soft);   color: var(--info); }
.autosave { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok); font-size: var(--fs-label); font-weight: 500; }
.autosave::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Barras de datos (rankings) ----------------------------------------- */
.bar-row { display: flex; align-items: center; gap: var(--sp-3); }
.bar-row__label { width: 150px; font-size: var(--fs-meta); color: var(--ink-2); }
.bar-row__track { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.bar-row__fill  { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.bar-row__fill--accent { background: var(--accent); }
.bar-row__value { width: 32px; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }

/* --- Iconos (set SVG inline, sin emojis) -------------------------------- */
.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none;
        stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

/* ==========================================================================
   RESPONSIVE · el sistema se usa en celular en terreno
   ========================================================================== */

@media (max-width: 1100px) {
  .grid-5, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  .page { padding: var(--sp-4); }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr 1fr; }
  .row-split { flex-direction: column; align-items: stretch; gap: var(--sp-3); }

  h1, .h1 { font-size: 22px; }
  .kpi__value { font-size: 22px; }

  /* Nav colapsada */
  .app-header__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--touch); height: var(--touch); border: 0; background: transparent;
    color: var(--ink); border-radius: var(--r-sm); cursor: pointer;
  }
  .app-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md); display: none;
  }
  .app-nav[data-open="true"] { display: flex; }
  .app-nav a { min-height: var(--touch); display: flex; align-items: center; border-radius: 0; padding: 0 var(--sp-4); }

  /* Toques cómodos */
  .btn { min-height: var(--touch); padding: 12px 18px; font-size: 15px; }
  .btn-icon { width: var(--touch); height: 40px; }
  .input, .select, .textarea { font-size: 16px; padding: 12px 14px; } /* evita el zoom de iOS */
  .chip { min-height: 38px; }

  /* Tabla → tarjetas. En el <td> poner data-label="Fecha" etc. */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tbody tr {
    border: 1px solid var(--line); border-radius: var(--r-md);
    margin-bottom: var(--sp-3); padding: var(--sp-3); background: var(--surface);
  }
  .table tbody td {
    height: auto; padding: 5px 0; border: 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  }
  .table tbody td::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-4); flex: none;
  }
  .table td.is-key { font-size: 16px; }
  .table td.is-num { text-align: left; }
  .table td.is-actions {
    justify-content: stretch; gap: var(--sp-2);
    padding-top: var(--sp-3); margin-top: var(--sp-2); border-top: 1px solid var(--line-soft);
  }
  .table td.is-actions::before { display: none; }
  .table td.is-actions .btn-icon { flex: 1; height: var(--touch); background: var(--page); margin: 0; }

  .pager { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  /* Con 44px de mínimo táctil, siete páginas no entran en 375px: que bajen de línea
     en vez de quedar cortadas por el overflow del .table-wrap. */
  .pager__pages { flex-wrap: wrap; justify-content: center; }
  .pager a, .pager span.pager__page { min-width: 44px; height: 40px; }

  .steps { padding: 0 var(--sp-3); }
  .card__body, .table-wrap__toolbar { padding: var(--sp-3); }
  .bar-row__label { width: 110px; font-size: 12.5px; }
}

/* --- Impresión (informes en PDF) ---------------------------------------- */
@media print {
  .app-header, .app-nav, .table-wrap__toolbar, .pager, .btn, .btn-icon, .chip, .steps { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .card, .table-wrap, .kpi { border-color: #ccc; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}