/* ============================================================
   SISTEMA DEL REDISEÑO 2026 — compartido por las páginas interiores.
   La portada (index.html) lleva su copia inline con el héroe líquido.
   ⟨MONTREAL⟩: al comprar la licencia cambia --sans y se regenera fuentes.css.
   ============================================================ */
:root{
  --noche:#06100B;
  --noche-2:#0A1811;
  --crema:#FBFAF4;
  --crema-2:#F1EDE0;
  --tinta:#0A1A13;
  --verde:#1A5C3A;
  --verde-vivo:#4FAE7C;
  --oro:#A8895A;
  --humo:rgba(251,250,244,.62);
  --humo-tinta:rgba(10,26,19,.55);
  --linea-oscura:rgba(251,250,244,.14);
  --linea-clara:rgba(10,26,19,.12);
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; /* ⟨MONTREAL⟩ */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-expo:cubic-bezier(.19,1,.22,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible{outline:2px solid var(--verde-vivo);outline-offset:3px;border-radius:2px}

/* ---------- cabecera de dos estados ---------- */
.cabecera{
  position:fixed;inset:0 0 auto;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4vw,48px);
  transition:background .3s var(--ease);
}
.logo{position:relative;display:block;height:26px}
.logo img{height:26px;width:auto;transition:opacity .25s var(--ease)}
.logo .logo-oscuro{position:absolute;inset:0;opacity:0}
.navega{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.navega a{
  font-size:.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--crema);opacity:.85;
  transition:opacity .2s,color .3s var(--ease);
}
.navega a:hover{opacity:1}
.navega .portal{
  border:1px solid var(--verde-vivo);color:var(--verde-vivo);
  padding:9px 18px;border-radius:999px;opacity:1;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .3s var(--ease);
}
.navega .portal:hover{background:var(--verde-vivo);color:var(--noche)}
.cabecera.solida{background:rgba(251,250,244,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cabecera.solida .navega a{color:var(--tinta)}
.cabecera.solida .navega .portal{border-color:var(--verde);color:var(--verde)}
.cabecera.solida .navega .portal:hover{background:var(--verde);color:var(--crema)}
.cabecera.solida .logo .logo-claro{opacity:0}
.cabecera.solida .logo .logo-oscuro{opacity:1}

/* el botón de menú (solo móvil) */
.abre-menu{
  display:none;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--crema);padding:8px 4px;
  transition:color .3s var(--ease);
}
.cabecera.solida .abre-menu{color:var(--tinta)}
@media (max-width:760px){
  .navega a:not(.portal){display:none}
  .abre-menu{display:block}
}
.telon{
  position:fixed;inset:0;z-index:30;background:var(--noche);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,7vw,60px);gap:6px;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.telon.abierto{opacity:1;pointer-events:auto}
.telon a{
  color:var(--crema);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2.2rem,9vw,3.4rem);line-height:1.25;
}
.telon a.acceso{color:var(--verde-vivo)}
.telon .cierra{
  position:absolute;top:20px;right:24px;background:none;border:0;cursor:pointer;
  color:var(--crema);font-family:var(--sans);font-size:.85rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:8px;
}

/* ---------- el héroe de página interior ---------- */
.heroe-pagina{
  background:var(--noche);color:var(--crema);
  /* El margen de arriba hacía DOS trabajos en un solo valor: despejar la
     cabecera (que flota y mide 68px, así que no ocupa lugar) y dar aire.
     Al estar atado a la altura de la pantalla crecía donde menos sobra:
     137px de hueco en un celular alto, 205px en monitor.
     Ahora van separados. Christian eligió 48px de aire el 26/08/2026,
     comparando las cuatro versiones lado a lado. */
  padding:calc(68px + 48px) clamp(20px,4vw,48px) clamp(70px,11vh,120px);
}
.heroe-pagina .ceja{color:var(--verde-vivo)}
.heroe-pagina h1{
  font-size:clamp(2.8rem,8.5vw,7rem);
  font-weight:700;letter-spacing:-.04em;line-height:.94;
  max-width:16ch;text-wrap:balance;
}
.heroe-pagina .baja{
  margin-top:22px;max-width:46ch;
  color:rgba(251,250,244,.72);font-size:clamp(1rem,1.6vw,1.15rem);
}

/* héroe de página con imagen que acompaña */
.heroe-pagina .con-imagen{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
@media (max-width:860px){.heroe-pagina .con-imagen{grid-template-columns:1fr}}
.lamina{margin:0;overflow:hidden;border-radius:3px}
.lamina img{width:100%;height:clamp(300px,44vh,480px);object-fit:cover;display:block;transform:scale(1.06);transition:transform 1.6s var(--ease-expo)}
.lamina.visto img,html:not(.js) .lamina img{transform:scale(1)}
@media (hover:hover){.lamina:hover img{transform:scale(1.04)}}

/* ---------- secciones ---------- */
.seccion{padding:clamp(90px,14vh,170px) clamp(20px,4vw,48px)}
.seccion.oscura{background:var(--noche);color:var(--crema)}
.seccion.oscura .ceja{color:var(--verde-vivo)}
.seccion.verde{background:var(--verde);color:var(--crema)}
.seccion.verde .ceja{color:var(--crema);opacity:.75}
.marco{max-width:1200px;margin:0 auto}
.marco.angosto{max-width:820px}
.ceja{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--verde);margin-bottom:clamp(28px,5vh,56px);
}
h2.titulo{
  font-size:clamp(2rem,5.5vw,4.2rem);
  font-weight:700;letter-spacing:-.035em;line-height:1;
  max-width:18ch;text-wrap:balance;margin-bottom:clamp(22px,4vh,40px);
}
h3.subtitulo{
  font-size:clamp(1.25rem,2.4vw,1.7rem);
  font-weight:600;letter-spacing:-.02em;line-height:1.15;
  margin-bottom:12px;
}
.prosa{max-width:64ch;display:flex;flex-direction:column;gap:1em}
.prosa p{font-size:1.02rem;line-height:1.65}
.seccion .prosa{color:rgba(10,26,19,.82)}
.seccion.oscura .prosa,.seccion.verde .prosa{color:rgba(251,250,244,.82)}

/* ---------- filas grandes (listas de peso) ---------- */
.fila{
  position:relative;isolation:isolate;display:block;
  padding:clamp(18px,3.2vh,34px) clamp(10px,1vw,16px);
}
.fila::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:var(--linea-clara);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--ease-expo);
}
.fila.visto::before,html:not(.js) .fila::before{transform:scaleX(1)}
.fila:last-of-type::after{
  content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;
  background:var(--linea-clara);
}
.fila .cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap}
.fila .nombre{
  font-size:clamp(1.6rem,4vw,3rem);
  font-weight:600;letter-spacing:-.03em;line-height:1.05;
  transition:color .35s var(--ease-expo),transform .35s var(--ease-expo);
}
.fila .detalle{
  font-size:.85rem;color:var(--humo-tinta);max-width:34ch;text-align:right;
}
.fila .cuerpo{margin-top:12px;max-width:60ch;font-size:.98rem;color:rgba(10,26,19,.75)}
.seccion.oscura .fila::before,.seccion.oscura .fila:last-of-type::after{background:var(--linea-oscura)}
.seccion.oscura .fila .detalle{color:var(--humo)}
.seccion.oscura .fila .cuerpo{color:rgba(251,250,244,.75)}
a.fila{cursor:pointer}
a.fila .lava{
  position:absolute;inset:0;z-index:-1;background:var(--noche);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .38s var(--ease-inout);
}
@media (hover:hover){
  a.fila:hover .lava{transform:scaleY(1)}
  a.fila:hover .nombre{color:var(--crema);transform:translateX(18px)}
  a.fila:hover .detalle,a.fila:hover .cuerpo{color:var(--humo)}
}
@media (max-width:760px){.fila .detalle{display:none}}

