/* ============================================================================
   Reservas en linea (#/citas) y el editor de un enlace (#/reserva/<id>): la fase 3.5 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 "en pausa" se pinta
   de rojo: es un estado, no una alarma).

   Se carga despues de cuarto-oscuro.css y en su propio archivo (styles.css es el mas caliente del repo). Con el chat de Xarpie abierto 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.
   ============================================================================ */
.au, .ae{ max-width:1200px; container-type:inline-size; }
/* #view es overflow:auto pero NO es quien scrollea (scrollea .main): la barra de cambios es sticky y se pegaba a un marco que nunca se mueve. Como el calendario y el editor de
   paginas, #view deja de ser un marco con scroll propio mientras esta pantalla esta montada. */
.main > #view:has(.au), .main > #view:has(.ae){ overflow:visible; }
.au-cols{ display:flex; gap:var(--e-7); align-items:flex-start; }
.au-main{ flex:1; min-width:0; }
.ae .au-main{ max-width:820px; }
.au-prev{ width:352px; flex:none; position:sticky; top:var(--e-5); }
.au-sub{ margin:var(--e-1) 0 0; max-width:64ch; font-size:var(--t-texto); line-height:1.5; color:var(--medio); }

/* El enlace y su estado */
.au-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-3); margin-top:var(--e-5); }
.au-pildora{ display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:0 var(--e-3); border-radius:var(--r-pildora); background:var(--piedra-on); font-size:var(--t-meta); color:var(--texto); white-space:nowrap; }
.au-pt{ width:6px; height:6px; border-radius:50%; background:var(--medio); }
.au-pildora.ok .au-pt{ background:var(--ok); }
.au-url{ position:relative; flex:1 1 220px; max-width:440px; display:flex; align-items:center; }
.au-url .inp{ padding-right:44px; text-overflow:ellipsis; }
.au-url .au-ic{ position:absolute; right:4px; }
.au-ic{ flex:none; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--apagado); cursor:pointer; }
@media (hover:hover){ .au-ic:hover{ background:var(--tinte-toque); color:var(--tinta); } }

/* Secciones */
.au-sec{ margin-top:var(--e-7); }
.au-sec[hidden]{ display:none; }
.au-sec-cab{ display:flex; align-items:flex-start; gap:var(--e-4); flex-wrap:wrap; }
.au-sec-t{ font-size:var(--t-sub); font-weight:500; color:var(--tinta); }
.au-sec-s{ margin-top:2px; max-width:64ch; font-size:var(--t-meta); line-height:1.5; color:var(--medio); }
.au-der{ margin-left:auto; display:flex; align-items:center; gap:var(--e-3); }
.au-pidele{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 var(--e-3); border:0; background:transparent; font:inherit; font-size:var(--t-meta); color:var(--medio); cursor:pointer; }
@media (hover:hover){ .au-pidele:hover{ color:var(--tinta); } }

/* Filas: sin cajas ni rayas */
.au-filas{ margin-top:var(--e-2); }
.au-fila{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-4); min-height:64px; padding:var(--e-2) var(--e-3); margin:0 calc(var(--e-3) * -1); border-radius:var(--r); }
.au-fila-tocable{ cursor:pointer; }
@media (hover:hover){ .au-fila-tocable:hover{ background:var(--tinte-toque); } }
.au-fila-t{ flex:1 1 160px; min-width:0; }
.au-n{ font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.au-l{ flex:1; font-weight:400; color:var(--texto); }
.au-s{ margin-top:2px; font-size:var(--t-meta); color:var(--medio); overflow-wrap:anywhere; }
.au-ext{ margin-left:auto; display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:var(--e-3); }
.au-mini{ flex:none; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--piedra-on); color:var(--tinta); }
.au-tono{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--medio); }
.au-off .au-n, .au-off .au-s{ color:var(--apagado); }
.au-precio{ font-size:var(--t-texto); color:var(--texto); font-variant-numeric:tabular-nums; }
.au-link{ display:inline-flex; align-items:center; gap:2px; 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; }
@media (hover:hover){ .au-link:hover{ color:var(--tinta); } }
.au-vacio{ padding:var(--e-4) 0; }
.au-vacio-t{ font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.au-vacio-d{ font-size:var(--t-texto); line-height:1.5; color:var(--medio); }

/* Horarios */
.au-fila-hor{ min-height:56px; }
.au-dias{ display:flex; flex-wrap:wrap; gap:var(--e-1); }
.au-dia{ min-width:40px; min-height:34px; padding:0 var(--e-2); border:0; border-radius:var(--r-pildora); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); font:inherit; font-size:var(--t-meta); color:var(--texto); cursor:pointer; }
.au-dia.on{ background:var(--boton); color:var(--boton-t); box-shadow:none; font-weight:500; }
.au-hora{ width:136px; }
.au-a{ font-size:var(--t-meta); color:var(--medio); }
.au-aviso{ flex-basis:100%; margin:0; font-size:var(--t-meta); color:var(--medio); }
.au-otro{ margin-top:var(--e-2); }
.au-nota{ display:flex; align-items:flex-start; gap:var(--e-2); margin:var(--e-3) 0 0; font-size:var(--t-meta); line-height:1.5; color:var(--medio); }
.au-nota .ico{ flex:none; margin-top:2px; }
.au-nota .au-link{ min-height:0; font-size:inherit; }
.au-nota-s{ font-size:var(--t-meta); color:var(--medio); }
.au-nuevo-enl{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-3); margin-top:var(--e-3); }
.au-pie-nota{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-3); margin-top:var(--e-7); padding-top:var(--e-4); border-top:1px solid var(--linea); font-size:var(--t-texto); color:var(--medio); }
.au-pie-nota .au-link{ margin-left:auto; }

