/* estilos.css — Lechuza
 *
 * Extraído de index.html. Se carga con <link> desde el <head>.
 *
 * Si tocás algo acá y no lo ves en el teléfono, subí la versión del
 * cache en public/service-worker.js (const CACHE).
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  font-size: 17px
}

html,
body {
  -webkit-font-smoothing: antialiased
}

body {
  font-family: 'Newsreader', 'Georgia', serif;
  background: #f7f5f0;
  color: #2c2825;
  min-height: 100vh;
  line-height: 1.4
}

.app {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.2rem 1rem 3rem
}

/* En la vista pública no existe la barra fija del analista, así que el
   colchón inferior de 3rem sobra.

   PORTADA DE UNA SOLA PANTALLA
   La portada es una columna flex de exactamente un viewport. Todo lo que
   está adentro (hero, foto, título, galería, los tres acordeones cerrados,
   la botonera y el pie) tiene que verse entero en cualquier dispositivo.
   svh = "small viewport height": el alto con la barra de URL a la vista.
   Es la única unidad que no salta en Chrome Android al scrollear. */
.app.app-pub {
  padding-bottom: .5rem;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column
}

/* Nadie se achica ni se corta salvo quien lo pida explícitamente abajo.
   Sin esto, el default (flex: 0 1 auto) dejaría que las tarjetas de los
   acordeones se aplasten y, como .card tiene overflow:hidden, se verían
   cortadas: justo lo que no queremos. */
.app.app-pub>* {
  flex: 0 0 auto
}

/* La galería tiene proporción fija: el alto es la mitad del ancho. Con
   box-sizing:border-box el aspect-ratio se calcula sobre el borde, así que
   los 4px de padding entran adentro. Cada foto queda casi cuadrada.

   flex-shrink queda en 1 y no en 0 a propósito: en un celular apaisado, si
   después de recortar el hero y la foto todavía no entra la portada, la
   galería cede hasta 84px antes que dejar algo cortado. max-height es el
   tope para que en apaisado no se coma media pantalla. */
.app.app-pub>.pub-galeria {
  flex: 0 1 auto;
  display: flex;
  aspect-ratio: 2 / 1;
  min-height: 84px;
  max-height: 42vh
}

/* El espaciador se queda con TODO el sobrante de cada pantalla: es lo que
   mantiene la botonera abajo sin que la galería se deforme. */
.app.app-pub>.pub-espaciador {
  flex: 1 1 0;
  min-height: 0
}

.sans {
  font-family: 'DM Sans', sans-serif
}

.serif {
  font-family: 'Newsreader', serif
}

/* Typography */
h1 {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.2
}

.label {
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #2c2825;
  font-weight: 600
}

.muted {
  color: #2c2825
}

.small {
  font-size: .75rem
}

.tiny {
  font-size: .65rem
}

/* Header — sticky con identidad de marca */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #f7f5f0;
  text-align: center;
  /* El -1.2rem de arriba anula el padding-top de .app, igual que el -1rem
     anula el lateral: así la franja llega al borde y su relleno interno
     es el único aire por encima del título. */
  margin: -1.2rem -1rem 1rem;
  padding: .6rem 1rem .5rem;
  border-bottom: 1px solid #e8e5dd;
}

.header h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0;
}

.header .label {
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  letter-spacing: .32em;
  color: #7d7568;
  margin-top: .08rem;
  font-weight: 400;
  text-transform: uppercase;
}

.header .logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: .55rem;
  vertical-align: -3px
}

.header .logo-mark svg {
  width: 26px;
  height: 26px
}

.header .accent-line {
  display: inline-block;
  width: 30px;
  height: 1px;
  background: #1a1a1a;
  margin: 0 .8rem;
  vertical-align: middle
}

/* Acento naranja para botón primario destacado */
.btn.bo {
  border: none;
  background: #e8a440;
  color: #fff;
  font-weight: 500
}

.btn.bo:hover {
  background: #cc8d2f
}

/* Nav — subrayado activo, sin píldoras */
.nav {
  display: flex;
  gap: 1.4rem;
  flex-wrap: nowrap;
  margin-bottom: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .5rem 0 .3rem;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 64px;
  background: #f7f5f0;
  z-index: 40;
  border-bottom: 1px solid #e8e5dd
}

.nav.sub {
  position: static;
  gap: 1.1rem;
  padding: .2rem 0 .4rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid #eeece8
}

.nav::-webkit-scrollbar {
  height: 3px
}

.nav::-webkit-scrollbar-thumb {
  background: #d4d0ca;
  border-radius: 2px
}

