/* ------------------------------------------------------------------------
   plan/estilo.css — el panel de la profesional.

   Misma paleta del Valle del Elqui que usa todo el producto, para que Nicole,
   el panel de José Luis y esto se sientan la misma cosa. Cada color significa
   siempre lo mismo:
       azul   = relación, conversación
       verde  = confirmado, anda bien
       dorado = falta algo, atención
       rojo   = anulado, se rompió
   ------------------------------------------------------------------------ */
:root {
  --tinta:  #0E1626;
  --noche:  #16233D;
  --cielo:  #2F6FE0;
  --vina:   #1F9D57;
  --pisco:  #E0913A;
  --tierra: #C4472C;
  --papel:  #FAF9F7;
  --nube:   #FFFFFF;
  --borde:  #E7E4DE;
  --texto:  #1B2333;
  --suave:  #5D6675;
  --tenue:  #9AA1AE;
  /* Alto de la jornada dibujada. Es lo que sobra de pantalla después de la
     barra, el titular y la leyenda; con piso y techo para que no se aplaste
     en un notebook chico ni se estire de más en un monitor grande. */
  --alto-dia: clamp(300px, calc(100vh - 350px), 620px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--texto);
       font-family: "Archivo", -apple-system, "Segoe UI", system-ui, sans-serif;
       font-size: 15px; line-height: 1.55; font-variant-numeric: tabular-nums; }
a { color: var(--cielo); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--cielo); outline-offset: 2px; border-radius: 5px; }
h1, h2, h3 { margin: 0; }
p { margin: 10px 0 0; }

.hoja { max-width: 1180px; margin: 0 auto; padding: 22px 20px 70px; }
.ojo { font-size: 10.5px; font-weight: 700; letter-spacing: .15em;
       text-transform: uppercase; color: var(--tenue); }
.bajada { font-size: 15px; color: var(--suave); max-width: 58ch; }
.dice { font-size: 13.5px; color: var(--suave); max-width: 72ch; }
.pista { font-size: 12.5px; color: var(--tenue); margin-top: 5px; }
.nada { color: var(--tenue); font-size: 13.5px; }
.tenue { color: var(--tenue); }
.mono { font-family: "JetBrains Mono", monospace; font-size: 12.5px; }

