/* Panel de Wiñay. Los colores son los de winay.pe (verde profundo y lima); los del gráfico de
   "Quién nos escribe" son del juego validado para fondo oscuro (aqua y azul). */
:root {
  color-scheme: dark;
  --plano: #0b150c;
  --plano-hondo: #070e08;
  --superficie: #101e12;
  --superficie-2: #152918;
  --linea: rgba(198, 241, 157, 0.10);
  --linea-2: rgba(198, 241, 157, 0.20);
  --tinta: #f5f9f2;
  --tinta-2: #b9c8b5;
  --tenue: #9eb299;
  --apagado: #657761;
  --lima: #c6f19d;
  --lima-suave: rgba(198, 241, 157, 0.12);
  --lima-borde: rgba(198, 241, 157, 0.28);
  --serie-duenos: #199e70;
  --serie-pilotos: #3987e5;
  --serie-otros: #4f5f4c;
  --serie-sin: #657761;
  --salida: #657761;
  --equipo: #8fb9ee;
  --equipo-suave: rgba(57, 135, 229, 0.16);
  --aviso: #fab219;
  --aviso-suave: rgba(250, 178, 25, 0.12);
  --serio: #ec835a;
  --serio-suave: rgba(236, 131, 90, 0.14);
  --fuente: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --radio: 14px;
  --radio-chico: 8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 128px; }