.nav.center {
  justify-content: flex-start
}

.nb {
  padding: .15rem 0;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  border: none;
  background: transparent;
  color: #8a8580;
  transition: color .12s, border-color .12s;
  flex-shrink: 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  font-weight: 400;
  letter-spacing: .01em
}

.nb.a {
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
  font-weight: 500
}

.nb:hover:not(.a) {
  color: #2c2825;
  border-bottom-color: #d4d0ca
}

.nav.sub .nb {
  font-size: .76rem
}

/* Cards */
/* Acordeones de la vista pública: más bajos y más juntos que una tarjeta
   normal. Clase aparte para no alterar las tarjetas del panel.
   Se usa .card.acc-pub (y no sólo .acc-pub) para ganarle en especificidad
   al margen de .card, que está declarado más abajo. */
.card.acc-pub {
  margin-bottom: .5rem
}

.acc-pub>.cr {
  padding: .58rem 1.1rem
}

.acc-pub>.cb {
  padding-top: .2rem
}

.card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  margin-bottom: 1rem
}

.ch {
  padding: 1rem 1.4rem;
  border-bottom: 1px solid #eeece8;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.cb {
  padding: 1.2rem 1.4rem
}

.cr {
  padding: .85rem 1.4rem;
  border-bottom: 1px solid #f5f3ef;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.cr:last-child {
  border-bottom: none
}

.cr.click {
  cursor: pointer
}

.cr.click:hover {
  background: #faf8f4
}

/* Buttons */
.btn {
  padding: .4rem .85rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  border: 1px solid #d4d0ca;
  background: #fff;
  color: #2c2825;
  transition: all .15s
}

.btn:hover {
  background: #faf8f4
}

.btn.bp {
  border: none;
  background: #2c2825;
  color: #f7f5f0
}

.btn.bp:hover {
  background: #403a35
}

.btn.bd {
  border: none;
  background: #c0392b;
  color: #fff
}

.btn.bd:hover {
  background: #a53224
}

.btn.bs {
  border: none;
  background: #2e7d32;
  color: #fff
}

.btn.bs:hover {
  background: #27672b
}

.btn.sm {
  padding: .3rem .7rem;
  font-size: .72rem;
  border-radius: 6px
}

.btn.xs {
  padding: .22rem .55rem;
  font-size: .65rem;
  border-radius: 6px
}

.btn.ghost {
  background: none;
  border: none;
  color: #8a8580;
  padding: .2rem .4rem
}

.btn.ghost:hover {
  color: #2c2825;
  background: transparent
}

.btn:disabled,
.btn.off {
  color: #ccc;
  cursor: default;
  opacity: .6
}

.btn.off:hover {
  background: #fff
}

/* Inputs */
input,
textarea,
select {
  width: 100%;
  padding: .55rem .75rem;
  border-radius: 8px;
  border: 1px solid #d4d0ca;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  outline: none;
  margin-bottom: .5rem;
  box-sizing: border-box;
  background: #fff;
  color: #2c2825
}

input:focus,
textarea:focus,
select:focus {
  border-color: #2c2825
}

/* Fila de teléfono: bandera + 9 + área + número.
   Los cuatro elementos comparten altura explícita en vez de coincidir
   por casualidad — el dropdown de país y los inputs tienen hoy el mismo
   padding, pero basta que alguien toque uno para que se desalineen. */
.tel-row {
  display: flex;
  gap: .35rem;
  align-items: flex-start;
  flex-wrap: nowrap
}
.tel-row input,
.tel-row .ppk-btn {
  height: 2.45rem;
  margin-bottom: 0;
  box-sizing: border-box
}
.tel-row .ppk { margin-bottom: 0 }
/* El "9" no es un campo: es una etiqueta que tiene que leerse a la misma
   altura que los números de al lado. */
.tel-row .tel-nueve {
  flex: 0 0 auto;
  height: 2.45rem;
  display: flex;
  align-items: center;
  padding: 0 .1rem;
  font-weight: 400;
  font-size: .85rem;
  color: #2c2825
}

textarea {
  min-height: 60px;
  resize: vertical;
  font-family: 'Newsreader', serif;
  font-size: .9rem;
  line-height: 1.5
}

textarea.sans {
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem
}

label.ilabel {
  font-family: 'DM Sans', sans-serif;
  font-size: .7rem;
  color: #2c2825;
  font-weight: 600;
  display: block;
  margin-bottom: .25rem;
  text-transform: uppercase;
  letter-spacing: .08em
}

