/* Tablero de WhatsApp. Los colores, la letra y los radios vienen de typ.css (sistema de diseño TYP).
   Aquí solo hay acomodo y controles de la aplicación; no se escriben colores.
   Mismo lenguaje que el visualizador de ventas (base sql/visualizador/web/estilos.css). */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }

html, body { margin: 0; }
body { padding: 0; background: var(--paper); color: var(--ink); font: 14px/1.45 var(--font-ui); }
button, input, select { font: inherit; color: inherit; }
a { color: var(--typ-navy); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
::selection { background: var(--typ-navy-soft); color: var(--ink); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Encabezado ---------- */
.barra { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--hair); }
.barra-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  padding: 10px 24px; max-width: 1480px; margin: 0 auto;
  background: var(--typ-navy-deep); color: var(--on-navy);
  box-shadow: 0 0 0 100vmax var(--typ-navy-deep); clip-path: inset(0 -100vmax);
}
/* En la banda azul el anillo de foco navy no se ve: se usa el texto claro */
.barra-top :focus-visible { outline-color: var(--on-navy); }
.marca { font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.marca span { color: var(--on-navy-3); font-weight: 400; }
nav.tabs { display: flex; gap: 2px; }
nav.tabs a { color: var(--on-navy-2); padding: 6px 12px; font-weight: 600; text-decoration: none; border-radius: var(--r-chip); }
nav.tabs a:hover { color: var(--on-navy); }
nav.tabs a[aria-current="page"] { color: var(--on-navy); box-shadow: inset 0 -2px 0 var(--typ-cian); }
.datos-info { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--on-navy-3); font-size: 12.5px; flex-wrap: wrap; }
.barra-top .btn.fantasma { color: var(--on-navy-2); }
.barra-top .btn.fantasma:hover { color: var(--on-navy); background: transparent; border-color: var(--on-navy-3); }

.filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 24px; max-width: 1480px; margin: 0 auto;
}
.filtros .sep { width: 1px; height: 22px; background: var(--hair); }
.presets { display: flex; gap: 4px; flex-wrap: wrap; }
.presets .btn[aria-pressed="true"] { background: var(--typ-navy-soft); border-color: var(--typ-navy); color: var(--info-ink); }
.campo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.btn.filtros-toggle { display: none; }