/* ---- la puerta ---- */
body.puerta { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; padding: 20px;
              background: linear-gradient(150deg, var(--tinta) 0%, #1B3A63 100%); }
.tarjeta-entrada { background: var(--nube); border-radius: 16px; padding: 34px 32px;
                   width: 100%; max-width: 390px;
                   box-shadow: 0 24px 60px rgba(6,12,24,.35); }
.tarjeta-entrada .marca { font-size: 11px; font-weight: 700; letter-spacing: .2em;
                          text-transform: uppercase; color: var(--tenue); }
.tarjeta-entrada h1 { font-size: 29px; font-weight: 800; font-stretch: 112%;
                      letter-spacing: -.03em; color: var(--noche); margin: 5px 0 0; }
.tarjeta-entrada .bajada { font-size: 14px; margin: 6px 0 18px; }
.pie-entrada { font-size: 12.5px; color: var(--tenue); margin-top: 18px;
               border-top: 1px solid var(--borde); padding-top: 14px; }

/* ---- barra de arriba ---- */
.barra { background: var(--tinta); color: #fff; padding: 12px 20px;
         display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.barra-marca { font-weight: 700; font-size: 15.5px; font-stretch: 108%; }
.barra-marca span { font-weight: 400; opacity: .6; font-size: 13.5px; }
.barra-nav { display: flex; gap: 4px; margin-left: auto; }
.barra-nav a { color: rgba(255,255,255,.72); padding: 7px 13px; border-radius: 8px;
               font-size: 14px; font-weight: 500; }
.barra-nav a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.barra-nav a.on { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }
.barra-yo { font-size: 13px; color: rgba(255,255,255,.6); display: flex;
            align-items: center; gap: 12px; }
.barra-yo a { color: rgba(255,255,255,.75); }

/* ---- portadas y bloques ---- */
.portada { margin-bottom: 20px; }
.portada h1, .cab-semana h1 { font-size: clamp(25px, 3.5vw, 36px); font-weight: 800;
                              font-stretch: 110%; letter-spacing: -.032em;
                              color: var(--noche); margin: 6px 0 0; line-height: 1.1; }
.cab-semana { display: flex; align-items: flex-start; justify-content: space-between;
              gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.cab-semana .bajada { margin-top: 6px; font-size: 14.5px; }
.navega { display: flex; gap: 5px; flex-shrink: 0; }
/* Las flechas son cuadradas y del mismo alto que "Hoy": tres botones de
   tamaños distintos en una fila se ven descuidados. */
.navega .bt { min-width: 40px; text-align: center; }
.bloque { background: var(--nube); border: 1px solid var(--borde); border-radius: 13px;
          padding: 20px 22px; margin-bottom: 16px; }
.bloque h2 { font-size: 16.5px; font-weight: 700; color: var(--noche); }
.bloque.destacado { border-color: #F0DDBE; background: #FDF8EF; }
.cuenta { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--tenue);
          background: #F1EFEA; border-radius: 6px; padding: 2px 7px; margin-left: 6px; }

/* ========================================================================
   LA JORNADA DE LA SEMANA
   ------------------------------------------------------------------------
   Una consulta no trabaja una parrilla pareja: el lunes son dos horas y el
   martes siete. Dibujarlos igual miente sobre la semana.

   Por eso acá el vacío NO es neutro. Hay tres cosas distintas y se ven
   distintas:
       cerrado  — fuera de su horario. Se hunde, es papel y nada más.
       libre    — dentro de su horario y sin tomar. Rayado tenue: es la
                  hora que todavía se puede vender, no un hueco cualquiera.
       tomado   — el bloque de color, del alto que ocupa en el reloj.

   Así la semana se lee como silueta antes de leer una palabra: se ve de
   una mirada qué día está cargado y dónde quedan huecos.

   El riesgo asumido: no hay líneas horizontales cruzando la semana. Una
   parrilla de líneas convierte esto en un waffle de 60 celdas y obliga a
   rastrear. Las horas viven en un solo riel a la izquierda, y cada día
   flota contra él. Se pierde comparar "las 14:00" entre siete días; se
   gana ver la forma del día propio, que es lo que ella mira entre un
   paciente y el siguiente.
   ======================================================================== */
/* La grilla cabe entera en la pantalla: nada de bajar con scroll para ver el
   final de la jornada. El alto se reparte entre las horas que trabaja, así que
   una jornada de dos horas y una de nueve ocupan lo mismo en pantalla — cada
   una a su escala. Las posiciones vienen en % desde PHP, por eso funciona. */
.grilla-envoltorio { background: var(--nube); border: 1px solid var(--borde);
                     border-radius: 14px; padding: 14px; margin-top: 12px; }
.grilla { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr));
          column-gap: 3px; }
.esquina { }
.selector-dia { display: none; }

.cab-dia { text-align: center; padding: 0 0 10px; }
.cab-dia b { display: block; font-size: 10.5px; text-transform: uppercase;
             letter-spacing: .1em; color: var(--tenue); font-weight: 700; }
.cab-dia span { display: block; font-family: "JetBrains Mono", monospace;
                font-size: 21px; font-weight: 700; color: var(--noche);
                line-height: 1.15; letter-spacing: -.03em; }
.cab-dia i { display: block; font-size: 9.5px; font-style: normal; color: var(--pisco);
             line-height: 1.25; margin-top: 2px; }
.cab-dia i.apagado { color: var(--tenue); }
.cab-dia.sin-atencion b, .cab-dia.sin-atencion span { color: var(--tenue); opacity: .6; }
.cab-dia.feriado span { color: var(--pisco); }

/* Hoy se marca con un punto sobre el número, no pintando todo de verde:
   es un dato, no una alarma. */
.cab-dia.hoy span { color: var(--vina); position: relative; }
.cab-dia.hoy span:after { content: ""; position: absolute; left: 50%; bottom: -3px;
                          width: 5px; height: 5px; margin-left: -2.5px;
                          border-radius: 50%; background: var(--vina); }

/* Cuánto del día está tomado. Una barra de 3 px dice más rápido que un
   porcentaje escrito, y no compite con el número del día. */
.carga { height: 3px; background: #EDEBE5; border-radius: 2px; margin: 6px 12px 0; }
.carga em { display: block; height: 100%; border-radius: 2px; background: var(--vina); }

/* El riel de horas: una sola columna, sin líneas cruzando la semana. Se
   reparte el mismo alto que las columnas, así los rótulos calzan solos. */
.reglilla { position: relative; margin-top: 4px; height: var(--alto-dia);
            display: flex; flex-direction: column; justify-content: space-between; }
.hora-rotulo { font-family: "JetBrains Mono", monospace; font-size: 11.5px;
               font-weight: 500; color: var(--tenue); text-align: right;
               padding-right: 11px; line-height: 1; }

/* El alto de la jornada: lo que quede de pantalla, con piso y techo para que
   no se aplaste en un notebook chico ni se estire en un monitor grande. */
.columna { position: relative; margin-top: 4px; border-radius: 8px;
           height: var(--alto-dia); }
.columna.cerrado { background: repeating-linear-gradient(135deg,
                   transparent 0 8px, #FBFAF8 8px 16px); }

/* El rato en que atiende: sube del papel, con borde propio. */
.abierto { position: absolute; left: 0; right: 0; background: var(--nube);
           border: 1px solid #E4E1DA; border-radius: 8px;
           box-shadow: 0 1px 2px rgba(22,35,61,.04); }

/* Hora libre dentro del horario: rayado tenue. Es plata sin vender, no un
   hueco cualquiera — por eso se ve, y se ve SIEMPRE, no solo al arrastrar. */
.cupo { position: absolute; left: 3px; right: 3px; border-radius: 6px; cursor: pointer;
        background: repeating-linear-gradient(45deg,
          rgba(31,157,87,.16) 0 6px, rgba(31,157,87,.05) 6px 12px);
        display: flex; align-items: center; justify-content: center;
        transition: background .12s ease; }
.cupo:after { content: ""; position: absolute; inset: 0; border-radius: 6px;
              border: 1px dashed transparent; transition: border-color .12s ease; }
/* El "+" aparece al pasar por encima: un signo en cada hueco de la semana
   sería un sarpullido de cruces. */
.cupo i { font-style: normal; font-size: 17px; font-weight: 400; color: var(--vina);
          opacity: 0; transition: opacity .12s ease; line-height: 1; }
.cupo:hover { background: rgba(31,157,87,.1); }
.cupo:hover i, .cupo:focus-visible i { opacity: .85; }
.cupo.pasado { cursor: default; opacity: .45; }
body.arrastrando .cupo:after { border-color: #BFD3EE; }
body.arrastrando .cupo i { opacity: 0; }
.cupo.encima { background: #DCEBFB; }
.cupo.encima:after { border: 2px solid var(--cielo); }

.cita { position: absolute; left: 3px; right: 3px; border-radius: 7px;
        padding: 4px 8px; overflow: hidden; color: #fff; cursor: pointer;
        display: flex; flex-direction: column; justify-content: center;
        box-shadow: 0 2px 5px rgba(22,35,61,.18);
        transition: transform .12s ease, box-shadow .12s ease; }
.cita:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(22,35,61,.24); }
.cita[draggable="true"] { cursor: grab; }
.cita[draggable="true"]:active { cursor: grabbing; }
.cita.moviendo { opacity: .4; }
.cita.esperando { opacity: .6; }
/* La hora en monoespaciada y legible de lejos: es el dato que busca primero
   quien mira esto de reojo. 9 px no se leen con la vista cansada. */
.cita .h { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500;
           opacity: .9; line-height: 1.15; }
.cita .q { font-size: 12px; font-weight: 600; line-height: 1.25; white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; }
.e-confirmada { background: var(--vina); }
.e-agendada   { background: var(--cielo); }
.e-atendida   { background: #2F7F55; }
.e-no_asistio { background: var(--tierra); }
.e-bloqueo    { background: #8A93A3; }
/* Las que ya pasaron pierden fuerza: lo que viene es lo que importa. */
.cita.e-atendida, .cita.e-no_asistio { opacity: .72; }

/* Dónde va el día ahora mismo. Lo primero que busca alguien que abre esto
   con el siguiente paciente esperando. */
.ahora { position: absolute; left: -3px; right: -3px; height: 0; z-index: 4;
         border-top: 2px solid var(--tierra); pointer-events: none; }
.ahora span { position: absolute; top: -9px; left: -46px;
              font-family: "JetBrains Mono", monospace; font-size: 10.5px;
              font-weight: 700; color: #fff; background: var(--tierra);
              padding: 1px 5px; border-radius: 4px; }

.leyenda { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px;
           font-size: 12px; color: var(--suave); }
.leyenda span { display: flex; align-items: center; gap: 7px; }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.leyenda i.libre { background: repeating-linear-gradient(45deg,
                     rgba(31,157,87,.14) 0 4px, #fff 4px 8px);
                   border: 1px solid #E4E1DA; }

/* ---- conversaciones ---- */
.hilo { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px;
        border: 1px solid var(--borde); border-radius: 10px; background: var(--nube);
        margin-bottom: 8px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.hilo:hover { border-color: var(--tenue); background: #FCFBF9; }
.hilo .ini { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
             background: var(--cielo); color: #fff; display: flex; align-items: center;
             justify-content: center; font-size: 13px; font-weight: 700; }
.hilo .cu { flex: 1; min-width: 0; }
.hilo .l1 { display: flex; align-items: baseline; gap: 8px; }
.hilo .qn { font-weight: 600; font-size: 14px; color: var(--noche); }
.hilo .cd { margin-left: auto; font-family: "JetBrains Mono", monospace;
            font-size: 10.5px; color: var(--tenue); white-space: nowrap; }
.hilo .ul { display: block; font-size: 13px; color: var(--suave); margin-top: 2px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hilo .ul b { color: var(--tenue); font-weight: 600; }

/* ---- formularios ---- */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--suave);
        margin: 14px 0 5px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400;
              color: var(--texto); font-size: 14px; }
label.check input { width: auto; margin: 0; }
input, select, textarea { width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
                          border: 1px solid var(--borde); border-radius: 9px;
                          background: var(--nube); color: var(--texto); }
input:disabled { background: #F4F2EE; color: var(--tenue); }
textarea { resize: vertical; line-height: 1.5; }
.dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 16px; }

.ayuda { font-size: 13px; color: var(--suave); background: #F7F6F2;
         border: 1px solid var(--borde); border-radius: 9px; padding: 12px 14px;
         margin-bottom: 8px; line-height: 1.5; }
.ayuda b { color: var(--texto); }
.ayuda .ejemplo { font-family: "JetBrains Mono", monospace; font-size: 12px;
                  white-space: pre-line; background: var(--nube); color: var(--texto);
                  border: 1px solid var(--borde); border-radius: 7px;
                  padding: 9px 11px; margin: 9px 0; }
.lectura { margin-top: 9px; font-size: 13.5px; }
.lectura .titulo { font-size: 11px; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .08em; color: var(--tenue); margin-bottom: 6px; }
.lectura .dia { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid #F3F1EC; }
.lectura .dia b { min-width: 92px; font-weight: 600; color: var(--texto); }
.lectura .dia span { font-family: "JetBrains Mono", monospace; color: var(--vina); }
.lectura .ok { border-left: 3px solid var(--vina); padding-left: 12px; }
.lectura .mal { border-left: 3px solid var(--tierra); padding-left: 12px; color: var(--tierra); }
.lectura .mal .que { font-family: "JetBrains Mono", monospace; font-size: 12px;
                     color: var(--texto); }

/* ---- botones, chapas, avisos ---- */
.bt { display: inline-block; border: 0; border-radius: 8px; padding: 8px 14px;
      font: inherit; font-size: 13.5px; font-weight: 600; color: #fff;
      background: var(--noche); cursor: pointer; text-decoration: none; }
.bt.verde { background: var(--vina); }
.bt.rojo  { background: var(--tierra); }
.bt.pluma { background: var(--nube); color: var(--cielo); border: 1px solid var(--borde); }
.bt.chico { padding: 5px 10px; font-size: 12.5px; }
.bt.grande { padding: 12px 22px; font-size: 15px; }
.bt:hover { filter: brightness(1.07); text-decoration: none; }
form.enlinea { display: inline; margin: 0; }
.botonera { display: flex; gap: 7px; flex-wrap: wrap; }

.chapa { display: inline-block; padding: 2px 9px; border-radius: 999px; color: #fff;
         font-size: 11px; font-weight: 600; background: var(--noche); }
.chapa.gris { background: #E6E3DD; color: var(--suave); }

.aviso { padding: 13px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px;
         background: #ECF7F0; border: 1px solid #B5E0C6; color: #145C36; }
.aviso.mal { background: #FDF1EE; border-color: #EFC3B8; color: #8E2F1D; }
.aviso.ojo { background: #FDF8EF; border-color: #F0DDBE; color: #7A4C0B; }

/* Aviso flotante de lo que acaba de pasar: aparece arriba y se va solo. */
.volante { position: fixed; top: -70px; left: 50%; transform: translateX(-50%);
           background: var(--noche); color: #fff; padding: 12px 20px; border-radius: 10px;
           font-size: 14px; font-weight: 500; z-index: 80; max-width: 90vw;
           box-shadow: 0 10px 30px rgba(14,22,38,.28); transition: top .25s ease; }
.volante.visible { top: 16px; }
.volante.malo { background: var(--tierra); }

/* La contraseña recién creada: se muestra una sola vez. */
.clave-nueva { background: #FDF8EF; border: 1px solid #F0DDBE; border-radius: 12px;
               padding: 18px 20px; margin-bottom: 18px; }
.clave-nueva .clave { font-family: "JetBrains Mono", monospace; font-size: 23px;
                      font-weight: 700; color: var(--noche); letter-spacing: -.01em;
                      margin: 6px 0; user-select: all; }
.clave-nueva p { font-size: 13px; color: #7A4C0B; margin: 0; }

.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
          gap: 9px; margin-top: 12px; }
.fichas span { display: block; background: var(--nube); border: 1px solid var(--borde);
               border-radius: 10px; padding: 11px 13px; font-size: 12.5px; color: var(--tenue); }
.fichas b { display: block; font-size: 14px; color: var(--noche); }

/* ---- pacientes ---- */
.buscador { display: flex; gap: 8px; align-items: center; margin: 12px 0 4px; }
.buscador input { flex: 1; }
.renglon .pref { font-style: normal; font-size: 12.5px; color: var(--tenue);
                 display: block; }
td.falla { color: var(--tierra); font-weight: 600; }
.toca tbody tr { cursor: pointer; }
.toca tbody tr:hover { background: #FCFBF9; }

table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
th { text-align: left; padding: 8px; font-size: 10.5px; font-weight: 700; color: var(--tenue);
     text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid var(--borde); }
td { padding: 11px 8px; border-bottom: 1px solid #F3F1EC; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.apagado { opacity: .5; }
td.acciones { text-align: right; white-space: nowrap; }
td.acciones form { margin-left: 4px; }

/* ---- ventana ---- */
.velo { position: fixed; inset: 0; background: rgba(14,22,38,.55); display: none;
        z-index: 60; padding: 22px; overflow-y: auto; }
.velo.abierto { display: block; }
.ventana { background: var(--papel); border-radius: 14px; max-width: 620px; margin: 0 auto;
           padding: 26px; position: relative; }
.ventana .x { position: absolute; top: 14px; right: 14px; border: 0; background: #EFEDE8;
              width: 32px; height: 32px; border-radius: 8px; font-size: 15px;
              cursor: pointer; color: var(--suave); }
.f-cab { padding-right: 40px; }
.f-cab h2 { font-size: 21px; font-weight: 800; font-stretch: 110%; letter-spacing: -.025em;
            color: var(--noche); margin: 2px 0 0; }
.f-sub { font-size: 13px; color: var(--suave); margin-top: 3px; }
.f-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
           gap: 10px; margin: 16px 0 4px; }
.f-datos > div { background: var(--nube); border: 1px solid var(--borde);
                 border-radius: 10px; padding: 10px 12px; }
.f-datos span { display: block; font-size: 10.5px; text-transform: uppercase;
                letter-spacing: .07em; color: var(--tenue); }
.f-datos b { font-size: 15px; color: var(--noche); font-weight: 600; }
.ventana h3 { font-size: 11px; font-weight: 700; color: var(--tenue);
              text-transform: uppercase; letter-spacing: .1em; margin: 20px 0 9px; }

/* ---- la ayuda -----------------------------------------------------------
   Cada paso muestra la pieza real de la interfaz al lado de su explicación.
   Un dibujo del hueco verde enseña más rápido que la frase "los huecos
   verdes son horas libres". */
.ayudita { border: 0; background: none; font: inherit; font-size: 13px;
           font-weight: 600; color: var(--cielo); cursor: pointer; padding: 0;
           text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }
.ayuda-ventana { max-width: 560px; }
.ayuda-ventana h2 { font-size: 26px; font-weight: 800; font-stretch: 110%;
                    letter-spacing: -.03em; color: var(--noche); margin: 3px 0 0; }
.pasos { list-style: none; padding: 0; margin: 20px 0 0; }
.pasos li { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0;
            border-top: 1px solid var(--borde); font-size: 13.5px; color: var(--suave);
            line-height: 1.5; }
.pasos li:first-child { border-top: 0; padding-top: 4px; }
.pasos b { display: block; font-size: 14.5px; color: var(--noche); margin-bottom: 3px; }
.muestra { flex: 0 0 62px; height: 40px; position: relative;
           display: flex; align-items: center; justify-content: center; }
.m-cupo { width: 54px; height: 34px; border-radius: 6px;
          background: repeating-linear-gradient(45deg,
            rgba(31,157,87,.16) 0 6px, rgba(31,157,87,.05) 6px 12px);
          display: flex; align-items: center; justify-content: center; }
.m-cupo i { font-style: normal; font-size: 17px; color: var(--vina); opacity: .85; }
.m-cita { width: 54px; height: 34px; border-radius: 7px; color: #fff;
          font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600;
          display: flex; align-items: center; justify-content: center;
          box-shadow: 0 2px 5px rgba(22,35,61,.18); }
.m-linea { width: 54px; height: 2px; background: var(--tierra); position: relative; }
.m-linea:before { content: ""; position: absolute; left: -4px; top: -3px;
                  width: 8px; height: 8px; border-radius: 50%; background: var(--tierra); }
.ayuda-mas { margin-top: 18px; padding: 14px 16px; background: var(--nube);
             border: 1px solid var(--borde); border-radius: 10px;
             font-size: 13.5px; color: var(--suave); line-height: 1.55; }
.ayuda-mas b { color: var(--noche); }
.ayuda-check { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde); }

/* Agendar o bloquear: dos cosas distintas en el mismo hueco, así que dos
   pestañas y no dos formularios apilados que haya que leer enteros. */
.pestanas { display: flex; gap: 4px; margin: 20px 0 4px;
            border-bottom: 1px solid var(--borde); }
.pestanas button { border: 0; background: none; font: inherit; font-size: 13.5px;
                   font-weight: 600; color: var(--tenue); cursor: pointer;
                   padding: 9px 13px; border-bottom: 2px solid transparent;
                   margin-bottom: -1px; }
.pestanas button:hover { color: var(--texto); }
.pestanas button.on { color: var(--noche); border-bottom-color: var(--vina); }
.panel.oculto { display: none; }
.opt { font-weight: 400; color: var(--tenue); }
.renglon { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid #F0EEE9;
           font-size: 13.5px; }
.renglon:last-child { border-bottom: 0; }
.renglon .dato { margin-left: auto; color: var(--tenue); font-size: 12.5px; }
.chat { max-height: 400px; overflow-y: auto; padding: 4px; background: var(--nube);
        border: 1px solid var(--borde); border-radius: 11px; }
.globo { padding: 9px 13px; border-radius: 12px; margin: 7px; font-size: 13.5px;
         max-width: 84%; white-space: pre-wrap; word-break: break-word; }
.g-el { background: #F0EEE9; }
.g-ella { background: #E8F1FD; margin-left: auto; }

/* ---- angosto: un día a la vez -------------------------------------------
   Siete columnas en un celular dan 45 px cada una: no cabe un nombre ni se
   puede tocar un hueco con el dedo. Se muestra UN día, elegido en la fila de
   arriba. Sigue sin scroll: la jornada completa en pantalla. */
@media (max-width: 760px) {
  :root { --alto-dia: clamp(280px, calc(100vh - 300px), 520px); }
  .barra { padding: 10px 14px; }
  .barra-nav { width: 100%; margin-left: 0; overflow-x: auto; }
  .hoja { padding: 16px 12px 40px; }
  .grilla-envoltorio { padding: 10px; }

  .selector-dia { display: flex; gap: 4px; margin-bottom: 12px;
                  border-bottom: 1px solid var(--borde); padding-bottom: 10px; }
  .selector-dia button { flex: 1; border: 0; background: none; font: inherit;
                         padding: 7px 2px; border-radius: 9px; cursor: pointer;
                         color: var(--tenue); }
  .selector-dia b { display: block; font-size: 10px; text-transform: uppercase;
                    letter-spacing: .06em; font-weight: 700; }
  .selector-dia span { display: block; font-family: "JetBrains Mono", monospace;
                       font-size: 17px; font-weight: 700; color: var(--noche); }
  .selector-dia button.on { background: var(--noche); }
  .selector-dia button.on b, .selector-dia button.on span { color: #fff; }

  /* La grilla pasa a dos columnas: el riel de horas y el día elegido. */
  .grilla { grid-template-columns: 46px minmax(0, 1fr); }
  .cab-dia, .columna { display: none; }
  .cab-dia.visible, .columna.visible { display: block; }
  .cab-dia.visible { text-align: left; padding-left: 4px; }
  .carga { margin-left: 0; margin-right: 0; }
  .cita .q { font-size: 13px; }
  .cita .h { font-size: 12px; }
  .cupo i { opacity: .5; }   /* en táctil no hay "pasar por encima" */
  .cab-semana h1 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}