/* ── TOKENS ──────────────────────────────────────────────────────────────────
   Claro por defecto; oscuro si el dispositivo lo pide. Sin interruptor manual:
   es una herramienta interna de dos personas. */
:root {
  --fondo: #f3f5f9;
  --superficie: #ffffff;
  --borde: #dde1e9;
  --texto: #1b1f27;
  --suave: #5b6472;
  --acento: #1f6feb;
  --acento-suave: #e6f0ff;
  --acento-texto: #ffffff;
  --ok: #1a7f4b;
  --ok-fondo: #e3f5ea;
  --aviso: #8a5a00;
  --aviso-fondo: #fff1d6;
  --error: #b42318;
  --error-fondo: #fde8e6;
  --gris-fondo: #eceef2;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
  --radio: 14px;
  --alto-barra: 3.9rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1319;
    --superficie: #181d26;
    --borde: #2c3442;
    --texto: #e8ebf0;
    --suave: #98a2b3;
    --acento: #4c8dff;
    --acento-suave: #172742;
    --acento-texto: #0b1020;
    --ok: #5fd08f;
    --ok-fondo: #12301f;
    --aviso: #f0c26a;
    --aviso-fondo: #33270c;
    --error: #ff8c80;
    --error-fondo: #3a1714;
    --gris-fondo: #232a36;
    --sombra: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[hidden] { display: none !important; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; color: var(--suave); font-weight: 600; }
a { color: var(--acento); }
code { background: var(--gris-fondo); padding: .05em .35em; border-radius: 4px; font-size: .9em; }
small { display: block; margin-top: .3rem; font-size: .82rem; }
.suave { color: var(--suave); }
/* Texto de ayuda bajo un título o un control: más pequeño y sin margen propio. */
.ayuda { margin: 0; font-size: .88rem; color: var(--suave); }
.sin-margen { margin: 0; }

/* ── ESTRUCTURA ──────────────────────────────────────────────────────────── */
.centrado { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .6rem;
  min-height: var(--alto-barra);
  padding: .7rem 1rem; padding-top: max(.7rem, env(safe-area-inset-top));
  background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.barra h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#usuario { font-size: .8rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* En el teléfono el título del restaurante vale más que ver el correo propio. */
@media (max-width: 520px) { #usuario { display: none; } }

/* La marca (la estrella del icono) solo se ve en la lista; en el detalle la reemplaza el botón de volver. */
.marca {
  display: inline-grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 9px;
  background: var(--acento); color: var(--acento-texto); font-size: 1.05rem; line-height: 1;
}
#btn-volver:not([hidden]) + .marca { display: none; }
.marca-grande { width: 3rem; height: 3rem; border-radius: 12px; font-size: 1.5rem; }

.contenido { max-width: 50rem; margin: 0 auto; padding: 1rem; padding-bottom: max(2rem, env(safe-area-inset-bottom)); display: grid; gap: 1rem; }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.1rem; display: grid; gap: 1rem; box-shadow: var(--sombra);
}
.login { width: min(100%, 22rem); justify-items: start; }

/* ── FORMULARIOS ─────────────────────────────────────────────────────────── */
label { display: grid; gap: .3rem; font-weight: 600; font-size: .92rem; }
label small { font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=time], input[type=tel], input[type=search], input[type=date], select, textarea {
  width: 100%; padding: .65rem .75rem; font: inherit; color: var(--texto);
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px;
}
input.corto { width: 5rem; }
input.medio { width: 6rem; }
input.medio-largo { width: 11rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px;
}
textarea { resize: vertical; }
fieldset { border: 1px solid var(--borde); border-radius: 10px; padding: .75rem; margin: 0; display: grid; gap: .6rem; }
legend { padding: 0 .4rem; font-weight: 600; font-size: .92rem; }
.opcion { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; cursor: pointer; }
.opcion input { margin-top: .3rem; accent-color: var(--acento); }
.opcion span { display: grid; }
.opcion small { margin: 0; color: var(--suave); }
details { border: 1px solid var(--borde); border-radius: 10px; padding: .6rem .75rem; }
summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.rejilla { display: grid; gap: .8rem; margin-top: .8rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.interruptor { display: flex; align-items: center; gap: .7rem; cursor: pointer; font-size: 1rem; }
.interruptor input { position: absolute; opacity: 0; }
.pista { width: 2.8rem; height: 1.6rem; border-radius: 1rem; background: var(--borde); position: relative; transition: background .15s; flex: none; }
.pista::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; transition: transform .15s; }
.interruptor input:checked + .pista { background: var(--ok); }
.interruptor input:checked + .pista::after { transform: translateX(1.2rem); }
.interruptor input:focus-visible + .pista { outline: 2px solid var(--acento); outline-offset: 2px; }
.fila-estado { display: grid; gap: .4rem; }

.vista-previa { background: var(--gris-fondo); border-radius: 10px; padding: .7rem .85rem; }
.vista-previa p { margin: .2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Los tres bloques del formulario van separados por el mismo hueco que el resto de tarjetas. */
.ajustes { display: grid; gap: 1rem; }
/* Barra de guardado pegada abajo: en un formulario largo no hay que bajar hasta el final. */
.guardar-barra {
  position: sticky; bottom: 0; z-index: 5; display: grid; gap: .5rem;
  padding: .75rem 1rem; padding-bottom: max(.75rem, env(safe-area-inset-bottom));
  margin: 0 -1rem; background: color-mix(in srgb, var(--superficie) 94%, transparent);
  border-top: 1px solid var(--borde); backdrop-filter: blur(6px);
}
.guardar-barra .primario { width: 100%; }
@media (min-width: 640px) { .guardar-barra .primario { width: auto; justify-self: end; } }

/* ── BOTONES ─────────────────────────────────────────────────────────────── */
button { font: inherit; cursor: pointer; border-radius: 10px; border: 1px solid transparent; padding: .65rem 1rem; min-height: 2.75rem; }
button:disabled { opacity: .55; cursor: progress; }
.primario { background: var(--acento); color: var(--acento-texto); font-weight: 600; }
.primario:hover:not(:disabled) { filter: brightness(1.07); }
.secundario { background: transparent; color: var(--texto); border-color: var(--borde); }
.secundario:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }
.icono { background: transparent; color: var(--texto); border-color: var(--borde); width: 2.75rem; padding: 0; font-size: 1.2rem; }

/* ── AVISOS ──────────────────────────────────────────────────────────────── */
.error, .ok, .nota { margin: 0; padding: .6rem .8rem; border-radius: 10px; font-size: .92rem; }
.error { background: var(--error-fondo); color: var(--error); }
.ok { background: var(--ok-fondo); color: var(--ok); }
.nota { background: var(--aviso-fondo); color: var(--aviso); }

/* ── LISTA DE RESTAURANTES ───────────────────────────────────────────────── */
.encabezado-lista { display: grid; gap: .6rem; margin-bottom: 1rem; }
.encabezado-lista p { margin: 0; }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.restaurante {
  width: 100%; text-align: left; display: grid; gap: .55rem; padding: 1rem 1.1rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); color: var(--texto);
  box-shadow: var(--sombra); border-left-width: 4px;
}
.restaurante:hover { border-color: var(--acento); }
.restaurante.estado-activo { border-left-color: var(--ok); }
.restaurante.estado-observacion { border-left-color: var(--aviso); }
.restaurante.estado-vencido { border-left-color: var(--error); }
.restaurante .nombre { display: flex; justify-content: space-between; gap: .6rem; align-items: center; font-weight: 600; font-size: 1.02rem; }
.restaurante .numero { font-size: .85rem; color: var(--suave); }
.restaurante .numero .alerta-plan { color: var(--aviso); font-weight: 600; }
.restaurante .numero .alerta-plan.vencido { color: var(--error); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { display: inline-block; padding: .12rem .6rem; border-radius: 1rem; font-size: .78rem; font-weight: 600; background: var(--gris-fondo); color: var(--suave); white-space: nowrap; }
.chip.activo, .chip.enviada { background: var(--ok-fondo); color: var(--ok); }
.chip.programada, .chip.nueva { background: var(--aviso-fondo); color: var(--aviso); }
.chip.fallida { background: var(--error-fondo); color: var(--error); }
.chip.acento { background: var(--acento-suave); color: var(--acento); }
.cifras { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .9rem; color: var(--suave); }
.cifras strong { color: var(--texto); font-size: 1.05rem; }
.cifras .con-alerta strong { color: var(--error); }

/* ── DETALLE: CABECERA Y PESTAÑAS ────────────────────────────────────────── */
#vista-detalle { display: grid; gap: 1rem; }
.cabecera { gap: .6rem; }
.cabecera-fila { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; flex-wrap: wrap; }
.cabecera-nombre h2 { font-size: 1.3rem; margin: 0; }
.cabecera-nombre p { margin: .15rem 0 0; font-size: .88rem; }
.cab-plan { margin: 0; font-size: .9rem; color: var(--suave); }
.cab-plan.por-vencer { color: var(--aviso); font-weight: 600; }
.cab-plan.vencido { color: var(--error); font-weight: 600; }

/* Pestañas: pegadas bajo la barra y con desplazamiento lateral en pantallas estrechas. */
.pestanas {
  position: sticky; top: var(--alto-barra); z-index: 8;
  display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none;
  padding: .3rem; background: var(--gris-fondo); border-radius: 12px;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  flex: 1 0 auto; padding: .5rem .9rem; min-height: 2.5rem; border-radius: 9px;
  background: transparent; color: var(--suave); font-weight: 600; font-size: .92rem; border: 0;
}
.pestana:hover { color: var(--texto); }
@media (max-width: 440px) { .pestana { padding: .5rem .55rem; font-size: .84rem; } }
.pestana[aria-selected="true"] { background: var(--superficie); color: var(--acento); box-shadow: var(--sombra); }
.panel-pestana { display: grid; gap: 1rem; }

/* ── RESUMEN: CIFRAS GRANDES ─────────────────────────────────────────────── */
.kpis { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.kpi {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: .85rem 1rem; display: grid; gap: .15rem; box-shadow: var(--sombra);
}
.kpi .valor { font-size: 1.9rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.kpi .etiqueta { font-size: .82rem; color: var(--suave); }
.kpi .cambio { font-size: .78rem; font-weight: 600; color: var(--suave); }
.kpi .cambio.sube { color: var(--ok); }
.kpi .cambio.baja { color: var(--error); }
.kpi.alerta { border-color: var(--error); }
.kpi.alerta .valor { color: var(--error); }
.informe-resultado { display: grid; gap: 1rem; }
.informe-resultado .kpi { box-shadow: none; background: var(--fondo); }

/* Nota de Google en el resumen: la cifra grande, el cambio y la línea de evolución. */
.google-resumen { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.google-nota { display: flex; align-items: baseline; gap: .4rem; }
.google-nota .valor { font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.google-nota .estrella { color: #f5a623; font-size: 1.5rem; }
.google-detalle { display: grid; gap: .15rem; font-size: .9rem; color: var(--suave); flex: 1; min-width: 12rem; }
.google-detalle strong { color: var(--texto); }
.linea-evolucion { width: 9rem; height: 2.6rem; flex: none; }
.linea-evolucion polyline { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.linea-evolucion circle { fill: var(--acento); }
.caja-google { background: var(--gris-fondo); border-radius: 10px; padding: .7rem .85rem; font-size: .9rem; color: var(--suave); }
.caja-google p { margin: .2rem 0; }
.caja-google strong { color: var(--texto); }

/* ── ACTIVIDAD Y LISTAS ──────────────────────────────────────────────────── */
/* Conversaciones analizadas: una fila que se abre para ver lo que leyó la IA. */
.conversaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.conversaciones details { padding: .6rem .8rem; background: var(--fondo); }
.conversaciones details[open] { background: var(--superficie); }
.conv-resumen { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; font-size: .9rem; }
.conv-cuerpo { display: grid; gap: .6rem; margin-top: .6rem; }
.transcripcion { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--gris-fondo); border-radius: 8px; padding: .7rem; margin: 0; font: .82rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; max-height: 22rem; overflow: auto; }
.conv-datos { display: grid; gap: .15rem; font-size: .85rem; color: var(--suave); }
.conv-revisar { display: grid; gap: .5rem; }
.conv-botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip.revision-correcto { background: var(--ok-fondo); color: var(--ok); }
.chip.revision-incorrecto { background: var(--error-fondo); color: var(--error); }

/* Salud del sistema: un renglón verde si todo va bien; si no, una tarjeta por problema. */
.salud { display: grid; gap: .5rem; margin: 0 0 1rem; }
.salud .error, .salud .nota { display: grid; gap: .15rem; }
.salud .desde { font-size: .8rem; opacity: .85; }

/* Cada fila: chips y datos en una línea; el motivo, debajo y en gris. */
.actividad { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.actividad li { display: flex; flex-wrap: wrap; gap: .25rem .7rem; align-items: center; font-size: .9rem; padding: .55rem 0; border-top: 1px solid var(--borde); }
.actividad li:first-child { border-top: 0; padding-top: 0; }
.actividad .vacio { color: var(--suave); }
.actividad .motivo { color: var(--suave); font-size: .84rem; flex-basis: 100%; }
.actividad .desde { color: var(--suave); font-size: .82rem; flex-basis: 100%; }
.actividad li > button { margin-left: auto; min-height: 2.25rem; padding: .3rem .8rem; font-size: .85rem; }
.actividad .fecha { color: var(--suave); font-size: .84rem; }
.actividad .cliente { font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .pista, .pista::after { transition: none; } }

/* ── PLAN ── */
.fila-plan { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.fecha-plan { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
.fecha-plan input { min-height: 2.75rem; }

/* ── INFORME ── */
.informe { width: 100%; border-collapse: collapse; font-size: .92rem; }
.informe th, .informe td { text-align: right; padding: .45rem .4rem; border-bottom: 1px solid var(--borde); }
.informe th:first-child, .informe td:first-child { text-align: left; }
.informe th { font-weight: 600; color: var(--suave); font-size: .8rem; }
.informe td .cambio { display: block; font-size: .75rem; color: var(--suave); }

/* ── CASILLA ── */
.casilla { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; font-size: .95rem; }
.casilla input { margin-top: .25rem; }

/* ══ VFOODIE ═════════════════════════════════════════════════════════════════
   Lo de arriba es la base del panel de vreviews; lo de abajo es propio de este panel. */

.marca { font-size: 1.1rem; }

/* ── PEDIDOS ── */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.segmentos { display: inline-flex; gap: .25rem; padding: .25rem; background: var(--gris-fondo); border-radius: 12px; }
.segmento { background: transparent; color: var(--suave); border: 0; font-weight: 600; font-size: .9rem; min-height: 2.25rem; padding: .35rem .85rem; border-radius: 9px; }
.segmento[aria-pressed="true"] { background: var(--superficie); color: var(--acento); box-shadow: var(--sombra); }
.actualizado { font-size: .8rem; color: var(--suave); }

.pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.pedido { background: var(--superficie); border: 1px solid var(--borde); border-left-width: 4px; border-radius: var(--radio); padding: 1rem 1.1rem; display: grid; gap: .7rem; box-shadow: var(--sombra); }
.pedido.estado-confirmado { border-left-color: var(--aviso); }
.pedido.estado-recopilando { border-left-color: var(--borde); }
.pedido.estado-entregado { border-left-color: var(--ok); }
.pedido.estado-cancelado { border-left-color: var(--error); opacity: .8; }
.pedido-cab { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; justify-content: space-between; }
.pedido-codigo { font-weight: 700; }
.pedido-hora { font-size: .84rem; color: var(--suave); }
.pedido-cliente { font-size: .95rem; display: grid; gap: .1rem; }
.pedido-cliente .suave { font-size: .88rem; overflow-wrap: anywhere; }
.productos { list-style: none; margin: 0; padding: .6rem .8rem; background: var(--fondo); border-radius: 10px; display: grid; gap: .3rem; font-size: .93rem; }
.productos li { display: flex; justify-content: space-between; gap: .8rem; }
.productos .nota-producto { color: var(--suave); font-size: .82rem; flex-basis: 100%; }
.productos li.con-nota { flex-wrap: wrap; }
.totales { display: grid; gap: .25rem; font-size: .93rem; }
.totales div { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.totales .total { font-weight: 700; font-size: 1.1rem; border-top: 1px solid var(--borde); padding-top: .4rem; }
.domicilio-fila { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.domicilio-fila input { width: 7.5rem; min-height: 2.25rem; padding: .35rem .6rem; }
.domicilio-fila button { min-height: 2.25rem; padding: .3rem .8rem; font-size: .88rem; }
.pedido-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.pedido-acciones .peligro { color: var(--error); border-color: var(--error); background: transparent; }
.comprobante { font-size: .88rem; padding: .5rem .7rem; border-radius: 10px; background: var(--acento-suave); color: var(--acento); }
.chip.recopilando { background: var(--gris-fondo); color: var(--suave); }
.chip.confirmado { background: var(--aviso-fondo); color: var(--aviso); }
.chip.entregado { background: var(--ok-fondo); color: var(--ok); }
.chip.cancelado { background: var(--error-fondo); color: var(--error); }
.vacio-grande { text-align: center; padding: 2rem 1rem; color: var(--suave); }

/* ── LISTA NEGRA ── */
.fila-agregar { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .fila-agregar { grid-template-columns: 12rem 1fr auto; align-items: end; } }

/* ── NEGOCIO ── */
.horario-fila { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; }
.horario-fila label { font-size: .8rem; }
.horario-fila button { min-height: 2.75rem; }
@media (max-width: 520px) { .horario-fila { grid-template-columns: 1fr 1fr; } .horario-fila select { grid-column: 1 / -1; } }
.estado-bot { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; }
.avisos-form { display: grid; gap: .5rem; }