/* Calendar */
.cg {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center
}

.cdh {
  font-family: 'DM Sans', sans-serif;
  font-size: .65rem;
  font-weight: 500;
  color: #2c2825;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .3rem 0
}

.cd {
  height: var(--cd-h, clamp(30px, calc((100dvh - 420px) / 6), 64px));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  cursor: pointer;
  position: relative;
  width: 100%;
  color: #2c2825;
  transition: all .15s
}

.cd.pa {
  color: #2c2825;
  cursor: default;
  opacity: .55
}

.cd.se {
  background: #2c2825 !important;
  color: #fff !important
}

/* Celda libre de la grilla en modo selección (asignar / reprogramar) */
.wt.avl {
  background: transparent;
  border: 1px dashed #E89828;
  color: #E89828;
  cursor: pointer;
  justify-content: center
}

.wt.avl:hover {
  background: #fdf6ec
}

.wt.avl.rec {
  border-style: solid;
  font-weight: 700
}

.wt.avl.selslot {
  background: #E89828;
  border: 1px solid #E89828;
  color: #fff
}

/* Desplegable de pacientes con estética propia (el <select> nativo no acepta CSS) */
.ppk {
  position: relative;
  margin-bottom: .5rem;
  max-width: 340px
}

.ppk-btn {
  width: 100%;
  text-align: left;
  padding: .55rem .75rem;
  border: 1px solid #d4d0ca;
  border-radius: 8px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  color: #2c2825;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer
}

/* La lista va en un overlay fijo al final del body: así no la recorta
   el overflow de ninguna card ni queda fuera de la pantalla. */
.ppk-ov {
  position: fixed;
  inset: 0;
  z-index: 500
}

.ppk-list {
  position: fixed;
  background: #fff;
  border: 1px solid #d4d0ca;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .16);
  max-height: 260px;
  overflow-y: auto
}

.ppk-it {
  padding: .5rem .75rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  line-height: 1.3;
  color: #2c2825;
  cursor: pointer;
  border-bottom: 1px solid #f5f3ef
}

.ppk-it:last-child {
  border-bottom: none
}

.ppk-it:hover {
  background: #faf8f4
}

.ppk-it.on {
  background: #2c2825;
  color: #fff
}

.ppk-f {
  padding: .4rem;
  border-bottom: 1px solid #eeece8;
  position: sticky;
  top: 0;
  background: #fff
}

.ppk-f input {
  margin: 0;
  padding: .4rem .6rem;
  font-size: .8rem
}


/* Weekly grid (analista) */
.wg {
  display: grid;
  grid-template-columns: 64px repeat(5, 1fr);
  --wc-h: clamp(26px, calc((100vh - 340px) / 11), 96px);
  background: #f4f1ec
}

.whc {
  border-right: none
}

.wh {
  height: 36px
}

.whr {
  height: var(--wc-h);
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  color: #b5b0a8;
  text-align: right;
  padding-right: 10px;
  line-height: var(--wc-h)
}

.wdc {
  cursor: pointer;
  transition: background .12s
}

.wdc:hover {
  background: #faf8f4
}

.wdc.today {
  background: #faf8f4
}

.wdh {
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: none;
  padding: .3rem 0
}

.wc {
  height: var(--wc-h);
  position: relative;
  padding: 2px;
  display: flex;
  align-items: stretch;
  gap: 2px
}

/* Rectángulo blanco redondeado de cada celda (misma forma que los turnos) */
.wc::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: #fff;
  border-radius: 10px;
  pointer-events: none
}

/* Economía de pintura: donde hay turno no se pinta el blanco de fondo */
.wc.occ::before {
  display: none
}

.wc>* {
  position: relative;
  z-index: 1
}

/* Celdas receptoras durante el drag de un turno */
.wc.drop-ok::before {
  background: #fdf6ec;
  border: 1px dashed #E89828
}

.wc.drop-hover::before {
  background: #f8e3bf;
  border: 1px solid #E89828
}

.wt {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  padding: 0 .3rem;
  font-size: .72rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  background: #e8e4dc;
  color: #2c2825;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent
}

.wt.canc {
  background: #f5dddb;
  color: #a33
}

/* Eventos profesionales: se distinguen de los turnos por textura, no sólo
   por color. La barra lateral izquierda dice de un vistazo "esto no es un
   paciente". */
