/* ============================================================================
   LINK ADVANCE — CHASIS TÁCTIL
   Reencuadra los mismos componentes de base.css con el lenguaje de una app de
   sistema: hojas inferiores, listas agrupadas, barra de pestañas, título
   grande, toasts como notificación. NO cambia el markup: se apoya en las
   mismas clases.

   Se carga SIEMPRE DESPUÉS de base.css y shell.css — corrige por cascada.
   Si agregas CSS nuevo al proyecto, ponlo ANTES de este archivo o dejará
   de aplicar.

   Frontera: (hover: none) and (pointer: coarse) — es decir, dedo. Nunca por
   ancho: una laptop angosta no debe convertirse en teléfono. La excepción es
   tabla→tarjeta, que sí depende del ancho disponible.
   ============================================================================ */

/* ============================================================================
   1 · TABLA → TARJETA  (por ancho, no por dedo)
   Las tablas de datos no se scrollean horizontalmente en teléfono: se apilan.
   Mecánica: tras cada render, un helper JS copia el texto de cada <th> al
   atributo data-label del <td> correspondiente (ver snippets/ui.js → tablaCards).
   ============================================================================ */
@media (max-width: 639px) {
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table-wrap { overflow: visible; }
  .table tr {
    margin-bottom: 10px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--r-ios-lg);
    background: var(--surface); box-shadow: var(--shadow-xs);
  }
  .table td {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; padding: 5px 0; border: none;
  }
  .table td::before {
    content: attr(data-label);
    flex-shrink: 0; color: var(--text-muted);
    font-size: 12px; font-weight: 600;
  }
  /* Línea 1: el identificador manda. Sin etiqueta, grande, con el estado a la
     derecha. Marcar ese <td> con class="td-title". */
  .table td.td-title { padding-bottom: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-strong); }
  .table td.td-title::before { content: none; }
  /* Lo secundario vive en el detalle, no en la tarjeta. */
  .table td.td-hide-sm { display: none; }

  /* Formularios a una columna. Sin excepciones. */
  .grid-2, .form-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   2 · LENGUAJE DE SISTEMA  (solo dedo)
   ============================================================================ */
