:root{
  --bg:#FBFAF8; --surface:#fff; --ink:#17191C; --muted:#6B6E73; --faint:#9A9C9F;
  --cambio:#2C5B8A; --line:#E6E4DF; --soft:#F2F1ED; --ingreso:#186B52; --gasto:#A34E28; --otra:#5B6570;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;-webkit-text-size-adjust:100%}
.wrap{max-width:620px;margin:0 auto;padding:20px 16px 104px}
.top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.top h1{font-size:17px;font-weight:500;margin:0}
.top a{font-size:12px;color:var(--faint);text-decoration:none}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font-size:12px;color:var(--muted);margin:0 0 8px}
.row{margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.grid2{display:grid;grid-template-columns:1fr 1fr}
.chip{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font-size:14px;min-height:44px;text-align:left;cursor:pointer;font:inherit;
  font-size:14px;line-height:1.25}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-pressed="true"].ing{background:var(--ingreso);border-color:var(--ingreso)}
.chip[aria-pressed="true"].gas{background:var(--gasto);border-color:var(--gasto)}
.chip[aria-pressed="true"].otr{background:var(--otra);border-color:var(--otra)}
.chip .p{font-family:var(--mono);margin-left:8px;opacity:.85}
/* LA REGLA QUE DA FORMA A TODOS LOS CAMPOS.
   Si un `type` no esta aqui, el campo se pinta DESNUDO: sin borde, sin
   relleno y sin altura minima. No desaparece — es peor: queda como un
   recuadro diminuto al lado de otros que si parecen campos, y nadie lo usa.

   PASO EL 25/08/2026 con `type=search`: el buscador de alimentos y farmacos
   estaba montado, desplegado y funcionando, y Javier no lo veia. Escribia en
   el campo de al lado, que era el que parecia un campo.

   Y no era el primero: el buscador de la lista de pacientes llevaba asi
   desde la entrega 1, y los cuatro `type=tel` de la agenda y los
   recordatorios desde antes.

   POR ESO VAN TAMBIEN `email` Y `url`, que hoy no usa nadie: el dia que
   alguien ponga uno, se vera bien sin tener que acordarse de esta linea. */
input[type=text],input[type=date],input[type=number],input[type=password],
input[type=search],input[type=tel],input[type=email],input[type=url],
select,textarea,input[type=file]{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);font-size:16px;min-height:48px;color:var(--ink);font-family:inherit}

/* LA CRUZ QUE SAFARI Y CHROME PONEN EN LOS `search`: sobra, y descoloca el
   relleno de la derecha. Se quita con Escape, que el componente ya escucha. */
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}

/* ── TRAMPA LATENTE, ANOTADA (25/08/2026) ─────────────────────────────────
   `.campo` SOLO tiene estilos dentro de `.barra` (lineas 156-158). En las
   tarjetas no pinta nada, asi que un componente que se apoye en esa clase se
   vera distinto segun donde se coloque. Hoy no se nota porque a los campos
   los estiliza el selector por tipo de arriba, no la clase.

   NO SE ARREGLA DE PASO: darle estilos globales cambiaria el aspecto de los
   ~60 formularios de Gestionconsulta, y eso es una decision de Javier, no un
   efecto colateral de una entrega de `nutricion`. */
input[type=number]{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn{width:100%;padding:16px;border-radius:12px;border:none;background:var(--ink);color:#fff;
  font-size:16px;min-height:54px;cursor:pointer;font:inherit;font-size:16px}
.btn.sec{background:var(--surface);color:var(--ink);border:1px solid var(--line);
  padding:10px 14px;min-height:44px;font-size:13px;text-decoration:none;display:inline-block;
  text-align:center;width:auto}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;
  margin-bottom:8px}
