/* ------------------------------------------------------------------
   Consultorio — hoja de estilos única. Sin build, sin dependencias.
   Tipografía grande a propósito: la pantalla se ve de lejos y el
   personal no siempre tiene buena vista.
   ------------------------------------------------------------------ */

:root {
    --papel: #f2f5f4;
    --superficie: #ffffff;
    --tinta: #16211f;
    --tinta-2: #4c5b58;
    --tinta-3: #7d8c89;
    --linea: #dbe3e1;
    --linea-suave: #eaefee;

    --acento: #0f6b5c;
    --acento-fuerte: #0b5449;
    --acento-suave: #e3efec;

    --azul: #1d5b8f;
    --azul-suave: #e2edf6;
    --ambar: #8a5a0c;
    --ambar-suave: #f8eeda;
    --rojo: #9a3327;
    --rojo-suave: #f8e6e3;

    --radio: 4px;
    --sombra: 0 1px 2px rgba(22, 33, 31, .07), 0 4px 12px rgba(22, 33, 31, .05);
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 650; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0; }

:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 2px;
}

/* ---------------- Barra superior ---------------- */

.barra {
    background: var(--superficie);
    border-bottom: 1px solid var(--linea);
    position: sticky;
    top: 0;
    z-index: 40;
}

.barra-interior {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 60px;
}

.marca {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
    color: var(--tinta);
    white-space: nowrap;
}
.marca:hover { text-decoration: none; }
.marca span { color: var(--acento); }

.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }

.nav a {
    padding: 8px 14px;
    border-radius: var(--radio);
    color: var(--tinta-2);
    font-weight: 550;
    font-size: .95rem;
}
.nav a:hover { background: var(--linea-suave); text-decoration: none; }
.nav a.activo { background: var(--acento-suave); color: var(--acento-fuerte); }

.usuario {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .875rem;
    color: var(--tinta-3);
    white-space: nowrap;
}
.usuario b { color: var(--tinta); font-weight: 600; }

/* ---------------- Estructura ---------------- */

.contenedor {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px 80px;
}
.contenedor.angosto { max-width: 780px; }

