/* atienden.css -- el grupo «Quien atiende citas» de Ajustes > Equipo y permisos y su hoja (public/ajustes-atienden.js; lienzo aprobado por Daniel el 14 oct 2026).
   Solo tokens de Cuarto Oscuro: filas sin cajas ni rayas, pildora = se toca, 16 px = flota (la hoja es la ventana de siempre). El color de cada persona
   es DATO suyo y va en linea (style="background:#..."), no es un token. Todo cuelga de .at-* para no chocar con nada. */
.at-caja{ display:flex; flex-direction:column; container-type:inline-size; container-name:at; }
.at-texto{ margin:0 0 var(--e-3); max-width:56ch; color:var(--texto); font-size:var(--t-texto); }
.at-ayuda{ margin:var(--e-2) 0 0; font-size:var(--t-meta); color:var(--medio); }

.at-fila{ display:flex; align-items:center; gap:var(--e-3); padding:10px 0; }
.at-fila.at-apagada{ opacity:.5; }
.at-fila.at-aparte{ margin-top:var(--e-2); }
.at-f1{ flex:1; min-width:0; }
.at-nom{ display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap; font-size:var(--t-texto); font-weight:500; color:var(--tinta); overflow-wrap:anywhere; }
.at-nom.at-liviano{ font-weight:400; }
.at-meta{ display:block; margin-top:2px; font-size:var(--t-meta); color:var(--medio); }
.at-acc{ display:flex; align-items:center; gap:var(--e-2); flex:none; flex-wrap:wrap; justify-content:flex-end; }
.at-punto{ flex:none; width:12px; height:12px; border-radius:50%; }
.at-pill{ display:inline-flex; align-items:center; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:22px; padding:0 10px; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--texto); font-size:var(--t-meta); font-weight:400; }
.at-pie{ margin-top:var(--e-3); }

/* La hoja. El pie fijo: es mas alta que una ventana de 600 px y «Guardar» no puede quedar bajo el corte (el lienzo lo dibujo siempre a la vista). */
.modal.at-modal .mfoot{ position:sticky; bottom:0; z-index:2; background:var(--hoja); }
.at-hoja .field{ margin-bottom:var(--e-4); }
.at-sep{ height:1px; background:var(--linea); margin:var(--e-2) 0 var(--e-4); }
.at-colores{ display:flex; gap:var(--e-3); flex-wrap:wrap; }
.at-color{ position:relative; width:28px; height:28px; padding:0; border:0; border-radius:50%; cursor:pointer; }
.at-color:before{ content:""; position:absolute; inset:-8px; }
.at-color.on{ box-shadow:0 0 0 2px var(--hoja), 0 0 0 4px var(--tinta); }
.at-color:focus-visible{ outline:2px solid var(--tinta); outline-offset:4px; }
.at-casilla, .at-radio{ display:flex; align-items:flex-start; gap:var(--e-3); min-height:44px; padding:var(--e-2) 0; cursor:pointer; }
.at-casilla input, .at-radio input{ flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--boton); }
.at-horas{ margin-top:var(--e-2); }
.at-fila-sw{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-5); padding:var(--e-2) 0; }
.at-sw{ position:relative; flex:none; width:44px; height:26px; border:0; border-radius:var(--r-pildora); background:var(--piedra-on); cursor:pointer; padding:0; }
.at-sw:after{ content:""; position:absolute; top:4px; left:4px; width:18px; height:18px; border-radius:50%; background:var(--apagado); }
.at-sw:before{ content:""; position:absolute; inset:-9px 0; }
.at-sw[aria-checked="true"]{ background:var(--boton); }
.at-sw[aria-checked="true"]:after{ left:22px; background:var(--boton-t); }
.at-sw:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }

/* Angosto: las acciones bajan a su propio renglon, de ancho completo y con 44 px (el lienzo, tablero 6). Se mide por el ancho de la COLUMNA (container query) y no por el de la
   ventana: con el chat abierto a Ajustes le tocan ~360 px aunque la ventana mida 800 o 1280, y la fila se aplastaba (la misma trampa de #/saber y de las pestanas del portal). */
@container at (max-width: 560px){
  .at-fila{ flex-wrap:wrap; align-items:flex-start; }
  .at-acc{ width:100%; padding-left:calc(12px + var(--e-3)); display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .at-acc .btn{ min-height:44px; justify-content:center; }
  .at-acc .btn:nth-child(1):nth-last-child(3), .at-acc .btn:only-child{ grid-column:1 / -1; }   /* «Copiar enlace» (o «Reactivar») a todo lo ancho; Editar y Desactivar, lado a lado */
  .at-fila.at-aparte .at-acc{ padding-left:0; }
  .at-pie .btn{ width:100%; min-height:44px; }
}