.card h3{font-size:12px;color:var(--muted);font-weight:400;margin:0 0 10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.metric .v{font-size:21px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.metric .s{font-size:11px;color:var(--faint);margin-top:4px}
.line{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px;gap:12px}
.line span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{height:6px;background:var(--soft);border-radius:3px;margin-top:4px}
.bar i{display:block;height:6px;background:var(--ingreso);border-radius:3px}
.mv{display:flex;gap:12px;align-items:flex-start}
.mv .t{font-size:15px;margin-bottom:3px}
.mv .d{font-size:12px;color:var(--muted)}
.mv .a{text-align:right;white-space:nowrap}
.nav-mes{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.nav-mes a{width:44px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink)}
.tabs{display:flex;gap:6px;margin-bottom:20px}
.tabs a{flex:1;text-align:center;text-decoration:none}
nav.bottom{position:fixed;bottom:0;left:0;right:0;background:var(--surface);
  border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom)}
nav.bottom a{flex:1;padding:14px 4px 16px;text-align:center;font-size:12px;color:var(--faint);
  text-decoration:none;border-top:2px solid transparent;margin-top:-1px}
nav.bottom a.on{color:var(--ink);border-top-color:var(--ink)}
.msg{background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;
  margin-bottom:16px}
.hint{font-size:13px;color:var(--muted);background:var(--soft);border-radius:10px;padding:12px}
.err{color:var(--gasto);font-size:13px;margin-top:6px}
.hide{display:none}



/* --- Tablas --- */
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-weight:500;font-size:12px;color:var(--muted);
  padding:8px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:10px;border-bottom:1px solid var(--line)}
table.t tr:last-child td{border-bottom:none}
table.t td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;
  white-space:nowrap}
table.t a{color:var(--ink);text-decoration:none}
table.t a:hover{text-decoration:underline}
.barra{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.barra input,.barra select{width:auto;min-width:150px;flex:1}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  justify-content:space-between;margin-bottom:16px}

/* --- Buscador de paciente --- */
.busca{position:relative}
.busca .lupa{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--faint);pointer-events:none;font-size:15px}
.busca input{padding-right:38px}
.sugerencias{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.08);
  z-index:30;overflow:hidden;max-height:280px;overflow-y:auto}
.sugerencias button{display:block;width:100%;text-align:left;padding:11px 14px;background:none;
  border:none;font:inherit;font-size:14px;cursor:pointer;color:var(--ink)}
.sugerencias button:hover{background:var(--soft)}
.sugerencias .nuevo{border-top:1px solid var(--line);color:var(--muted)}
.elegido{display:flex;justify-content:space-between;align-items:center;background:var(--soft);
  border-radius:10px;padding:12px 14px;font-size:14px}
.elegido button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px}
.vacio{color:var(--muted);text-align:center;padding:40px 0;font-size:14px}

.grid-form{display:grid;grid-template-columns:1fr;gap:0 14px}
@media (min-width:700px){ .grid-form{grid-template-columns:1fr 1fr} }

/* --- Cabecera superior --- */
.cabecera{background:var(--ink);color:#fff;display:flex;align-items:center;gap:24px;
  padding:0 20px;position:sticky;top:0;z-index:40;min-height:52px}
.cab-marca{font-size:15px;white-space:nowrap;letter-spacing:.01em}
.cab-menu{display:flex;align-items:stretch;flex:1;gap:2px;overflow:visible}
.men{position:relative;display:flex;align-items:center}
.men > a{color:rgba(255,255,255,.72);text-decoration:none;font-size:14px;padding:16px 12px;
  display:block;white-space:nowrap}
