/* Panel de glucosa - mobile-first */
:root {
    --fondo: #f4f6f8;
    --superficie: #ffffff;
    --texto: #1f2937;
    --suave: #6b7280;
    --borde: #e5e7eb;
    --primario: #0f766e;
    --primario-oscuro: #115e59;
    --verde: #15803d;  --verde-fondo: #dcfce7;  --verde-texto: #14532d;
    --amarillo: #ca8a04; --amarillo-fondo: #fef9c3; --amarillo-texto: #713f12;
    --rojo: #dc2626;   --rojo-fondo: #fee2e2;   --rojo-texto: #7f1d1d;
    --gris: #9ca3af;   --gris-fondo: #f3f4f6;   --gris-texto: #4b5563;
    --radio: 14px;
    --sombra: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #0f1417; --superficie: #182025; --texto: #e5e7eb; --suave: #9ca3af; --borde: #2b363d;
        --primario: #2dd4bf; --primario-oscuro: #5eead4;
        --verde-fondo: #12351f; --verde-texto: #86efac;
        --amarillo-fondo: #3b3210; --amarillo-texto: #fde68a;
        --rojo-fondo: #3f1717; --rojo-texto: #fca5a5;
        --gris-fondo: #232c32; --gris-texto: #cbd5e1;
        --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;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
body.simple { padding-bottom: 0; }
a { color: var(--primario); }
h1 { font-size: 1.45rem; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
small { font-size: .8em; }
.suave { color: var(--suave); }
.centrado { text-align: center; }
.oculto { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texto-verde { color: var(--verde-texto); }
.texto-rojo { color: var(--rojo-texto); }

/* Barra superior y navegación */
.barra {
    position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
    padding: .6rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--texto); text-decoration: none; }
.nav-escritorio { display: none; gap: .25rem; }
.nav-escritorio a { padding: .45rem .8rem; border-radius: 999px; text-decoration: none; color: var(--texto); }
.nav-escritorio a.activo { background: var(--primario); color: #fff; }
.nav-movil {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--superficie); border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom);
}
.nav-movil a {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem 0 .55rem;
    font-size: .75rem; color: var(--suave); text-decoration: none; min-height: 56px; justify-content: center;
}
.nav-movil a span { font-size: 1.3rem; line-height: 1; }
.nav-movil a.activo { color: var(--primario); font-weight: 600; }

.contenido { max-width: 960px; margin: 0 auto; padding: 1rem; }
.contenido-angosto { max-width: 420px; padding-top: 10vh; }

/* Tarjetas */
.tarjeta {
    background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra);
    padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--borde);
}
.titulo-seccion { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.titulo-seccion h2 { margin: 0; }
.saludo { margin: .25rem 0 1rem; }
.saludo h1 { margin: 0; }
.saludo p { margin: 0; }

/* Botones */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 44px; padding: .6rem 1.1rem; border-radius: 10px; border: 1px solid var(--primario);
    background: var(--primario); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    list-style: none;
}
.boton::-webkit-details-marker { display: none; }
.boton:hover { background: var(--primario-oscuro); border-color: var(--primario-oscuro); }
.boton-contorno { background: transparent; color: var(--primario); }
.boton-contorno:hover { background: var(--gris-fondo); color: var(--primario); }
.boton-peligro { background: transparent; color: var(--rojo); border-color: var(--rojo); }
.boton-peligro:hover { background: var(--rojo-fondo); color: var(--rojo-texto); border-color: var(--rojo); }
.boton-grande { width: 100%; min-height: 52px; font-size: 1.05rem; }
.boton-chico { min-height: 36px; padding: .35rem .8rem; font-size: .9rem; }
.boton-ancho { width: 100%; }
.botonera { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.botonera .boton-grande { flex: 1 1 160px; }
.botonera-acciones .boton { flex: 1 1 140px; }
.acciones-pie { margin: 1rem 0 2rem; }

/* Formularios */
.formulario { display: grid; gap: .85rem; }
label { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; }
input, select, textarea {
    font: inherit; font-weight: 400; width: 100%; min-height: 46px; padding: .55rem .7rem;
    border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--texto);
}
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); outline-offset: 1px; border-color: var(--primario); }
input:disabled { background: var(--gris-fondo); color: var(--suave); }
.input-valor { font-size: 1.6rem; font-weight: 700; text-align: center; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.check input { width: 22px; min-height: 22px; height: 22px; }
.si-no { border: 0; padding: 0; margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.si-no legend { font-weight: 600; margin-bottom: .4rem; }
.opcion { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--borde); border-radius: 10px; padding: .6rem 1.2rem; font-weight: 500; cursor: pointer; }
.opcion input { width: 20px; min-height: 20px; height: 20px; }
.campos-embarazo { display: grid; gap: .85rem; }

/* Avisos */
.aviso { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 500; }
.aviso-ok { background: var(--verde-fondo); color: var(--verde-texto); }
.aviso-error { background: var(--rojo-fondo); color: var(--rojo-texto); }
.aviso-info { background: var(--gris-fondo); color: var(--gris-texto); }
.nota { margin: .4rem 0; font-size: .9rem; }
.nota-rojo { color: var(--rojo-texto); }

/* Estados */
.estado { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.estado-verde { background: var(--verde-fondo); color: var(--verde-texto); }
.estado-amarillo { background: var(--amarillo-fondo); color: var(--amarillo-texto); }
.estado-rojo { background: var(--rojo-fondo); color: var(--rojo-texto); }
.estado-gris { background: var(--gris-fondo); color: var(--gris-texto); }
.borde-verde { border-left: 5px solid var(--verde); }
.borde-amarillo { border-left: 5px solid var(--amarillo); }
.borde-rojo { border-left: 5px solid var(--rojo); }
.borde-gris { border-left: 5px solid var(--gris); }
.estado-vivo:empty { display: none; }
.leyenda { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; }

/* Hoy (dashboard) */
.lista-hoy { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fila-hoy { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .75rem; border-radius: 10px; background: var(--fondo); }
.fila-hoy .momento { flex: 1 1 110px; font-weight: 600; }
.valor-hoy { color: var(--texto); text-decoration: none; font-size: 1.15rem; }

/* Indicadores */
.indicadores { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.indicador { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .85rem; display: grid; gap: .2rem; align-content: start; box-shadow: var(--sombra); }
.etiqueta { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-weight: 600; }
.grande { font-size: 1.6rem; line-height: 1.15; }
.indicador .estado { justify-self: start; }

/* Embarazo */
.tarjeta-embarazo { border-left: 5px solid var(--primario); }
.embarazo-grilla { display: grid; gap: .75rem; }
.embarazo-grilla > div { display: grid; gap: .1rem; }
.resumen-embarazo, .resumen-cuenta { display: grid; gap: .5rem; margin: 0 0 1rem; }
.resumen-embarazo div, .resumen-cuenta div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--borde); padding: .4rem 0; }
dt { color: var(--suave); }
dd { margin: 0; font-weight: 600; text-align: right; }

/* Pestañas y chips */
.pestanias { display: flex; gap: .25rem; overflow-x: auto; margin: .5rem 0 1rem; border-bottom: 1px solid var(--borde); }
.pestanias a { padding: .6rem .8rem; text-decoration: none; color: var(--suave); white-space: nowrap; border-bottom: 3px solid transparent; }
.pestanias a.activo { color: var(--primario); border-color: var(--primario); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; }
.chip { display: inline-flex; align-items: center; min-height: 38px; padding: .3rem .9rem; border-radius: 999px; border: 1px solid var(--borde); text-decoration: none; color: var(--texto); cursor: pointer; list-style: none; }
.chip::-webkit-details-marker { display: none; }
.chip.activo { background: var(--primario); border-color: var(--primario); color: #fff; }
.chip-detalle[open] { flex-basis: 100%; }
.rango { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-top: .5rem; }
.rango label { flex: 1 1 130px; }

/* Gráfico */
.grafico { width: 100%; min-height: 40px; }
.grafico svg { width: 100%; height: auto; display: block; }
.grafico .leyenda-grafico { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.grafico .leyenda-grafico button { font: inherit; font-size: .85rem; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); cursor: pointer; min-height: 34px; }
.grafico .leyenda-grafico button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.grafico .punto-color { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.grafico-tip { position: fixed; pointer-events: none; background: #111827; color: #fff; padding: .35rem .55rem; border-radius: 8px; font-size: .82rem; z-index: 20; }

/* Calendario */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cab { text-align: center; font-size: .75rem; color: var(--suave); font-weight: 600; padding: .2rem 0; }
.cal-dia { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 10px; text-decoration: none; font-weight: 600; color: var(--texto); min-height: 38px; }
.cal-icono { position: absolute; top: 2px; right: 5px; font-size: .65rem; }
.cal-verde { background: var(--verde-fondo); color: var(--verde-texto); }
.cal-amarillo { background: var(--amarillo-fondo); color: var(--amarillo-texto); }
.cal-rojo { background: var(--rojo-fondo); color: var(--rojo-texto); }
.cal-gris { background: var(--gris-fondo); color: var(--gris-texto); }
.cal-futuro { color: var(--borde); }
.cal-hoy { outline: 2px solid var(--primario); outline-offset: -2px; }

/* Día */
.cabecera-dia { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.selector-fecha { display: grid; justify-items: center; gap: .1rem; flex: 1; }
.selector-fecha input { max-width: 200px; text-align: center; font-weight: 700; }
.momento-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.momento-cab h2 { margin: 0; }
.momento-valor { display: grid; justify-items: end; gap: .15rem; }
.momento-valor strong { font-size: 1.7rem; line-height: 1; }
.observacion { background: var(--fondo); padding: .5rem .7rem; border-radius: 8px; margin: .5rem 0; font-size: .95rem; }
.editor { margin-top: .75rem; }
.editor > summary { margin-bottom: .75rem; }
.editor[open] > summary { display: none; }
.form-eliminar { margin-top: .75rem; text-align: right; }

/* Foto */
.campo-foto { display: grid; gap: .4rem; }
.botones-foto { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.botones-foto .boton { font-weight: 600; display: flex; }
.foto-previa, .miniatura { max-width: 160px; max-height: 160px; border-radius: 10px; border: 1px solid var(--borde); object-fit: cover; }
.foto-actual { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* Tablas */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { padding: .55rem .5rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla-limites input { min-width: 90px; }
.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: end; margin: .75rem 0; }
.filtros .check, .filtros .boton { grid-column: 1 / -1; }
.acciones { display: flex; gap: .35rem; flex-wrap: wrap; }
.acciones form { margin: 0; }
.obs { max-width: 280px; }
.tarjeta-tabla { padding: .25rem .75rem; }

/* Historial en celular: cada fila como tarjeta */
@media (max-width: 699px) {
    .tabla-historial thead { display: none; }
    .tabla-historial, .tabla-historial tbody, .tabla-historial tr, .tabla-historial td { display: block; width: 100%; }
    .tabla-historial tr { padding: .75rem 0; border-bottom: 1px solid var(--borde); }
    .tabla-historial td { border: 0; padding: .15rem 0; text-align: left; display: flex; gap: .5rem; }
    .tabla-historial td[data-t]::before { content: attr(data-t); min-width: 96px; color: var(--suave); font-size: .85rem; }
    .tabla-historial td.num { text-align: left; }
    .tabla-historial .obs { max-width: none; }
    .tabla-historial .acciones { padding-top: .5rem; }
}

/* Login */
.login { text-align: center; }
.login h1 { margin: .5rem 0 0; }
.login .formulario { text-align: left; margin-top: 1.25rem; }

/* Escritorio */
@media (min-width: 700px) {
    body { padding-bottom: 0; }
    .nav-movil { display: none; }
    .nav-escritorio { display: flex; }
    .contenido { padding: 1.5rem; }
    .indicadores { grid-template-columns: repeat(4, 1fr); }
    .embarazo-grilla { grid-template-columns: repeat(3, 1fr); }
    .filtros { grid-template-columns: repeat(3, 1fr) auto; }
    .filtros .check { grid-column: auto; }
    .filtros .boton { grid-column: auto; }
    .acciones-pie .boton-grande { width: auto; }
}