:root{
    --paper:#F6FAF7; --surface:#FFFFFF; --ink:#0F221D; --soft:#5A6E66;
    --pine:#0E5A47; --emerald:#12A47B; --mint:#DCF1E3; --line:#DCE8E1;
    --sand:#E9B44C; --danger:#C0492F;
    --shadow:0 10px 30px rgba(14,60,47,.10);
  }
  *{box-sizing:border-box}
  /* Nada desborda la página a lo ancho (el móvil no debe hacer scroll lateral);
     las tablas y la agenda tienen su PROPIO scroll interno (.card/.cal). */
  html,body{max-width:100%;overflow-x:hidden}
  body{margin:0;font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;
       background:var(--paper);color:var(--ink);font-size:15px}
  button{font-family:inherit;cursor:pointer;border:none;border-radius:9px;
         padding:9px 14px;font-weight:600;font-size:.9rem}
  .btn-primary{background:var(--emerald);color:#fff}
  .btn-ghost{background:var(--mint);color:var(--pine)}
  input,select{font-family:inherit;font-size:.92rem;padding:9px 11px;
       border:1px solid var(--line);border-radius:9px;width:100%;background:#fff;color:var(--ink)}
  /* Las casillas y radios NO son campos de texto: sin el width:100%/padding de
     arriba (los estiraba a fila completa y descuadraba cualquier formulario). */
  input[type="checkbox"],input[type="radio"]{
       width:auto;flex:none;padding:0;margin:0;border:none;background:none;
       accent-color:var(--pine);transform:scale(1.15);transform-origin:left center}
  label{font-size:.78rem;color:var(--soft);font-weight:600;display:block;margin:10px 0 4px}

  /* topbar */
  header{display:flex;align-items:center;gap:14px;padding:12px 20px;
         background:var(--pine);color:#EAF7F0}
  header .logo{font-weight:700;font-size:1.1rem;letter-spacing:.02em}
  header .logo b{color:var(--sand)}
  header .who{margin-left:auto;font-size:.85rem;opacity:.9}
  header nav{display:flex;gap:6px;flex-wrap:wrap}
  header nav button{background:rgba(255,255,255,.12);color:#EAF7F0}
  header nav button.on{background:var(--sand);color:#243018}
  /* Botón hamburguesa: oculto en escritorio, visible solo en móvil (media query). */
  .nav-toggle{display:none;background:rgba(255,255,255,.15);color:#fff}

  main{padding:18px 20px;max-width:1200px;margin:0 auto}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
        box-shadow:var(--shadow);padding:18px}

  /* login */
  .login-wrap{min-height:70vh;display:grid;place-items:center}
  .login{width:min(360px,92vw)}
  .login h1{font-size:1.3rem;margin:0 0 4px;color:var(--pine)}
  .login p{margin:0 0 14px;color:var(--soft);font-size:.9rem}

  /* toolbar agenda */
  .toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
  .toolbar .range{font-weight:700;color:var(--pine)}
  .toolbar .sp{flex:1}
  .legend{display:flex;gap:14px;font-size:.78rem;color:var(--soft);flex-wrap:wrap}
  .legend b{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}

  /* calendario */
  .cal{overflow-x:auto}
  .grid{display:grid;grid-template-columns:56px repeat(var(--cols),minmax(150px,1fr));
        border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
  .head{background:var(--mint);color:var(--pine);font-weight:700;font-size:.82rem;
        padding:8px;text-align:center;border-bottom:1px solid var(--line);position:sticky;top:0}
  .prof{font-size:.72rem;font-weight:600}
  .hour{font-size:.72rem;color:var(--soft);padding:4px 6px;text-align:right;
        border-bottom:1px dashed var(--line);border-right:1px solid var(--line)}
  .cell{border-bottom:1px dashed var(--line);border-right:1px solid var(--line);
        min-height:26px;position:relative;cursor:pointer}
  .cell:hover{background:#F0F8F3}
  /* Fuera del horario de apertura (Ajustes → Horarios): sombreado sutil con
     rayas para ver de un vistazo cuándo abre la clínica. No bloquea: se puede
     citar igual (una excepción puntual fuera de horario). */
  .cell.fuera-horario{
    background:repeating-linear-gradient(45deg,
      rgba(91,113,102,.05) 0 6px, rgba(91,113,102,.10) 6px 12px);
  }
  .cell.fuera-horario:hover{background:#F0F8F3}
  /* las citas van SIEMPRE por encima de las celdas: una cita larga sobresale
     hacia la celda de abajo y no debe quedar tapada al pasar el ratón */
  .appt{position:absolute;left:3px;right:3px;border-radius:7px;padding:4px 6px;z-index:3;
        color:#fff;font-size:.72rem;line-height:1.2;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.2)}
  .appt:hover{z-index:5;box-shadow:0 3px 10px rgba(14,60,47,.35)}
  .appt .n{font-weight:700}
  /* Estado de la cita (el color de fondo = el profesional):
     · reservada  → tentativa: más clara y con borde discontinuo
     · confirmada → sólida (icono ✓ en el texto)
     · atendida   → sólida con marco interior claro (icono ✓✓) = «hecha»
     · no asistió → marco ROJO + nombre tachado (icono ✗) = «no vino» */
  .appt.estado-reservada{opacity:.6;border:1.6px dashed rgba(255,255,255,.9)}
  .appt.estado-confirmada{border:1.5px solid rgba(255,255,255,.55)}
  .appt.estado-atendida{box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
  .appt.estado-no_asistio{outline:2.5px solid var(--danger);outline-offset:-2.5px;opacity:.92}
  .appt.estado-no_asistio .n{text-decoration:line-through;text-decoration-thickness:1.5px}

  /* pacientes */
  table{width:100%;border-collapse:collapse;font-size:.9rem}
  /* Tablas anchas (Facturación tiene 6 botones por fila): la TARJETA hace
     scroll horizontal en vez de dejar que la tabla se salga del borde, y los
     botones dentro de celdas se compactan para que quepa la fila entera. */
  .card{overflow-x:auto}
  td .btn-ghost,td .btn-primary{padding:5px 9px;font-size:.78rem}
  th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line)}
  th{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--soft)}
  /* Un chip nunca se parte en dos líneas («Pagada · tarjeta» quedaba apilado
     en un óvalo deforme cuando la fila iba justa de ancho). */
  .chip{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.72rem;font-weight:600;white-space:nowrap}
  /* Menú flotante de acciones por fila (botón ⋯): fixed para que el overflow
     de la tarjeta no lo recorte. */
  .menu-acciones{position:fixed;z-index:300;background:#fff;border:1px solid var(--line);
       border-radius:12px;box-shadow:0 8px 28px rgba(14,90,71,.18);padding:6px;
       display:flex;flex-direction:column;min-width:210px}
  .menu-acciones .menu-titulo{font-size:.72rem;font-weight:700;color:var(--soft);
       padding:6px 12px 4px;letter-spacing:.04em}
  .menu-acciones button{background:none;border:none;text-align:left;padding:9px 12px;
       border-radius:8px;font:inherit;font-size:.88rem;color:var(--ink);cursor:pointer;
       white-space:nowrap}
  .menu-acciones button:hover{background:var(--mint)}
  .chip.ok{background:var(--mint);color:var(--pine)} .chip.no{background:#FBE9E4;color:var(--danger)}

  /* modal
     Scrollea el OVERLAY (no el modal) y se centra con margin:auto dentro de un
     flex: así, si el modal es más alto que la pantalla, puedes bajar hasta el
     final sin que se recorte el borde superior, y el desplegable absoluto del
     buscador de pacientes (.autolist) puede salirse del modal sin recortarse
     (por eso el modal se queda en overflow:visible, no overflow:auto). */
  .overlay{position:fixed;inset:0;background:rgba(15,34,29,.45);display:none;
           z-index:10;overflow-y:auto;padding:16px}
  .overlay.show{display:flex}
  .modal{width:min(440px,94vw);margin:auto;overflow:visible}
  .modal h3{margin:0 0 12px;color:var(--pine)}
  .modal .row{display:flex;gap:10px;margin-top:14px}
  .msg{margin-top:10px;font-size:.85rem;padding:8px 10px;border-radius:8px;display:none}
  .msg.err{display:block;background:#FBE9E4;color:var(--danger)}
  .msg.ok{display:block;background:var(--mint);color:var(--pine)}
  .hidden{display:none}
  .empty{text-align:center;color:var(--soft);padding:30px}

/* ───────── drag & drop de citas ───────── */
.appt{cursor:grab; user-select:none}
.appt:active{cursor:grabbing}
.appt.dragging{opacity:.45; outline:2px dashed rgba(255,255,255,.8)}
.cell.dragover{background:var(--mint); box-shadow:inset 0 0 0 2px var(--emerald)}

/* toast de confirmación/error */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--danger); color:#fff; font-weight:600; font-size:.92rem;
  padding:11px 18px; border-radius:12px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:50;
  max-width:min(480px,90vw); text-align:center;
}
.toast.ok{background:var(--pine)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* celdas donde el profesional arrastrado NO trabaja (feedback de drag) */
.grid.arrastrando .cell.nodrop{
  background:repeating-linear-gradient(45deg, #EEF2F0, #EEF2F0 6px, #E4EAE7 6px, #E4EAE7 12px);
  cursor:not-allowed;
}
:root[data-theme="dark"] .grid.arrastrando .cell.nodrop,
.grid.arrastrando .cell.nodrop{ }

/* buscador de pacientes con autocompletado (agenda) */
.autolist{
  position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); max-height:240px; overflow-y:auto; display:none;
}
.autolist.show{display:block}
.autoitem{padding:9px 12px; cursor:pointer; font-size:.9rem; border-bottom:1px solid var(--line)}
.autoitem:last-child{border-bottom:none}
.autoitem:hover{background:var(--mint)}
.autoitem span{color:var(--soft); font-size:.82rem; margin-left:6px}
.autoitem.vacio{color:var(--soft); cursor:default}
.autoitem.vacio:hover{background:transparent}

/* ═══════════════════════ MÓVIL / RESPONSIVE ═══════════════════════════════
   El panel es de uso diario; en el móvil la barra de 15 menús no cabe → menú
   hamburguesa desplegable, agenda con scroll horizontal y columnas más
   estrechas, tablas que ya hacen scroll dentro de su tarjeta. */
@media (max-width: 820px) {
  body{font-size:14.5px}
  main{padding:14px 12px}
  .card{padding:14px;border-radius:13px}

  /* Cabecera: logo + hamburguesa arriba; usuario debajo; nav desplegable. */
  header{flex-wrap:wrap;gap:8px;padding:10px 14px}
  header .logo{font-size:1.05rem}
  header .who{margin-left:0;order:3;width:100%;display:flex;align-items:center;
              gap:6px;font-size:.8rem}
  header .who button{padding:7px 10px;font-size:.8rem}
  .nav-toggle{display:inline-flex;align-items:center;gap:6px;margin-left:auto;
              order:2;font-size:.9rem}
  .nav-toggle-lbl{font-weight:700}
  /* nav oculto por defecto; se despliega a lo ancho al pulsar la hamburguesa. */
  header nav{display:none;order:4;width:100%;flex-direction:column;gap:4px;
             margin-top:4px}
  header nav.abierto{display:flex}
  header nav button{width:100%;text-align:left;padding:11px 14px;font-size:.95rem}

  /* Agenda: columnas más estrechas para que quepan más días con scroll. */
  .grid{grid-template-columns:44px repeat(var(--cols),minmax(112px,1fr))}
  .head{font-size:.74rem;padding:6px 4px}
  .hour{font-size:.66rem;padding:3px 4px}
  .toolbar{gap:7px}
  .toolbar button{padding:8px 11px;font-size:.85rem}

  /* Modales a casi pantalla completa; el scroll lo pone el overlay (arriba),
     no el modal, para no recortar el desplegable del buscador de pacientes. */
  .modal{width:96vw}

  /* Filas de formulario con varios campos en línea → apiladas en móvil. */
  .row{flex-wrap:wrap}
}

/* Pantallas muy pequeñas (móvil en vertical estrecho). */
@media (max-width: 420px) {
  header .logo{font-size:1rem}
  .nav-toggle-lbl{display:none}   /* solo el icono ☰ para ahorrar espacio */
  main{padding:12px 9px}
}