@media (hover: none) and (pointer: coarse) {

  /* ── Tarjetas ── radio más cerrado y sombra mínima: la profundidad la da el
     apilado, no la sombra. ── */
  .card, .stat { border-radius: var(--r-ios-lg); box-shadow: 0 1px 3px rgba(12, 23, 38, .08); }
  .card.is-link:active { transform: scale(.985); }

  /* ── Botones ── feedback de opacidad, que es lo que hace el sistema. ── */
  .btn:active, .btn-icon:active { opacity: .55; transform: none; }

  /* ── Lista agrupada ── el patrón de formulario nativo: un bloque con radio,
     filas separadas por hairline, etiqueta a la izquierda y valor/control a la
     derecha. Reemplaza al stack de label+input cuando la pantalla es un
     formulario largo. ── */
  .list-group {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-ios-md);
    overflow: hidden;
    margin-bottom: var(--space-5);
  }
  .list-group > .list-row + .list-row { border-top: 1px solid var(--hairline); }
  .list-row {
    display: flex; align-items: center; gap: 12px;
    min-height: var(--row-h-lg); padding: 10px 14px;
  }
  .list-row > .label { flex: none; font-size: 15px; font-weight: 500; color: var(--text-strong); }
  .list-row > .value { flex: 1; text-align: right; color: var(--text-muted); font-size: 15px; }
  .list-row .input, .list-row .select {
    flex: 1; min-height: auto; padding: 0; border: none; background: none;
    text-align: right; box-shadow: none;
  }
  .list-row .input:focus { box-shadow: none; }
  .list-row.is-link::after {
    content: ""; flex: none; width: 8px; height: 8px;
    border-right: 2px solid var(--text-muted); border-top: 2px solid var(--text-muted);
    transform: rotate(45deg); opacity: .6;
  }
  .list-row:active { background: var(--surface-2); }
  .list-title {
    padding: var(--space-5) var(--space-4) var(--space-2);
    font-size: 12px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-muted);
  }

  /* Cuando NO se reescribe el markup a listas agrupadas, al menos cada .field
     pasa a ser una fila con superficie propia: cubre formularios viejos de una
     sola vez, sin tocar HTML. */
  .field.boxed {
    padding: 12px 14px; border-radius: var(--r-ios-md);
    background: var(--surface-2); border: 1px solid var(--hairline);
  }

  /* ── Modal → hoja inferior ── pegada al piso, esquinas superiores redondeadas,
     handle visible. Es el gesto que el usuario espera en teléfono. ── */
  .modal { place-items: end stretch; padding: 0; }
  .modal .sheet {
    width: 100%; max-height: 92dvh;
    border-radius: var(--r-ios-lg) var(--r-ios-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%); opacity: 1;
    transition: transform var(--t-ios);
  }
  .modal.open .sheet { transform: none; }
  .sheet-handle {
    display: block; width: 36px; height: 5px; margin: 8px auto 0;
    border-radius: var(--r-pill); background: var(--fill-2);
  }
  .sheet-head { position: sticky; top: 0; z-index: 1; background: var(--surface); }
  .sheet-foot {
    position: sticky; bottom: 0;
    flex-direction: column-reverse; gap: 8px;
    background: var(--surface);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }
  .sheet-foot .btn { width: 100%; }

  /* ── Hoja de acción ── lista de opciones grandes + Cancelar separado. Se usa
     para "elegir origen de la foto", "ordenar por", "exportar como". ── */
  .action-sheet { display: grid; gap: 8px; padding: 8px; }
  .action-sheet .group { border-radius: var(--r-ios-md); overflow: hidden; background: var(--surface); }
  .action-sheet button {
    display: flex; align-items: center; gap: 12px; width: 100%;
    min-height: var(--row-h-lg); padding: 0 18px;
    font-size: 17px; color: var(--primary); background: var(--surface);
  }
  .action-sheet .group button + button { border-top: 1px solid var(--hairline); }
  .action-sheet button:active { background: var(--surface-2); }
  .action-sheet .cancel { border-radius: var(--r-ios-md); font-weight: 700; color: var(--text-strong); }

  /* ── Toast → banner superior con blur, como una notificación del sistema. ── */
  .toasts {
    top: calc(env(safe-area-inset-top) + 8px); bottom: auto;
    left: 10px; right: 10px; max-width: none;
  }
  .toast {
    background: var(--surface-chrome);
    backdrop-filter: var(--blur-chrome); -webkit-backdrop-filter: var(--blur-chrome);
    animation: la-toast-down .3s var(--ease-ios);
  }
  @keyframes la-toast-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

  /* ── Cajón lateral ── filas agrupadas con radio, no un bloque plano. ── */
  .sidebar { backdrop-filter: var(--blur-chrome); -webkit-backdrop-filter: var(--blur-chrome); }
  .side-item { margin-inline: var(--space-2); }

  /* ── Estado vacío ── más aire; se lee como pantalla, no como hueco. ── */
  .empty { padding: 3.5rem 1.25rem; }
}

/* ============================================================================
   3 · BARRA DE PESTAÑAS INFERIOR
   Máximo 5 destinos. El resto vive en el cajón. Solo en teléfono.
   El contenido reserva su alto: .page gana padding-bottom cuando existe.
   ============================================================================ */
@media (max-width: 899px) {
  .tabbar {
    position: fixed; z-index: 35; left: 0; right: 0; bottom: 0;
    display: flex;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--hairline);
    background: var(--surface-chrome);
    backdrop-filter: var(--blur-chrome); -webkit-backdrop-filter: var(--blur-chrome);
  }
  .tabbar a {
    flex: 1; display: grid; place-items: center; gap: 2px;
    padding-top: 6px;
    color: var(--text-muted); font-size: 10.5px; font-weight: 600;
    text-decoration: none;
  }
  .tabbar a .ico { width: 23px; height: 23px; }
  .tabbar a.active { color: var(--primary); }
  .tabbar a:active { opacity: .55; }
  body.has-tabbar .page { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-6)); }
}
@media (min-width: 900px) { .tabbar { display: none; } }

/* ============================================================================
   4 · TÍTULO GRANDE
   El título arranca grande dentro del contenido y se encoge a la barra al
   hacer scroll. El colapso lo dispara un IntersectionObserver que pone
   .is-scrolled en <body> (ver snippets/ui.js → tituloGrande).
   ============================================================================ */
@media (max-width: 899px) {
  .title-lg {
    font-family: var(--font-display);
    font-size: 30px; font-weight: 800; letter-spacing: -.03em;
    color: var(--text-strong);
    padding: var(--space-2) 0 var(--space-4);
  }
  .topbar h1 { opacity: 0; transform: translateY(6px); transition: opacity var(--t), transform var(--t); }
  body.is-scrolled .topbar h1 { opacity: 1; transform: none; }
}

/* ============================================================================
   5 · DEGRADACIÓN
   Sin backdrop-filter, el material translúcido se vuelve opaco en vez de
   transparente ilegible.
   ============================================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .tabbar, .toast, .sidebar { background: var(--surface); }
}