.wt.ev {
  background: #ebe7f0;
  color: #4a4258;
  border-left: 3px solid #8b7fa8
}
.wt.ev.ev-analisis { background: #e7ecf2; color: #3d4a58; border-left-color: #6b8299 }
.wt.ev.ev-supervision { background: #ebe7f0; color: #4a4258; border-left-color: #8b7fa8 }
.wt.ev.ev-formacion { background: #eaf0e8; color: #40503c; border-left-color: #7d9a72 }
.wt.ev.canc { background: #f5dddb; color: #a33; border-left-color: #c88 }
.wt-ev-ico {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: .6rem;
  opacity: .75;
  line-height: 1
}

.wt-ini {
  position: absolute;
  top: 2px;
  right: 5px;
  font-size: .62rem;
  font-weight: 600;
  opacity: .85;
  line-height: 1
}

.wt {
  position: relative
}

/* Tags */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: .62rem;
  font-weight: 500;
  margin-right: 3px;
  margin-bottom: 3px;
  cursor: pointer;
  border: 1.5px solid transparent
}

.tag.clk {
  cursor: pointer
}

.t-sig {
  border-color: #6366f1;
  color: #6366f1
}

.t-sig.on {
  background: #6366f1;
  color: #fff
}

.t-rep {
  border-color: #d97706;
  color: #d97706
}

.t-rep.on {
  background: #d97706;
  color: #fff
}

.t-ser {
  border-color: #0891b2;
  color: #0891b2
}

.t-ser.on {
  background: #0891b2;
  color: #fff
}

.t-sin {
  border-color: #dc2626;
  color: #dc2626
}

.t-sin.on {
  background: #dc2626;
  color: #fff
}

.t-tra {
  border-color: #7c3aed;
  color: #7c3aed
}

.t-tra.on {
  background: #7c3aed;
  color: #fff
}

.tag.tip {
  background: #8a8580;
  color: #fff;
  border: none;
  font-size: .6rem
}

.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  font-weight: 500
}

.bg-ok {
  background: #e8f5e9;
  color: #2e7d32
}

.bg-warn {
  background: #fff3e0;
  color: #e65100
}

.bg-bad {
  background: #fce8e6;
  color: #c0392b
}

.bg-info {
  background: #e8f0fe;
  color: #1967d2
}

/* Stat cards */
.g3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
  margin-bottom: 1rem
}

.g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-bottom: 1rem
}

.sc {
  background: #fff;
  border-radius: 12px;
  padding: .9rem 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04)
}

.sc .label {
  margin-bottom: .3rem
}

.sv {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c2825
}

.sv.ok {
  color: #2e7d32
}

.sv.bad {
  color: #c0392b
}

.sv.warn {
  color: #e65100
}

/* Toast */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #2c2825;
  color: #f7f5f0;
  padding: .7rem 1.2rem;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
  animation: ti .2s ease;
  max-width: 360px;
  text-align: center
}

@keyframes ti {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px)
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
  }
}

/* Layout helpers */
.flex {
  display: flex
}

.col {
  flex-direction: column
}

.gs {
  gap: .4rem
}

.gm {
  gap: .7rem
}

.gl {
  gap: 1rem
}

.wrap {
  flex-wrap: wrap
}

.ac {
  align-items: center
}

.jb {
  justify-content: space-between
}

.jc {
  justify-content: center
}

.jend {
  justify-content: flex-end
}

.fg {
  flex-grow: 1
}

.mt {
  margin-top: .7rem
}

.mtS {
  margin-top: .4rem
}

.mb {
  margin-bottom: .7rem
}

.mbS {
  margin-bottom: .4rem
}

.mbL {
  margin-bottom: 1.2rem
}

.pl {
  padding-left: 1rem
}

.tc {
  text-align: center
}

.tr {
  text-align: right
}

.green {
  color: #2e7d32
}

.red {
  color: #c0392b
}

.orange {
  color: #e65100
}

.blue {
  color: #1967d2
}

.hidden {
  display: none
}

/* Availability heat for patient calendar (1.1) */
.cd.h0 {
  background: #2c2825;
  color: #d8d3cc
}

/* full */
.cd.h1 {
  background: #6e655c;
  color: #fff
}

.cd.h2 {
  background: #b8ad9f;
  color: #fff
}

.cd.h3 {
  background: #e8e1d3;
  color: #2c2825
}

.cd.h4 {
  background: #faf6eb;
  color: #2c2825
}

/* wide open */
/* Simplificado: solo "con disponibilidad" vs "ocupado" */
.cd.h-disp {
  background: #e8a440;
  color: #fff;
  font-weight: 500
}

.cd.h-disp:hover {
  background: #cc8d2f
}