.men > a:hover,.men > a.on{color:#fff}
.men > a.on{box-shadow:inset 0 -2px 0 #fff}
.men > a i{font-style:normal;font-size:10px;opacity:.6;margin-left:2px}
.desp{position:absolute;top:100%;left:0;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.16);min-width:210px;padding:6px;
  display:none;z-index:50}
.men:hover .desp,.men:focus-within .desp{display:block}
.desp a{display:block;padding:9px 12px;color:var(--ink);text-decoration:none;font-size:14px;
  border-radius:7px;white-space:nowrap}
.desp a:hover{background:var(--soft)}
.cab-salir{margin:0}
.cab-salir button{background:none;border:1px solid rgba(255,255,255,.28);color:#fff;
  border-radius:8px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
@media (max-width:899px){
  .cabecera{display:none}
  .solo-escritorio{display:none}
  /* En el movil la cabecera se oculta, asi que el boton de salir va aqui */
  .cab-movil{display:flex;align-items:center;justify-content:space-between;
    gap:12px;background:var(--ink);color:#fff;padding:10px 16px;
    position:sticky;top:0;z-index:20}
  .cab-movil .cab-marca{font-size:14px;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .cab-movil .cab-marca img{height:30px}
}
@media (min-width:900px){ .cab-movil{display:none} }
@media (min-width:900px){
  .wrap{max-width:1080px;padding:24px 28px 48px}
  nav.bottom{display:none}
  .solo-movil{display:none}
  .grid2{grid-template-columns:repeat(4,1fr)}
  .chips.grid2{grid-template-columns:repeat(3,1fr)}
}

/* --- Tablas --- */
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-weight:500;font-size:12px;color:var(--muted);
  padding:8px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:10px;border-bottom:1px solid var(--line)}
table.t tr:last-child td{border-bottom:none}
table.t td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;
  white-space:nowrap}
table.t a{color:var(--ink);text-decoration:none}
table.t a:hover{text-decoration:underline}
.barra{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.barra input,.barra select{width:auto;min-width:140px}
.barra .campo{display:flex;flex-direction:column;gap:4px}
.barra .campo span{font-size:12px;color:var(--muted)}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  justify-content:space-between;margin-bottom:16px}

/* --- Buscador de paciente --- */
.busca{position:relative}
.busca .lupa{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--faint);pointer-events:none;font-size:15px}
.busca input{padding-right:38px}
.sugerencias{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.08);
  z-index:30;overflow:hidden;max-height:280px;overflow-y:auto}
.sugerencias button{display:block;width:100%;text-align:left;padding:11px 14px;background:none;
  border:none;font:inherit;font-size:14px;cursor:pointer;color:var(--ink)}
.sugerencias button:hover{background:var(--soft)}
.sugerencias .nuevo{border-top:1px solid var(--line);color:var(--muted)}
.elegido{display:flex;justify-content:space-between;align-items:center;background:var(--soft);
  border-radius:10px;padding:12px 14px;font-size:14px}
.elegido button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px}
.vacio{color:var(--muted);text-align:center;padding:40px 0;font-size:14px}
.grid-form{display:grid;grid-template-columns:1fr;gap:0 14px}
@media (min-width:700px){ .grid-form{grid-template-columns:1fr 1fr} }

