/* Cosmos Ópticas: panel, entrada y páginas sencillas (estilos base de Cosmos Agendas).
   Pensado para el computador del mostrador y para el celular del dueño. */
:root {
  --fondo: #f3f6f7;
  --panel: #ffffff;
  --borde: #d9e3e6;
  --texto: #16252a;
  --suave: #56676d;
  --primario: #14657a;
  --primario-osc: #0c4655;
  --primario-claro: #e2f2f5;
  --oro: #b8893a;
  --ok: #1f8a4c;
  --ok-claro: #e4f4ea;
  --alerta: #b86200;
  --alerta-claro: #fff1de;
  --peligro: #c0392b;
  --peligro-claro: #fdecea;
  --gris-claro: #e9eff1;
  --sombra: 0 1px 2px rgba(16,37,42,.07), 0 4px 14px rgba(16,37,42,.06);
  --r: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Los controles responden al instante (sin la espera del doble toque) y no se seleccionan con toque largo.
   El texto de contenido (direcciones, notas, cifras) sí se puede seleccionar. */
button, a, [role="button"], summary, label.check, .chip {
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fondo); color: var(--texto);
  font-size: 16px; line-height: 1.45;
}
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.2; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 .6rem; }
a { color: var(--primario); }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Estructura ---------- */
.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem 1rem; background: var(--primario); color: #fff; box-shadow: var(--sombra);
  padding-top: calc(.65rem + env(safe-area-inset-top, 0px));
  padding-left: calc(1rem + env(safe-area-inset-left, 0px)); padding-right: calc(1rem + env(safe-area-inset-right, 0px));
}
.barra h1 { font-size: 1.05rem; margin: 0; font-weight: 700; }
.barra .sub { font-size: .8rem; opacity: .85; }
.barra button, .barra a.btn-barra {
  background: rgba(255,255,255,.16); border: 0; color: #fff; text-decoration: none;
  padding: .5rem .8rem; border-radius: 10px; cursor: pointer; font-weight: 600; min-height: 40px; display: inline-flex; align-items: center;
}
.contenido { padding: 1rem; max-width: 1150px; margin: 0 auto; }

.pestanas {
  display: flex; gap: .25rem; overflow-x: auto; padding: .4rem .6rem 0;
  background: var(--primario-osc); scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  background: transparent; border: 0; color: #cfe8ee; cursor: pointer;
  padding: .6rem 1rem; border-radius: 12px 12px 0 0; font-weight: 700; white-space: nowrap; font-size: .96rem;
}
.pestanas button.activa { background: var(--fondo); color: var(--texto); }