/* Availability grid (hcell) for analista schedule config */
.hcell {
  padding: .35rem;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: .65rem;
  text-align: center;
  cursor: pointer;
  border: 1px solid #d4d0ca;
  background: #fff;
  color: #2c2825;
  transition: all .12s
}

.hcell.on {
  background: #2c2825;
  color: #f7f5f0;
  border-color: #2c2825
}

.hcell:hover:not(.on) {
  background: #faf8f4
}

/* Login */
.login-wrap {
  max-width: 380px;
  margin: 3rem auto;
  padding: 2rem 1rem
}

.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem 1.6rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06)
}

/* Divider */
.hr {
  border-top: 1px solid #eeece8;
  margin: 1rem 0
}

/* Policy footnote */
.policy {
  padding: .85rem 1.2rem;
  background: #faf8f4;
  font-family: 'DM Sans', sans-serif;
  font-size: .8rem;
  color: #2c2825;
  line-height: 1.55;
  border-radius: 0 0 16px 16px;
  border-top: 1px solid #eeece8
}

/* Highlight (reschedule mode banner) */
.hi {
  background: #fdf6ec;
  color: #7a6a4f;
  padding: .6rem .85rem;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  margin-bottom: 1rem;
  line-height: 1.4
}

/* Public profile / testimonios viñetas */
.vin {
  padding: 1rem 1.4rem;
  border-bottom: 1px solid #f5f3ef
}

.vin p.quote {
  font-family: 'Newsreader', serif;
  font-size: .92rem;
  line-height: 1.55;
  color: #403a35;
  font-style: italic
}

/* Estados de paciente — color pleno.
   Se usa donde el bloque ES el dato y se lee de un vistazo (grilla de la
   agenda, chips de la leyenda), no donde hay texto que leer. */
.gv-crisis {
  background: #d63031 !important;
  color: #fff !important;
}

.gv-inestable {
  background: #e17055 !important;
  color: #fff !important;
}

.gv-estable {
  background: #fdcb6e !important;
  color: #1a1a1a !important;
}

.gv-avanzado {
  background: #00b894 !important;
  color: #fff !important;
}

.gv-de_alta {
  background: #5d9b6f !important;
  color: #fff !important;
}

.gv-interrumpido {
  background: #7d7d7d !important;
  color: #fff !important;
}

/* Estados de paciente — barra lateral angosta.
   Para filas con texto: el color informa sin tapar la lectura. Mismos
   colores que la agenda, en 4px al costado. */
.gvb {
  border-left: 10px solid transparent;
  background: #fff;
  color: #2c2825
}

.gvb-crisis {
  border-left-color: #d63031
}

.gvb-inestable {
  border-left-color: #e17055
}

.gvb-estable {
  border-left-color: #fdcb6e
}

.gvb-avanzado {
  border-left-color: #00b894
}

.gvb-de_alta {
  border-left-color: #5d9b6f
}

.gvb-interrumpido {
  border-left-color: #7d7d7d
}

.gvb:hover {
  background: #faf8f4
}

/* Lista de pacientes — vista móvil en cards */
.pac-row-desktop {
  display: grid;
}

.pac-row-mobile {
  display: none;
}

.pac-head-desktop {
  display: grid;
}

@media (max-width: 640px) {

  .pac-row-desktop,
  .pac-head-desktop {
    display: none !important;
  }

  .pac-row-mobile {
    display: block !important;
  }

  .pac-card {
    padding: .85rem .9rem .85rem .7rem;
    border-bottom: 1px solid #f5f3ef;
    cursor: pointer;
  }

  .pac-card .pc-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .6rem;
  }

  .pac-card .pc-name {
    font-family: 'Newsreader', serif;
    font-size: .95rem;
    font-weight: 400;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pac-card .pc-deuda {
    font-family: 'DM Sans', sans-serif;
    font-size: .85rem;
    white-space: nowrap;
    color: #1a1a1a;
  }

  .pac-card .pc-deuda.has {
    font-weight: 700;
  }

  .pac-card .pc-deuda.no {
    font-weight: 400;
    opacity: .55;
  }

  .pac-card .pc-meta {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .35rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
    color: #1a1a1a;
  }

  .pac-card .pc-chip {
    white-space: nowrap;
  }

  .pac-card .pc-chip+.pc-chip::before {
    content: '·';
    margin-right: .5rem;
    opacity: .5;
  }
}

/* Swipe navigation entre pestañas principales */
#swipe-wrap {
  overflow-x: hidden;
  position: relative
}