/* ---------- Controles ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid var(--hair-ctl); border-radius: var(--r-chip); background: var(--surface);
  cursor: pointer; font-size: 13px; white-space: nowrap; text-decoration: none; color: var(--ink);
  transition: background-color .15s, border-color .15s;
}
.btn:hover { border-color: var(--ink-2); text-decoration: none; }
.btn.primario { background: var(--typ-navy-deep); border-color: var(--typ-navy-deep); color: var(--on-navy); }
.btn.fantasma { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.fantasma:hover { background: var(--surface-2); border-color: var(--hair); }
.btn.chico { height: 26px; padding: 0 9px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: default; }
select.ctl, input.ctl {
  height: 30px; padding: 0 8px; border: 1px solid var(--hair-ctl); border-radius: var(--r-chip);
  background: var(--surface); min-width: 0;
}
select.ctl { max-width: 240px; }
input.buscar { width: 220px; }

/* ---------- Contenido ---------- */
main { max-width: 1480px; margin: 0 auto; padding: 20px 24px 60px; transition: opacity .15s; }
main[aria-busy="true"] { opacity: .55; }
#aviso { margin-bottom: 16px; }
.rejilla { display: grid; gap: 16px; margin-bottom: 16px; align-items: start; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-12-8 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.r-8-12 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.rejilla > .panel { margin-bottom: 0; }

.panel {
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card);
  padding: 14px 16px; margin-bottom: 16px; min-width: 0;
}
.panel h2 { margin: 0 0 2px; font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel h2 .est { font-size: 11.5px; font-weight: 600; padding: 1px 7px; }
.panel .nota { color: var(--muted); font-size: 12px; margin: 0; }
.panel .nota b { color: var(--ink-2); font-weight: 600; }
.panel-cab { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.panel-cab > div:first-child { flex: 1; min-width: 220px; }
.panel-cab .acciones { display: flex; gap: 8px; align-items: center; }

.kpis { margin-bottom: 16px; }
.kpi .val { font-variant-numeric: tabular-nums; }
.kpi .dlt { color: var(--muted); }

.grafica { height: 300px; }
.grafica.chica { height: 220px; }

/* ---------- Tablas ---------- */
.tabla-wrap { overflow: auto; max-height: 560px; }
table.typ th { position: sticky; top: 0; z-index: 1; background: var(--surface); white-space: nowrap; padding: 0; }
table.typ th button {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 3px; width: 100%;
  padding: 4px 8px 6px; cursor: pointer; justify-content: inherit; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit;
}
table.typ th:not(.izq) button { justify-content: flex-end; }
table.typ th:first-child button, table.typ th.izq button { justify-content: flex-start; }
table.typ th button:hover { color: var(--ink-2); }
table.typ th button:focus-visible { outline: 2px solid var(--typ-navy); outline-offset: -2px; }
table.typ th .flecha { width: 10px; height: 10px; opacity: 0; flex: none; }
table.typ th[aria-sort] .flecha { opacity: 1; }
table.typ th[aria-sort="ascending"] .flecha { transform: rotate(180deg); }
table.typ td { white-space: nowrap; vertical-align: top; }
table.typ td.largo { min-width: 240px; max-width: 440px; white-space: normal; }
table.typ td.izq.largo { text-align: left; }
table.typ tr.poca-muestra td { color: var(--muted); }
/* Liga "Abrir": área de clic de al menos 24 px sin mover la fila */
table.typ td a { display: inline-block; padding: 4px 6px; margin: -4px -6px; }
.vacio { color: var(--ink-2); font-size: 13px; padding: 12px 2px; }
.vacio b { color: var(--ink); }
.cuenta { color: var(--muted); font-size: 12px; margin-top: 6px; }

.fuente { max-width: none; }

/* ---------- Tabla expandida (pantalla completa) ---------- */
dialog.ventana-tabla {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 16px;
  border: none; background: var(--paper); color: var(--ink); box-sizing: border-box;
}
dialog.ventana-tabla::backdrop { background: var(--scrim); }
.panel.expandida { height: 100%; margin: 0; display: flex; flex-direction: column; box-sizing: border-box; }
.panel.expandida .cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel.expandida .tabla-wrap { flex: 1; max-height: none; }
.panel.expandida table.typ td.largo { max-width: 640px; }
/* Expandida, el texto se acomoda en dos renglones para que quepan todas las columnas; fechas y cifras no se parten */
.panel.expandida table.typ th, .panel.expandida table.typ td.izq { white-space: normal; }
.panel.expandida table.typ td.f { white-space: nowrap; }

/* ---------- Entrada ---------- */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.caja-entrar {
  width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-lamina); padding: 28px 24px; display: grid; gap: 14px; box-shadow: var(--sombra);
}
.marca-entrar { margin: 0; font-size: 21px; font-weight: 650; color: var(--typ-navy); }
.marca-entrar span { color: var(--muted); font-weight: 400; }
.caja-entrar .sub { color: var(--ink-2); margin: -8px 0 0; }
.caja-entrar label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.caja-entrar .ctl { width: 100%; height: 40px; }
.caja-entrar .btn { height: 40px; justify-content: center; }

/* Para atender hoy va arriba de todo: más corta para no tapar el resto (Expandir la abre completa) */
@media (min-width: 761px) { [data-tabla="pendientes"] .tabla-wrap { max-height: 380px; } }

/* ---------- Pantallas medianas ---------- */
@media (max-width: 900px) {
  .r2, .r-12-8, .r-8-12 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Teléfono ---------- */
@media (max-width: 760px) {
  .barra { position: static; }
  .barra-top { padding: 10px 16px; gap: 6px 16px; }
  nav.tabs { order: 3; width: 100%; }
  nav.tabs a { padding: 10px 14px; }
  .datos-info { gap: 4px 10px; margin-left: 0; width: 100%; order: 4; }
  #quien { margin-left: auto; }
  .btn.filtros-toggle {
    display: flex; width: calc(100% - 32px); margin: 10px 16px; height: 44px; justify-content: space-between;
  }
  .filtros-toggle .resumen { color: var(--ink-2); flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
  .filtros-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .filtros { display: none; padding: 0 16px 12px; }
  .filtros.abierta { display: flex; }
  .filtros .sep { display: none; }
  .btn, .btn.chico, select.ctl, input.ctl { height: 44px; }
  .presets { width: 100%; }
  .presets .btn { flex: 1 1 auto; justify-content: center; }
  .campo { width: 100%; justify-content: space-between; }
  .campo .ctl { flex: 1; max-width: none; }
  .campo.fecha { width: calc(50% - 6px); flex-direction: column; align-items: stretch; gap: 2px; }
  main { padding: 16px 16px 48px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi .val { font-size: 22px; }
  .panel-cab .acciones { width: 100%; }
  input.buscar { flex: 1; width: auto; }
  /* En el teléfono cada renglón ya es una tarjeta con todas las columnas: no hace falta expandir */
  [data-expandir] { display: none; }

  /* Tablas como tarjetas: cada renglón se lee de arriba abajo, sin desplazarse a los lados */
  .tabla-wrap { max-height: none; overflow: visible; }
  table.typ, table.typ tbody, table.typ tr, table.typ td { display: block; width: 100%; }
  table.typ thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.typ tr { padding: 10px 0; border-bottom: 1px solid var(--hair); }
  table.typ tr:last-child { border-bottom: none; }
  table.typ td, table.typ td:first-child {
    display: grid; grid-template-columns: 38% 1fr; gap: 8px; text-align: left; white-space: normal;
    padding: 3px 0; border: none; min-width: 0; max-width: none;
  }
  table.typ td::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
  table.typ td:first-child { font-weight: 650; }
  table.typ td.largo { min-width: 0; }
}