/* ==========================================================================
   BYD Scheduling — "Cielo" glass theme (interior only)
   Blanco + azul cielo, glassmorphism. Se carga DESPUÉS de style.css,
   v3_detail.css y v3_admin.css, así que sus reglas ganan en cascada.
   La página pública (landing.html) NO carga este archivo: su marca
   teal queda intacta.
   ========================================================================== */

/* ---------- 1. TOKENS: paleta cielo, texto slate oscuro ---------- */
:root{
  color-scheme: light;
  --bg:#F0F9FF;
  --surface:#FFFFFF;
  --surface-2:#EAF4FD;
  --surface-3:#D6E9FA;
  --ink:#0F172A;
  --soft:#334155;
  --muted:#64748B;
  --line:#C9E2F6;
  --brand:#0EA5E9;
  --brand-deep:#0284C7;
  --brand-ink:#0C4A6E;
  --brand-ghost:#E0F2FE;
  --brand-inktext:#0369A1;
  --ok:#059669; --ok-bg:#D3F5E3; --ok-ink:#065F46;
  --warn:#D97706; --warn-bg:#FDEFC3; --warn-ink:#92400E;
  --bad:#DC2626; --bad-bg:#FDE0E0; --bad-ink:#991B1B;
  --gold:#F59E0B;
  --info:#0284C7; --info-soft:#E0F2FE;
  --purple:#7C3AED; --purple-soft:#ECE6FB;
  --shadow-s:0 1px 2px rgba(2,132,199,.07),0 4px 14px rgba(2,132,199,.08);
  --shadow-m:0 2px 6px rgba(2,132,199,.10),0 18px 46px rgba(2,132,199,.16);
  --header-pub:#0F172A;
  /* glass */
  --glass:rgba(255,255,255,.68);
  --glass-strong:rgba(255,255,255,.82);
  --glass-border:rgba(255,255,255,.65);
  --glass-line:rgba(186,230,253,.55);
  --grad:linear-gradient(135deg,#38BDF8,#0EA5E9);
}

/* ---------- 2. MODO OSCURO BLOQUEADO: el interior siempre es claro ---------- */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: light;
    --bg:#F0F9FF;
    --surface:#FFFFFF;
    --surface-2:#EAF4FD;
    --surface-3:#D6E9FA;
    --ink:#0F172A;
    --soft:#334155;
    --muted:#64748B;
    --line:#C9E2F6;
    --brand:#0EA5E9;
    --brand-deep:#0284C7;
    --brand-ink:#0C4A6E;
    --brand-ghost:#E0F2FE;
    --brand-inktext:#0369A1;
    --ok:#059669; --ok-bg:#D3F5E3; --ok-ink:#065F46;
    --warn:#D97706; --warn-bg:#FDEFC3; --warn-ink:#92400E;
    --bad:#DC2626; --bad-bg:#FDE0E0; --bad-ink:#991B1B;
    --gold:#F59E0B;
    --info:#0284C7; --info-soft:#E0F2FE;
    --purple:#7C3AED; --purple-soft:#ECE6FB;
    --shadow-s:0 1px 2px rgba(2,132,199,.07),0 4px 14px rgba(2,132,199,.08);
    --shadow-m:0 2px 6px rgba(2,132,199,.10),0 18px 46px rgba(2,132,199,.16);
    --header-pub:#0F172A;
    --glass:rgba(255,255,255,.68);
    --glass-strong:rgba(255,255,255,.82);
    --glass-border:rgba(255,255,255,.65);
    --glass-line:rgba(186,230,253,.55);
    --grad:linear-gradient(135deg,#38BDF8,#0EA5E9);
  }
}

