/* ==========================================================================
   OdonApp — estilos del rediseño de Inicio (administrativo y odontólogo)
   Todo vive bajo .oa para no chocar con AdminLTE / Bootstrap.
   ========================================================================== */
:root{
  --oa-accent:#0E7490; --oa-accent-strong:#0B5F75; --oa-accent-soft:#E3F1F4;
  --oa-ink:#14212B; --oa-ink-2:#2A3740; --oa-ink-3:#3D4A53; --oa-muted:#5A6872; --oa-icon:#8795A0;
  --oa-bg:#F3F5F6; --oa-surface:#FFFFFF; --oa-border:#E5EAED; --oa-border-strong:#DCE3E7; --oa-line:#F0F3F5;
  --oa-good-bg:#E3F5EC; --oa-good-fg:#0E6B3F;
  --oa-bad-bg:#FDECEA;  --oa-bad-fg:#B42318;
  --oa-warn-bg:#FFF1CC; --oa-warn-fg:#6B4A00; --oa-warn-bd:#E0A21B;
  --oa-orange-bg:#FFF4EC; --oa-orange-fg:#8A3B00;
  --oa-info-bg:#E3EEFB; --oa-info-fg:#1E3A8A;
  --oa-neutral-bg:#EEF3F5; --oa-neutral-fg:#2A3740;
  --oa-radius-lg:16px; --oa-radius-md:12px; --oa-radius-sm:10px;
  --oa-shadow:0 1px 2px rgba(20,33,43,.04);
  --oa-font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --oa-slot:22px; /* alto de 30 min en la agenda */
}
.oa *{box-sizing:border-box}
body.oa-body{margin:0;background:var(--oa-bg)}
.oa{font-family:var(--oa-font);color:var(--oa-ink);background:var(--oa-bg);min-height:100vh;display:flex;flex-wrap:wrap;-webkit-font-smoothing:antialiased}
.oa a{color:var(--oa-accent-strong)} .oa a:hover{color:#083F4E}
.oa button{font-family:inherit;cursor:pointer}
.oa .num{font-variant-numeric:tabular-nums}
.oa svg.i{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- Layout ---- */
.oa-sidebar{flex:1 1 240px;max-width:256px;background:var(--oa-surface);border-right:1px solid var(--oa-border);padding:20px 14px;display:flex;flex-direction:column;gap:18px}
.oa-main{flex:999 1 560px;min-width:0;padding:28px 32px 48px}
.oa-container{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.oa-row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.oa-row.stretch{align-items:stretch}
.oa-col-wide{flex:999 1 600px;min-width:0}
.oa-col-side{flex:1 1 320px;max-width:400px;min-width:0;display:flex;flex-direction:column;gap:20px}

/* ---- Sidebar ---- */
.oa-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 6px}
.oa-brand-mark{width:36px;height:36px;border-radius:10px;background:var(--oa-ink);color:#fff;display:flex;align-items:center;justify-content:center}
.oa-brand-name{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.oa-brand-name span{font-weight:500}
.oa-brand-sub{font-size:11px;color:var(--oa-muted);font-weight:600}
.oa-nav{display:flex;flex-direction:column;gap:2px}
.oa-nav-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--oa-muted);padding:0 12px 6px}
.oa .oa-nav-link{color:var(--oa-ink-3)}
.oa-nav-link{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--oa-radius-sm);color:var(--oa-ink-3);text-decoration:none;font-size:14px;font-weight:500}
.oa .oa-nav-link:hover{background:#EAF2F4;color:var(--oa-ink)}
.oa .oa-nav-link[aria-current="page"]{background:var(--oa-accent-soft);color:var(--oa-accent);font-weight:700}
.oa-nav-link .grow{flex:1}
.oa-nav-link .chev{color:var(--oa-icon)}
.oa-nav-link.locked{color:var(--oa-muted)}
.oa-nav-sub{display:flex;flex-direction:column;gap:2px;padding-left:30px}
.oa-nav-sub .oa-nav-link{font-size:13px;padding:7px 12px}
.oa-nav-foot{margin-top:auto;border-top:1px solid var(--oa-border);padding-top:14px}
.oa-user{display:flex;align-items:center;gap:10px;padding:6px 12px 10px}
.oa-user-name{display:block;font-size:13px;font-weight:700}
.oa-user-role{font-size:12px;color:var(--oa-muted)}
.oa-avatar{width:34px;height:34px;flex:none;border-radius:999px;background:#DCEBEF;color:#0B4A5C;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.oa-avatar.sm{width:32px;height:32px;font-size:12px}
.oa-avatar.lg{width:38px;height:38px}
.av-0{background:#DCEBEF;color:#0B4A5C}.av-1{background:#E3F5EC;color:#0E6B3F}.av-2{background:#FFF1CC;color:#6B4A00}
.av-3{background:#E3EEFB;color:#1E3A8A}.av-4{background:#FCE4EC;color:#831843}.av-5{background:#EEF1F3;color:#2A3740}

/* ---- Header ---- */
.oa-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.oa-eyebrow{font-size:13px;font-weight:600;color:var(--oa-muted)}
.oa h1{margin:4px 0 0;font-size:28px;font-weight:800;letter-spacing:-.02em}
.oa-seg{display:flex;background:var(--oa-surface);border:1px solid var(--oa-border-strong);border-radius:var(--oa-radius-md);padding:4px;gap:2px}
.oa-seg button{border:0;background:transparent;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--oa-ink-3);min-height:36px}
.oa-seg button:hover{background:#EAF2F4}
.oa-seg button[aria-pressed="true"]{background:var(--oa-ink);color:#fff;font-weight:700}

/* ---- Cards ---- */
.oa-card{background:var(--oa-surface);border:1px solid var(--oa-border);border-radius:var(--oa-radius-lg);box-shadow:var(--oa-shadow);padding:20px;display:flex;flex-direction:column;gap:14px}
.oa-card.list{padding:20px 8px 10px;gap:4px}
.oa-card.list .oa-card-head{padding:0 12px 8px}
.oa-card.dark{background:var(--oa-ink);color:#fff;border:0}
.oa-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.oa h2{margin:0;font-size:16px;font-weight:700}
.oa-card-sub{font-size:12px;color:var(--oa-muted);font-weight:500}
.oa-link{font-size:13px;font-weight:600;text-decoration:none}
.oa-badge{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap;display:inline-block}
.oa-chip{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;display:inline-block}
.t-good{background:var(--oa-good-bg);color:var(--oa-good-fg)} .t-bad{background:var(--oa-bad-bg);color:var(--oa-bad-fg)}
.t-warn{background:var(--oa-warn-bg);color:var(--oa-warn-fg)} .t-orange{background:var(--oa-orange-bg);color:var(--oa-orange-fg)}
.t-info{background:var(--oa-info-bg);color:var(--oa-info-fg)} .t-neutral{background:var(--oa-neutral-bg);color:var(--oa-neutral-fg)}

/* KPIs */
.oa-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.oa-kpi{gap:8px;padding:18px}
.oa-kpi-label{font-size:13px;font-weight:600;color:var(--oa-muted)}
.oa-kpi-value{white-space:nowrap;font-size:clamp(22px,1.9vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.oa-kpi-sub{font-size:12px;color:var(--oa-muted);font-weight:500}
.oa-kpi-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.oa-delta{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px}

/* Listas con contador (Requiere atención / Para revisar) */
.oa-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--oa-radius-sm);text-decoration:none;color:var(--oa-ink)}
.oa .oa-item{color:var(--oa-ink)}
.oa .oa-item:hover{background:#F7FAFB;color:var(--oa-ink)}
.oa-count{min-width:42px;height:34px;padding:0 8px;border-radius:10px;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center}
.oa-item-text{display:flex;flex-direction:column;min-width:0;flex:1}
.oa-item-title{font-size:14px;font-weight:600}
.oa-patient .oa-item-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oa-item-sub{font-size:12px;color:var(--oa-muted)}

/* Circuito de prestaciones */
.oa-stage{display:grid;grid-template-columns:24px 128px minmax(0,1fr) 64px;align-items:center;gap:12px}
.oa-stage-n{width:24px;height:24px;border-radius:999px;background:var(--oa-neutral-bg);color:var(--oa-ink-3);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.oa-stage-label{font-size:13px;font-weight:600;color:var(--oa-ink-2)}
.oa-bar{height:14px;border-radius:4px;background:#F1F4F6;overflow:hidden}
.oa-bar>span{display:block;height:100%;border-radius:4px;background:var(--oa-accent)}
.oa-stage-count{font-size:13px;font-weight:700;text-align:right}
.oa-exceptions{display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid #EEF1F3;padding-top:14px}
.oa-exception{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--oa-radius-sm);background:var(--oa-orange-bg);color:var(--oa-orange-fg);text-decoration:none;font-size:13px;font-weight:600}
.oa-exception b{font-weight:800}

/* Tablas */
.oa-table-wrap{overflow-x:auto}
.oa-table{width:100%;min-width:620px;border-collapse:collapse;font-size:13px}
.oa-table th{text-align:left;padding:8px 10px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--oa-muted);border-bottom:1px solid var(--oa-border)}
.oa-table td{padding:11px 10px;border-bottom:1px solid var(--oa-line);color:var(--oa-ink-3)}
.oa-table tr:hover td{background:#F7FAFB}
.oa-table .r{text-align:right}
.oa-table .strong{font-weight:700;color:var(--oa-ink)}
.oa-table .debito-alto{color:var(--oa-bad-fg);font-weight:700}
.oa-table a.cell-link{color:var(--oa-ink);text-decoration:none;display:flex;align-items:center;gap:10px;font-weight:600}

/* Lote de pago */
.oa-lote-total{font-size:30px;font-weight:800;letter-spacing:-.02em}
.oa-lote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.oa-lote-grid span{display:block}
.oa-lote-grid .k{font-size:12px;color:#A9BAC4}
.oa-lote-grid .v{font-size:14px;font-weight:700}
.oa-btn-light{display:flex;align-items:center;justify-content:center;height:44px;border-radius:var(--oa-radius-sm);background:#fff;color:var(--oa-ink) !important;text-decoration:none;font-size:14px;font-weight:700}
.oa-pill-dark{font-size:12px;font-weight:700;background:#2B3A45;color:#D6E2E8;border-radius:999px;padding:3px 10px}

/* Integraciones */
.oa-int{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--oa-radius-sm)}
.oa-int:hover{background:#F7FAFB}
.oa-dot{width:8px;height:8px;flex:none;border-radius:999px}
.dot-ok{background:#16A34A}.dot-warn{background:#E0A21B}.dot-err{background:#D92D20}.dot-off{background:#9AA6AE}
.st-ok{color:var(--oa-good-fg)}.st-warn{color:var(--oa-warn-fg)}.st-err{color:var(--oa-bad-fg)}.st-off{color:var(--oa-muted)}
.oa-int-st{font-size:12px;font-weight:700;white-space:nowrap}

/* Botones */
.oa-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 14px;border:1px solid var(--oa-border-strong);border-radius:var(--oa-radius-sm);background:var(--oa-surface);color:var(--oa-ink-2);font-size:13px;font-weight:600;text-decoration:none}
.oa .oa-btn:hover{background:#EAF2F4;color:var(--oa-ink)}
.oa-btn.icon{width:40px;padding:0}
.oa-btn.sm{height:34px;padding:0 10px;font-size:12px;font-weight:700}

/* Agenda semanal (odontólogo) */
.oa-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--oa-ink-3);font-weight:500}
.oa-legend span{display:flex;align-items:center;gap:6px}
.oa-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.lg-avail{background:var(--oa-accent-soft);border:1px dashed #7FB4C2}
.lg-conf{background:var(--oa-accent)}
.lg-pend{background:var(--oa-warn-bg);border:1px solid var(--oa-warn-bd)}
.lg-off{background:#F1F4F6}
.oa-cal-scroll{overflow-x:auto}
.oa-cal{min-width:640px}
.oa-cal-head,.oa-cal-body{display:grid;grid-template-columns:48px repeat(6,minmax(0,1fr))}
.oa-cal-head{border-bottom:1px solid var(--oa-border);padding-bottom:10px}
.oa-cal-body{padding-top:8px}
.oa-dayh{display:flex;flex-direction:column;align-items:center;gap:4px}
.oa-dayh .dow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--oa-muted)}
.oa-dayh .n{width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.oa-dayh .free{font-size:11px;color:var(--oa-muted);font-weight:600}
.oa-dayh.today .dow{color:var(--oa-accent)} .oa-dayh.today .n{background:var(--oa-accent);color:#fff}
.oa-hours{display:flex;flex-direction:column}
.oa-hours span{height:calc(var(--oa-slot)*2);font-size:11px;font-weight:600;color:var(--oa-muted);transform:translateY(-7px)}
.oa-daycol{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(24,var(--oa-slot));padding:0 3px;border-left:1px solid #EEF1F3;background-color:#F7F9FA;
  background-image:repeating-linear-gradient(to bottom,#E9EEF1 0,#E9EEF1 1px,transparent 1px,transparent calc(var(--oa-slot)*2))}
.oa-avail{grid-column:1;margin:1px -1px;border-radius:6px;background:var(--oa-accent-soft);border:1px dashed #7FB4C2}
.oa-ev{grid-column:1;position:relative;margin:2px;border-radius:6px;padding:2px 6px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;white-space:nowrap;font-size:11.5px;line-height:1.25;text-decoration:none}
.oa-ev span{overflow:hidden;text-overflow:ellipsis}
.oa-ev .os{opacity:.85}
.oa .oa-ev.conf{background:var(--oa-accent);color:#fff;border:1px solid var(--oa-accent)}
.oa .oa-ev.pend{background:var(--oa-warn-bg);color:#5C3700;border:1px solid var(--oa-warn-bd)}

/* Hoy (odontólogo) */
.oa-today{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--oa-radius-sm)}
.oa-today:hover{background:#F7FAFB}
.oa-today time{width:48px;flex:none;font-size:13px;font-weight:800}
.oa-today.free time{color:var(--oa-muted)}
.oa-free{flex:1;font-size:13px;color:var(--oa-muted);font-weight:600;border:1px dashed #B9CBD3;border-radius:8px;padding:8px 10px}

/* Pacientes recientes */
.oa-patients{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.oa-patient{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #EEF1F3;border-radius:var(--oa-radius-md);text-decoration:none;color:var(--oa-ink)}
.oa .oa-patient{color:var(--oa-ink)}
.oa .oa-patient:hover{background:#F7FAFB;color:var(--oa-ink)}

/* Upsell suscripción */
.oa-upsell h2{font-size:18px;font-weight:800}
.oa-upsell p{margin:0;font-size:14px;line-height:1.5;color:#C9D6DD}
.oa-upsell ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px;color:#E6EEF2}
.oa-upsell li{display:flex;gap:8px;align-items:flex-start}
.oa-upsell .ico{width:40px;height:40px;border-radius:12px;background:#23333E;display:flex;align-items:center;justify-content:center;color:#9FD3DF}
.oa-upsell .price{font-size:12px;color:#A9BAC4;text-align:center}

/* ---- Barra superior (solo pantallas chicas) ---- */
.oa-topbar{display:none}
.oa-backdrop{position:fixed;inset:0;background:rgba(20,33,43,.45);z-index:40}

/* ---- Tablet y celular: menú como panel desplegable ---- */
@media (max-width:960px){
  .oa{flex-direction:column;flex-wrap:nowrap}
  .oa-main{flex:1 1 auto;width:100%}
  .oa-card>*{min-width:0}
  .oa-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:30;
    background:var(--oa-surface);border-bottom:1px solid var(--oa-border);padding:8px 16px;min-height:56px}
  .oa-topbar .oa-btn.icon{width:44px;height:44px}
  .oa-sidebar{position:fixed;top:0;left:0;bottom:0;width:min(86vw,300px);max-width:none;z-index:50;overflow-y:auto;
    transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 10px 40px rgba(20,33,43,.2)}
  .oa-sidebar.open{transform:none}
  .oa-nav-link{min-height:44px}
  .oa-main{padding:20px 16px 40px}
  .oa-col-side{max-width:none;flex-basis:100%}
  .oa-col-side.mobile-first{order:-1}
  .oa-row{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .oa-row>*{max-width:none !important;flex-basis:auto !important}

  /* Agenda: deslizar de a un día, columna de horas fija */
  .oa-cal{min-width:0;width:max-content}
  .oa-cal-head,.oa-cal-body{grid-template-columns:48px repeat(6,calc(100vw - 122px))}
  .oa-cal-scroll{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .oa-dayh,.oa-daycol{scroll-snap-align:start;scroll-margin-left:48px}
  .oa-cal-head>span:first-child,.oa-hours{position:sticky;left:0;z-index:2;background:var(--oa-surface)}
  .oa-ev{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.oa-sidebar{transition:none}}

/* ---- Celular ---- */
@media (max-width:600px){
  .oa h1{font-size:24px}
  .oa-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .oa-kpi{padding:14px}
  .oa-kpi-value{font-size:20px;white-space:normal;overflow-wrap:anywhere}
  .oa-kpi-foot .oa-kpi-sub{display:none}
  .oa-stage{grid-template-columns:22px 100px minmax(0,1fr) 48px;gap:8px}
  .oa-table{min-width:0}
  .hide-sm{display:none}
  .oa-head .oa-seg{width:100%}
  .oa-head .oa-seg button{flex:1}
  .oa-lote-total{font-size:26px}
  .oa-patients{grid-template-columns:1fr}
}

/* ---- Submenús del sidebar (<details>) ---- */
.oa-nav details>summary{list-style:none;cursor:pointer}
.oa-nav details>summary::-webkit-details-marker{display:none}
.oa-nav details>summary .chev{transition:transform .15s ease}
.oa-nav details[open]>summary .chev{transform:rotate(90deg)}
.oa-nav details .oa-nav-sub{padding-top:2px;padding-bottom:4px}
.oa-nav-sub .oa-nav-sub{padding-left:14px}
.oa-nav-sub .oa-nav-label{padding:6px 12px 2px;font-size:10px}
.oa-sidebar{overflow-y:auto}

/* ---- Estados vacíos y mensajes ---- */
.oa-empty{font-size:13px;color:var(--oa-muted);padding:8px 12px}
.oa-msg{border-radius:var(--oa-radius-sm);padding:10px 14px;font-size:14px;font-weight:600}
.oa-msg.error{background:var(--oa-bad-bg);color:var(--oa-bad-fg)}
.oa-msg.success{background:var(--oa-good-bg);color:var(--oa-good-fg)}
.oa-msg.warning,.oa-msg.info{background:var(--oa-warn-bg);color:var(--oa-warn-fg)}
.oa-seg a{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--oa-ink-3);min-height:36px;text-decoration:none}
.oa .oa-seg a:hover{background:#EAF2F4;color:var(--oa-ink)}
.oa .oa-seg a[aria-current="true"]{background:var(--oa-ink);color:#fff;font-weight:700}
@media (max-width:600px){.oa-head .oa-seg a{flex:1}}

/* ---- Logo de la marca ---- */
.oa-brand{text-decoration:none}
.oa-brand-logo{height:38px;width:auto;flex:none}
.oa-brand-nombre{display:block;height:20px;width:auto}
.oa-brand-sub{display:block;margin-top:3px}
.oa-topbar-logo{height:20px;width:auto}

/* ---- Barra lateral en las pantallas con el layout anterior (cruds/base.html) ---- */
.oa.oa-shell{position:fixed;top:0;left:0;bottom:0;width:256px;min-height:0;display:block;background:transparent;z-index:1035;font-size:14px;line-height:1.4}
.oa-shell .oa-sidebar{height:100%;max-width:none;overflow-y:auto;scrollbar-width:thin}
.oa-shell .oa-nav-label{margin:0}
body.oa-con-lateral .main-header{left:256px}
body.oa-con-lateral .content-wrapper,body.oa-con-lateral .main-footer{margin-left:256px}
body.oa-con-lateral:not(.oa-lateral-oculta) .main-header .logo-centro{visibility:hidden}
body.oa-lateral-oculta .oa-shell{display:none}
body.oa-lateral-oculta .main-header{left:0}
body.oa-lateral-oculta .content-wrapper,body.oa-lateral-oculta .main-footer{margin-left:0}
@media (max-width:960px){
  .oa.oa-shell{position:static;width:0}
  body.oa-con-lateral .main-header{left:0}
  body.oa-con-lateral .content-wrapper,body.oa-con-lateral .main-footer{margin-left:0}
  body.oa-con-lateral:not(.oa-lateral-oculta) .main-header .logo-centro{visibility:visible}
  body.oa-lateral-oculta .oa-shell{display:block}
  .oa-shell .oa-backdrop{z-index:1034}
  .oa-shell .oa-sidebar{z-index:1040;height:auto}
}
@media print{.oa.oa-shell{display:none} body.oa-con-lateral .main-header{left:0} body.oa-con-lateral .content-wrapper{margin-left:0}}