/* ---------- rejilla de tarjetas sobrias ---------- */
.rejilla-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,56px)}
.rejilla-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3vw,44px)}

/* ---------- botones y enlaces ---------- */
.boton{
  display:inline-block;position:relative;
  font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 30px;border-radius:999px;overflow:hidden;
  transition:color .3s var(--ease-inout),transform .12s var(--ease);
}
.boton::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--verde);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease-inout);
}
.boton:hover::before{transform:scaleX(1)}
.boton:active{transform:scale(.97)}
.boton.claro{background:var(--tinta);color:var(--crema)}
.boton.invertido{background:var(--crema);color:var(--verde)}
.boton.invertido:hover{color:var(--crema)}
.boton.oscuro{background:var(--verde-vivo);color:var(--noche)}
.boton.oscuro:hover{color:var(--crema)}
.enlace{
  font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .35s var(--ease-inout);padding-bottom:3px;
}
.enlace:hover{background-size:100% 1px}
.pie-seccion{margin-top:clamp(30px,5vh,52px)}

/* ---------- pie de página ---------- */
.pagina-pie{
  background:var(--noche);color:var(--humo);
  padding:clamp(48px,8vh,80px) clamp(20px,4vw,48px) 40px;
  border-top:1px solid var(--linea-oscura);
}
.pie-arriba{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;max-width:1200px;margin:0 auto}
.pie-firma img{height:24px;width:auto;opacity:.9;margin-bottom:20px}
.pie-firma p{font-size:.88rem;line-height:1.6;max-width:34ch}
.pie-columna{display:flex;flex-direction:column;gap:10px;font-size:.85rem}
.pie-columna a{transition:color .2s}
.pie-columna a:hover{color:var(--crema)}
.pie-titulo{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--verde-vivo);margin-bottom:6px}
.pie-abajo{display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between;margin-top:clamp(40px,7vh,64px);padding-top:22px;border-top:1px solid var(--linea-oscura);font-size:.76rem;max-width:1200px;margin-left:auto;margin-right:auto}
@media (max-width:760px){.pie-arriba{grid-template-columns:1fr;gap:36px}}