/* --- Agenda de día --- */
.agenda-cols{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:900px){ .agenda-cols{grid-template-columns:248px 1fr;align-items:start} }
.minical{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.minical .mc-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.minical .mc-cab a{text-decoration:none;color:var(--muted);padding:2px 8px;font-size:16px}
.minical .mc-mes{font-size:13px}
.minical table{width:100%;border-collapse:collapse;table-layout:fixed}
.minical th{font-size:11px;color:var(--faint);font-weight:400;padding:4px 0}
.minical td{padding:1px;text-align:center}
.minical a,.minical span{display:block;padding:5px 0;font-size:12px;border-radius:6px;
  text-decoration:none;color:var(--ink);font-family:var(--mono)}
.minical a:hover{background:var(--soft)}
.minical .fuera{color:var(--faint)}
.minical .hoy{outline:1px solid var(--line)}
.minical .sel{background:var(--ink);color:#fff}
.minical .tiene{font-weight:600}
.minical .tiene::after{content:"";display:block;width:4px;height:4px;border-radius:50%;
  background:var(--ingreso);margin:2px auto 0}
.minical .sel::after{background:#fff}
.dia-nav{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.dia-nav a,.dia-nav button{border:1px solid var(--line);background:var(--surface);
  border-radius:8px;padding:7px 12px;text-decoration:none;color:var(--ink);font-size:13px;
  font:inherit;font-size:13px;cursor:pointer}
.dia-nav .titulo{flex:1;font-size:15px;text-align:center}
.franja{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.franja:last-child{border-bottom:none}
.franja .hora{width:52px;flex:0 0 52px;font-family:var(--mono);font-size:13px;
  color:var(--muted);padding-top:2px}
.franja .cuerpo{flex:1;min-width:0}
/* EL COLOR DE GOOGLE (§ 87): la columna de la hora es una franja ancha con
   el color de la cita, y la hora en negro o blanco, el que se lea. */
.franja .hora.con-color{flex-basis:60px;width:60px;border-radius:8px;
  padding:8px 4px;text-align:center;font-weight:600;align-self:stretch}
.franja.hecha{opacity:.55}
.pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;
  background:var(--soft);color:var(--muted);margin-left:6px}
.pill.cobra{background:#E8F1ED;color:var(--ingreso)}
.pill.cambio{background:#E6EDF5;color:var(--cambio)}
.pill.anula{background:#F6E7E0;color:var(--gasto)}
.pill.rara{background:#F6E7E0;color:var(--gasto);font-weight:500}
.dia-cab{display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 14px 8px;font-size:13px;color:var(--muted)}
.dia-cab b{color:var(--ink);font-weight:500}

/* --- Grupos de opciones --- */
.chips{gap:8px}
.chip{transition:background .12s,border-color .12s,color .12s;font-weight:400;
  box-shadow:0 1px 0 rgba(23,25,28,.03)}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed="true"]{box-shadow:none;font-weight:500}
.chip[aria-pressed="true"]:hover{opacity:.92}
.chip .p{font-family:var(--mono);margin-left:8px;opacity:.7;font-size:13px}

/* --- Caja de fecha destacada --- */
.fecha-caja{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:22px;display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.fecha-caja label{font-size:12px;color:var(--muted);display:block;margin-bottom:8px}
.fecha-caja > label{flex:0 0 100%;margin:0}
.fecha-caja input[type=date]{flex:1;min-width:170px;font-family:var(--mono);font-size:16px}
.fecha-atajos{display:flex;gap:6px}
.fecha-atajos button{border:1px solid var(--line);background:var(--surface);border-radius:10px;
  padding:0 14px;min-height:48px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.fecha-atajos button:hover{border-color:var(--muted)}
input[type=date]{cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.5;
  width:20px;height:20px}
input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:.9}

/* --- Logotipo --- */
.cab-marca{display:flex;align-items:center;gap:10px}
/* Fondo claro tras el logo: asi se ve igual sea claro, oscuro o de color */
.cab-marca img{height:38px;width:auto;max-width:160px;object-fit:contain;
  background:#fff;border-radius:6px;padding:3px 6px;box-sizing:content-box}
.doc .logo{max-height:70px;max-width:230px;object-fit:contain;margin-bottom:14px;
  display:block}
.logo-actual{display:flex;align-items:center;gap:14px;background:var(--soft);
  border-radius:10px;padding:12px 14px;margin-bottom:10px}
.logo-actual img{max-height:52px;max-width:170px;object-fit:contain}
@media print{ .doc .logo{max-height:64px} }

/* --- Gráfico de barras --- */
.grafico{display:flex;align-items:flex-end;gap:4px;height:150px;padding-top:8px}
.grafico .col{flex:1;display:flex;flex-direction:column;align-items:center;
  height:100%;justify-content:flex-end;gap:6px}
.grafico .barras{display:flex;align-items:flex-end;gap:2px;height:100%;width:100%;
  justify-content:center}
.grafico .barras i{display:block;width:44%;max-width:16px;border-radius:3px 3px 0 0;
  min-height:2px}
.grafico .barras i.ing{background:var(--ingreso)}
.grafico .barras i.gas{background:var(--gasto);opacity:.65}
.grafico .etq{font-size:11px;color:var(--muted)}
.grafico .col.futura{opacity:.3}
.punto{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
.punto.ing{background:var(--ingreso)}
.punto.gas{background:var(--gasto);opacity:.65}

/* =====================================================================
   FICHAS INCOMPLETAS   ·   31/08/2026
   =====================================================================
   Javier: la app tiene que avisar cuando falte un campo, no esperar a
   que alguien lo descubra al calcular tres semanas despues.

   SOLO SE MARCA LO QUE BLOQUEA EL CALCULO -sexo y fecha de nacimiento-.
   Se conto antes de decidirlo: la direccion falta en el 67 % de las
   fichas, y un aviso que salta en dos de cada tres se deja de leer en
   una semana. Entonces tampoco se leeria este.

   CON FORMA ADEMAS DE COLOR: el triangulo se ve aunque no se distinga
   el ambar. Misma regla que la de nutricion. */
.falta-dato {
  color: #B8860B;
  font-size: 11px;
  vertical-align: super;
  cursor: help;
  margin-left: 3px;
}
.aviso-ficha {
  border-left: 3px solid #B8860B;
  background: rgba(184, 134, 11, .07);
  padding: 10px 12px;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  border-radius: 0 4px 4px 0;
}
.aviso-ficha strong { font-weight: 600; }

/* =====================================================================
   SIN CITA FUTURA   ·   01/09/2026
   =====================================================================
   La fila de un aviso QUE VUELVE se distingue de la de uno nuevo: no es
   lo mismo «este no tiene cita» que «dijo que avisaría hace tres semanas
   y no ha vuelto». Si se vieran igual, Javier no sabría que ya preguntó
   y que le dieron una respuesta que no se ha cumplido. */
.vuelve-a-avisar { background: rgba(184, 134, 11, .06); }
.ya-lo-dijo {
  font-size: 12px;
  color: #B8860B;
  margin-top: 3px;
  line-height: 1.5;
}
.motivo-rapido {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  flex-wrap: wrap;
}
.motivo-rapido select,
.motivo-rapido input[type="date"] {
  font-size: 12px;
  padding: 4px 6px;
  max-width: 165px;
}

/* =====================================================================
   LA PREGUNTA DE DUPLICADO   ·   01/09/2026
   =====================================================================
   No es un aviso: es una pregunta que corta el alta. Por eso ocupa la
   pantalla y los dos caminos son botones grandes y distintos entre sí.
   Un aviso discreto es lo que ya falló. */
.pregunta-duplicado { border-left: 4px solid #B8860B; }
.candidato {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.6;
}
.candidato:hover { border-color: #B8860B; }
.candidato input[type="radio"] { margin-top: 4px; }
.candidato .detalle { font-size: 12px; color: var(--muted); }
.candidato .coincide { font-size: 12px; color: #B8860B; font-weight: 500; }
.dos-caminos {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.dos-caminos button { flex: 1 1 240px; }

/* --- La pregunta de por qué no tienen la siguiente cita (agenda) ------------
   Una fila por paciente: quién, por qué, desde cuándo, y anotar. En pantalla
   estrecha se apila, porque son cinco cosas y no caben en una línea. */
.fila-sin-cita{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:8px 0;border-top:1px solid var(--line)}
.fila-sin-cita .quien{flex:1 1 220px;font-size:14px}
.fila-sin-cita select,.fila-sin-cita input[type=date]{font-size:13px}
.fila-sin-cita .btn{padding:6px 12px;font-size:13px;min-height:36px}
@media (max-width:560px){
  .fila-sin-cita{flex-direction:column;align-items:stretch}
}

/* --- «Vuelve el», con etiqueta VISIBLE -------------------------------------
   Estuvo solo como `title`, que hay que descubrir pasando el ratón por
   encima. El 03/09/2026 se midió el resultado: las 40 filas anotadas tenían
   ahí la fecha de la ÚLTIMA VISITA, puestas por dos personas distintas.
   Una casilla de fecha sin etiqueta, al lado de una columna «vino el», se
   lee como «la fecha». */
.cuando-vuelve{display:inline-flex;flex-direction:column;gap:2px;
  font-size:11px;color:var(--muted)}
.cuando-vuelve input{font-size:13px}