: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;z-index:6}
  /* La esquina y la columna de HORAS quedan fijas al hacer scroll lateral:
     sin esto, en el móvil te desplazas a la tarde y ya no sabes qué hora miras. */
  .head:first-child{left:0;z-index:7}
  .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);
        position:sticky;left:0;background:var(--surface);z-index:5}
  .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:4;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{ }

/* vista MES: clases (antes estilos en línea) para poder compactarla en móvil */
.mes-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.mes-dow{text-align:center;font-size:.75rem;color:var(--soft);font-weight:700}
.mes-dia{min-height:74px;border:1px solid var(--line);border-radius:8px;padding:6px;cursor:pointer}
.mes-dia .num{font-size:.78rem;font-weight:700;color:var(--soft)}
.mes-dia .cuantas{font-size:.92rem;font-weight:700;margin-top:2px}
.mes-dia.fuera{opacity:.35}
.mes-dia.hoy{outline:2px solid var(--emerald)}

/* Botón flotante «+» de nueva cita: existe siempre en el DOM de la agenda,
   pero solo se muestra en móvil (en escritorio ya está el de la toolbar). */
.fab{display:none}

/* 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}

  /* En iOS, un campo con fuente <16px hace ZOOM al recibir el foco y
     descoloca toda la página: 16px reales en cualquier campo de formulario. */
  input,select,textarea{font-size:16px}

  /* Agenda: columnas más estrechas para que quepan más días con scroll,
     filas más ALTAS (dedo, no ratón) y texto de cita legible. La altura de
     fila (33+1px) tiene su gemela en agenda.js (ROW_MOVIL): cambiar juntas. */
  .grid{grid-template-columns:44px repeat(var(--cols),minmax(118px,1fr))}
  .head{font-size:.74rem;padding:6px 4px}
  .hour{font-size:.7rem;padding:3px 4px}
  .cell{min-height:33px}
  .appt{font-size:.78rem;padding:4px 7px}
  .toolbar{gap:7px}
  .toolbar button{padding:8px 11px;font-size:.85rem}
  /* La leyenda de colores/estados ocupaba 3 líneas de pantalla: fuera. El
     estado ya se ve en cada cita (borde/iconos) y en los chips de la lista. */
  .legend{display:none}
  /* Botones que en móvil sobran de la toolbar (el FAB los sustituye o son
     de escritorio): */
  .toolbar .solo-escritorio{display:none}
  .fab{display:flex;position:fixed;right:16px;
       bottom:calc(16px + env(safe-area-inset-bottom, 0px));width:58px;height:58px;
       border-radius:50%;align-items:center;justify-content:center;font-size:2rem;
       line-height:1;background:var(--emerald);color:#fff;padding:0;z-index:40;
       box-shadow:0 6px 18px rgba(14,90,71,.4)}
  /* Vista mes compacta */
  .mes-grid{gap:4px}
  .mes-dia{min-height:56px;padding:4px;border-radius:6px}
  .mes-dia .cuantas{font-size:.8rem}

  /* Desplegables de la cabecera (campana de novedades y búsqueda global):
     van anclados a su icono con right:0 (estilos en línea de shared.js) y en
     móvil el icono queda a la IZQUIERDA → el panel de 320px se salía de la
     pantalla y las notificaciones se veían cortadas. En móvil se fijan a lo
     ancho de la pantalla, bajo la primera fila de la cabecera. */
  #novLista, #buscaGlobalLista{
    position:fixed !important;
    left:10px !important; right:10px !important; top:58px !important;
    width:auto !important; min-width:0 !important; max-height:62vh !important;
  }

  /* 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}
}


/* ── Impresión: el parte del día ──
   Al imprimir desde la agenda (vista Lista o Día) solo sale el contenido:
   ni cabecera, ni navegación, ni botones. El fisio se lleva su hoja. */
@media print {
  header, .toolbar, .legend, .nav-toggle, button, .btn-ghost, .btn-primary { display: none !important; }
  body { background: #fff; }
  .card { border: none; box-shadow: none; }
}