/* ---------- lo que va saliendo con el scroll ---------- */
@media (prefers-reduced-motion: no-preference){
  html.js .revela{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-expo),transform .7s var(--ease-expo)}
  html.js .revela.visto{opacity:1;transform:none}
  html.js .ceja.revela{transform:translateY(14px);transition-duration:.6s}
  html.js .ceja.revela.visto{transform:none}
}
@media (prefers-reduced-motion: reduce){
  .boton,.boton::before,a.fila .lava,.fila .nombre{transition:none}
  .fila::before{transform:scaleX(1)}
}

/* ============================================================
   BARRA MÓVIL Y CTA FLOTANTE — rescatados del diseño anterior
   (Christian, 24/08/2026: «no veo el menú de pie ni el CTA flotante»)
   ============================================================ */
.barra-movil{display:none}
.cta-flotante-pila{display:none}

@media (max-width:900px){
  .barra-movil{
    position:fixed;left:12px;right:12px;
    bottom:max(10px,env(safe-area-inset-bottom));
    z-index:25;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:62px;padding:6px;gap:2px;
    border:1px solid var(--linea-oscura);border-radius:6px;
    background:rgba(10,24,17,.92);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    box-shadow:0 18px 50px rgba(0,0,0,.5);
  }
  .barra-movil a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    color:rgba(251,250,244,.62);border-radius:4px;padding:6px 2px;
    font-size:.58rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    text-align:center;line-height:1.1;transition:color .2s var(--ease),background .2s var(--ease);
  }
  .barra-movil a svg{width:20px;height:20px;flex:none}
  .barra-movil a img{width:20px;height:20px;object-fit:contain}
  .barra-movil a[aria-current="page"]{color:var(--verde-vivo);background:rgba(79,174,124,.1)}
  .barra-movil a:active{background:rgba(251,250,244,.06)}

  /* la barra no debe tapar el final de la página ni el telón */
  body{padding-bottom:86px}
  .telon{padding-bottom:90px}

  .cta-flotante-pila{
    display:flex;flex-direction:column;gap:8px;align-items:flex-end;
    position:fixed;right:14px;bottom:calc(86px + max(10px,env(safe-area-inset-bottom)));
    z-index:24;
  }
}
@media (min-width:901px){
  .cta-flotante-pila{
    display:flex;flex-direction:column;gap:10px;align-items:flex-end;
    position:fixed;right:22px;bottom:22px;z-index:24;
  }
}
.cta-flotante{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px;border-radius:999px;
  background:var(--verde-vivo);color:var(--noche);
  font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .4s var(--ease-expo),transform .4s var(--ease-expo),background .25s;
}
.cta-flotante svg{width:16px;height:16px;flex:none}
.cta-flotante-pila.visible .cta-flotante{opacity:1;transform:none;pointer-events:auto}
.cta-flotante.secundario{
  background:rgba(10,24,17,.92);color:var(--crema);
  border:1px solid var(--linea-oscura);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
@media (hover:hover){
  .cta-flotante:hover{background:var(--verde);color:var(--crema)}
  .cta-flotante.secundario:hover{background:var(--noche-2);color:var(--verde-vivo)}
}
@media (prefers-reduced-motion: reduce){
  .cta-flotante{transition:none}
}

/* ============================================================
   LA RESERVA — el calendario y el formulario de /agenda

   Esta sección no existía. El rediseño de 2026 no tenía ni una
   regla de formulario: ni input, ni textarea, ni label. Su único
   control era .boton. Por eso /agenda se quedó con el diseño
   viejo hasta el 26 de agosto de 2026.

   🔴 LOS NOMBRES DE ABAJO NO SON DECORACIÓN.
   agenda.js CREA los elementos .day-btn y .slot y les pone las
   clases .active, .selected y .unavailable; y a #bookingNotice le
   PISA el className entero con 'notice' o 'notice error'. Cambiar
   cualquiera de esos seis nombres deja la reserva sin estilo o sin
   respuesta visible. Ver docs/revision-estetica-26-agosto.md.
   ============================================================ */

.agenda-rejilla{display:grid;grid-template-columns:370px 1fr;gap:clamp(18px,2.4vw,32px);align-items:start}

.panel{
  border:1px solid var(--linea-clara);border-radius:4px;
  background:var(--crema);padding:clamp(22px,3vw,34px);
}
.panel-titulo{display:flex;flex-direction:column;gap:10px}
.panel-titulo .ceja{color:var(--verde)}
.panel-titulo h2{
  font-size:clamp(1.35rem,2.4vw,1.7rem);font-weight:700;
  letter-spacing:-.025em;line-height:1.15;text-wrap:balance;
}
.panel-titulo p{color:var(--humo-tinta);font-size:.94rem}

/* ---------- los días ---------- */
.dias{display:grid;gap:8px;margin-top:22px;max-height:560px;overflow:auto;padding-right:4px}
.day-btn{
  border:1px solid var(--linea-clara);background:transparent;
  border-radius:3px;padding:16px 18px;text-align:left;cursor:pointer;
  color:var(--tinta);font-family:var(--sans);font-weight:600;font-size:.94rem;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.day-btn small{
  display:block;margin-top:4px;font-weight:400;font-size:.78rem;
  letter-spacing:.04em;color:var(--humo-tinta);
}
.day-btn.active{background:var(--tinta);color:var(--crema);border-color:var(--tinta)}
.day-btn.active small{color:rgba(251,250,244,.72)}
@media (hover:hover){ .day-btn:hover{border-color:var(--verde)} }

/* ---------- los horarios ---------- */
.horarios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:22px}
.slot{
  border:1px solid var(--linea-clara);background:var(--crema);
  border-radius:3px;padding:14px 8px;text-align:center;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--tinta);
  font-variant-numeric:tabular-nums;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.slot.selected{background:var(--verde);border-color:var(--verde);color:var(--crema)}
.slot.unavailable{
  background:var(--crema-2);color:rgba(10,26,19,.38);
  cursor:not-allowed;text-decoration:line-through;
}
@media (hover:hover){ .slot:not(.unavailable):hover{border-color:var(--verde)} }

.leyenda{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:.76rem;color:var(--humo-tinta)}
.leyenda span{display:inline-flex;align-items:center;gap:7px}
.leyenda span::before{content:"";width:10px;height:10px;border-radius:2px;border:1px solid var(--linea-clara)}
.leyenda .es-libre::before{background:var(--crema)}
.leyenda .es-elegido::before{background:var(--verde);border-color:var(--verde)}
.leyenda .es-ocupado::before{background:var(--crema-2)}

/* ---------- el formulario ----------
   Los selectores van SIEMPRE dentro de .campo: una regla suelta de
   input o de label pintaría cualquier formulario futuro del sitio. */
.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo.ancho{grid-column:1/-1}
.campo label{
  font-family:var(--sans);font-weight:600;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--verde);
}
.campo input,.campo textarea{
  border:1px solid var(--linea-clara);border-radius:3px;
  padding:14px 15px;background:var(--crema);
  font-family:var(--sans);font-size:.96rem;color:var(--tinta);
  outline:none;transition:border-color .2s var(--ease);
}
.campo textarea{min-height:120px;resize:vertical;line-height:1.5}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(10,26,19,.38)}
.campo input:focus,.campo textarea:focus{border-color:var(--verde)}
.campo input:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--verde-vivo);outline-offset:2px}

