/* ==========================================================================
   pelo.css — El «tiempo según el pelo» (PELUQUERIAS-ARQUITECTURA).
   --------------------------------------------------------------------------
   Dos partes: .pl-* en la página donde pide cita la clienta (citas.css, con
   el color de la peluquería en --ct-acento) y .pp-* en su panel (gestion.css,
   con --acento). Botones de 48 px como mínimo, como el resto.
   ========================================================================== */

/* ---------- Los dibujos ---------- */
.pl-dibujo { display: block; width: 56px; height: 56px; flex: 0 0 auto; }

/* ---------- La página: «¿Cómo es tu pelo?» ---------- */
.pl-pregunta { border: 0; margin: 0 0 1.2rem; padding: 0; min-width: 0; }
.pl-pregunta__titulo { font-weight: 700; font-size: 1.02rem; margin-bottom: .5rem; padding: 0; }
.pl-respuestas { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: .45rem; }
.pl-respuestas--texto { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pl-respuesta {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  min-height: 48px; padding: .6rem .4rem; text-align: center; cursor: pointer;
  background: #fff; border: 1px solid var(--ct-linea, #E4E0DC); border-radius: var(--ct-radio, 14px);
}
.pl-respuesta:hover { border-color: var(--ct-acento); }
.pl-respuesta.is-elegida { border: 2px solid var(--ct-acento); padding: calc(.6rem - 1px) calc(.4rem - 1px); background: color-mix(in srgb, var(--ct-acento) 7%, #fff); }
.pl-respuesta__nombre { font-size: .92rem; line-height: 1.25; }
.pl-respuesta.is-elegida .pl-respuesta__nombre { font-weight: 700; color: var(--ct-acento-texto, var(--ct-acento)); }
/* El botón de radio de verdad, invisible pero con su foco a la vista */
.pl-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pl-respuesta:has(.pl-radio:focus-visible) { outline: 3px solid var(--ct-acento); outline-offset: 2px; }
.pl-pie { margin: .4rem 0 1rem; padding: .8rem 1rem; border-radius: var(--ct-radio, 14px); background: #fff; border: 1px solid var(--ct-linea, #E4E0DC); }
.pl-pie:empty { display: none; }
.pl-total { margin: 0; font-size: 1.08rem; }
.pl-total strong { color: var(--ct-acento-texto, var(--ct-acento)); }
.pl-desglose { margin: .2rem 0 0; color: var(--ct-gris, #6B6560); font-size: .88rem; }
.pl-falta { margin: 0; color: var(--ct-gris, #6B6560); }
.pl-nota { text-align: center; margin-top: .8rem; }

/* ---------- El panel ---------- */
.pp-linea { font-size: .88rem; margin-top: .15rem; }
.pp-h4 { font-size: .98rem; margin: .9rem 0 .4rem; }
.pp-hoja { border-top: 1px solid var(--linea, #E3DFDB); margin-top: .8rem; padding-top: .2rem; }
.pp-resultado { margin: .5rem 0; }
.pp-choca { margin: .5rem 0; padding: .6rem .8rem; border-radius: 10px; background: #FFF4E5; border-left: 4px solid #B26A00; color: #5C3700; }

/* Marcar el pelo (nueva cita, hoja de la cita, ficha): botones que se marcan y se desmarcan */
.pp-elegir { margin: .5rem 0 .7rem; }
.pp-elegir__nombre { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.pp-elegir__opciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.pp-opcion {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .25rem .7rem .25rem .35rem;
  font: inherit; font-size: .9rem; color: inherit; background: #fff; cursor: pointer;
  border: 1px solid var(--linea, #E3DFDB); border-radius: 999px;
}
.pp-opcion .pl-dibujo { width: 34px; height: 34px; }
.pp-opcion:hover { border-color: var(--acento); }
.pp-opcion.is-elegida { border: 2px solid var(--acento); padding: calc(.25rem - 1px) calc(.7rem - 1px) calc(.25rem - 1px) calc(.35rem - 1px); font-weight: 700; }
.pp-opcion:not(:has(svg)) { padding-left: .8rem; }

/* La pestaña «El pelo»: preguntas */
.pp-pregunta { border: 1px solid var(--linea, #E3DFDB); border-radius: 12px; padding: .8rem; margin: 0 0 .8rem; background: #fff; }
.pp-pregunta--apagada { background: #F4F2EF; }
.pp-pregunta--apagada .pp-respuestas, .pp-pregunta--apagada .pp-nueva-resp, .pp-pregunta--apagada .pp-pregunta__ayuda { opacity: .6; }
.pp-pregunta__cab { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pp-pregunta__nombre { flex: 1 1 220px; font-weight: 700; font-size: 1rem; }
.pp-pregunta__cab .c-casilla { margin: 0; }
.pp-pregunta__orden { display: inline-flex; gap: .3rem; }
.pp-pregunta__ayuda { width: 100%; margin: .5rem 0; font-size: .9rem; }
.pp-respuestas { list-style: none; margin: .3rem 0; padding: 0; display: grid; gap: .4rem; }
.pp-respuesta { display: flex; align-items: center; gap: .4rem; }
.pp-respuesta .pl-dibujo { width: 36px; height: 36px; }
.pp-respuesta input { flex: 1 1 auto; min-width: 0; }
.pp-nueva-resp { display: flex; gap: .4rem; margin-top: .4rem; }
.pp-nueva-resp input { flex: 1 1 auto; min-width: 0; }

/* La pestaña «El pelo»: servicios y minutos */
.pp-servicios { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pp-servicio { border: 1px solid var(--linea, #E3DFDB); border-radius: 12px; padding: .7rem .8rem; background: #fff; }
.pp-servicio__cab { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pp-servicio__cab .g-mini { margin-left: auto; }
.pp-servicio__lineas { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.pp-servicio p { margin: .3rem 0 0; }
.pp-servicio--editando { border: 2px solid var(--acento); }
.pp-minutos { border: 0; padding: 0; margin: .5rem 0; min-width: 0; }
.pp-minutos__fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; margin: .3rem 0 0 1.75rem; }
.pp-min { display: flex; flex-direction: column; gap: .15rem; font-size: .88rem; }
.pp-min__caja { display: flex; align-items: center; gap: .3rem; }
.pp-min input { width: 5.5rem; }
.pp-minutos__fila--precio { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pp-minutos__fila--precio .pp-min input { width: 4.2rem; }
.pp-min input[aria-invalid="true"] { border-color: #B3261E; }
.pp-previa { margin: .8rem 0; padding: .7rem .9rem; border-radius: 10px; background: #F6F3FB; }
.pp-previa ul { margin: .3rem 0; padding-left: 1.1rem; }
.pp-previa p { margin: .2rem 0 0; }

/* «Otro (¿cuál?)»: la clienta escribe cuál (28/10/2026) */
.pl-otro { display: block; margin-top: .6rem; }
.pp-otro { display: block; margin-top: .45rem; width: min(100%, 320px); }
.pp-respuesta--otro { font-size: .9rem; color: var(--gris, #6B6560); font-style: italic; padding: .2rem 0; }