/* ---------- 3. FONDO: blanco con degradado cielo + blobs decorativos ---------- */
body{
  background:
    radial-gradient(640px 420px at 6% -4%, rgba(125,211,252,.38), transparent 62%),
    radial-gradient(720px 520px at 96% 8%, rgba(56,189,248,.30), transparent 62%),
    radial-gradient(900px 640px at 50% 112%, rgba(186,230,253,.42), transparent 64%),
    linear-gradient(180deg,#EFF8FF 0%,#FFFFFF 55%,#F2FAFF 100%);
  background-attachment:fixed;
  color:var(--ink);
}
::selection{background:#38BDF8;color:#fff}
:focus-visible{outline:3px solid #38BDF8;outline-offset:2px}

/* ---------- 4. APPBAR + NAVEGACIÓN glass ---------- */
.appbar{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--glass-line);
  box-shadow:0 4px 24px rgba(2,132,199,.08);
}
.appbar .abrand .mark{
  background:linear-gradient(135deg,#38BDF8,#0284C7);
  box-shadow:0 6px 16px rgba(14,165,233,.35);
}
.abtn{
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid var(--glass-line);
}
.abtn:hover{border-color:#38BDF8;box-shadow:0 4px 14px rgba(14,165,233,.18)}
.lang-switch{background:rgba(255,255,255,.6);border:1px solid var(--glass-line)}
.lang-switch a.on{background:linear-gradient(135deg,#38BDF8,#0284C7);color:#fff}

.pnav-desktop{
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-m);
}
.pnav-desktop a[aria-current="page"]{
  background:linear-gradient(135deg,rgba(224,242,254,.95),rgba(186,230,253,.75));
  color:#075985;
  box-shadow:inset 0 0 0 1px rgba(14,165,233,.25);
}
.pnav-desktop a:hover{color:#0369A1}
.pnav-desktop .pnav-more:hover{background:rgba(224,242,254,.7)}

.pnav-mobile{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
  border-top:1px solid var(--glass-line);
  box-shadow:0 -8px 28px rgba(2,132,199,.12);
}
.pnav-mobile a[aria-current="page"],
.pnav-mobile .pnav-more.active{color:#0284C7}
.pnav-mobile a[aria-current="page"] svg{filter:drop-shadow(0 2px 6px rgba(14,165,233,.45))}

/* ---------- 5. TARJETAS glass ---------- */
.card,.stat,.svc,.cov-card,.step,.locked,.more-list a,.more-list button,
.check-item,.v3-subnav,.v3-filter,.v3-money,.v3-note,.v3-files li,
.sheet,.modal-card,.role-tabs,.sector-facts{
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-s);
}
.card:hover,.svc:hover{box-shadow:var(--shadow-m)}
.sheet{border-radius:22px 22px 0 0;border-bottom:0}
.modal-card{background:var(--glass-strong)}
.empty{
  background:rgba(255,255,255,.5);
  border:1px dashed #7DD3FC;
  color:var(--muted);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.avatar{background:var(--brand-ghost);color:#075985}

/* día / cabeceras de sección estilo Aqua */
.section-title{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:999px;
  padding:.45rem 1.1rem;
  font-size:1rem;
  box-shadow:var(--shadow-s);
}

/* ---------- 6. TARJETAS DE CITA (vista día, tipo Aqua) ---------- */
.card.appt{border-left:4px solid #38BDF8;transition:transform .18s ease,box-shadow .18s ease}
.card.appt:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.appt-date{
  display:inline-flex;align-items:center;gap:.35rem;
  background:linear-gradient(135deg,#E0F2FE,#BAE6FD);
  color:#075985;
  border-radius:999px;
  padding:.32rem .85rem;
  font-size:.82rem;font-weight:800;
}
.appt-patient{font-size:1.12rem;color:#0F172A}
.appt-meta{color:#475569}
.appt-interp,.appt-addr{color:#334155}
.pill-info{background:#E0F2FE;color:#0369A1}

/* badges de estado: pasteles suaves, texto oscuro legible */
.badge,.status{border:1px solid rgba(255,255,255,.6)}
.st-accepted,.st-confirmed{background:#E0F2FE;color:#075985}
.st-completed,.st-paid{background:#D3F5E3;color:#065F46}
.st-cancelled,.st-declined{background:#FDE0E0;color:#991B1B}
.st-offered{background:#E0F2FE;color:#0369A1}
.st-on_hold,.st-unpaid{background:#FDEFC3;color:#92400E}

/* ---------- 7. BOTONES ---------- */
.btn.primary,.btn-brand,.mini-btn.primary{
  background:linear-gradient(135deg,#38BDF8,#0EA5E9);
  border-color:transparent;color:#fff;border-radius:12px;
  box-shadow:0 8px 22px rgba(14,165,233,.38);
}
.btn.primary:hover,.btn-brand:hover{background:linear-gradient(135deg,#0EA5E9,#0284C7);transform:translateY(-2px)}
.mini-btn.primary:hover{background:linear-gradient(135deg,#0EA5E9,#0284C7)}
.btn.ghost,.btn-ghost,.mini-btn{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1.5px solid var(--glass-line);
  border-radius:12px;
  color:#0F172A;
}
.btn.ghost:hover,.btn-ghost:hover,.mini-btn:hover{border-color:#38BDF8;box-shadow:0 4px 14px rgba(14,165,233,.16)}
.btn.danger{background:#DC2626;border-color:transparent;color:#fff;border-radius:12px}
.btn.danger:hover{background:#B91C1C}
.btn.danger-ghost{background:rgba(255,255,255,.6);border:1.5px solid #FCA5A5;color:#B91C1C;border-radius:12px}
.btn.ok{background:#059669;border-color:transparent;color:#fff;border-radius:12px;box-shadow:0 8px 20px rgba(5,150,105,.3)}
.btn.ok:hover{background:#047857}
.btn.small,.btn-sm{padding:.5rem 1rem;font-size:.85rem;border-radius:10px}
.btn.big{border-radius:14px}
.qa{border-radius:14px}
.qa:hover{border-color:#38BDF8;box-shadow:var(--shadow-s)}
.qa svg{color:#0284C7}

/* marcas */
.login-brand .mark,.brandmark .mark,.foot-brand .mark{
  background:linear-gradient(135deg,#38BDF8,#0284C7)!important;
  box-shadow:0 6px 16px rgba(14,165,233,.35);
}

/* ---------- 8. FORMULARIOS ---------- */
.field input,.field select,.field textarea,
.v3-fees input,.v3-fees select,.v3-assign select,.check-item{
  background:rgba(255,255,255,.85);
  border:1.5px solid #C9E2F6;
  color:#0F172A;
}
.field input:focus,.field select:focus,.field textarea:focus,
.v3-fees input:focus,.v3-fees select:focus{
  border-color:#38BDF8;outline:none;
  box-shadow:0 0 0 3px rgba(56,189,248,.22);
}
.field>span{color:#334155}
.checkbox-row input{accent-color:#0EA5E9}

/* ---------- 9. TABLAS glass ---------- */
.table{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--glass-border);
  color:#0F172A;
}
.table th{
  background:rgba(224,242,254,.65);
  color:#075985;
  border-bottom:2px solid #BAE6FD;
}
.table td{border-bottom:1px solid rgba(186,230,253,.45);color:#1E293B}
.table tbody tr:hover{background:rgba(224,242,254,.55)}
.table-scroll.card{padding:0;overflow:hidden}

/* ---------- 10. CALENDARIO ---------- */
.cal-day{background:rgba(255,255,255,.6);border:1px solid var(--glass-line)}
.cal-day.today{outline:2px solid #0EA5E9;background:#E0F2FE}
.cal-chip{background:#E0F2FE;border:1px solid #BAE6FD;color:#0C4A6E}
.cal-chip.st-completed{background:#D3F5E3;border-color:#A7E8C5;color:#065F46}
.cal-chip.st-cancelled{background:#FDE0E0;border-color:#F5B5B5;color:#991B1B}
.cal-chip.st-on_hold{background:#FDEFC3;border-color:#F5D78A;color:#92400E}
.v3-chip{background:#E0F2FE;color:#075985}

/* tabs v3: azul cielo en vez de morado */
.v3-tab{background:rgba(255,255,255,.75);border:1px solid var(--glass-line);color:#475569}
.v3-tab:hover{border-color:#38BDF8;color:#0369A1}
.v3-tab.active{background:linear-gradient(135deg,#38BDF8,#0284C7);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(14,165,233,.4)}
.v3-subnav a{background:rgba(255,255,255,.75);border:1.5px solid var(--glass-line);color:#475569}
.v3-subnav a:hover{border-color:#38BDF8;color:#0284C7}
.v3-subnav a.on{background:linear-gradient(135deg,#38BDF8,#0284C7);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(14,165,233,.4)}
.v3-tabs{border-bottom-color:#BAE6FD}

/* ---------- 11. LOGIN / REGISTER ---------- */
.login-side{background:linear-gradient(150deg,#0EA5E9,#0369A1)}
.login-side .shade{background:linear-gradient(160deg,rgba(2,132,199,.15),rgba(12,74,110,.88))}
.login-side .cap h2 .serif{color:#BAE6FD}
.login-card h1{color:#0F172A}
.login-card .sub{color:#64748B}
.role-tabs button[aria-selected="true"]{background:#fff;color:#0F172A;box-shadow:var(--shadow-s)}
.role-tabs button{color:#64748B}
.divider{color:#94A3B8}
.login-foot{color:#64748B}
.login-foot a{color:#0284C7}
.back-home{border-radius:999px}

/* ---------- 12. VARIOS ---------- */
.btn{white-space:nowrap}
.progress{background:#E0F2FE}
.progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#38BDF8,#0284C7)}
.kv{border-bottom:1px solid rgba(186,230,253,.5)}
.kv .k{color:#64748B}
.kv .v{color:#0F172A}
.stat-num{color:#0369A1}
.stat b{color:#0369A1}
.muted{color:#64748B}
.panel .container a:not(.btn):not(.badge):not(.pnav-mobile a){color:#0284C7}
.sheet a.mrow{border-bottom:1px solid rgba(186,230,253,.5);color:#0F172A}
.sheet .lang-row a.on{background:#E0F2FE;border-color:#38BDF8;color:#0369A1}
.sheet-handle{background:#BAE6FD}
.flash.ok{background:#D3F5E3;color:#065F46;border:1px solid #A7E8C5}
.flash.error{background:#FDE0E0;color:#991B1B;border:1px solid #F5B5B5}
.flash.warn{background:#FDEFC3;color:#92400E;border:1px solid #F5D78A}
.flash.info{background:#E0F2FE;color:#0369A1;border:1px solid #BAE6FD}
.sector-tabs button[aria-selected="true"]{background:#0C4A6E;color:#fff;border-color:#0C4A6E}
.demo-chip{color:#92400E;background:#FDEFC3;border-color:#F5D78A}
.timeline .bar-row,.bar-row{color:#334155}
.svc-body h3 .sico{background:#E0F2FE;color:#0369A1}
.contact-line .ci{background:#E0F2FE;color:#0369A1}
.session-card{background:rgba(255,255,255,.7);border:1px solid var(--glass-border)}
.toast{background:#0F172A;color:#F8FAFC}

/* scrollbars sutiles */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#BAE6FD;border-radius:99px;border:2px solid #F0F9FF}
::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion:reduce){
  .card.appt:hover{transform:none}
}

/* ==========================================================================
   10. DAY G estilo Aqua (calendario del día)
   ========================================================================== */
.dayg{max-width:1120px;margin:0 auto;padding:.25rem .25rem 2rem}
.dayg-title{
  text-align:center;color:var(--ink);
  font-size:clamp(1.5rem,4vw,2.3rem);font-weight:800;letter-spacing:-.01em;
  margin:.4rem 0 1rem;
}
/* ---- pills Prev | Mes | Next ---- */
.dayg-pills{display:flex;justify-content:center;margin:0 0 1.2rem}
.dayg-pill{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--glass-strong);backdrop-filter:blur(14px);
  border:1.5px solid var(--glass-line);color:var(--ink);
  padding:.6rem 1.25rem;font-weight:700;text-decoration:none;font-size:.95rem;
  box-shadow:var(--shadow-s);white-space:nowrap;
}
a.dayg-pill:hover{border-color:#38BDF8;color:var(--brand-ink)}
.dayg-pills .dayg-pill:first-child{border-radius:999px 0 0 999px}
.dayg-pills .dayg-pill:last-child{border-radius:0 999px 999px 0}
.dayg-pill-month{
  background:var(--brand-ghost);color:var(--brand-ink);
  border-left-width:1px;border-right-width:1px;min-width:4.2rem;justify-content:center;
}
.dayg-arrow{font-size:1.05rem;line-height:1;color:var(--brand-deep)}
/* ---- columnas: mini-calendario + nota ---- */
.dayg-cols{display:grid;grid-template-columns:minmax(300px,430px) minmax(300px,1fr);
  gap:1.25rem;align-items:start;margin-bottom:1.25rem}
.dayg-minical{padding:1rem 1rem .9rem}
.dayg-minical-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dayg-minical-head{margin-bottom:.35rem}
.dayg-minical-head span{
  text-align:center;color:var(--muted);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.04em;padding:.15rem 0;
}
.dayg-day{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;border-radius:.65rem;
  color:var(--soft);text-decoration:none;font-weight:600;font-size:.92rem;
  border:2px solid transparent;
}
a.dayg-day:hover{border-color:#BAE6FD;background:#F0F9FF}
.dayg-day.dim{color:#B6C5D6;font-weight:400}
.dayg-day.busy{background:var(--brand-ghost);color:var(--brand-inktext);font-weight:800}
.dayg-day.today{border-color:var(--ink)}
.dayg-day.sel{box-shadow:0 0 0 2px #38BDF8;background:#E0F2FE;color:var(--brand-ink)}
/* ---- nota del día ---- */
.dayg-note{padding:1.1rem 1.15rem}
.dayg-note-label{display:block;color:var(--soft);font-weight:700;margin-bottom:.55rem;font-size:.95rem}
.dayg-note textarea{
  width:100%;box-sizing:border-box;resize:vertical;min-height:7.5rem;
  background:rgba(255,255,255,.9);border:1.5px solid #C9E2F6;border-radius:.8rem;
  color:var(--ink);padding:.7rem .8rem;font:inherit;
}
.dayg-note textarea:focus{border-color:#38BDF8;outline:none;
  box-shadow:0 0 0 3px rgba(56,189,248,.22)}
.dayg-savebtn{
  width:100%;margin-top:.7rem;padding:.85rem;border:none;cursor:pointer;
  border-radius:999px;background:linear-gradient(135deg,#7DD3FC,#38BDF8);
  color:#0C4A6E;font-weight:800;font-size:1rem;
  box-shadow:0 8px 22px rgba(14,165,233,.28);
}
.dayg-savebtn:hover{filter:brightness(1.04)}
.dayg-note-ro p{
  background:rgba(255,255,255,.7);border:1.5px solid var(--glass-line);
  border-radius:.8rem;padding:.8rem .9rem;color:var(--soft);white-space:pre-wrap;margin:0;
}
/* ---- botón + Cita ---- */
.dayg-newappt-wrap{text-align:center;margin:.4rem 0 1.4rem}
.dayg-newappt{
  display:inline-flex;align-items:center;gap:.6rem;
  background:linear-gradient(135deg,#38BDF8,#0EA5E9);color:#fff!important;
  font-weight:800;font-size:1.05rem;text-decoration:none;
  padding:.75rem 1.9rem;border-radius:999px;
  box-shadow:0 10px 26px rgba(14,165,233,.35);
}
.dayg-newappt:hover{filter:brightness(1.06);transform:translateY(-1px)}
.dayg-plus{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.6rem;height:1.6rem;border-radius:50%;
  background:rgba(255,255,255,.28);font-size:1.25rem;line-height:1;font-weight:800;
}
/* ---- lista de citas del día ---- */
.dayg-list{display:grid;gap:.75rem}
.dayg-appt{
  display:flex;align-items:center;gap:1rem;
  padding:.95rem 1.1rem;text-decoration:none;color:inherit;
  border-left:4px solid #38BDF8;
}
.dayg-appt:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.dayg-time{
  flex:none;background:var(--brand-ghost);color:var(--brand-inktext);
  font-weight:800;font-size:.9rem;padding:.4rem .8rem;border-radius:999px;white-space:nowrap;
}
.dayg-appt-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.dayg-patient{color:var(--ink);font-weight:800;font-size:1.06rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dayg-meta{color:var(--muted);font-size:.85rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dayg-empty{
  text-align:center;color:var(--soft);font-weight:800;
  font-size:clamp(1.4rem,3.5vw,2rem);padding:3rem 1rem;margin:0;
}
@media (max-width:760px){
  .dayg-cols{grid-template-columns:1fr}
  .dayg-day{font-size:.85rem}
  .dayg-appt{flex-wrap:wrap;gap:.6rem}
  .dayg-meta{white-space:normal}
}
.dayg-cols-single{grid-template-columns:minmax(300px,430px);justify-content:center}

/* Logo imagen: el .mark con <img> muestra el logo sin el fondo degradado anterior */
.mark:has(img){background:none !important;box-shadow:none !important;padding:0 !important}
.mark img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ===== micro-animaciones interior ===== */
@keyframes gRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel{animation:gRise .45s ease both}
.card.appt:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(14,165,233,.18)}
.btn{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:scale(.96)}
.pnav-desktop a,.tabbar a{transition:background .18s ease,color .18s ease,transform .18s ease}
.pnav-desktop a:hover,.tabbar a:hover{transform:translateY(-1px)}
input,select,textarea{transition:border-color .18s ease,box-shadow .18s ease}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===== panel lateral: agendar/editar cita ===== */
@keyframes drawerIn{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}
.appt-drawer{position:fixed;top:0;right:0;bottom:0;z-index:300;width:min(410px,100%);
  background:#fff;border-left:1px solid rgba(125,211,252,.5);
  box-shadow:-24px 0 60px rgba(2,132,199,.18);
  transform:translateX(105%);transition:transform .22s ease;overflow-y:auto}
.appt-drawer[hidden]{display:none}
.appt-drawer.open{transform:none;animation:drawerIn .22s ease}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 10px;position:sticky;top:0;background:#fff;z-index:2;
  border-bottom:1px solid rgba(125,211,252,.4)}
.drawer-head h2{margin:0;font-size:1.05rem;color:#0f172a}
.modal-x{border:0;background:rgba(224,242,254,.9);width:34px;height:34px;border-radius:50%;
  font-size:1rem;cursor:pointer;color:#0369a1;line-height:1;flex:none}
.modal-x:hover{background:#bae6fd}
.drawer-form{padding:12px 18px 22px;font-size:.87rem}
.drawer-form .field{margin-bottom:9px}
.drawer-form .field > span{font-size:.75rem;margin-bottom:2px}
.drawer-form .field input,.drawer-form .field select,.drawer-form .field textarea{
  padding:.42rem .55rem;font-size:.87rem;border-radius:10px;width:100%}
.drawer-form .dgrid2{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.drawer-sep{border:0;border-top:1px solid rgba(125,211,252,.5);margin:12px 0}
.drawer-loc{background:rgba(240,249,255,.7);border:1px solid rgba(125,211,252,.45);
  border-radius:14px;padding:10px 12px;margin:0 0 10px}
.drawer-loc h3{font-size:.88rem;margin:0 0 8px;color:#0369a1}
.drawer-form .btn-row{margin-top:10px}
.drawer-form .btn.big{padding:.6rem 1.2rem;font-size:.92rem}
@media (max-width:480px){
  .appt-drawer{width:100%}
}

/* ===== detalle de cita compacto ===== */
.appt-head{margin-bottom:.5rem}
.appt-head h1{font-size:1.3rem;margin:.15rem 0}
.appt-head .muted{font-size:.85rem;margin:0}
.v3-actions{margin:.35rem 0 .7rem}
.v3-actions .btn{padding:.38rem .65rem;font-size:.8rem}
.v3-tabs{gap:6px;margin:.5rem 0 .8rem}
.v3-tab{padding:.42rem .85rem;font-size:.83rem}
.v3-panel .card{padding:11px 15px;margin-bottom:11px}
.v3-panel .card h3{font-size:.92rem;margin:0 0 7px}
dl.detail{font-size:.85rem;margin:0}
dl.detail > div{padding:.26rem 0}
dl.detail dt{font-size:.74rem}
dl.detail dd{margin:0}
.v3-panel .table{font-size:.83rem}
.v3-panel .table th,.v3-panel .table td{padding:.35rem .5rem}
@media (prefers-reduced-motion:reduce){
  .appt-modal{animation:none}
}

/* ===== lista de citas estilo Aqua ===== */
.aqua-list{font-size:.86rem}
.aqua-list th{white-space:nowrap;font-size:.78rem}
.aqua-list td{vertical-align:top;padding:.5rem .6rem}
.aqua-num{font-weight:800;color:#0284c7;text-decoration:none;font-size:.95rem}
.aqua-num:hover{text-decoration:underline}
.aqua-list .badge{font-size:.74rem;white-space:nowrap}

/* ===== form error banner (drawer + full page) ===== */
.form-error{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;border-radius:10px;padding:.6rem .9rem;margin-bottom:.8rem;font-size:.86rem;font-weight:600}

/* ===== mini Day Grid en el Dashboard (inicio) ===== */
.dash-dayg{margin-bottom:1.2rem}
.dash-dayg-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem}
.dash-dayg-head h3{margin:0;font-size:1.02rem}
.dash-dayg-list{gap:.45rem}
.dash-dayg-list .dayg-appt{padding:.5rem .8rem}
.dash-dayg-list .dayg-time{font-size:.82rem;min-width:64px}
.dash-dayg-list .dayg-patient{font-size:.88rem}
.dash-dayg-list .dayg-meta{font-size:.76rem}
.dash-dayg-list .badge{font-size:.7rem}