/* Pestañas dentro de una pantalla (secciones de la historia, de ajustes) */
.sub-pestanas { display: flex; gap: .35rem; overflow-x: auto; margin: 0 0 1rem; padding-bottom: .2rem; scrollbar-width: none; }
.sub-pestanas::-webkit-scrollbar { display: none; }
.sub-pestanas button {
  border: 1px solid var(--borde); background: var(--panel); border-radius: 999px; padding: .45rem .95rem;
  font-weight: 700; cursor: pointer; white-space: nowrap; color: var(--suave); font-size: .92rem;
}
.sub-pestanas button.activa { background: var(--primario); border-color: var(--primario); color: #fff; }

.tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r);
  padding: 1rem; box-shadow: var(--sombra); margin-bottom: 1rem;
}
.fila { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.crece { flex: 1; }
.suave { color: var(--suave); font-size: .9rem; }
.chico { font-size: .85rem; }
.centro { text-align: center; }
.der { text-align: right; }
.oculto { display: none !important; }
.rejilla { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rejilla > .tarjeta { margin-bottom: 0; }
.rejilla:not(:last-child) { margin-bottom: 1rem; }
.dos { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
.tres { display: grid; gap: .6rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .dos, .tres { grid-template-columns: 1fr; } }
.cuatro { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1rem; }
@media (min-width: 760px) { .cuatro { grid-template-columns: repeat(4, 1fr); } }
.separador { border: 0; border-top: 1px solid var(--borde); margin: 1rem 0; }

/* ---------- Cifras ---------- */
.cifra { display: flex; flex-direction: column; gap: .1rem; margin: 0; }
.cifra .num { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cifra .et { color: var(--suave); font-size: .85rem; font-weight: 600; }
.boton-tarjeta { text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; }
.cifra.verde .num { color: var(--ok); }
.cifra.rojo .num { color: var(--peligro); }
.cifra.naranja .num { color: var(--alerta); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto);
  padding: .65rem 1.05rem; border-radius: 12px; cursor: pointer; font-weight: 700;
  min-height: 46px; text-decoration: none; transition: filter .12s, transform .06s;
}
.btn:active { transform: scale(.985); }
.btn.primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.whatsapp { background: #1fa855; border-color: #1fa855; color: #fff; }
.btn.peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn.suave-peligro { color: var(--peligro); }
.btn.grande { font-size: 1.08rem; padding: .85rem 1.3rem; min-height: 56px; }
.btn.bloque { width: 100%; }
.btn.chico { min-height: 36px; padding: .3rem .7rem; font-size: .88rem; border-radius: 10px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Formularios ---------- */
input[type=text], input[type=number], input[type=password], input[type=date], input[type=time],
input[type=tel], input[type=email], input[type=search], input[type=url], input:not([type]), select, textarea {
  width: 100%; padding: .6rem .8rem; border: 1px solid var(--borde);
  border-radius: 12px; background: #fff; min-height: 46px;
}
input[type=color] { width: 56px; height: 46px; border: 1px solid var(--borde); border-radius: 12px; background: #fff; padding: 4px; cursor: pointer; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(20,101,122,.2); border-color: var(--primario); }
textarea { min-height: 90px; resize: vertical; }
label.campo, div.campo { display: block; margin-bottom: .75rem; }
label.campo > span, div.campo > span { display: block; font-size: .85rem; color: var(--suave); margin-bottom: .25rem; font-weight: 700; }
label.check { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .7rem; cursor: pointer; }
label.check input { width: 22px; height: 22px; margin-top: .05rem; flex: none; accent-color: var(--primario); }
fieldset { border: 1px solid var(--borde); border-radius: var(--r); padding: .8rem 1rem .2rem; margin: 0 0 1rem; }
legend { font-weight: 800; padding: 0 .4rem; }
details.seccion { border: 1px solid var(--borde); border-radius: var(--r); background: var(--panel); margin-bottom: .7rem; }
details.seccion > summary { cursor: pointer; padding: .85rem 1rem; font-weight: 800; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.seccion > summary::after { content: '▾'; color: var(--suave); transition: transform .15s; }
details.seccion[open] > summary::after { transform: rotate(180deg); }
details.seccion > .dentro { padding: 0 1rem .6rem; }

/* ---------- Listas ---------- */
.lista { display: flex; flex-direction: column; }
.item {
  display: flex; gap: .8rem; align-items: center; padding: .75rem .2rem;
  border-bottom: 1px solid var(--borde); background: none; border-left: 0; border-right: 0; border-top: 0;
  text-align: left; width: 100%; font: inherit; color: inherit;
}
button.item { cursor: pointer; }
.item:last-child { border-bottom: 0; }
.item .principal { flex: 1; min-width: 0; }
.item .titulo { font-weight: 700; }
.item .detalle { color: var(--suave); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; }
.vacio { color: var(--suave); text-align: center; padding: 1.5rem .5rem; }

.pill {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .02em;
  border-radius: 999px; padding: .15rem .6rem; background: var(--gris-claro); color: var(--suave); white-space: nowrap;
}
.pill.verde { background: var(--ok-claro); color: var(--ok); }
.pill.naranja { background: var(--alerta-claro); color: var(--alerta); }
.pill.rojo { background: var(--peligro-claro); color: var(--peligro); }
.pill.morado { background: var(--primario-claro); color: var(--primario); }
.pill.blanco { background: rgba(255,255,255,.92); color: var(--texto); }

.chips { display: flex; gap: .35rem; flex-wrap: wrap; margin: .5rem 0; }
.chips button {
  border: 1px solid var(--borde); background: #fff; border-radius: 999px; padding: .3rem .75rem; font-size: .85rem;
  font-weight: 700; cursor: pointer; color: var(--suave);
}
.chips button.activa { background: var(--texto); border-color: var(--texto); color: #fff; }

/* ---------- Ventana ---------- */
.fondo-modal {
  position: fixed; inset: 0; z-index: 100; background: rgba(10,25,30,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 700px) { .fondo-modal { align-items: center; padding: 1rem; } }
.modal {
  background: var(--panel); width: 100%; max-width: 620px; max-height: 92dvh; overflow: auto; overscroll-behavior: contain;
  border-radius: 18px 18px 0 0; padding: 1.1rem 1.1rem 1.4rem;
}
.modal.ancho { max-width: 900px; }
@media (min-width: 700px) { .modal { border-radius: 18px; } }
.modal .cabeza { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.modal .cabeza h2 { margin: 0; }
.cerrar { background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--suave); padding: .2rem .5rem; }

/* ---------- Avisos flotantes ---------- */
#avisos {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: .5rem; width: min(94vw, 460px);
}
.toast {
  background: var(--texto); color: #fff; padding: .85rem 1rem; border-radius: 12px; box-shadow: var(--sombra);
  font-weight: 600; animation: sube .2s ease-out;
}
.toast.ok { background: var(--ok); }
.toast.error { background: var(--peligro); }
@keyframes sube { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.franja { padding: .7rem 1rem; border-radius: 12px; margin-bottom: 1rem; font-weight: 600; }
.franja.alerta { background: var(--alerta-claro); color: var(--alerta); }
.franja.peligro { background: var(--peligro-claro); color: var(--peligro); }
.franja.info { background: var(--primario-claro); color: var(--primario-osc); }

/* ---------- Marca Cosmos ---------- */
.marca-cosmos { color: var(--suave); font-size: .8rem; padding: 1.2rem .5rem; text-align: center; }
.marca-cosmos a { color: var(--suave); font-weight: 700; }

/* ---------- Tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th, .tabla td { padding: .5rem .4rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla th { font-size: .76rem; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.desliza { overflow-x: auto; }


/* ---------- Menu de secciones del panel ---------- */
nav.pestanas a { color: #cfe8ee; text-decoration: none; padding: .55rem 1rem; border-radius: 12px 12px 0 0; font-weight: 700; white-space: nowrap; font-size: .95rem; }
nav.pestanas a.activa { background: var(--fondo); color: var(--texto); }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.alerta-suave { background: var(--alerta-claro); color: var(--alerta); border-radius: 10px; padding: .45rem .7rem; font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }
.globo { display: inline-block; min-width: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: #ffd34d; color: #3b2a00; font-size: .72rem; font-weight: 800; text-align: center; line-height: 1.25rem; }
.vencido { background: var(--peligro-claro); color: var(--peligro); padding: .55rem 1rem; font-weight: 700; font-size: .92rem; }
.herr { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.herr input, .herr select { width: auto; padding: .55rem .6rem; border-radius: 10px; border: 1px solid var(--borde); background: var(--panel); }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th { text-align: left; font-size: .75rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; padding: .4rem .5rem; border-bottom: 1px solid var(--borde); }
.tabla td { padding: .55rem .5rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla td.num, .tabla th.num { text-align: right; white-space: nowrap; }
.desplazable { overflow-x: auto; }
.fila-item { display: flex; gap: .7rem; align-items: center; padding: .65rem 0; border-top: 1px solid var(--borde); }
.fila-item:first-of-type { border-top: 0; }
.fila-item .crece { min-width: 0; }
h3.sec { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); margin: 1rem 0 .4rem; }
.grande-num { font-size: 1.6rem; font-weight: 800; }
.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin: .4rem 0 .8rem; }
.cifra { background: var(--gris-claro); border-radius: 12px; padding: .55rem .7rem; }
.cifra span { display: block; font-size: .75rem; color: var(--suave); }
.cifra b { font-size: 1.05rem; }

/* ---------- Revision de experiencia (2026-10-06) ---------- */
/* Teclado: siempre se ve donde esta el foco */
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primario) 55%, #fff); outline-offset: 2px; border-radius: 8px; }
/* Dedos: ningun boton por debajo de 40 px de alto */
.btn.chico { min-height: 40px; }
.tarjeta { transition: box-shadow .15s; }
/* Avatar: la foto de la persona o sus iniciales en su color */
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; font-weight: 800; color: #fff;
  background: var(--c, var(--primario)); width: var(--t, 40px); height: var(--t, 40px); font-size: calc(var(--t, 40px) * .4); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Logo del negocio en la barra del panel */
.barra .logo-barra { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #fff; flex: none; }
/* Miniatura de producto */
.mini { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--gris-claro); flex: none; display: grid; place-items: center; color: var(--suave); }
/* Subir imagen: el cuadro que se toca */
.subir-img { display: grid; place-items: center; gap: .3rem; border: 2px dashed var(--borde); border-radius: 14px; background: var(--panel);
  color: var(--suave); cursor: pointer; text-align: center; padding: .8rem; font-weight: 600; font-size: .9rem; }
.insignia { display: inline-block; font-size: .78rem; font-weight: 800; padding: .12rem .55rem; border-radius: 999px; background: var(--primario-claro); color: var(--primario); }

/* Hover solo donde hay mouse: en el celular el toque deja el hover pegado. */
@media (hover: hover) and (pointer: fine) {
  .boton-tarjeta:hover { border-color: var(--primario); }
  .btn:hover { filter: brightness(.97); }
  .subir-img:hover { border-color: var(--primario); color: var(--primario); }
}

/* Respuesta al toque: se ve al poner el dedo, no al soltarlo. */
button.item, .boton-tarjeta { transition: background .12s ease-out, transform .12s ease-out; }
button.item:active { background: var(--gris-claro); }
.boton-tarjeta:active { transform: scale(.985); }

/* En pantallas táctiles ningún campo baja de 16px: si no, el iPhone hace zoom al escribir y no vuelve. */
@media (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }

/* Prueba gratis: cuantos dias quedan y como activar el plan (solo la dueña) */
.prueba-aviso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem;
  background: var(--primario-claro); color: var(--primario-osc); padding: .55rem 1rem; font-weight: 700; font-size: .92rem; }
.prueba-aviso a, .vencido a { color: inherit; font-weight: 800; white-space: nowrap; }

/* ---------- Óptica: fórmula y clínica ---------- */
/* La fórmula de los dos ojos: una fila por ojo, una columna por medida */
.formula { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.formula th { font-size: .72rem; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; padding: .3rem .25rem; text-align: center; }
.formula td { padding: .2rem; text-align: center; border-top: 1px solid var(--borde); }
.formula td.ojo { font-weight: 800; color: var(--primario); width: 2.6rem; }
.formula input { min-height: 40px; padding: .35rem .3rem; text-align: center; border-radius: 9px; min-width: 3.6rem; }
.formula .valor { font-weight: 700; font-size: 1.02rem; }
.formula .nada { color: var(--borde); }
.desliza > .formula { min-width: 560px; }
.k { display: grid; grid-template-columns: 2.6rem repeat(3, 1fr); gap: .35rem; align-items: center; }
.k b { color: var(--primario); }
.k input { min-height: 40px; text-align: center; }
/* Diagnósticos escogidos */
.dx { display: flex; gap: .5rem; align-items: center; padding: .45rem .6rem; border: 1px solid var(--borde); border-radius: 10px; margin-bottom: .35rem; background: #fff; }
.dx code { font-weight: 800; color: var(--primario); }
.dx .crece { min-width: 0; }
.sugerencias { border: 1px solid var(--borde); border-radius: 12px; background: #fff; max-height: 240px; overflow: auto; margin: -.4rem 0 .7rem; }
.sugerencias button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--borde); background: none; padding: .55rem .7rem; cursor: pointer; font: inherit; }
.sugerencias button:last-child { border-bottom: 0; }
.sugerencias button:active { background: var(--primario-claro); }
/* Historia firmada */
.sello { display: inline-flex; gap: .4rem; align-items: center; font-weight: 800; color: var(--ok); background: var(--ok-claro); border-radius: 999px; padding: .2rem .7rem; font-size: .85rem; }
.sello.mal { color: var(--peligro); background: var(--peligro-claro); }
dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .9rem; margin: 0; }
dl.datos dt { color: var(--suave); font-size: .86rem; font-weight: 700; }
dl.datos dd { margin: 0; white-space: pre-wrap; }
.barra-guardar { position: sticky; bottom: 0; z-index: 30; display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; align-items: center;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-top: 1px solid var(--borde); backdrop-filter: blur(6px); }

/* Impresión: la fórmula y la historia salen limpias, sin menú ni botones */
@media print {
  .barra, nav.pestanas, #aviso-plan, .barra-guardar, .no-imprimir, #avisos { display: none !important; }
  body { background: #fff; }
  .tarjeta { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .contenido { max-width: none; padding: 0; }
}