/* La vista previa */
.au-prev-cab{ display:flex; align-items:center; margin:0 0 var(--e-2); }
.au-prev-t{ font-size:var(--t-meta); color:var(--apagado); }
.au-prev-cab .au-link{ margin-left:auto; font-size:var(--t-meta); }
.au-prev-nota{ margin-top:var(--e-2); font-size:var(--t-meta); color:var(--apagado); }
/* La vista previa es una hoja de papel (crema) aunque el CRM sea oscuro; sus tarjetas si toman el tono del tema (Cuarto Oscuro), y su titulo tiene que seguirlas o queda oscuro sobre oscuro. */
.au-prev .cig-prev-card-t{ color:var(--tinta); }

/* La barra de cambios sin guardar: flota abajo, al centro de la pagina */
.au-guardar{ position:sticky; bottom:var(--e-4); z-index:var(--z-pegajoso); display:flex; align-items:center; gap:var(--e-3); width:fit-content; max-width:100%; margin:var(--e-6) auto 0; padding:var(--e-2) var(--e-2) var(--e-2) var(--e-5); border-radius:var(--r-flota); background:var(--menu); box-shadow:var(--sombra-flota); }
.au-guardar[hidden]{ display:none; }
.au-g-n{ margin-right:var(--e-3); font-size:var(--t-texto); color:var(--tinta); }

@container (max-width:980px){
  .au-cols{ flex-direction:column; gap:var(--e-6); }
  .au-prev{ position:static; width:auto; align-self:stretch; }
}
@container (max-width:640px){
  /* En una solicitud son cuatro controles (etiqueta, Confirmar, Otra fecha, Rechazar): bajan a su propia linea. Un interruptor y un lapiz caben junto al nombre. */
  .au-fila-por .au-ext{ flex-basis:100%; justify-content:flex-start; margin-left:0; }
  .au-hora{ width:128px; }
  .au-guardar{ flex-wrap:wrap; justify-content:flex-end; }
}

/* ------------------------------ El editor de un enlace (#/reserva/<id>) ------------------------------ */
.au-volver{ display:inline-flex; align-items:center; gap:4px; min-height:32px; margin-left:-6px; padding:0 6px; border:0; border-radius:var(--r); background:transparent; font:inherit; font-size:var(--t-texto); color:var(--medio); cursor:pointer; }
.au-volver .ico{ transform:rotate(90deg); }
@media (hover:hover){ .au-volver:hover{ color:var(--tinta); } }
.ae-cab{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:var(--e-4); margin-top:var(--e-2); }
.ae-estado{ margin-left:auto; display:flex; align-items:center; gap:var(--e-3); }
.au-opts{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-3); }
.au-opt{ min-height:34px; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); font:inherit; font-size:var(--t-texto); color:var(--texto); cursor:pointer; }
.au-opt.on{ background:var(--boton); color:var(--boton-t); box-shadow:none; font-weight:500; }
.ae-campo{ margin-top:var(--e-4); }
.ae-lab{ display:block; margin:0 0 var(--e-2); font-size:var(--t-meta); color:var(--medio); }
.ae-slug{ position:relative; display:flex; align-items:center; gap:var(--e-2); }
.ae-slug .inp{ flex:1; min-width:0; }
.ae-pref{ flex:none; font-size:var(--t-texto); color:var(--apagado); }
.ae-slug .au-ic{ flex:none; }
.ae-preg .inp{ flex:1 1 220px; }
.ae-req{ display:inline-flex; align-items:center; gap:var(--e-2); font-size:var(--t-meta); color:var(--medio); cursor:pointer; white-space:nowrap; }
.ae-cuando-cuerpo{ margin-top:var(--e-3); }
.ae-fechas{ margin-top:var(--e-4); }
.ae-fechas-t{ margin:0; }
.ae-gen{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); margin-top:var(--e-2); }
.ae-mas{ margin-top:var(--e-7); }
.ae-mas summary{ cursor:pointer; list-style:none; min-height:32px; display:flex; align-items:center; }
.ae-mas summary::-webkit-details-marker{ display:none; }
.ae-mas summary::after{ content:""; width:7px; height:7px; margin-left:var(--e-3); border-right:1.5px solid var(--medio); border-bottom:1.5px solid var(--medio); transform:rotate(45deg); }
.ae-mas[open] summary::after{ transform:rotate(-135deg); }
.ae-cierre{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-3); margin-top:var(--e-7); padding-top:var(--e-4); border-top:1px solid var(--linea); }
.ae-cierre-der{ margin-left:auto; display:flex; align-items:center; gap:var(--e-3); }