/* Clon de la pantalla que sale durante el deslizamiento. Absoluto dentro del
   wrap y no relativo a la ventana, para que el header sticky se comporte
   igual que en el original si la página venía scrolleada. */
/* ---------- Apaisado en celular ----------
   Acostado quedan unos 390px de alto. El cromo del turnero solo se comía
   más de 320, así que por más que la celda bajara al piso el mes no entraba
   y la pantalla scrolleaba igual. Acá se achica el cromo, no la celda:
   header en una línea, leyenda y política compactas, botbar más baja.
   Son ~120px, que es la diferencia entre entrar y no entrar.
   El límite de alto (no de ancho) es a propósito: una tablet apaisada tiene
   espacio de sobra y no necesita nada de esto. */
@media (orientation: landscape) and (max-height: 560px) {
  body.has-botbar .header {
    margin-bottom: .5rem;
    padding: .3rem 1rem .25rem
  }

  body.has-botbar .header h1 {
    font-size: 1.05rem;
    letter-spacing: .16em
  }

  /* Las líneas de acento y el 'Psicoanalista' son firma, no información:
     acostado se van, y el nombre solo sigue diciendo dónde está parado. */
  body.has-botbar .header .accent-line { display: none }

  body.has-botbar .header .label {
    font-size: .55rem;
    letter-spacing: .24em
  }

  body.has-botbar .app { padding-top: .6rem }

  body.has-botbar .cb { padding: .7rem .9rem }

  body.has-botbar .ch { padding: .5rem .9rem }

  body.has-botbar .policy {
    padding: .5rem .9rem;
    font-size: .7rem;
    line-height: 1.35
  }

  body.has-botbar .botbar .bb-tabs .nb {
    padding-top: .45rem;
    padding-bottom: .45rem
  }

  body.has-botbar .botbar .bb-salir { font-size: 1.2rem }
}

.marca-lechuza {
  display: block;
  width: 74px;
  height: auto;
  color: #1a1a1a
}

/* Vista previa de la firma: el paciente tiene que ver el artefacto, no
   imaginarlo. Consentir a una abstracción no es consentir. */
.firma-preview {
  margin-top: .9rem;
  padding: .7rem .85rem;
  background: #fff;
  border: 1px solid #eae6dd;
  border-radius: 8px
}

.app-clon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  pointer-events: none;
  background: #f7f5f0;
  will-change: transform
}

/* Nav principal: solo cambia la distribución, no el tamaño de fuente */
.nav.main {
  padding-left: .5rem;
  padding-right: .5rem;
  justify-content: flex-start;
  gap: 1.4rem
}

/* ===== Barra inferior fija del analista (tab-bar) ===== */
.botbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: stretch;
  background: #f7f5f0;
  border-top: 1px solid #e8e5dd;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
