/* =========================================================
   Portal Médico — sistema de diseño compartido
   ========================================================= */

:root{
  --azul-900:#0b2540;
  --azul-800:#0f3358;
  --azul-700:#155080;
  --teal-600:#0f766e;
  --teal-500:#14968c;
  --teal-50:#eefbf9;
  --bg:#f4f7fb;
  --surface:#ffffff;
  --border:#e2e8f0;
  --text:#172033;
  --text-muted:#64748b;
  --amber-50:#fffbeb;
  --amber-400:#f59e0b;
  --amber-700:#92400e;
  --green-50:#ecfdf5;
  --green-600:#10b981;
  --green-700:#166534;
  --red-50:#fef2f2;
  --red-600:#dc2626;
  --red-700:#991b1b;
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --shadow:0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.05);
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3,h4{margin:0 0 .4em;font-weight:800;letter-spacing:-.01em;color:var(--azul-900)}
h1{font-size:2rem}
h2{font-size:1.35rem}
h3{font-size:1.1rem}
p{margin:0 0 1em}
a{color:var(--teal-600)}
.muted{color:var(--text-muted)}
.small{font-size:.85rem}
.center{text-align:center}
.hidden{display:none !important}

/* ---------- Layout wrappers ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:28px 20px 60px}
.wrap-narrow{max-width:520px;margin:0 auto;padding:40px 20px 60px}

/* ---------- Top navbar (paciente) ---------- */
.navbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:16px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;top:0;z-index:20;
}
.navbar{flex-wrap:wrap;row-gap:10px}
.navbar .brand{display:flex;align-items:center;gap:10px}
.navbar .brand .logo{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--teal-600),var(--azul-800));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;
}
.navbar .brand b{font-size:1.15rem;color:var(--azul-900)}
.navbar .brand .tagline{font-size:.78rem;color:var(--text-muted)}
.navbar nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.navbar-toggle{display:none;width:42px;height:42px;border:1px solid var(--border);border-radius:9px;background:#fff;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--azul-900);flex-shrink:0}

/* ---------- Buttons ---------- */
.btn,.btn2,.btn-danger,.btn-block{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:10px;padding:11px 18px;font:inherit;font-weight:700;font-size:.92rem;
  cursor:pointer;text-decoration:none;transition:filter .15s,transform .05s;
}
.btn{background:var(--teal-600);color:#fff}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn-dark{background:var(--azul-900);color:#fff}
.btn-dark:hover{filter:brightness(1.15)}
.btn2{background:#eef2f7;color:var(--text)}
.btn2:hover{background:#e2e8f0}
.btn-danger{background:var(--red-50);color:var(--red-700);border:1px solid #fecaca}
.btn-danger:hover{background:#fee2e2}
.btn-block{width:100%}
.btn[disabled],.btn2[disabled]{opacity:.5;cursor:not-allowed}
.btn-sm{padding:7px 12px;font-size:.82rem;border-radius:8px}
.btn-nav-mes{white-space:nowrap;flex-shrink:0}

/* ---------- Forms ---------- */
label{font-weight:700;font-size:.86rem;display:block;margin-bottom:6px;color:var(--azul-900)}
input,select,textarea{
  width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:9px;
  font:inherit;font-size:.95rem;background:#fff;color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal-500);outline-offset:1px;border-color:var(--teal-500)}
textarea{min-height:90px;resize:vertical}

/* ---------- File inputs (matching the rest of the design system) ---------- */
input[type="file"]{padding:8px;cursor:pointer;color:var(--text-muted);font-size:.88rem}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{
  background:var(--teal-600);color:#fff;border:0;border-radius:8px;
  padding:9px 14px;font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;margin-right:12px;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover{filter:brightness(1.08)}
.field{margin-bottom:16px}

/* ---------- Buscador con sugerencias (autocomplete propio) ---------- */
.autocomplete-list{
  position:absolute;top:100%;left:0;right:0;z-index:30;margin-top:4px;
  background:var(--surface);border:1px solid var(--border);border-radius:9px;
  box-shadow:var(--shadow);max-height:240px;overflow-y:auto;
}
.autocomplete-item{padding:10px 12px;font-size:.9rem;cursor:pointer}
.autocomplete-item:hover{background:var(--teal-50)}
.autocomplete-item:not(:last-child){border-bottom:1px solid var(--border)}
.autocomplete-empty{padding:10px 12px;font-size:.85rem;color:var(--text-muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hint{font-size:.78rem;color:var(--text-muted);margin-top:4px;display:block}
fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:0 0 16px}
legend{font-weight:800;color:var(--azul-900);padding:0 6px}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;margin-bottom:18px;box-shadow:var(--shadow-sm);
}
.card-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}

/* Resalta brevemente una tarjeta que se acaba de abrir/revelar, para que no pase desapercibida */
@keyframes card-flash{
  0%{box-shadow:0 0 0 3px var(--teal-500)}
  100%{box-shadow:var(--shadow-sm)}
}
.card-flash{animation:card-flash 1.1s ease-out}

/* ---------- Confirmación (reemplaza el confirm() feo del navegador) ---------- */
.confirm-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.45);
  display:flex;align-items:center;justify-content:center;z-index:1000;
  opacity:0;pointer-events:none;transition:opacity .18s ease;padding:20px;
}
.confirm-overlay.show{opacity:1;pointer-events:auto}
.confirm-box{
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px;max-width:360px;width:100%;
  transform:scale(.96) translateY(6px);transition:transform .18s ease;
}
.confirm-overlay.show .confirm-box{transform:scale(1) translateY(0)}
.confirm-box p{margin:0 0 18px;font-size:.95rem;color:var(--text);line-height:1.4}
.confirm-box .confirm-actions{display:flex;gap:10px;justify-content:flex-end}

/* ---------- Hero (paciente landing) ---------- */
.hero{
  background:linear-gradient(135deg,#ffffff 0%,var(--teal-50) 60%,#eaf2ff 100%);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;margin-bottom:22px;
}
.hero h1{font-size:2rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.step{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;font-size:.85rem}
.step b{color:var(--teal-600);display:block;font-size:1.1rem;margin-bottom:2px}

/* ---------- Badges / alerts ---------- */
.badge{display:inline-block;padding:5px 10px;border-radius:20px;font-size:.72rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.badge.pending{background:var(--amber-50);color:var(--amber-700)}
.badge.done{background:var(--green-50);color:var(--green-700)}
.badge.info{background:#dbeafe;color:#1d4ed8}
.badge.off{background:#f1f5f9;color:#64748b}
.badge.warn{background:#ffedd5;color:#9a3412}

.notice{background:var(--amber-50);border-left:4px solid var(--amber-400);border-radius:8px;padding:14px 16px;margin:14px 0}
.ok{background:var(--green-50);border-left:4px solid var(--green-600);border-radius:8px;padding:14px 16px;margin:14px 0}
.error{background:var(--red-50);border-left:4px solid var(--red-600);border-radius:8px;padding:14px 16px;margin:14px 0;color:var(--red-700)}
.info-box{background:#eff6ff;border-left:4px solid #3b82f6;border-radius:8px;padding:14px 16px;margin:14px 0}

/* ---------- Calendar ---------- */
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.dow{text-align:center;color:var(--text-muted);font-size:.72rem;font-weight:800;text-transform:uppercase;padding-bottom:4px}
.day{
  background:#fff;border:1px solid var(--border);border-radius:10px;min-height:56px;
  display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;font-size:.95rem;
}
.day.off{background:#f8fafc;color:#cbd5e1;cursor:not-allowed;border-style:dashed}
.day.available{background:var(--teal-50);border-color:#bfe6e1;color:var(--teal-600)}
.day.available:hover{border-color:var(--teal-600)}
.day.selected{outline:2px solid var(--teal-600);background:var(--teal-600);color:#fff}
.day.empty{background:transparent;border:0;cursor:default}

.times{display:flex;gap:8px;flex-wrap:wrap}
.time{padding:10px 14px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;cursor:pointer;font-weight:700;font-size:.9rem}
.time:hover{border-color:var(--teal-600)}
.time.active{background:var(--teal-600);color:#fff;border-color:var(--teal-600)}

/* ---------- Calendario mensual (panel médico) ---------- */
.mcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.mcal-dow{text-align:center;color:var(--text-muted);font-size:.78rem;font-weight:800;text-transform:uppercase;padding-bottom:8px}
.mcal-day{background:#fff;border:1px solid var(--border);border-radius:10px;min-height:118px;padding:9px;display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;cursor:pointer;transition:border-color .1s,background .1s}
a.mcal-day:hover{border-color:var(--teal-600)}
.mcal-day.mcal-empty{background:transparent;border:0;cursor:default}
.mcal-day.mcal-today{border:2px solid var(--teal-600)}
.mcal-day.mcal-selected{background:var(--teal-50);border-color:var(--teal-600)}
.mcal-daynum{font-weight:800;font-size:.95rem}
.mcal-chip{border:1px solid var(--border);border-radius:6px;padding:4px 7px;font-size:.78rem;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.mcal-chip-off{background:#f1f5f9;color:#64748b;font-weight:600;font-style:italic}
.mcal-chip-count{background:#111827;color:#fff;border-color:#111827}
@media(max-width:850px){
  .mcal-grid{grid-template-columns:repeat(7,1fr);gap:3px}
  .mcal-day{min-height:70px;padding:4px}
  .mcal-chip{font-size:.62rem;padding:2px 4px}
  .mcal-daynum{font-size:.72rem}
}

/* ---------- Staff layout (secretaría / panel médico / admin) ---------- */
.staff-shell{display:flex;min-height:100vh}
.sidebar{
  width:230px;flex-shrink:0;background:var(--azul-900);color:#fff;
  padding:22px 16px;display:flex;flex-direction:column;gap:4px;
}
.sidebar .brand{display:flex;align-items:center;gap:10px;margin-bottom:24px;padding:0 6px}
.sidebar .brand .logo{width:34px;height:34px;border-radius:9px;background:var(--teal-600);display:flex;align-items:center;justify-content:center;font-weight:800}
.sidebar .brand b{font-size:1rem}
.sidebar a{
  color:#c9d6e6;text-decoration:none;padding:10px 12px;border-radius:9px;font-size:.9rem;font-weight:600;
  display:flex;align-items:center;gap:10px;
}
.sidebar a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar a.active{background:var(--teal-600);color:#fff}
.sidebar .role-tag{margin-top:auto;padding:12px;font-size:.75rem;color:#9fb3c8;border-top:1px solid rgba(255,255,255,.1)}
.staff-main{flex:1;min-width:0}
.staff-topbar{
  background:#fff;border-bottom:1px solid var(--border);padding:16px 28px;
  display:flex;justify-content:space-between;align-items:center;
}
.staff-content{padding:24px 28px 60px;max-width:1100px}
.staff-content.staff-content-wide{max-width:1500px}

@media(max-width:900px){
  .staff-shell{flex-direction:column}
  .sidebar{width:100%;flex-direction:row;overflow-x:auto;padding:12px}
  .sidebar .brand{display:none}
  .sidebar .role-tag{display:none}
  .sidebar a{white-space:nowrap}
}

/* ---------- Patient list card (secretaría) ---------- */
.patient{background:#fff;border:1px solid var(--border);border-left:6px solid transparent;border-radius:var(--radius);margin-bottom:18px;overflow:hidden;box-shadow:var(--shadow-sm)}
.patient.patient-presente{border-left-color:var(--green-600);background:linear-gradient(to right, var(--green-50), #fff 90px)}
.patient.patient-tarde{border-left-color:var(--amber-400);background:linear-gradient(to right, var(--amber-50), #fff 90px)}
.patient.patient-ausente{border-left-color:var(--red-600);background:linear-gradient(to right, var(--red-50), #fff 90px)}
.patient .phead{padding:18px 20px;display:flex;gap:18px;align-items:center;border-bottom:1px solid #edf0f4;flex-wrap:wrap}
.patient .ptime{font-size:1.5rem;font-weight:800;min-width:76px;color:var(--teal-600)}
.patient .pname{font-size:1.2rem;font-weight:800}
.patient .pbody{padding:18px 20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.box{background:#f8fafc;border-radius:11px;padding:13px}
.box .label{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;font-weight:700;margin-bottom:5px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

@media(max-width:850px){
  .two,.three,.steps,.grid3{grid-template-columns:1fr!important}
  .calendar{grid-template-columns:repeat(7,1fr);gap:4px}
  .day{min-height:42px;font-size:.82rem;border-radius:8px}
  .dow{font-size:.62rem;padding-bottom:2px}
  .wrap{padding:20px 14px 50px}
}

/* ---------- Historia clínica unificada (documento + comentarios al lado) ---------- */
.doc-layout{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.doc-main{background:#fff}
.doc-current{border:1px solid var(--teal-500);border-radius:var(--radius);padding:16px;background:var(--teal-50)}
.doc-section{margin-top:26px;padding-top:20px;border-top:1px dashed var(--border)}
.doc-entry{padding:14px;margin-bottom:12px;border:1px solid var(--border);border-radius:12px;background:#fbfbfc}
.doc-entry:last-child{margin-bottom:0}
.doc-entry .label{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;font-weight:700;margin-bottom:4px}

/* ---------- Evoluciones pasadas: grilla de fichas tipo "bloc de notas" ---------- */
.notas-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.nota-card{
  width:168px;min-height:130px;border:1px solid var(--border);border-radius:12px;
  padding:14px;cursor:pointer;background:#fff;position:relative;
  display:flex;flex-direction:column;gap:6px;
  border-top:4px solid var(--teal-500);
  transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease;
}
.nota-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--teal-500)}
.nota-card .nota-icono{font-size:1.15rem;opacity:.7}
.nota-card .nota-fecha{font-size:.7rem;font-weight:800;color:var(--teal-600);text-transform:uppercase;letter-spacing:.02em}
.nota-card .nota-titulo{
  font-size:.85rem;color:var(--text);line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
}
.nota-modal-box{
  max-width:860px;width:100%;text-align:left;max-height:90vh;overflow-y:auto;
  padding:34px;background:#fffefb;
  border-left:6px solid var(--teal-500);
}
.nota-vista{line-height:1.7;font-size:1.02rem}
.nota-edit-editor{min-height:280px}

/* ---------- Vincular archivos a una evolución ---------- */
.vinculo-panel{border:1px dashed var(--border);border-radius:10px;padding:14px;background:var(--teal-50)}
.vinculo-panel h4{margin:0 0 4px;font-size:.85rem;text-transform:uppercase;letter-spacing:.02em;color:var(--teal-600)}
.vinculo-lista{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto;margin-top:8px}
.vinculo-item{display:flex;align-items:center;gap:8px;font-size:.88rem;padding:4px 2px}
.vinculo-item .tag-turno{font-size:.72rem;color:var(--muted);white-space:nowrap}
.vinculo-relacionados ul{margin:4px 0 0 18px;padding:0}
.doc-side{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto}
.doc-comment-thread{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.doc-comment-thread:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
@media(max-width:1000px){
  .doc-layout{grid-template-columns:1fr}
  .doc-side{position:static;max-height:none}
}

/* ---------- Grabar consulta (resumen de evolución por IA) ---------- */
.ia-record-box{border:1px solid var(--border);border-radius:var(--radius);padding:26px 20px;text-align:center;background:#fafafa;margin-top:18px}
.ia-record-box .ia-mic{font-size:2.2rem;line-height:1}
.ia-consider{border:1px solid #fcd34d;background:#fffbeb;border-radius:var(--radius);padding:16px 18px;margin-top:16px}
.ia-consider h3{margin:0 0 6px;font-size:1rem}
.ia-consider ul{margin:0;padding-left:20px}
.ia-consider li{margin-bottom:6px}
html{scroll-behavior:smooth}
.lp-title{scroll-margin-top:80px}

/* ---------- Editor de evolución (negrita / color) ---------- */
.rte-toolbar{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.rte-btn{width:30px;height:30px;border:1px solid var(--border);border-radius:7px;background:#fff;cursor:pointer;font-size:.85rem;padding:0}
.rte-btn:hover{border-color:var(--teal-600)}
.rte-sep{width:1px;height:20px;background:var(--border);margin:0 4px}
.rte-color{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border);cursor:pointer;padding:0}
.rte-color-reset{background:#fff;color:#111827;font-size:.72rem;font-weight:800;box-shadow:0 0 0 1px var(--border);width:22px;height:22px;border-radius:50%}
.rte-editor{
  min-height:140px;border:1px solid var(--border);border-radius:9px;padding:12px 14px;
  font-size:.95rem;line-height:1.5;background:#fff;
}
.rte-editor:focus{outline:2px solid var(--teal-600);outline-offset:-1px}
.rte-editor:empty:before{content:attr(data-placeholder);color:var(--text-muted)}

/* ---------- Portada (presentación del sistema) ---------- */
.lp-hero{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:60px 44px;margin-bottom:22px;color:#fff;background:linear-gradient(135deg,var(--azul-900) 0%,var(--azul-700) 60%,var(--teal-600) 130%)}
.lp-hero::before{content:"";position:absolute;right:-90px;top:-90px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,.38),transparent 70%)}
.lp-hero::after{content:"";position:absolute;left:-70px;bottom:-110px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.28),transparent 70%)}
.lp-hero>*{position:relative;z-index:1}
.lp-badge{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:6px 14px;border-radius:99px;font-size:.78rem;font-weight:700;letter-spacing:.04em;margin-bottom:18px}
.lp-hero h1{font-size:3.2rem;line-height:1.05;margin:0 0 16px;color:#fff;letter-spacing:-.02em}
.lp-hero p{font-size:1.12rem;max-width:660px;color:#d3e2f2;margin:0}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.lp-btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:10px;border:1.5px solid rgba(255,255,255,.55);color:#fff;font-weight:700;text-decoration:none}
.lp-btn-ghost:hover{background:rgba(255,255,255,.12)}
.lp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:38px}
.lp-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center;box-shadow:var(--shadow-sm)}
.lp-stat b{display:block;font-size:2rem;color:var(--teal-600);line-height:1.1}
.lp-stat span{font-size:.85rem;color:var(--text-muted)}
.lp-title{font-size:1.8rem;margin:44px 0 6px;letter-spacing:-.01em}
.lp-sub{color:var(--text-muted);margin:0 0 22px;max-width:700px}
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s}
.lp-feature:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.lp-feature .lp-ico{width:46px;height:46px;border-radius:12px;background:var(--teal-50);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:14px}
.lp-feature h3{font-size:1.05rem;margin:0 0 6px}
.lp-feature p{font-size:.9rem;color:var(--text-muted);margin:0}
.lp-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-role{background:var(--surface);border:1px solid var(--border);border-top:4px solid var(--teal-600);border-radius:var(--radius);padding:22px}
.lp-role h3{margin:0 0 12px}
.lp-role ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:.92rem;color:var(--text)}
.lp-ai{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;background:linear-gradient(135deg,var(--azul-900),var(--azul-800));color:#fff;border-radius:var(--radius-lg);padding:40px;margin-top:44px}
.lp-ai h2{color:#fff;font-size:1.8rem;margin:0 0 12px}
.lp-ai p{color:#c9d9ec;margin:0 0 10px}
.lp-ai ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.lp-ai li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:#e6eef8}
.lp-ai li b{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--teal-500);display:flex;align-items:center;justify-content:center;font-size:.8rem}
.lp-mock{background:#fff;color:var(--text);border-radius:var(--radius);padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.lp-mock .lp-rec{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--red-600);margin-bottom:12px}
.lp-mock .lp-rec i{width:10px;height:10px;border-radius:50%;background:var(--red-600);display:inline-block}
.lp-mock .lp-line{height:9px;border-radius:5px;background:#e8edf3;margin-bottom:8px}
.lp-mock .lp-draft{border-top:1px dashed var(--border);margin-top:14px;padding-top:12px;font-size:.85rem}
.lp-sedes{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;margin-top:44px}
.lp-qrbox{text-align:center}
.lp-qrbox #lpQr{display:inline-block;padding:12px;background:#fff;border:1px solid var(--border);border-radius:14px}
.lp-qrbox #lpQr img,.lp-qrbox #lpQr canvas{width:170px!important;height:170px!important}
.lp-contact{margin-top:44px;text-align:center;border-radius:var(--radius-lg);padding:44px 28px;color:#fff;background:linear-gradient(135deg,var(--teal-600),var(--azul-700))}
.lp-contact h2{color:#fff;font-size:1.7rem;margin:0 0 10px}
.lp-contact p{color:#dff5f2;margin:0 auto 20px;max-width:560px}
.lp-contact a.lp-link{color:#fff;font-weight:800;text-decoration:underline}
@media(max-width:850px){
  .lp-hero{padding:40px 22px}
  .lp-hero h1{font-size:2.3rem}
  .lp-stats,.lp-grid,.lp-roles,.lp-ai,.lp-sedes{grid-template-columns:1fr}
  .lp-ai,.lp-sedes{padding:24px}
}

/* ---------- Tablas: scroll horizontal propio, nunca desbordan la página ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:700px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  table thead,table tbody{display:table;width:100%}
}

/* ---------- Navbar en mobile: los botones se esconden en un menú con hamburguesa ---------- */
@media(max-width:600px){
  .navbar{padding:12px 16px;flex-wrap:nowrap}
  .navbar .brand .tagline{display:none}
  .navbar .brand b{font-size:1rem}
  .navbar .brand .logo{width:32px;height:32px;font-size:14px}
  .navbar-toggle{display:flex;align-items:center;justify-content:center}
  .navbar nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;text-align:center;
    background:var(--surface);border-bottom:1px solid var(--border);
    padding:14px 20px;gap:10px;box-shadow:var(--shadow);
  }
  .navbar nav.show{display:flex}
  .navbar nav .btn,.navbar nav .btn2{padding:10px 14px;font-size:.9rem;justify-content:center}
}

/* ---------- Ajustes para teléfonos chicos ---------- */
@media(max-width:480px){
  h1{font-size:1.5rem}
  h2{font-size:1.15rem}
  .wrap{padding:14px 12px 40px}
  .card{padding:16px}
  .hero{padding:20px}
  .staff-content{padding:16px 14px 50px}
  .staff-topbar{padding:12px 16px}
  table th,table td{padding:8px 9px;font-size:.82rem}
  .btn,.btn2,.btn-dark,.btn-danger{padding:10px 14px;font-size:.88rem}
  .btn-nav-mes{padding:6px 10px;font-size:.78rem}
  #mesLabel{font-size:.85rem}
  .grid3,.two,.three{gap:10px}
  .time{padding:9px 12px;font-size:.85rem}
}

/* ---------- Wizard de reserva de turno (un paso a la vez, en el mismo lugar) ---------- */
.resumen-paso-item{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 12px;background:var(--teal-50);border-radius:9px;margin-bottom:8px;font-size:.88rem;
}
.resumen-paso-item span{font-weight:700;color:var(--azul-900)}
.resumen-paso-item a{color:var(--teal-600);font-weight:700;white-space:nowrap}
.wizard-step h2{margin-top:0}
.wizard-step > a.small{display:inline-block;margin-bottom:4px}

/* ---------- Misc ---------- */
table{width:100%;border-collapse:collapse}
table th,table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:.9rem}
table th{color:var(--text-muted);font-size:.75rem;text-transform:uppercase;font-weight:800}
.table-wrap{overflow-x:auto}
.tag-pill{display:inline-flex;align-items:center;gap:6px;background:#eef2f7;border-radius:20px;padding:4px 10px;font-size:.78rem;font-weight:700;margin:2px}
.empty-state{text-align:center;padding:50px 20px;color:var(--text-muted)}
.login-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow)}
.login-logo{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--teal-600),var(--azul-800));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:22px;margin:0 auto 16px}