: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}
  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)}
  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}
  header nav button{background:rgba(255,255,255,.12);color:#EAF7F0}
  header nav button.on{background:var(--sand);color:#243018}

  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}
  /* 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}
  .appt.res{opacity:.72;border:1.5px dashed rgba(255,255,255,.7)}

  /* pacientes */
  table{width:100%;border-collapse:collapse;font-size:.9rem}
  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)}
  .chip{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.72rem;font-weight:600}
  .chip.ok{background:var(--mint);color:var(--pine)} .chip.no{background:#FBE9E4;color:var(--danger)}

  /* modal */
  .overlay{position:fixed;inset:0;background:rgba(15,34,29,.45);display:none;
           place-items:center;z-index:10;padding:16px}
  .overlay.show{display:grid}
  .modal{width:min(440px,94vw);max-height:90vh;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}