/* Estilos por vista: login, inicio, auditoría, resultados, pendientes, análisis, mapa, gestión, detalle, cuenta.
   Capa: views. Mobile primero; ≥600px y ≥900px amplían. */

@layer views {

  /* ---------- Login ---------- */
  .vista-login {
    display: grid;
    gap: var(--s-5);
    justify-items: stretch;
    max-width: 440px;
    width: 100%;
    margin: var(--s-6) auto 0;
  }
  .login-marca { display: grid; justify-items: center; gap: var(--s-2); text-align: center; padding-top: var(--s-4); }
  .login-monograma {
    display: inline-grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: var(--r-lg);
    background: var(--brand);
    color: var(--on-brand);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
  }
  .login-marca-nombre { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--ink-strong); }
  .login-marca-sub { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
  .login-titulo { margin: 0; text-align: left; }
  .login-form { display: grid; gap: var(--s-3); }
  .login-accion { width: 100%; }
  .login-idioma { justify-self: center; }
  .login-demo { display: grid; gap: var(--s-2); }
  .login-demo-lista { display: grid; gap: var(--s-2); }
  .vista-login > .card { padding: var(--s-5); }

  /* ---------- Inicio ---------- */
  .inicio-grid { display: grid; gap: var(--s-4); }
  .inicio-col { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
  .inicio-bloque { display: grid; gap: var(--s-3); }
  .inicio-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    width: 100%;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }
  .inicio-fila:last-child { border-bottom: 0; }
  .inicio-fila-texto { display: grid; gap: 2px; min-width: 0; flex: 1 1 180px; }
  .inicio-fila-texto strong { overflow-wrap: anywhere; }
  .inicio-fila--boton {
    padding-inline: var(--s-2);
    margin-inline: calc(var(--s-2) * -1);
    border-radius: var(--r-sm);
    color: inherit;
    cursor: pointer;
  }
  .inicio-fila--boton:hover { background: var(--surface-2); }
  .inicio-fila--boton:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .inicio-fila > .btn { flex: 0 0 auto; }

  /* ---------- Auditoría (captura) ---------- */
  .recorrido-titulo { margin: 0; }
  .recorrido-cabecera { display: flex; justify-content: space-between; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
  .recorrido-fila { display: grid; gap: var(--s-2); }
  .recorrido-barra > .btn { justify-self: stretch; width: 100%; }
  .recorrido-barra {
    position: sticky;
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    margin: 0 calc(var(--s-4) * -1);
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-2);
  }
  .progreso-cab { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-sm); color: var(--ink-strong); font-weight: var(--fw-medium); }
  .progreso-seccion { display: grid; gap: var(--s-1); }
  .pregunta { gap: var(--s-3); }
  .pregunta-texto { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.35; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: 0; }
  .pregunta-texto .badge { font-weight: var(--fw-semibold); }
  .pendiente-caja {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--r-md);
    background: var(--warn-soft);
    border: 1px solid var(--warn-fill);
    color: var(--warn-ink);
  }
  .pregunta.estado-bad .pendiente-caja { background: var(--bad-soft); border-color: var(--bad-fill); color: var(--bad-ink); }
  .pendiente-datos { display: grid; gap: var(--s-3); }
  .recordatorio-enviado { color: var(--ok-ink); font-weight: var(--fw-medium); margin: 0; }
  .vista-auditoria .card textarea { min-height: 88px; }
  .paso { display: grid; gap: var(--s-4); }
  .paso-cabecera { display: grid; gap: var(--s-1); }
  .paso-titulo { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-tight); }

  /* Resumen de cierre */
  .resumen-seccion { display: grid; gap: var(--s-2); }
  .resumen-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-2) var(--s-3);
    align-items: center;
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm);
  }
  .resumen-fila:last-child { border-bottom: 0; }
  .resumen-fila-texto { min-width: 0; overflow-wrap: anywhere; }
  .resumen-puntaje {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ink-strong);
  }
  .resumen-puntaje.ok { color: var(--ok); }
  .resumen-puntaje.warn { color: var(--warn); }
  .resumen-puntaje.bad { color: var(--bad); }
  .resumen-estado { display: grid; gap: var(--s-2); justify-items: start; }
  .resumen-sello { display: inline-flex; }
  .resumen-critico {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    background: var(--bad-soft);
    border: 1px solid var(--bad-fill);
    color: var(--bad-ink);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
  }

  /* Detalle de punto (auditoría) */
  .detalle-layout { display: grid; gap: var(--s-4); min-width: 0; }
  .detalle-maestro { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
  .detalle-principal { display: grid; gap: var(--s-4); min-width: 0; }
  .detalle-punto { display: grid; gap: var(--s-3); }
  .detalle-punto-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); }
  .detalle-puntaje { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
  .detalle-seccion { display: grid; gap: var(--s-2); }
  .detalle-fotos { display: grid; gap: var(--s-2); }
  .detalle-acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); }

  /* ---------- Resultados ---------- */
  .resultados-kpi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }
  details.resultados-filtros { display: block; padding: var(--s-3) var(--s-4); }
  details.resultados-filtros > :not(summary) { margin-top: var(--s-3); }
  .filtros-campos { display: grid; gap: var(--s-3); }
  .filtros-fechas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); }
  .resultados-modo { display: grid; min-width: 0; }
  .resultados-modo .segmented { width: 100%; }
  .resultados-modo .segmented > button { flex: 1 0 max-content; }
  .resultados-tarjeta {
    display: grid;
    gap: var(--s-2);
    min-width: 0;
  }
  .resultados-tarjeta-acc {
    display: grid;
    gap: var(--s-1);
    min-height: var(--hit);
    text-align: left;
    color: var(--ink-strong);
    font-weight: var(--fw-semibold);
    border-radius: var(--r-md);
    overflow-wrap: anywhere;
  }
  .resultados-tarjeta-acc:hover { color: var(--brand-ink); }
  .resultados-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
  .resultados-enlace {
    display: inline-flex;
    align-items: center;
    min-height: var(--hit);
    color: var(--brand-ink);
    font-weight: var(--fw-semibold);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .resultados-fila-texto { display: grid; gap: 2px; min-width: 0; }
  .resultados-fila-texto small { color: var(--muted); }
  tr.resultados-fila.es-actual td { background: var(--brand-soft); }
  .linea { stroke: var(--line); }

  /* ---------- Pendientes ---------- */
  .pendiente-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
  .pendiente-insignias { display: flex; flex-wrap: wrap; gap: var(--s-1); }
  .pendiente-historial { display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
  .pendiente-acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); }

  /* ---------- Análisis ---------- */
  .analisis-kpi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }
  .analisis-bloque { display: grid; gap: var(--s-3); min-width: 0; }
  .analisis-barras { display: grid; gap: var(--s-3); }
  .analisis-barra { display: grid; gap: var(--s-1); min-width: 0; }
  .analisis-barra-cab {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-2);
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--ink);
    min-width: 0;
  }
  .analisis-barra-cab span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .analisis-barra-cab .num { font-weight: var(--fw-semibold); color: var(--ink-strong); white-space: nowrap; }
  .analisis-tabla { min-width: 0; }
  .acciones-principales { display: grid; gap: var(--s-2); }

  /* ---------- Mapa ---------- */
  .mapa-controles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
    align-items: end;
  }
  .mapa-controles .btn { justify-self: start; }
  .mapa-layout { display: grid; gap: var(--s-4); min-width: 0; }
  .mapa-principal { min-width: 0; }
  .mapa-fig { margin: 0; display: grid; gap: var(--s-2); min-width: 0; }
  .mapa-lienzo {
    position: relative;
    width: 100%;
    height: 56vh;
    min-height: 280px;
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--bar-bg);
  }
  .mapa-lienzo.mapa-sobre-local .ol-viewport { cursor: pointer; }
  .mapa-lienzo .mapa-teselas { filter: var(--map-tile-filter); }
  .mapa-sugerencia {
    padding: var(--s-1) var(--s-2);
    font-size: var(--fs-xs);
    color: var(--ink-strong);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-1);
    white-space: nowrap;
    pointer-events: none;
  }
  .mapa-sugerencia:empty { display: none; }
  .mapa-estado { display: grid; place-items: center; height: 100%; margin: 0; padding: var(--s-4); text-align: center; }
  .mapa-sondas { position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
  .mapa-sonda[data-tono="brand"] { color: var(--brand); }
  .mapa-sonda[data-tono="ink"] { color: var(--ink-strong); }
  .mapa-sonda[data-tono="ok"] { color: var(--ok-fill); }
  .mapa-sonda[data-tono="bad"] { color: var(--bad); }
  .mapa-sonda[data-tono="surface"] { color: var(--surface); }
  .mapa-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
    color: var(--muted);
    font-size: var(--fs-xs);
  }
  .mapa-leyenda .mapa-dentro { color: var(--ok); }
  .mapa-leyenda .mapa-fuera { color: var(--bad); }
  .mapa-card { display: grid; gap: var(--s-3); }
  .mapa-lateral { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
  .mapa-lateral .list-item { padding: 0; }

  /* ---------- Gestión (locales, usuarios, plantillas) ---------- */
  .gestion-titulo { margin: 0; }
  .gestion-fila {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
    min-width: 0;
  }
  .gestion-fila:last-child { border-bottom: 0; }
  .gestion-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
  .gestion-grupo { display: grid; gap: var(--s-2); }
  .gestion-form { gap: var(--s-4); }
  .gestion-acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
  .gestion-acciones .btn { flex: 1 1 auto; }
  .gestion-punto {
    display: grid;
    gap: var(--s-1);
    padding: var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
  }
  .gestion-punto-texto { overflow-wrap: anywhere; }
  .gestion-seccion { gap: var(--s-3); }
  .gestion-inactivo { color: var(--muted); }
  .gestion-inactivo .gestion-punto-texto { text-decoration: line-through; text-decoration-color: var(--muted); }
  .gestion-seccion.gestion-inactivo { box-shadow: inset 4px 0 0 var(--control), var(--shadow-1); }
  .gestion-seccion.gestion-inactivo .gestion-titulo,
  .gestion-seccion.gestion-inactivo h2 { color: var(--muted); }
  .gestion-seccion.gestion-inactivo .gestion-titulo { text-decoration: line-through; text-decoration-color: var(--muted); }

  /* ---------- Cuenta / menú (hoja) ---------- */
  dialog#sheet.cuenta .sheet-body h3 { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
  .cuenta-roles { display: grid; gap: var(--s-1); }
  .cuenta-sep { margin: 0; }
  .cuenta-demo { display: grid; gap: var(--s-2); }
  .cuenta-demo .stack { gap: var(--s-2); }
  .cuenta-demo .btn { justify-content: flex-start; width: 100%; }
  dialog#sheet.cola .sheet-body .list-item { display: grid; gap: var(--s-1); }
  dialog#sheet.pregunta .sheet-body, dialog#sheet.pendiente .sheet-body { gap: var(--s-3); }

  /* ---------- Vista previa del mail (iframe de srcdoc) ---------- */
  .mailframe { display: block; width: 100%; min-width: 0; height: min(70dvh, 640px); min-height: 360px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }

  /* ---------- Detalle de local y KV compactos ---------- */
  .fila-titulo strong { overflow-wrap: anywhere; }

  /* ---------- Escritorio ---------- */
  @media (min-width: 600px) { .mapa-lienzo { height: 480px; } }

  @media (min-width: 600px) {
    .app { padding-inline: var(--s-6); }
    h1 { font-size: var(--fs-3xl); }
    .page-head-row { grid-template-columns: minmax(0, 1fr) auto; }
    .resultados-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .filtros-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filtros-fechas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analisis-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mapa-controles { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
    .pendiente-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gestion-fila { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .gestion-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gestion-form > .gestion-acciones,
    .gestion-form > .check,
    .gestion-form > details { grid-column: 1 / -1; }
    .recorrido-barra {
      grid-template-columns: auto auto;
      justify-content: end;
      bottom: var(--s-4);
      margin: 0;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
    }
    .vista-login > .card { padding: var(--s-6); }
    dialog#sheet {
      inset: 50% auto auto 50%;
      transform: translate(-50%, -50%);
      width: min(560px, calc(100% - var(--s-8)));
      max-height: min(86dvh, 720px);
      border-radius: var(--r-lg);
      border: 1px solid var(--line);
    }
    dialog#sheet[open] { animation: aparecer var(--dur) var(--ease); }
    @keyframes aparecer { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
    .toasts { left: auto; right: var(--s-4); bottom: var(--s-4); width: min(420px, calc(100% - var(--s-8))); justify-items: end; }
    .toast { max-width: none; }
  }

  @media (min-width: 900px) {
    .recorrido-barra { bottom: var(--s-6); }
    .app { padding-top: var(--s-6); }
    .inicio-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
    .resultados-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .analisis-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mapa-layout { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
    .detalle-layout { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
    .detalle-maestro { position: sticky; top: 80px; }
    .gestion-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 599.98px) {
    /* Tablas: cada fila pasa a tarjeta, con el encabezado de la columna en data-label */
    table.data caption { display: none; }
    table.data thead { display: none; }
    table.data,
    table.data tbody,
    table.data tr,
    table.data td { display: block; width: 100%; }
    .table-wrap { display: grid; gap: var(--s-2); border: 0; background: transparent; }
    table.data tbody { display: grid; gap: var(--s-2); }
    table.data tbody tr {
      padding: var(--s-2) var(--s-4);
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
    }
    table.data tbody tr:hover td { background: none; }
    table.data td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--s-3);
      padding: 6px 0;
      border-bottom: 0;
      text-align: right;
    }
    table.data td:empty { display: none; }
    table.data td::before {
      content: attr(data-label);
      color: var(--muted);
      font-size: var(--fs-xs);
      font-weight: var(--fw-medium);
      text-align: left;
      flex: 0 0 auto;
    }
  }
}

/* Controles de OpenLayers (mapa de locales). Van fuera de @layer: ol.css no tiene capa y, sin capa,
   sus reglas ganarían a las de views. Solo tokens del sistema visual; zoom con botones de 44px. */
.mapa-lienzo .ol-zoom { top: var(--s-2); left: var(--s-2); display: grid; gap: var(--s-1); background: transparent; }
.mapa-lienzo .ol-zoom button {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  font: var(--fw-semibold) var(--fs-lg) var(--font);
  color: var(--ink-strong);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.mapa-lienzo .ol-zoom button:hover { background: var(--surface-3); }
.mapa-lienzo .ol-zoom button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mapa-lienzo .ol-attribution { right: var(--s-2); bottom: var(--s-2); font-size: var(--fs-xs); }
.mapa-lienzo .ol-attribution ul {
  margin: 0;
  padding: var(--s-1) var(--s-2);
  color: var(--ink);
  background: var(--surface);
  border-radius: var(--r-sm);
}
.mapa-lienzo .ol-attribution a { color: var(--brand); }

/* ---------- Impresión (detalle de auditoría y vistas de lista) ---------- */
@media print {
  .shell-top, .shell-nav, .shell-sub, .toasts, .overlay, dialog#sheet,
  .recorrido-barra, .pager, .btn, .btn-back, .icon-btn, .chip, .btn-foto,
  .fotos-borrar, .mapa-lienzo, .mapa-controles, details.resultados-filtros, .filtros-campos,
  .skip-link { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .app { max-width: none; margin: 0; padding: 0; display: block; }
  .card, .acc, .tile, .table-wrap, .resumen-critico, .pendiente-caja { box-shadow: none !important; break-inside: avoid; }
  .acc-body[hidden] { display: none; }
  .acc { border-color: #999; }
  table.data th { position: static; background: #eee !important; color: #000 !important; }
  table.data td { color: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  .badge { border: 1px solid #666; background: none !important; color: #000 !important; }
  .fotos { grid-template-columns: repeat(4, 1fr); }
  .page-head { border-bottom: 1px solid #999; }
}