/* ============================================================================
   Citas: "Hoy" y "Despues de reservar" (fase 2c de Citas con Xarpie; lienzo aprobado por Daniel el 2026-09-21).
   Solo tokens de cuarto-oscuro.css (--pag, --piedra, --tinta, --medio, --e-*, --r-*...): ningun color, sombra ni duracion escritos a mano
   (paridad-cuarto-oscuro). Forma: pildora = se toca; 16 px = flota; 4 px = contenido. Filas sin cajas ni rayas.
   Color solo si significa algo: aqui no hay ninguno (ni el "no llego" se pinta de rojo: es un dato, no una alarma).

   Se carga despues de cuarto-oscuro.css, en su propio archivo (styles.css es el mas caliente del repo). Con el chat de Xarpie abierto a la
   izquierda el CRM puede medir 400 px aunque la ventana mida 1280: el acomodo se decide por el espacio de la PAGINA (container query), no por el
   de la ventana.
   ============================================================================ */
.ct-hoy, .ct-dr{ max-width:1120px; container-type:inline-size; }
.ct-nota{ margin:var(--e-4) 0 0; font-size:var(--t-texto); line-height:1.5; color:var(--medio); }
.ct-grupo{ margin:var(--e-6) 0 var(--e-2); font-size:var(--t-meta); color:var(--apagado); }
.ct-link{ min-height:32px; padding:0; border:0; background:transparent; font:inherit; font-size:var(--t-texto); color:var(--medio); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.ct-link:hover{ color:var(--tinta); }

/* ------------------------------ Hoy ------------------------------ */
.ct-cifras{ display:flex; flex-wrap:wrap; gap:var(--e-5) var(--e-7); margin:var(--e-5) 0 0; }
.ct-eti{ font-size:var(--t-meta); color:var(--apagado); }
.ct-num{ margin-top:var(--e-1); font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; color:var(--tinta); font-variant-numeric:tabular-nums; }
.ct-fila{ display:grid; grid-template-columns:72px minmax(0,1fr) 168px auto; gap:var(--e-4); align-items:center; min-height:68px; padding:0 var(--e-3); margin:0 calc(var(--e-3) * -1); border-radius:var(--r); }
@media (hover:hover){ .ct-fila:hover{ background:var(--tinte-toque); } }
.ct-hora{ font-size:var(--t-sub); font-weight:500; color:var(--tinta); font-variant-numeric:tabular-nums; }
.ct-quien{ display:flex; flex-direction:column; min-width:0; color:inherit; text-decoration:none; }
.ct-nom{ font-size:var(--t-texto); font-weight:500; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-sub{ margin-top:3px; font-size:var(--t-meta); color:var(--medio); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-conf{ display:inline-flex; align-items:center; gap:var(--e-2); font-size:var(--t-texto); color:var(--texto); }
.ct-conf .ico{ color:var(--medio); }
.ct-punto{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--medio); }
.ct-acc{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--e-3); }
.ct-res{ display:inline-flex; align-items:center; gap:var(--e-2); font-size:var(--t-texto); color:var(--medio); }
.ct-falta{ font-size:var(--t-texto); color:var(--medio); }
.ct-acc .btn .ico{ margin-right:var(--e-2); }
.ct-fila-nota{ padding:0 0 var(--e-2) calc(72px + var(--e-4)); font-size:var(--t-meta); }
@container (max-width:640px){
  .ct-fila{ grid-template-columns:52px minmax(0,1fr); row-gap:var(--e-2); padding-top:var(--e-3); padding-bottom:var(--e-3); }
  .ct-conf-col{ grid-column:2; }
  .ct-acc{ grid-column:2; justify-content:flex-start; }
  .ct-acc .btn{ flex:1; min-height:44px; }
  .ct-fila-nota{ padding-left:calc(52px + var(--e-4)); }
}

/* ------------------------------ Despues de reservar ------------------------------ */
.ct-dos{ display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:var(--e-7); margin-top:var(--e-2); }
.ct-paso{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--e-5); padding:14px 0; }
.ct-cuando{ padding-top:2px; font-size:var(--t-texto); color:var(--medio); font-variant-numeric:tabular-nums; }
.ct-paso-c{ min-width:0; max-width:540px; }
.ct-paso-cab{ display:flex; align-items:center; gap:var(--e-3); min-height:28px; }
.ct-paso-t{ font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.ct-paso-auto{ margin-left:auto; font-size:var(--t-meta); color:var(--apagado); }
.ct-paso-cab .cv-sw{ margin-left:auto; }
.ct-paso-s{ margin-top:var(--e-1); font-size:var(--t-texto); line-height:1.5; color:var(--medio); }
.ct-paso-n{ margin-top:var(--e-2); font-size:var(--t-meta); line-height:1.5; color:var(--apagado); }
.ct-opts{ margin-top:var(--e-3); }
.ct-dr .cv-sw:disabled, .ct-dr .cv-seg button:disabled, .ct-dr .inp:disabled{ opacity:.45; cursor:default; }
.ct-ir{ display:inline-flex; align-items:center; gap:var(--e-1); margin-top:var(--e-2); text-decoration:none; }
.ct-ir .ico{ transform:rotate(-90deg); }   /* el icono es un chevron hacia abajo: aqui apunta a la derecha */
.ct-campo{ margin-top:var(--e-3); }
.ct-campo label{ display:block; margin-bottom:var(--e-1); font-size:var(--t-meta); color:var(--apagado); }
.ct-prev{ align-self:start; position:sticky; top:var(--e-5); margin-top:36px; padding:var(--e-4); border-radius:var(--r-flota); background:var(--piedra); box-shadow:var(--sombra-flota); }
.ct-prev-cab{ display:flex; align-items:center; gap:var(--e-3); min-height:32px; }
.ct-prev-eti{ margin-right:auto; font-size:var(--t-meta); color:var(--apagado); }
.ct-tab{ min-height:32px; padding:0 var(--e-2); border:0; border-radius:var(--r); background:transparent; font:inherit; font-size:var(--t-texto); color:var(--medio); cursor:pointer; }
.ct-tab.on{ color:var(--tinta); font-weight:500; }
.ct-asu{ margin-top:var(--e-3); }
.ct-asu-de{ font-size:var(--t-meta); color:var(--apagado); }
.ct-asu-t{ margin-top:2px; font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.ct-marco{ display:block; width:100%; min-height:420px; margin-top:var(--e-3); border:0; border-radius:var(--r); background:var(--pag); }
.ct-prev-off{ padding:var(--e-5) var(--e-1) var(--e-3); font-size:var(--t-texto); line-height:1.5; color:var(--medio); }
@container (max-width:900px){
  .ct-dos{ grid-template-columns:minmax(0,1fr); gap:var(--e-5); }
  .ct-prev{ position:static; margin-top:var(--e-2); }
}
@container (max-width:620px){
  .ct-paso{ grid-template-columns:minmax(0,1fr); gap:var(--e-1); padding:var(--e-4) 0; }
  .ct-cuando{ padding-top:0; font-size:var(--t-meta); color:var(--apagado); }
  .ct-opts button{ min-height:44px; }
  .ct-paso-cab .cv-sw{ min-width:48px; }
}

/* ------------------------------ El editor de un servicio (dentro de la ventana) ------------------------------ */
.ct-serv-g{ margin:var(--e-5) 0 var(--e-2); font-size:var(--t-meta); color:var(--apagado); }
.ct-serv-cuenta{ display:flex; gap:var(--e-3); font-size:var(--t-meta); color:var(--apagado); }
.ct-serv-cuenta span:last-child{ margin-left:auto; font-variant-numeric:tabular-nums; }
.ct-serv-pista{ margin-top:var(--e-1); font-size:var(--t-meta); line-height:1.5; color:var(--apagado); }