.encabezado-pagina {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.encabezado-pagina .sub {
    color: var(--tinta-3);
    font-size: .95rem;
    margin-top: 4px;
}

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.tarjeta-cuerpo { padding: 22px; }
.tarjeta-titulo {
    padding: 14px 22px;
    border-bottom: 1px solid var(--linea);
    font-weight: 650;
    font-size: .95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.pila { display: flex; flex-direction: column; gap: 18px; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fila-fin { margin-left: auto; }

/* ---------------- Botones ---------------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--tinta);
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    white-space: nowrap;
}
.boton:hover { background: var(--linea-suave); text-decoration: none; }

.boton-principal {
    background: var(--acento);
    border-color: var(--acento);
    color: #fff;
}
.boton-principal:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }

.boton-grande { padding: 14px 26px; font-size: 1.05rem; }
.boton-chico { padding: 6px 12px; font-size: .85rem; }
.boton-peligro { color: var(--rojo); border-color: #e6c9c4; }
.boton-peligro:hover { background: var(--rojo-suave); }
.boton:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- Formularios ---------------- */

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-weight: 600; font-size: .875rem; color: var(--tinta-2); }
.campo .ayuda { font-size: .8rem; color: var(--tinta-3); }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], input[type=search], select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--tinta);
    font: inherit;
    font-size: 1rem;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--acento);
    outline: 2px solid var(--acento-suave);
    outline-offset: 0;
}
textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.rejilla { display: grid; gap: 16px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.error {
    color: var(--rojo);
    font-size: .85rem;
    font-weight: 550;
}

/* ---------------- Avisos ---------------- */

.aviso {
    padding: 12px 18px;
    border-radius: var(--radio);
    border: 1px solid;
    font-weight: 550;
    margin-bottom: 20px;
}
.aviso-exito { background: var(--acento-suave); border-color: #b9d9d1; color: var(--acento-fuerte); }
.aviso-error { background: var(--rojo-suave); border-color: #e6c9c4; color: var(--rojo); }
.aviso-alerta { background: var(--ambar-suave); border-color: #e5d3ac; color: var(--ambar); }

.alergias {
    background: var(--rojo-suave);
    border: 1px solid #e6c9c4;
    border-left: 4px solid var(--rojo);
    border-radius: var(--radio);
    padding: 12px 16px;
}
.alergias .rotulo {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--rojo);
}
.alergias p { color: var(--rojo); font-weight: 600; margin-top: 2px; }

/* ---------------- Estados de cita ---------------- */

.estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.estado-agendada { background: var(--linea-suave); color: var(--tinta-2); }
.estado-llego { background: var(--acento-suave); color: var(--acento-fuerte); }
.estado-atendiendo { background: var(--ambar-suave); color: var(--ambar); }
.estado-atendida { background: var(--linea-suave); color: var(--tinta-3); }
.estado-no_asistio { background: var(--rojo-suave); color: var(--rojo); }

/* ---------------- Agenda ---------------- */

.agenda-controles {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.cita {
    display: grid;
    grid-template-columns: 108px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--linea-suave);
    border-left: 4px solid transparent;
}
.cita:last-child { border-bottom: none; }
.cita-agendada { border-left-color: var(--linea); }
.cita-llego { border-left-color: var(--acento); background: #f7fbfa; }
.cita-atendiendo { border-left-color: var(--ambar); background: #fdfaf3; }
.cita-atendida { border-left-color: var(--linea); opacity: .62; }
.cita-no_asistio { border-left-color: var(--rojo); }

.cita .hora {
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
.cita .hora small { display: block; font-weight: 500; font-size: .78rem; color: var(--tinta-3); }
.cita .quien { font-weight: 600; font-size: 1.05rem; }
.cita .detalle { color: var(--tinta-3); font-size: .875rem; margin-top: 2px; }
.cita .acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

@media (max-width: 720px) {
    .cita { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------------- Calendario semanal ----------------
   Una fila por cada media hora. Los huecos vacíos son botones
   para agendar: aparecen al pasar el mouse por la celda. */

.calendario-marco {
    position: relative;
    min-width: 800px;

    /* El ancho de la columna de horas y de cada columna del calendario.
       En móvil se redefinen para que cada doctor ocupe la pantalla. */
    --ancho-hora: 64px;
    --ancho-columna: 180px;
}

.calendario {
    display: grid;
    gap: 1px;
    background: var(--linea);
    grid-template-columns:
        var(--ancho-hora)
        repeat(var(--columnas, 1), minmax(var(--ancho-columna), 1fr));
}
.calendario.semana { --ancho-columna: 150px; }

/* La rayita de la hora actual, atravesando el calendario. */
.linea-ahora {
    position: absolute;
    left: var(--ancho-hora);
    right: 0;
    height: 2px;
    background: var(--rojo);
    z-index: 8;
    pointer-events: none;
}
.linea-ahora[hidden] { display: none; }
.linea-ahora::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rojo);
}
.linea-ahora .etiqueta {
    position: absolute;
    right: 100%;
    top: -9px;
    margin-right: 8px;
    background: var(--rojo);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.calendario .esquina { background: var(--superficie); }
.calendario .cabecera {
    background: var(--superficie);
    padding: 10px 8px;
    text-align: center;
    font-weight: 650;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-3);
    border-bottom: 2px solid var(--linea);
}
.calendario .cabecera.hoy { color: var(--acento); background: var(--acento-suave); }

.calendario .hora {
    background: var(--superficie);
    padding: 2px 10px 0 0;
    text-align: right;
    font-size: .72rem;
    color: var(--tinta-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.calendario .celda {
    background: var(--superficie);
    min-height: 42px;
    padding: 3px;
}
.calendario .celda.en-punto { border-top: 1px solid var(--linea-suave); }

.calendario .agregar {
    display: block;
    text-align: center;
    border-radius: 3px;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tinta-3);
    opacity: 0;
}
.calendario .celda:hover .agregar,
.calendario .agregar:focus {
    opacity: 1;
    background: var(--acento-suave);
    color: var(--acento);
    text-decoration: none;
}

.cita-mini {
    display: block;
    width: 100%;
    text-align: left;
    padding: 4px 7px;
    margin-bottom: 2px;
    border: none;
    border-left: 3px solid var(--linea);
    border-radius: 3px;
    background: var(--linea-suave);
    color: var(--tinta);
    font: inherit;
    font-size: .74rem;
    line-height: 1.3;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cita-mini:hover { background: var(--acento-suave); }
.cita-mini b { font-variant-numeric: tabular-nums; margin-right: 4px; }
.cita-mini .marca-alergia { color: var(--rojo); margin-left: 4px; font-size: .6rem; vertical-align: middle; }
.cita-mini.e-llego { border-left-color: var(--acento); background: var(--acento-suave); }
.cita-mini.e-atendiendo { border-left-color: var(--ambar); background: var(--ambar-suave); font-weight: 600; }
.cita-mini.e-atendida { opacity: .55; }
.cita-mini.e-no_asistio { border-left-color: var(--rojo); background: var(--rojo-suave); }

/* ---------------- Leyenda de estados ---------------- */

.leyenda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
    font-size: .78rem;
    color: var(--tinta-3);
}
.leyenda .punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px 0 12px;
}
.leyenda .punto.e-agendada { background: var(--linea); }
.leyenda .punto.e-llego { background: var(--acento); }
.leyenda .punto.e-atendiendo { background: var(--ambar); }
.leyenda .punto.e-atendida { background: var(--tinta-3); }
.leyenda .punto.e-no_asistio { background: var(--rojo); }

/* ---------------- Panel de una cita ---------------- */

.panel-cita {
    position: fixed;
    z-index: 90;
    width: min(340px, calc(100vw - 24px));
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: 0 8px 28px rgba(22, 33, 31, .22);
    padding: 16px 18px;
}
.panel-cita[hidden] { display: none; }

.panel-cita .cabeza {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.panel-cita .nombre { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.panel-cita .detalle { font-size: .82rem; color: var(--tinta-3); margin-top: 2px; }
.panel-cita .cerrar {
    border: none;
    background: none;
    font: inherit;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--tinta-3);
    cursor: pointer;
    padding: 0 4px;
}
.panel-cita .cerrar:hover { color: var(--tinta); }

.panel-cita .alergias { margin-bottom: 12px; padding: 8px 12px; }
.panel-cita .alergias p { font-size: .88rem; }

.panel-cita .datos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--linea-suave);
    margin-bottom: 14px;
}
.panel-cita .datos .rotulo {
    display: block;
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tinta-3);
    font-weight: 700;
    margin-bottom: 2px;
}
.panel-cita .datos .valor { font-size: .9rem; }

.panel-cita .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-cita .acciones .boton { padding: 8px 14px; font-size: .88rem; }

/* ---------------- Aviso de tiempo de consulta ----------------
   Flota en la esquina y no bloquea: el doctor sigue escribiendo. */

.aviso-tiempo {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 80;
    width: min(340px, calc(100vw - 40px));
    padding: 16px 18px;
    border-radius: var(--radio);
    border: 1px solid;
    border-left-width: 5px;
    background: var(--superficie);
    box-shadow: 0 6px 24px rgba(22, 33, 31, .18);
    animation: asomarse .22s ease-out;
}
.aviso-tiempo[hidden] { display: none; }

.aviso-tiempo.aviso { border-color: #e5d3ac; border-left-color: var(--ambar); }
.aviso-tiempo.alerta { border-color: #e6c9c4; border-left-color: var(--rojo); }

.aviso-tiempo .cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.aviso-tiempo .titulo {
    font-weight: 700;
    font-size: .95rem;
}
.aviso-tiempo.aviso .titulo { color: var(--ambar); }
.aviso-tiempo.alerta .titulo { color: var(--rojo); }

.aviso-tiempo .cerrar {
    border: none;
    background: none;
    font: inherit;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--tinta-3);
    cursor: pointer;
    padding: 0 4px;
}
.aviso-tiempo .cerrar:hover { color: var(--tinta); }

.aviso-tiempo p { font-size: .92rem; color: var(--tinta); }
.aviso-tiempo .siguiente {
    margin-top: 6px;
    font-size: .84rem;
    color: var(--tinta-3);
}

@keyframes asomarse {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aviso-tiempo { animation: none; }
}

/* ---------------- Filtros en pastilla ---------------- */

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.chip-filtro {
    padding: 7px 14px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--tinta-2);
    font-size: .875rem;
    font-weight: 550;
    white-space: nowrap;
}
.chip-filtro:hover { background: var(--linea-suave); text-decoration: none; }
.chip-filtro.activo {
    background: var(--acento);
    border-color: var(--acento);
    color: #fff;
}

.envoltura-scroll { overflow-x: auto; }

/* ---------------- Tablas ---------------- */

table.datos { width: 100%; border-collapse: collapse; }
table.datos th, table.datos td {
    text-align: left;
    padding: 12px 20px;
    border-bottom: 1px solid var(--linea-suave);
    vertical-align: middle;
}
table.datos th {
    font-size: .72rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tinta-3);
    font-weight: 700;
    background: #fafcfb;
    border-bottom: 1px solid var(--linea);
}
table.datos tbody tr:hover { background: #fafcfb; }
table.datos tr:last-child td { border-bottom: none; }
.num { font-variant-numeric: tabular-nums; }

.vacio {
    padding: 48px 24px;
    text-align: center;
    color: var(--tinta-3);
}
.vacio strong { display: block; color: var(--tinta-2); font-size: 1.05rem; margin-bottom: 6px; }

/* ---------------- Autocompletado ---------------- */

.autocompletar { position: relative; }
.autocompletar-lista {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    z-index: 60;
    max-height: 260px;
    overflow-y: auto;
}
.autocompletar-lista:empty { display: none; }
.autocompletar-lista div {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--linea-suave);
}
.autocompletar-lista div:last-child { border-bottom: none; }
.autocompletar-lista div:hover,
.autocompletar-lista div.marcado { background: var(--acento-suave); }
.autocompletar-lista small { display: block; color: var(--tinta-3); font-size: .8rem; }

/* ---------------- Consulta ---------------- */

.consulta { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
@media (max-width: 1050px) { .consulta { grid-template-columns: 1fr; } }

.historial { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; }
.historial .visita { padding: 14px 18px; border-bottom: 1px solid var(--linea-suave); }
.historial .visita:last-child { border-bottom: none; }
.historial .visita .cuando { font-size: .78rem; color: var(--tinta-3); font-weight: 600; }
.historial .visita .dx { font-weight: 600; margin-top: 3px; }

/* La receta es texto libre: se muestra tal cual se escribió. */
.texto-receta {
    white-space: pre-wrap;
    margin: 0;
    line-height: 1.6;
    color: var(--tinta);
}

@media (max-width: 900px) {
        }

.barra-guardar {
    position: sticky;
    bottom: 0;
    background: var(--superficie);
    border-top: 1px solid var(--linea);
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: 0 -4px 14px rgba(22, 33, 31, .06);
}

/* ---------------- Acceso ---------------- */

.acceso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.acceso .caja { width: 100%; max-width: 400px; }
.acceso .marca-grande {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;
    letter-spacing: -.02em;
}
.acceso .marca-grande span { color: var(--acento); }
.acceso .lema { text-align: center; color: var(--tinta-3); margin-bottom: 26px; font-size: .95rem; }

/* ---------------- Detalles ---------------- */

.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: 20px; }
.pestanas button {
    padding: 10px 18px;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--tinta-3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.pestanas button.activa { color: var(--acento); border-bottom-color: var(--acento); }

.paginacion { display: flex; gap: 6px; margin-top: 20px; align-items: center; flex-wrap: wrap; }
.paginacion a, .paginacion span {
    padding: 7px 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
    font-size: .9rem;
    color: var(--tinta-2);
}
.paginacion .actual { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.paginacion .apagado { opacity: .45; }

.dato { display: flex; flex-direction: column; gap: 2px; }
.dato .rotulo {
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tinta-3);
    font-weight: 700;
}
.dato .valor { font-size: .98rem; }

.tenue { color: var(--tinta-3); }
.chico { font-size: .875rem; }
.centrado { text-align: center; }

/* ==================================================================
   Móvil
   El consultorio también se abre desde el teléfono: recepción marca
   llegadas de pie en el mostrador y el doctor revisa su día en el
   pasillo. Dos doctores lado a lado no caben en una pantalla de
   375 px, así que cada columna ocupa el ancho útil y se pasa de un
   doctor a otro deslizando, con la columna de horas fija a la izquierda.
   ================================================================== */

@media (max-width: 760px) {

    /* ---- Barra superior: el menú se vuelve una tira deslizable ---- */

    .barra-interior {
        min-height: 0;
        padding: 8px 14px;
        gap: 10px;
        flex-wrap: wrap;
    }
    .marca { font-size: 1rem; }

    .nav {
        order: 3;
        width: 100%;
        flex: none;
        flex-wrap: nowrap;
        gap: 2px;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }
    .nav a { padding: 7px 11px; font-size: .88rem; white-space: nowrap; }

    .usuario { margin-left: auto; gap: 8px; font-size: .78rem; }
    .usuario span {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---- Estructura ---- */

    .contenedor { padding: 18px 14px 60px; }
    h1 { font-size: 1.3rem; }

    .encabezado-pagina {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }
    /* Solo el botón principal ocupa el ancho; los que van en fila
       (← Hoy →, Agendar / Editar) se reparten el renglón. */
    .encabezado-pagina > .boton { width: 100%; }
    .encabezado-pagina .fila { width: 100%; gap: 8px; }
    .encabezado-pagina .fila .boton { flex: 1 1 auto; }

    .tarjeta-cuerpo { padding: 16px; }
    .tarjeta-titulo { padding: 12px 16px; flex-wrap: wrap; }

    /* ---- Controles de la agenda ---- */

    .agenda-controles { gap: 8px; }
    .agenda-controles form { width: 100%; gap: 8px !important; }
    /* Cada uno en su renglón: "Calendario de la semana" no cabe a medias. */
    .agenda-controles select { flex: 1 1 100%; min-width: 0; }

    /* La leyenda de colores es una ayuda, no una herramienta: fuera. */
    .leyenda { display: none; }

    /* ---- Los calendarios ---- */

    .calendario-marco {
        min-width: 0;
        --ancho-hora: 46px;
        --ancho-util: calc(100vw - var(--ancho-hora) - 32px);
    }

    /* Con dos doctores caben los dos en pantalla, que es lo que se espera
       al elegir "Todos". De tres en adelante entran dos y el resto se
       alcanza deslizando, avisado arriba del calendario. */
    .calendario {
        --ancho-columna: calc(var(--ancho-util) / min(var(--columnas, 1), 2));
    }
    .calendario.semana {
        /* En la semana también caben dos días de un vistazo. */
        --ancho-columna: calc(var(--ancho-util) / 2);
    }

    /* Las horas se quedan pegadas mientras se desliza entre doctores. */
    .calendario .hora,
    .calendario .esquina {
        position: sticky;
        left: 0;
        z-index: 4;
        box-shadow: 1px 0 0 var(--linea);
    }
    /* El calendario scrollea dentro de sí mismo: así el nombre del doctor
       se queda fijo arriba mientras se desliza entre columnas y filas. */
    .calendario-caja {
        max-height: 68vh;
        overflow: auto;

        /* Al deslizar, cada doctor cae completo en pantalla en vez de
           quedar partido a la mitad. El padding deja libre la columna
           de horas, que va fija. */
        scroll-snap-type: x proximity;
        scroll-padding-left: var(--ancho-hora, 46px);
    }
    .calendario .celda { scroll-snap-align: start; }

    .calendario .cabecera {
        font-size: .7rem;
        line-height: 1.25;
        padding: 8px 5px;
        position: sticky;
        top: 0;
        z-index: 6;
    }
    .calendario .esquina { z-index: 7; top: 0; }

    .calendario .celda { min-height: 46px; }
    .cita-mini { font-size: .8rem; padding: 6px 8px; }

    /* Sin mouse no hay hover: el "+" de agendar tiene que verse siempre. */
    .calendario .agregar { opacity: .3; }

    .envoltura-scroll { -webkit-overflow-scrolling: touch; }

    .linea-ahora .etiqueta {
        right: auto;
        left: 4px;
        top: -22px;
        margin-right: 0;
    }

    /* ---- Panel de la cita: hoja pegada al borde inferior ---- */

    .panel-cita {
        left: 10px !important;
        right: 10px;
        top: auto !important;
        bottom: 10px;
        width: auto;
        max-height: 80vh;
        overflow-y: auto;
    }
    .panel-cita .acciones .boton { flex: 1 1 auto; justify-content: center; }

    /* ---- Aviso de tiempo de consulta ---- */

    /* Se sube por encima de la barra de guardar, que va pegada abajo,
       para no taparle al doctor los botones de guardar la consulta. */
    .aviso-tiempo {
        left: 12px;
        right: 12px;
        bottom: 90px;
        width: auto;
    }

    /* ---- Listados: la tabla se vuelve una tarjeta por renglón ----
       Siete columnas no caben en un teléfono; apiladas sí, con el
       rótulo de cada dato al lado para no perder el encabezado. */

    table.datos thead { display: none; }
    table.datos, table.datos tbody, table.datos tr, table.datos td { display: block; }

    table.datos tr {
        position: relative;
        padding: 11px 14px;
        border-bottom: 1px solid var(--linea);
    }
    table.datos tbody tr:last-child { border-bottom: none; }

    table.datos td {
        border: none;
        padding: 1px 0;
        display: flex;
        gap: 8px;
        align-items: baseline;
        font-size: .84rem;
        line-height: 1.4;
    }
    table.datos td::before {
        content: attr(data-rotulo);
        flex: 0 0 84px;
        font-size: .6rem;
        letter-spacing: .05em;
        line-height: 1.7;
        white-space: nowrap;
        text-transform: uppercase;
        color: var(--tinta-3);
        font-weight: 700;
    }

    /* El primer dato es el título de la tarjeta: sin rótulo, y deja
       espacio a la derecha para el botón, que va sobrepuesto. */
    table.datos td.principal {
        display: block;
        font-size: .98rem;
        font-weight: 600;
        margin-bottom: 5px;
        padding-right: 60px;
    }
    table.datos td.principal::before { content: none; }

    /* El botón se ancla arriba a la derecha en vez de gastar un renglón. */
    table.datos td.acciones {
        position: absolute;
        top: 10px;
        right: 14px;
        padding: 0;
        margin: 0;
    }
    table.datos td.acciones::before { content: none; }
    table.datos td.acciones .boton { padding: 5px 10px; font-size: .78rem; }

    /* "hace 6 meses" en la misma línea que la fecha, no debajo. */
    table.datos td .tenue small,
    table.datos td small { display: inline !important; margin-left: 6px; }

    /* Los filtros en una sola tira que se desliza, en vez de tres renglones. */
    .filtros {
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .chip-filtro { padding: 6px 12px; font-size: .82rem; flex: 0 0 auto; }

    /* Buscador: campo y botón en el mismo renglón. */
    form.fila input[type=search] { flex: 1 1 auto; width: auto; min-width: 0; max-width: none !important; }

    /* ---- Consulta ---- */

    .historial { position: static; }
    .barra-guardar { padding: 14px 16px; }
    .barra-guardar .fila { width: 100%; }
    .barra-guardar .boton { flex: 1 1 auto; justify-content: center; }
}

/* En pantallas sin mouse el "+" también debe verse, aunque sean anchas. */
@media (hover: none) {
    .calendario .agregar { opacity: .3; }
}

/* ---------------- Accesos de demostración ----------------
   Solo se dibujan con APP_DEMO encendido. Van deliberadamente
   apagados de color: son un atajo para enseñar el sistema, no
   la forma normal de entrar. */

.acceso-demo {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--linea);
}

.acceso-demo .rotulo {
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-3);
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
}

.acceso-demo .lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.usuario-demo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 11px 16px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.usuario-demo:hover {
    border-color: var(--acento);
    background: var(--acento-suave);
}
.usuario-demo .nombre { font-weight: 600; font-size: .95rem; color: var(--tinta); }
.usuario-demo .rol {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-3);
    font-weight: 700;
    white-space: nowrap;
}

.acceso-demo .nota {
    margin-top: 14px;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--tinta-3);
    text-align: center;
}

/* ---------------- Seguimiento ---------------- */

.nav .contador {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    margin-left: 5px;
    border-radius: 999px;
    background: var(--rojo);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
}

.lista-seguimiento { display: flex; flex-direction: column; gap: 12px; }

.tarjeta.seguimiento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-left: 4px solid var(--linea);
}
.tarjeta.seguimiento.atrasado { border-left-color: var(--rojo); }

.tarjeta.seguimiento .datos {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(120px, 1fr));
    gap: 16px;
    align-items: baseline;
    flex: 1;
}
.tarjeta.seguimiento .quien a { font-weight: 650; font-size: 1.02rem; display: block; }
.tarjeta.seguimiento .quien span { display: block; margin-top: 2px; }