body {
  margin: 0; background: var(--plano); color: var(--tinta); font-family: var(--fuente);
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(1200px 500px at 85% -10%, rgba(27, 175, 122, 0.10), transparent 60%);
  background-repeat: no-repeat;
}
h1, h2, h3, p { margin: 0; }
h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
h3 { font-size: 1rem; font-weight: 600; text-wrap: balance; }
a { color: var(--lima); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--lima); outline-offset: 2px; border-radius: 6px; }
.tenue { color: var(--tenue); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.marca-w {
  width: 34px; height: 34px; border-radius: 9px; background: var(--lima); color: var(--plano-hondo);
  display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; flex: none;
}
.marca-texto { display: grid; line-height: 1.15; }
.marca-texto b { font-weight: 600; font-size: 1rem; }
.marca-texto small { color: var(--tenue); font-size: 0.78rem; }

/* Barra de arriba */
.barra {
  position: sticky; top: 0; z-index: 10; background: rgba(11, 21, 12, 0.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea);
}
.barra-fila, .secciones { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.barra-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 8px; }
.cuenta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; font-size: 0.86rem; }
.secciones { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.secciones::-webkit-scrollbar { display: none; }
.secciones a {
  white-space: nowrap; color: var(--tinta-2); text-decoration: none; font-size: 0.88rem;
  padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
}
.secciones a:hover { background: var(--lima-suave); color: var(--tinta); }
.cuenta-nav:not(:empty) {
  font-family: var(--mono); font-size: 0.72rem; color: var(--tinta); background: var(--superficie-2);
  border: 1px solid var(--linea); border-radius: 999px; padding: 0 7px; line-height: 1.6;
}
.cuenta-nav.alerta:not(:empty) { background: var(--aviso-suave); border-color: transparent; color: var(--aviso); }
@media (max-width: 640px) { .correo { display: none; } #actualizado { font-size: 0.8rem; } }
@media (max-width: 480px) { .marca-texto small { display: none; } #actualizado { display: none; } }

.boton {
  background: var(--lima); color: var(--plano-hondo); border: 0; border-radius: 999px; padding: 6px 14px;
  font-weight: 600; font-size: 0.86rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.boton:hover { filter: brightness(1.06); }
.boton-suave { background: transparent; color: var(--tinta-2); border: 1px solid var(--linea-2); font-weight: 500; }
.boton-suave:hover { color: var(--tinta); border-color: var(--lima-borde); filter: none; }

/* Hoja */
.hoja {
  max-width: 1200px; margin: 0 auto; display: grid; gap: 48px;
  padding: 28px max(16px, env(safe-area-inset-right)) 64px max(16px, env(safe-area-inset-left));
  transition: opacity 0.2s ease;
}
.hoja.cargando { opacity: 0.55; }
.bloque { display: grid; gap: 16px; min-width: 0; }
.bloque-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.bloque-cabeza p { margin-top: 4px; max-width: 64ch; font-size: 0.92rem; }
.dos { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 920px) { .dos { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

.tarjeta {
  margin: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 18px; display: grid; gap: 16px; min-width: 0; align-content: start;
}
.tarjeta-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tarjeta-cabeza p { font-size: 0.88rem; margin-top: 2px; }

/* Filtros de chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--linea-2); background: transparent; color: var(--tinta-2); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { border-color: var(--lima-borde); color: var(--tinta); }
.chip[aria-pressed="true"] { background: var(--lima); border-color: var(--lima); color: var(--plano-hondo); font-weight: 600; }
.chip .num { font-family: var(--mono); font-size: 0.74rem; opacity: 0.8; }

/* Números del período */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 14px 16px 14px; display: grid; gap: 2px; align-content: start; min-width: 0;
}
.tile .etiqueta { color: var(--tinta-2); font-size: 0.86rem; }
.tile .valor { font-size: 2.4rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.tile .sub { color: var(--tenue); font-size: 0.8rem; min-height: 1.2em; }
.tile.destaca { border-color: var(--lima-borde); background: linear-gradient(180deg, var(--lima-suave), transparent 80%), var(--superficie); }
.tile.destaca .valor { color: var(--lima); }

/* Columnas de chats por día */
.columnas-caja { position: relative; overflow-x: auto; padding-top: 8px; }
.columnas {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(30px, 72px); gap: 2px; justify-content: start;
  min-width: min-content; height: 232px; align-items: end; padding-left: 30px;
}
.guia { position: absolute; left: 30px; right: 0; border-top: 1px solid var(--linea); pointer-events: none; }
.guia span { position: absolute; left: -30px; width: 24px; text-align: right; top: -8px; font-family: var(--mono); font-size: 0.68rem; color: var(--tenue); font-variant-numeric: tabular-nums; }
.col {
  position: relative; height: 232px; display: grid; grid-template-rows: 1fr 32px; justify-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; border-radius: 6px;
}
.col:hover, .col.activa { background: rgba(198, 241, 157, 0.05); }
.col .zona { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.col .barra-col { width: min(24px, 70%); border-radius: 4px 4px 0 0; background: var(--lima); min-height: 0; }
.col.fuera-rango .barra-col { background: rgba(198, 241, 157, 0.28); }
.col .tope { font-family: var(--mono); font-size: 0.74rem; color: var(--tinta-2); visibility: hidden; }
.col.max .tope, .col.activa .tope { visibility: visible; }
.col .dia { font-family: var(--mono); font-size: 0.7rem; color: var(--tenue); align-self: center; white-space: nowrap; }
.col.activa .dia { color: var(--tinta); }
.col.hoy .dia::after { content: " ·"; color: var(--lima); }
.globo {
  position: absolute; top: 0; z-index: 3; min-width: 190px; pointer-events: none;
  background: var(--superficie-2); border: 1px solid var(--linea-2); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); font-size: 0.84rem; display: grid; gap: 3px;
}
.globo[hidden] { display: none; }
.globo .g-dia { color: var(--tinta-2); font-size: 0.8rem; margin-bottom: 2px; }
.globo .g-fila { display: flex; justify-content: space-between; gap: 16px; }
.globo .g-fila b { font-weight: 600; font-variant-numeric: tabular-nums; }
.globo .g-fila span { color: var(--tenue); }
.tabla-caja { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.86rem; }
th, td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
th { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tenue); }
th:first-child, td:first-child { text-align: left; }

/* Esperando respuesta */
.esperas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.espera {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px;
  display: grid; gap: 8px; min-width: 0; border-left: 3px solid var(--linea-2);
}
.espera.tarde { border-left-color: var(--aviso); }
.espera.muy-tarde { border-left-color: var(--serio); }
.espera .arriba { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.espera .quien { font-weight: 600; overflow-wrap: anywhere; }
.espera .cuanto { font-size: 0.86rem; color: var(--tinta-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.espera .mensaje { color: var(--tinta-2); font-size: 0.9rem; overflow-wrap: anywhere; border-left: 2px solid var(--linea-2); padding-left: 10px; }
.espera .abajo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.84rem; }
.icono-estado { width: 14px; height: 14px; flex: none; }
.vacio { color: var(--tenue); font-size: 0.92rem; padding: 16px; border: 1px dashed var(--linea-2); border-radius: var(--radio); }
.vacio.bien { color: var(--tinta-2); border-style: solid; background: var(--superficie); display: flex; align-items: center; gap: 10px; }

/* Etiquetas */
.pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pill {
  font-size: 0.74rem; padding: 2px 9px; border-radius: 999px; background: var(--superficie-2); color: var(--tinta-2);
  border: 1px solid var(--linea); white-space: nowrap; line-height: 1.6;
}
.pill.bot { background: var(--lima-suave); color: var(--lima); border-color: transparent; }
.pill.lista { background: var(--lima); color: var(--plano-hondo); border-color: transparent; font-weight: 600; }
.pill.equipo { background: var(--equipo-suave); color: var(--equipo); border-color: transparent; }
.pill.salida { color: var(--tenue); }
.pill.aviso { background: var(--aviso-suave); color: var(--aviso); border-color: transparent; }
.pill.mono { font-family: var(--mono); }

/* Embudo */
.embudo { display: grid; gap: 4px; }
.etapa { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 0; }
.etapa .nombre { display: flex; align-items: baseline; gap: 8px; font-size: 0.9rem; min-width: 0; }
.etapa .quien-mueve { font-family: var(--mono); font-size: 0.66rem; color: var(--apagado); text-transform: uppercase; letter-spacing: 0.05em; }
.etapa .pista { display: flex; align-items: center; gap: 10px; min-width: 0; }
.etapa .barra-h { height: 14px; border-radius: 0 4px 4px 0; background: var(--lima); }
.etapa.equipo-et .barra-h { background: var(--lima); }
.etapa.cero .barra-h { width: 2px !important; background: var(--linea-2); }
.etapa.cero .nombre { color: var(--tenue); }
.etapa.es-salida .barra-h { background: var(--salida); }
.etapa .cuantos { font-size: 0.86rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.corte { border-top: 1px solid var(--linea); margin: 6px 0; }
.corte-texto { font-family: var(--mono); font-size: 0.66rem; color: var(--apagado); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 6px; }
@media (max-width: 520px) { .etapa { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); } }

/* Quién nos escribe */
.reparto { display: flex; height: 18px; gap: 2px; border-radius: 4px; overflow: hidden; }
.reparto span { min-width: 2px; }
.leyenda { display: grid; gap: 10px; margin-top: 16px; }
.leyenda-fila { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.leyenda-fila .muestra { width: 12px; height: 12px; border-radius: 3px; margin-top: 4px; }
.leyenda-fila .texto b { font-weight: 600; }
.leyenda-fila .texto p { color: var(--tenue); font-size: 0.84rem; }
.leyenda-fila .n { font-size: 1.25rem; font-weight: 600; text-align: right; }
.leyenda-fila .pct { display: block; font-size: 0.74rem; color: var(--tenue); font-weight: 400; font-variant-numeric: tabular-nums; }
.leyenda-fila a { color: inherit; text-decoration: none; }
.leyenda-fila a:hover b { color: var(--lima); }

/* Fichas de dueños y pilotos */
.fichas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.ficha {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px;
  display: grid; gap: 12px; align-content: start; min-width: 0;
}
.ficha.socio { border-color: var(--lima-borde); }
.ficha .arriba { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ficha .nombre-f { font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.ficha .linea-sub { color: var(--tenue); font-size: 0.84rem; }
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.datos div { min-width: 0; }
.datos dt { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tenue); }
.datos dd { margin: 1px 0 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.datos dd.falta { color: var(--apagado); }
.datos .ancho { grid-column: 1 / -1; }
.ficha .nota { font-size: 0.88rem; color: var(--tinta-2); overflow-wrap: anywhere; }
.ficha .pie-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; color: var(--tenue); border-top: 1px solid var(--linea); padding-top: 10px; }

/* Lista de leads */
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.buscar { flex: 1 1 260px; max-width: 420px; }
.buscar input {
  width: 100%; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--linea-2); background: var(--superficie);
  color: var(--tinta); font: inherit; font-size: 0.9rem;
}
.buscar input::placeholder { color: var(--apagado); }
.filas { display: grid; gap: 8px; }
.fila-lead {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: start;
}
.fila-lead .nombre-l { font-weight: 600; overflow-wrap: anywhere; }
.fila-lead .meta { color: var(--tinta-2); font-size: 0.86rem; overflow-wrap: anywhere; }
.fila-lead .resumen { grid-column: 1 / -1; color: var(--tenue); font-size: 0.86rem; overflow-wrap: anywhere; }
.fila-lead .lado { display: grid; justify-items: end; gap: 6px; text-align: right; }
.fila-lead .cuando { font-size: 0.78rem; color: var(--tenue); white-space: nowrap; }
@media (max-width: 560px) { .fila-lead { grid-template-columns: minmax(0, 1fr); } .fila-lead .lado { justify-items: start; text-align: left; } }
.mas { justify-self: center; }

.caja-error { border: 1px solid var(--serio); background: var(--serio-suave); border-radius: var(--radio); padding: 14px 16px; }
.aviso-chico { font-size: 0.86rem; color: var(--aviso); display: flex; gap: 8px; align-items: center; }
.pie { color: var(--tenue); font-size: 0.82rem; border-top: 1px solid var(--linea); padding-top: 16px; }

/* Página de entrada */
.pagina-entrar { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.entrar {
  width: min(100%, 420px); background: var(--superficie); border: 1px solid var(--linea); border-radius: 20px;
  padding: 32px 28px; display: grid; gap: 14px; justify-items: start;
}
.entrar h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 10px; }
.entrar .tenue { font-size: 0.92rem; }
.boton-google { margin-top: 8px; min-height: 44px; }
/* El iframe del botón de Google es de esquema claro: si hereda el oscuro, Chrome le pinta un fondo blanco */
.boton-google iframe { color-scheme: light; }
.aviso-entrar { color: var(--serio); font-size: 0.9rem; }
.marca-grande .marca-w { width: 42px; height: 42px; font-size: 1.35rem; border-radius: 11px; }

/* Mover la etapa */
.pill-boton { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.pill-boton .flecha { font-size: 0.6rem; opacity: 0.75; }
.pill-boton:hover { filter: brightness(1.18); }
.pill-boton[aria-expanded="true"] { outline: 2px solid var(--lima-borde); outline-offset: 1px; }
.menu-etapa {
  position: fixed; z-index: 30; width: 290px; max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--superficie-2); border: 1px solid var(--linea-2); border-radius: 12px; padding: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); display: grid; gap: 6px;
}
.menu-etapa[hidden] { display: none; }
.menu-etapa.hoja {
  left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 82vh; border-radius: 16px 16px 0 0;
  padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.menu-titulo { font-weight: 600; font-size: 0.94rem; overflow-wrap: anywhere; }
.menu-nota { display: grid; gap: 4px; font-size: 0.78rem; color: var(--tenue); margin: 2px 0 4px; }
.menu-nota input {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linea-2); background: var(--superficie);
  color: var(--tinta); font: inherit; font-size: 0.88rem;
}
.menu-nota input::placeholder { color: var(--apagado); }
.menu-grupo { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tenue); margin-top: 4px; }
.menu-lista { display: grid; gap: 1px; }
.menu-op {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 6px; text-align: left;
  background: transparent; border: 0; border-radius: 8px; padding: 8px; cursor: pointer; color: var(--tinta); font-size: 0.9rem;
}
.menu-op:hover:not([disabled]) { background: var(--lima-suave); }
.menu-op.actual { color: var(--lima); cursor: default; }
.menu-op[disabled]:not(.actual) { opacity: 0.5; cursor: wait; }
.menu-op.guardando { opacity: 1; background: var(--lima-suave); }
.marca-op { color: var(--lima); font-weight: 700; }
.menu-estado { font-size: 0.8rem; color: var(--tinta-2); }
.menu-estado:empty { display: none; }
.movida { font-size: 0.8rem; color: var(--tinta-2); overflow-wrap: anywhere; margin-top: 2px; }
.movida b { font-weight: 600; color: var(--tinta); }
.aviso-flotante {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; max-width: calc(100vw - 32px);
  background: var(--lima); color: var(--plano-hondo); font-weight: 600; font-size: 0.9rem; padding: 10px 18px;
  border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.aviso-flotante:empty { display: none; }
.aviso-flotante.error { background: var(--serio); }

/* Llamadas */
.llamadas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.llamada {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px;
  display: grid; gap: 14px; align-content: start; min-width: 0; border-top: 3px solid var(--equipo);
}
.llamada.hoy { border-top-color: var(--lima); }
.llamada.vencida { border-top-color: var(--aviso); }
.llamada.sin-fecha { border-top-color: var(--linea-2); border-style: dashed; border-top-style: solid; }
.ll-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ll-cuando { display: grid; gap: 2px; min-width: 0; }
.ll-fecha { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.llamada.hoy .ll-fecha { color: var(--lima); }
.ll-falta { font-size: 0.84rem; color: var(--tinta-2); display: inline-flex; align-items: center; gap: 6px; }
.llamada.vencida .ll-falta { color: var(--aviso); }
.ll-quien { display: grid; gap: 2px; min-width: 0; }
.ll-quien h3 { font-size: 1.05rem; overflow-wrap: anywhere; }
.ll-quien .linea-sub { color: var(--tenue); font-size: 0.84rem; }
.ll-contacto { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.88rem; color: var(--tinta-2); margin-top: 2px; }
.ll-contacto a { overflow-wrap: anywhere; }
.brief { background: var(--superficie-2); border-left: 2px solid var(--lima-borde); border-radius: 0 10px 10px 0; padding: 10px 12px; display: grid; gap: 6px; }
.brief-titulo { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tenue); }
.brief-texto { font-size: 0.9rem; color: var(--tinta); white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; }
.brief-pie { font-size: 0.76rem; color: var(--tenue); }
.ll-origen { font-size: 0.82rem; color: var(--tinta-2); overflow-wrap: anywhere; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acciones a { font-size: 0.86rem; margin-left: auto; }
.boton-peligro { color: var(--serio); border-color: rgba(236, 131, 90, 0.35); }
.boton-peligro:hover { color: var(--serio); border-color: var(--serio); }
.boton-peligro-lleno { background: var(--serio); color: var(--plano-hondo); }
.boton[disabled] { opacity: 0.55; cursor: wait; }
.ll-form:empty { display: none; }
.ll-form { display: grid; gap: 10px; border-top: 1px solid var(--linea); padding-top: 12px; }
.ll-pregunta { font-size: 0.9rem; }
.campos-fecha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.campo { display: grid; gap: 4px; font-size: 0.78rem; color: var(--tenue); min-width: 0; }
.campo input {
  width: 100%; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linea-2); background: var(--superficie);
  color: var(--tinta); font: inherit; font-size: 0.9rem;
}
.menu-llamada { display: grid; gap: 8px; border-top: 1px solid var(--linea); padding-top: 8px; margin-top: 4px; }
.pasadas[hidden] { display: none; }
.pasadas summary { cursor: pointer; color: var(--tinta-2); font-size: 0.9rem; padding: 4px 0; }
.filas-pasadas { display: grid; gap: 6px; margin-top: 8px; }
.fila-pasada {
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; font-size: 0.86rem;
}
.fp-cuando { color: var(--tinta-2); }
.fp-quien { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .fila-pasada { grid-template-columns: minmax(0, 1fr) auto; }
  .fp-cuando { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hoja { transition: none; } }