/* También aplico el truco de scroll real (Config alcanzable, Salir anclado) */
.botbar .bb-tabs { flex: 1 1 auto; width: 0 }
.botbar .bb-tabs .nb { flex: 0 0 auto }
.botbar .bb-tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: .55rem .8rem;
  margin: 0;
  border: none;
  position: static;
  background: transparent;
}
.botbar .bb-tabs::-webkit-scrollbar { height: 3px }
.botbar .bb-tabs::-webkit-scrollbar-thumb { background: #d4d0ca; border-radius: 2px }
/* Salir: una cruz, no una palabra. Ocupa un tercio del ancho que ocupaba y
   deja ese espacio para las pestañas. Sin relleno de color ni peso: la
   serif de la marca en un gris apagado, que se enciende en rojo recién al
   tocarla. El área táctil (2.4rem por el alto de la fila) es mucho mayor
   que el glifo, para que sea chica de ver pero no de apretar. */
.botbar .bb-salir {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  padding: 0;
  background: transparent;
  border: none;
  border-left: 1px solid #e8e5dd;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  line-height: 1;
  color: #b3aca2;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.botbar .bb-salir:hover { color: #8a3a3a }
.botbar .bb-salir:active { color: #8a3a3a; background: #f0ede6 }
/* Dejá aire al final del contenido = alto total de la botbar (medido por JS) + respiro */
body.has-botbar .app { padding-bottom: calc(var(--bbH, 3rem) + 1rem) }
/* La botbar ahora es columna: fila de subpestañas arriba, fila principal abajo */
.botbar { flex-direction: column; align-items: stretch }
/* Fila más alta: slot de secciones de tercer nivel (ej. Config → Mensajes).
   Vacía en el resto de las pantallas, por eso :empty la esconde. */
/* Card única de pendientes. Las tres fuentes entran como secciones:
   la clase les saca el marco propio para que no se vean como cards
   dentro de una card. */
.pend-card { margin-bottom: .8rem; border-left: 3px solid #E89828 }
.pend-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  cursor: pointer;
  user-select: none
}
.pend-cuerpo { padding: 0 0 .3rem }
.pend-sec {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important
}
.pend-sec + .pend-sec { border-top: 1px solid #f0ede8 !important }
.pend-conteo {
  background: #E89828;
  color: #fff;
  border-radius: 10px;
  padding: .05rem .45rem;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.5
}

.bb-secslot:empty { display: none }
.bb-secslot {
  display: flex;
  gap: .9rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: .35rem .8rem;
  background: #efece5;
  border-bottom: 1px solid #e8e5dd;
}
.bb-secslot::-webkit-scrollbar { height: 3px }
.bb-secslot::-webkit-scrollbar-thumb { background: #d4d0ca; border-radius: 2px }
.bb-secslot .nav.sec {
  display: flex;
  position: static;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  gap: .9rem;
  flex: 1 1 auto;
  min-width: max-content;
}
/* Tercer nivel: mismo lenguaje que las subpestañas, un punto más chico
   para que la jerarquía se lea sin necesidad de otro color. */
.bb-secslot .nav.sec .nb {
  flex: 0 0 auto;
  font-size: .72rem;
  padding: .15rem 0;
}
/* Fila superior: slot de subpestañas (vacío si la sección no tiene) */
.bb-subslot:empty { display: none }
.bb-subslot {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: .4rem .8rem;
  background: #f2efe9;
  border-bottom: 1px solid #e8e5dd;
}
.bb-subslot::-webkit-scrollbar { height: 3px }
.bb-subslot::-webkit-scrollbar-thumb { background: #d4d0ca; border-radius: 2px }
/* Las subpestañas, ya dentro del slot, pierden su estilo sticky/borde original */
.bb-subslot .nav.sub {
  position: static;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  gap: 1.1rem;
  flex: 1 1 auto;
  min-width: max-content;
}
.bb-subslot .nav.sub .nb { flex: 0 0 auto }
/* Fila inferior: pestañas principales + Salir */
.bb-main { display: flex; align-items: stretch }
/* En pantallas anchas, el contenido de la botbar se alinea con la columna
   central de la app (.app max-width 720px); el fondo sigue a todo el ancho */
/* Agenda alargada (ancho normal): filas hasta llenar el alto, compu y celu.
   100dvh evita el problema de la barra de URL móvil cuando está disponible. */
.app.app-wide .wg { --wc-h: clamp(26px, calc((100vh - 250px) / 11), 999px) }
@supports (height: 100dvh) {
  .app.app-wide .wg { --wc-h: clamp(26px, calc((100dvh - 250px) / 11), 999px) }
}
@media(min-width:760px) {
  .botbar .bb-main,
  .botbar .bb-secslot,
  .botbar .bb-subslot {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
  }
}
/* ===== Modo concentración: oculta todo lo accesorio ===== */
body.foco .botbar { display: none !important }
body.foco.has-botbar .app { padding-bottom: 1rem }
.foco-hide { display: none !important }
/* Barra mínima fija del modo foco */
/* En foco: la card del anotador sin padding y el textarea sin borde, a todo el ancho/alto */
.cb-foco { padding: 0 !important }
/* En foco, la card no agrega alto ni redondeo extra abajo: el textarea llega al filo */
.card-foco { padding-bottom: 0 !important; overflow: hidden }
.card-foco .cb-foco { margin-bottom: 0 !important }
.cb-foco textarea {
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: #fff;
  padding: .5rem .8rem .1rem;
}
.focobar {
  position: sticky;
  top: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #f7f5f0;
  border-bottom: 1px solid #e8e5dd;
  padding: .25rem .2rem;
  margin-top: -.4rem;
  margin-bottom: .5rem;
  flex-wrap: wrap;
}
/* Botones laterales P / A / off */
/* En foco, los comandos del panel clínico se fijan sobre el teclado (Android los tapaba) */
.barra-comandos-foco {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: #f7f5f0;
  border-top: 1px solid #e8e5dd;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .1);
  padding: .5rem .8rem calc(.5rem + env(safe-area-inset-bottom, 0));
  margin: 0 !important;
  flex-wrap: nowrap;
}
.vozbar { display: flex; flex-direction: column; gap: .3rem; flex-shrink: 0 }
.vozb {
  min-width: 2.4rem;
  border: 1px solid #d4d0ca;
  background: #fff;
  border-radius: 8px;
  padding: .4rem .55rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  color: #6b6661;
  line-height: 1;
}
.vozb.on { color: #fff; border-color: transparent }
.vozb.on.vp { background: #1a1a1a }
.vozb.on.va { background: #7c3aed }
.vozb.on.vo { background: #6b6661 }

/* Barra de comandos del anotador. La altura es la del botón más chico que
   había —en esta pantalla cada píxel de alto se lo saca al texto— pero el
   ancho sigue la proporción de una tecla de teclado, que es lo que la mano
   espera encontrar. Cuadrados quedaban demasiado angostos para el pulgar.
   Se achican hasta volver a ser cuadrados si el nombre del paciente
   siguiente necesita el espacio: primero cede el ancho, nunca el alto. */
.btn.cmdb, .vozb.cmdb {
  width: 2.25rem;
  height: 1.7rem;
  min-width: 1.7rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  line-height: 1;
  font-size: .74rem;
}

/* El del paciente siguiente es el único con texto: misma altura, y se queda
   con el ancho que sobra. Si no alcanza, recorta con puntos suspensivos en
   vez de empujar la fila a dos renglones. */
.btn.cmdb-sig {
  height: 1.7rem;
  padding: 0 .45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  flex: 1 1 4rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  font-size: .72rem;
}

/* La barra en modo foco también apretaba de más: con los botones chicos, el
   relleno de arriba y abajo pasa a ser lo más alto de la fila. */
.barra-comandos-foco {
  padding: .35rem .6rem calc(.35rem + env(safe-area-inset-bottom, 0)) !important;
}

@media(max-width:520px) {
  .nav.main {
    gap: .25rem
  }

  .nav.main .nb {
    font-size: .85rem;
    padding-left: .4rem;
    padding-right: .4rem
  }
}

/* Badge de frecuencia (toggle "Frecuencia" en agenda semanal): esquina
   opuesta a la inicial del paciente, hereda el color de texto del bloque
   para mantener contraste sobre cualquier color de gravedad. */
.wt-freq {
  position: absolute;
  top: 2px;
  left: 5px;
  font-size: .68rem;
  line-height: 1;
  opacity: .9;
}

/* Mini chips for gravedad picker */
.gchip {
  display: inline-block;
  padding: .35rem .85rem;
  border-radius: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
  border: 2px solid transparent;
  margin-right: .3rem;
  margin-bottom: .3rem
}

.gchip.on {
  box-shadow: 0 0 0 3px #2c2825 inset
}

.gchip.crisis {
  background: #d63031;
  color: #fff
}

.gchip.inestable {
  background: #e17055;
  color: #fff
}

.gchip.estable {
  background: #fdcb6e;
  color: #1a1a1a
}

.gchip.avanzado {
  background: #00b894;
  color: #fff
}

.gchip.de_alta {
  background: #5d9b6f;
  color: #fff
}

.gchip.interrumpido {
  background: #7d7d7d;
  color: #fff
}

/* Mobile */
@media(max-width:520px) {
  .g3 {
    grid-template-columns: 1fr 1fr
  }

  .wg {
    grid-template-columns: 52px repeat(5, 1fr)
  }

  .wt {
    font-size: .8rem;
    padding: 2px 3px
  }

  .cb {
    padding: 1rem
  }

  .ch {
    padding: .85rem 1rem
  }

  .cr {
    padding: .8rem 1rem
  }
}

/* ---------- Basurero de arrastre (agenda) ---------- */
.drag-trash {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bbH, 64px) + 12px);
  transform: translateX(-50%) scale(.6);
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.7rem;
  background: rgba(192, 57, 43, .16);
  border: 2px dashed rgba(192, 57, 43, .6);
  color: #c0392b;
  z-index: 410;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s, transform .18s;
}
.drag-trash.on { opacity: 1; transform: translateX(-50%) scale(1); }
.drag-trash.hover {
  background: rgba(192, 57, 43, .9);
  color: #fff;
  border-style: solid;
  box-shadow: 0 8px 24px rgba(192, 57, 43, .5);
}

/* ---------- Pestañas en modo "solo iconos": repartidas y más grandes ---------- */
body.ui-solo-iconos .botbar .bb-tabs {
  gap: .5rem;
  overflow-x: hidden;
}
body.ui-solo-iconos .botbar .bb-tabs .nb {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 1.45rem;
  line-height: 1;
  padding-left: 0;
  padding-right: 0;
}