.campo .boton{width:100%;justify-content:center}
.letra-chica{margin-top:16px;font-size:.8rem;line-height:1.5;color:var(--humo-tinta)}
.letra-chica a{color:var(--verde);border-bottom:1px solid currentColor}

/* ---------- el aviso ----------
   display:none de base: agenda.js lo pone en block cuando hay algo
   que decir, y le pisa el className entero. */
.notice{
  display:none;margin-top:18px;padding:16px 18px;border-radius:3px;
  background:rgba(79,174,124,.12);border:1px solid rgba(79,174,124,.3);
  color:#0E3A23;font-size:.94rem;line-height:1.55;
}
.notice.error{background:rgba(154,75,51,.1);border-color:rgba(154,75,51,.3);color:#5A2A14}
.loading{display:none;margin-top:18px;color:var(--humo-tinta);font-size:.9rem}

@media (max-width:900px){
  .agenda-rejilla{grid-template-columns:1fr}
  .dias{max-height:none}
}
@media (max-width:560px){
  .horarios{grid-template-columns:repeat(2,minmax(0,1fr))}
  .campos{grid-template-columns:1fr}
}

/* El <button> del formulario. .boton se diseñó para <a>, así que en un
   <button> hay que quitarle el borde y devolverle la tipografía. */
button.boton{border:0;cursor:pointer;font-family:var(--sans)}

/* El resumen de la cita, dentro del héroe oscuro de /agenda. */
.resumen-cita{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);
  margin-top:clamp(34px,6vh,60px);padding-top:clamp(26px,4vh,40px);
  border-top:1px solid var(--linea-oscura);
}
.resumen-cita .ceja{color:var(--verde-vivo)}
.resumen-cita .fuerte{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.resumen-cita .apunte{font-size:.86rem;line-height:1.5;color:rgba(251,250,244,.62)}
@media (max-width:760px){ .resumen-cita{grid-template-columns:1fr;gap:24px} }

/* ============================================================
   LA GESTIÓN DE LA CITA — /conversacion/<id>

   Donde quien reservó ve su cita, la reagenda o la cancela.
   Portada al diseño de 2026 el 26 de agosto de 2026.

   🔴 conversacion.js se agarra al HTML por DIECINUEVE identificadores
   y escribe OCHO clases. De las que aparecen acá, la que NO se puede
   renombrar es `open`: el guion se la pone al panel de reagendado
   (conversacion.js:154) y sin la regla de abajo el panel no aparece
   nunca. Las demás —day-btn, slot, active, selected, unavailable,
   notice— ya viven arriba, en la sección de la reserva.
   Los contenedores se eligen por ID, así que sus clases sí son libres.
   ============================================================ */

.tarjeta-gestion{
  max-width:680px;margin:0 auto;
  border:1px solid var(--linea-clara);border-radius:4px;
  background:var(--crema);padding:clamp(26px,4vw,48px);
}
.gestion-ceja{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--verde);margin-bottom:10px;
}
.tarjeta-gestion h1{
  font-size:clamp(1.9rem,4vw,2.9rem);font-weight:700;
  letter-spacing:-.035em;line-height:1.05;text-wrap:balance;
}
.gestion-datos{border-top:1px solid var(--linea-clara);margin-top:clamp(24px,4vh,36px)}
.gestion-fila{
  display:grid;grid-template-columns:130px 1fr;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--linea-clara);
  align-items:start;font-size:.96rem;
}
.gestion-fila:last-of-type{border-bottom:0}
.gestion-fila .rotulo{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--verde);font-weight:600;padding-top:3px;
}
.gestion-fila .dato{color:var(--tinta);line-height:1.5;word-break:break-word}
.acciones{display:flex;gap:10px;margin-top:clamp(26px,4vh,36px);flex-wrap:wrap}