.tarjeta.seguimiento .rotulo {
    display: block;
    font-size: .66rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tinta-3);
    font-weight: 700;
    margin-bottom: 2px;
}
.tarjeta.seguimiento .valor { font-size: .92rem; }
.tarjeta.seguimiento .valor small { display: block; font-size: .78rem; }
.tarjeta.seguimiento .valor small.vencido { color: var(--rojo); font-weight: 600; }

.tarjeta.seguimiento .acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* El verde de WhatsApp: aquí sí es la marca, y se reconoce de inmediato. */
.boton-whatsapp {
    background: #1da851;
    border-color: #1da851;
    color: #fff;
}
.boton-whatsapp:hover { background: #17913f; border-color: #17913f; }

@media (max-width: 760px) {
    .tarjeta.seguimiento { padding: 14px 16px; gap: 12px; }
    .tarjeta.seguimiento .datos { grid-template-columns: 1fr 1fr; gap: 10px; }
    .tarjeta.seguimiento .quien { grid-column: 1 / -1; }
    .tarjeta.seguimiento .acciones { width: 100%; }
    .tarjeta.seguimiento .acciones form,
    .tarjeta.seguimiento .acciones .boton { flex: 1 1 auto; }
    .tarjeta.seguimiento .acciones form .boton { width: 100%; }
}

/* Cita a la que se le pasó la hora y nadie la cerró. No se cierra sola:
   dar por atendida una consulta que nadie escribió sería inventarla. */
.estado-sin_cerrar { background: var(--ambar-suave); color: var(--ambar); }

.cita .cerrada {
    font-size: .85rem;
    color: var(--tinta-2);
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dotted var(--linea);
}
.cita .cerrada strong { color: var(--acento-fuerte); }

/* ---------------- Nota interna del doctor ----------------
   Su libreta: no sale en la receta y recepción no la ve. Se
   distingue en ámbar para que nunca se confunda con lo que
   sí forma parte del expediente que se entrega. */

.nota-previa {
    padding: 10px 18px;
    border-top: 1px solid var(--linea-suave);
    font-size: .85rem;
}
.nota-previa .cuando {
    font-size: .7rem;
    font-weight: 700;
    color: var(--tinta-3);
    margin-bottom: 2px;
}
.nota-previa p { color: var(--tinta-2); white-space: pre-line; }

.dato.nota-privada {
    background: var(--ambar-suave);
    border-left: 3px solid var(--ambar);
    border-radius: var(--radio);
    padding: 8px 12px;
}
.dato.nota-privada .rotulo { color: var(--ambar); }
.dato.nota-privada .valor { white-space: pre-line; }

/* ---------------- Finanzas ---------------- */

.tarjetas-cifra {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.tarjeta.cifra { padding: 18px 20px; }
.tarjeta.cifra .rotulo {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-3);
    font-weight: 700;
}
.tarjeta.cifra .monto {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 6px 0 2px;
    font-variant-numeric: tabular-nums;
    color: var(--acento-fuerte);
}
.tarjeta.cifra .detalle { font-size: .84rem; color: var(--tinta-3); }

/* Barras de los últimos días. Sin librerías: son divs con altura. */
.grafica {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 170px;
}
.barra-dia {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    min-width: 0;
}
.barra-dia .valor {
    font-size: .68rem;
    font-weight: 700;
    color: var(--tinta-3);
    margin-bottom: 3px;
    font-variant-numeric: tabular-nums;
}
.barra-dia .barra {
    width: 100%;
    background: var(--acento-suave);
    border-top: 3px solid var(--acento);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}
.barra-dia .dia {
    font-size: .68rem;
    color: var(--tinta-3);
    margin-top: 5px;
    font-variant-numeric: tabular-nums;
}
.barra-dia.hoy .barra { background: var(--acento); border-top-color: var(--acento-fuerte); }
.barra-dia.hoy .dia { color: var(--acento); font-weight: 700; }

/* ---------------- Nombre editable de la receta ---------------- */

.nombre-receta { display: flex; gap: 6px; align-items: center; }
.nombre-receta input {
    border: 1px solid transparent;
    background: transparent;
    padding: 5px 8px;
    font-weight: 600;
    font-size: .92rem;
    min-width: 0;
}
.nombre-receta input:hover { border-color: var(--linea); }
.nombre-receta input:focus {
    border-color: var(--acento);
    background: var(--superficie);
}
.nombre-receta button {
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}
.nombre-receta:focus-within button { opacity: 1; pointer-events: auto; }

@media (max-width: 760px) {
    .grafica { height: 130px; gap: 3px; }
    .barra-dia .valor { font-size: .6rem; }
    .barra-dia .dia { font-size: .6rem; }
    .tarjeta.cifra .monto { font-size: 1.6rem; }
    .nombre-receta button { opacity: 1; pointer-events: auto; }
}

/* ---------- La tarifa estándar, arriba de Finanzas ---------- */
.tarjeta.tarifa {
    padding: 16px 18px;
    margin-bottom: 18px;
    border-left: 3px solid var(--acento);
}

.tarjeta.tarifa form {
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.tarjeta.tarifa label {
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}

.tarjeta.tarifa .simbolo {
    font-weight: 700;
    color: var(--tinta-2);
}

.tarjeta.tarifa input {
    width: 130px;
    font-size: 20px;
    font-weight: 700;
    text-align: right;
}

.tarjeta.tarifa .tenue {
    flex: 1 1 220px;
}

@media (max-width: 640px) {
    .tarjeta.tarifa form { align-items: stretch }
    .tarjeta.tarifa input { width: 100% }
    .tarjeta.tarifa .tenue { flex-basis: 100% }
}

/* ---------- Los horarios del doctor al agendar ---------- */
.horarios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 6px;
    margin-top: 6px;
}

.hueco {
    font: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    padding: 9px 4px;
    border: 1px solid var(--linea);
    border-radius: 6px;
    background: #fff;
    color: var(--tinta);
    cursor: pointer;
    text-align: center;
}

.hueco-libre:hover {
    border-color: var(--acento);
    background: var(--acento-suave);
}

.hueco-ocupado,
.hueco-pasado {
    cursor: not-allowed;
    background: var(--linea-suave);
    color: var(--tinta-3);
}

/* Lo ocupado se tacha: se lee de un vistazo, sin tener que interpretar un color. */
.hueco-ocupado {
    text-decoration: line-through;
    border-style: dashed;
}

.hueco-pasado { opacity: .55 }

.hueco.elegido {
    background: var(--acento);
    border-color: var(--acento);
    color: #fff;
    font-weight: 600;
}

@media (max-width: 480px) {
    .horarios { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)) }
    .hueco { padding: 11px 2px }
}

/* ---------- "Hay más a la derecha": lo que no se ve, se avisa ---------- */
.aviso-deslizar {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    color: var(--tinta-3);
}

.aviso-deslizar[data-visible] { display: flex }

.aviso-deslizar .flecha {
    font-size: 15px;
    color: var(--acento);
    animation: empujar 1.4s ease-in-out infinite;
}

@keyframes empujar {
    0%, 100% { transform: translateX(0) }
    50% { transform: translateX(4px) }
}

@media (prefers-reduced-motion: reduce) {
    .aviso-deslizar .flecha { animation: none }
}

/* ---------- Arrastrar una cita para cambiarla de hora ---------- */
.cita-mini[draggable="true"] { cursor: grab }
.cita-mini.arrastrando { opacity: .4; cursor: grabbing }

.celda.destino {
    background: var(--acento-suave);
    box-shadow: inset 0 0 0 2px var(--acento);
}

.celda.destino-malo {
    background: #fdeceb;
    box-shadow: inset 0 0 0 2px var(--rojo);
    cursor: not-allowed;
}

/* El mismo cambio, para quien no puede arrastrar. */
.mover-cita {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.mover-cita input { flex: 1 1 110px; min-width: 0 }