/* ════════════════════════════════════════════════════════════════════════
   CIFRA Clínicas · la escena de la cabecera (19-oct-2026)
   «La agenda que se llena sola»: a las 21:47 una paciente pregunta por WhatsApp, el
   asistente (que dice que lo es) le da cita con la Dra. Marín, la cita cae en el hueco
   del viernes 16:30 de la agenda y el jueves confirma con un toque. Clínica Nácar y la
   Dra. Lucía Marín son inventadas (las de la landing de CIFRA Estética). Las dudas
   médicas, siempre a la doctora: el asistente no contesta «¿me dejará marca?».
   ════════════════════════════════════════════════════════════════════════ */
.t-clinicas .escena-viva { --esc-papel: #FFFFFF; --esc-tinta: #1C2620; --esc-tinta-2: #56645B; --esc-linea: #E3E8E2; }
.t-clinicas .escena-viva__caja { aspect-ratio: 1 / 1.06; }

.c-chat { left: 0; top: 0; width: 50%; z-index: 2; }
.c-chat .ventana__cab { background: #4F6B5A; color: #FFFFFF; border: 0; }
.c-chat .ventana__cab small { color: #D7E6DB; }
.c-chat .ventana__cuerpo { height: 25em; padding: .75em; justify-content: flex-end; overflow: hidden; }
.c-chat .burbuja { font-size: .86em; }
.c-huecos { display: flex; gap: .35em; margin-top: .4em; }
.c-huecos span { padding: .3em .6em; border-radius: 999px; border: 1px solid #C4CCC5; font: 500 .9em/1 var(--f-dato); color: #4F6B5A; background: #F2F4F0; transition: background-color .3s, color .3s; }
.c-huecos span.elegido { background: #4F6B5A; color: #FFFFFF; border-color: #4F6B5A; }

.c-agenda { right: 0; top: 6%; width: 48%; z-index: 1; }
.c-agenda .ventana__cuerpo { padding: .8em .9em 1em; }
.c-rejilla { display: grid; grid-template-columns: 2.4em repeat(5, 1fr); gap: .28em; font-size: .78em; }
.c-rejilla > b { font: 500 .9em/1 var(--f-dato); color: #56645B; text-align: center; padding-bottom: .2em; }
.c-rejilla > em { font: 500 .85em/2.4em var(--f-dato); font-style: normal; color: #7D8A81; }
.c-rejilla > i { height: 2.4em; border-radius: .45em; background: #F2F4F0; }
.c-rejilla > i.ocupada { background: #E2EBE3; box-shadow: inset .2em 0 0 #6E9A7E; }
.c-rejilla > i.primera { background: #F3E4DE; box-shadow: inset .2em 0 0 #C29A8C; }
.c-rejilla > i.nueva { position: relative; background: #F2F4F0; }
.c-rejilla > i.nueva.llena { background: #F3E4DE; box-shadow: inset .2em 0 0 #C29A8C, 0 0 0 .16em #4F6B5A; animation: llena .7s var(--salida); }
.c-rejilla > i.nueva.llena::after { content: "Marta"; position: absolute; left: .55em; top: 50%; transform: translateY(-50%); font: 600 .82em/1 var(--f-texto); color: #865749; }
@keyframes llena { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.c-leyenda { display: flex; gap: 1em; margin-top: .8em; font-size: .72em; color: #56645B; }
.c-leyenda span::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .4em; border-radius: .2em; vertical-align: -.1em; background: #E2EBE3; box-shadow: inset .18em 0 0 #6E9A7E; }
.c-leyenda span + span::before { background: #F3E4DE; box-shadow: inset .18em 0 0 #C29A8C; }
.c-ocupacion { display: flex; justify-content: space-between; align-items: baseline; margin-top: .7em; padding-top: .6em; border-top: 1px solid #E3E8E2; font-size: .8em; color: #56645B; }
.c-ocupacion b { font: 500 1.6em/1 var(--f-dato); color: #1C2620; letter-spacing: -0.03em; }

.c-creada { right: 4%; top: 52%; z-index: 4; }
.c-recuerda { right: 2%; bottom: 0; width: 56%; z-index: 3; }
.c-recuerda .ventana__cab { background: #FFFFFF; }
.c-botones { display: flex; gap: .4em; margin-top: .55em; }
.c-botones span { flex: 1; padding: .5em; border-radius: .6em; text-align: center; font-size: .82em; font-weight: 600; color: #027EB5; background: #F4F7F6; transition: background-color .3s, color .3s; }
.c-botones span.pulsado { background: #4F6B5A; color: #FFFFFF; }
.c-confirmada { right: 3%; bottom: 29%; z-index: 4; }

@container (max-width: 440px) {
  .t-clinicas .escena-viva__caja { aspect-ratio: 1 / 1.72; font-size: 3.3cqw; }
  .c-chat { width: 80%; }
  .c-chat .ventana__cuerpo { height: 17em; }
  .c-agenda { width: 76%; top: 41%; right: 0; z-index: 3; }
  .c-recuerda { width: 82%; left: 0; right: auto; }
  .c-creada { top: 37.2%; right: 2%; }
  .c-confirmada { right: 2%; bottom: 24%; }
}