/* variantes de botón que la gestión necesita y no existían */
.boton.linea{border:1px solid var(--linea-clara);color:var(--tinta)}
.boton.linea:hover{color:var(--crema)}
.boton.riesgo{border:1px solid rgba(154,75,51,.35);color:#8B2C15}
.boton.riesgo::before{background:#8B2C15}
.boton.riesgo:hover{color:var(--crema)}

/* los tres estados de la tarjeta */
.aviso-estado{
  padding:14px 18px;border-radius:3px;font-size:.95rem;
  margin-bottom:clamp(20px,3vh,28px);
}
.aviso-estado.malo{background:rgba(154,75,51,.1);border:1px solid rgba(154,75,51,.3);color:#5A2A14}
.aviso-estado.bien{background:rgba(79,174,124,.12);border:1px solid rgba(79,174,124,.3);color:#0E3A23}
.cargando-tarjeta{text-align:center;padding:60px 0;color:var(--humo-tinta)}

/* el panel de reagendado. `open` lo pone conversacion.js: NO renombrar. */
.panel-reagendar{
  margin-top:clamp(24px,4vh,32px);padding:clamp(18px,3vw,26px);
  background:var(--crema-2);border-radius:3px;display:none;
}
.panel-reagendar.open{display:block}
.panel-reagendar h2{
  font-size:1.15rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;
}
.panel-reagendar .apunte{font-size:.9rem;color:var(--humo-tinta);margin-bottom:4px}
.panel-reagendar .dias{max-height:280px;margin-top:14px}
.panel-reagendar .horarios{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px}

@media (max-width:560px){
  .gestion-fila{grid-template-columns:1fr;gap:4px}
  .gestion-fila .rotulo{padding-top:0}
  .panel-reagendar .horarios{grid-template-columns:repeat(3,minmax(0,1fr))}
}