/* ============================================================
   OzonoSystem · Sistema visual (Ozono Salud) — SaaS clínico
   Reestiliza Bootstrap globalmente para una identidad uniforme.
   ============================================================ */
:root{
  --ozono-primary:#005bbb;
  --ozono-primary-dark:#003f8f;
  --ozono-primary-soft:#eaf4ff;
  --ozono-bg:#f5f8fc;
  --ozono-surface:#ffffff;
  --ozono-border:#dbe5f1;
  --ozono-text:#0b1f3a;
  --ozono-muted:#64748b;
  --ozono-success:#16a34a;
  --ozono-warning:#f97316;
  --ozono-danger:#dc2626;
  --ozono-info:#0ea5e9;
  --ozono-radius-lg:20px;
  --ozono-radius-md:14px;
  --ozono-radius-sm:10px;
  --ozono-shadow:0 10px 30px rgba(15,23,42,.08);
  --ozono-shadow-sm:0 4px 14px rgba(15,23,42,.06);
  --bs-primary:#005bbb;
  --bs-primary-rgb:0,91,187;
  --sidebar-w:252px;
}

*{ scrollbar-color:#cdd9ea transparent; }
body,.app-body{
  background:var(--ozono-bg);
  color:var(--ozono-text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}

/* ---------- Layout shell ---------- */
.app-shell{ display:flex; min-height:100vh; }
.app-sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--ozono-surface); border-right:1px solid var(--ozono-border);
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  padding:8px 14px 16px; z-index:1030; transition:transform .25s ease;
}
.app-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.app-topbar{
  position:sticky; top:0; z-index:1020;
  background:var(--ozono-surface); border-bottom:1px solid var(--ozono-border);
  min-height:74px; display:flex; align-items:center; gap:16px; padding:12px 24px;
}
.app-content{ padding:28px; flex:1 1 auto; }

/* ---------- Sidebar ---------- */
.sidebar-logo{ display:flex; align-items:center; justify-content:center; padding:22px 8px 18px; }
.sidebar-logo img{ max-width:150px; height:auto; display:block; }
.sidebar-nav{ list-style:none; margin:0; padding:6px 0; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.sidebar-link{
  display:flex; align-items:center; gap:13px;
  padding:11px 14px; border-radius:var(--ozono-radius-sm);
  color:#3b4d66; text-decoration:none; font-weight:500; font-size:.95rem;
  transition:background .15s ease,color .15s ease;
}
.sidebar-link i{ width:20px; text-align:center; font-size:1.02rem; color:#7c8aa3; transition:color .15s ease; }
.sidebar-link:hover{ background:var(--ozono-primary-soft); color:var(--ozono-primary-dark); }
.sidebar-link:hover i{ color:var(--ozono-primary); }
.sidebar-link.active{
  background:linear-gradient(135deg,var(--ozono-primary),#1f7ae0);
  color:#fff; box-shadow:0 8px 18px rgba(0,91,187,.28);
}
.sidebar-link.active i{ color:#fff; }
.sidebar-footer{ margin-top:auto; padding-top:10px; border-top:1px solid var(--ozono-border); }

/* ---------- Topbar pieces ---------- */
.topbar-search{ position:relative; flex:1 1 auto; max-width:560px; }
.topbar-search i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ozono-muted); }
.topbar-search input{
  width:100%; height:46px; border:1px solid var(--ozono-border); background:#f8fbff;
  border-radius:999px; padding:0 16px 0 44px; font-size:.92rem; color:var(--ozono-text);
}
.topbar-search input:focus{ outline:none; border-color:var(--ozono-primary); box-shadow:0 0 0 4px rgba(0,91,187,.12); background:#fff; }
.topbar-pill{
  display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 14px;
  border:1px solid var(--ozono-border); border-radius:999px; background:#f8fbff;
  color:var(--ozono-text); font-weight:500; font-size:.9rem; text-decoration:none; cursor:pointer;
}
.topbar-pill:hover{ background:var(--ozono-primary-soft); }
.topbar-pill .pin{ color:var(--ozono-primary); }
.topbar-icon-btn{
  position:relative; width:44px; height:44px; border-radius:999px; border:1px solid var(--ozono-border);
  background:#f8fbff; color:#3b4d66; display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.topbar-icon-btn:hover{ background:var(--ozono-primary-soft); color:var(--ozono-primary-dark); }
.topbar-user{ display:flex; align-items:center; gap:10px; padding:5px 10px 5px 6px; border-radius:999px; cursor:pointer; }
.topbar-user:hover{ background:var(--ozono-primary-soft); }
.topbar-user .meta{ line-height:1.05; }
.topbar-user .meta .name{ font-weight:700; font-size:.9rem; color:var(--ozono-text); }
.topbar-user .meta .role{ font-size:.76rem; color:var(--ozono-muted); }
.sidebar-toggle{ display:none; border:1px solid var(--ozono-border); background:#fff; border-radius:10px; width:42px; height:42px; color:#3b4d66; }

/* ---------- Avatares ---------- */
.avatar-initials{
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--ozono-primary-soft); color:var(--ozono-primary-dark); font-weight:700; flex:0 0 auto;
}
.avatar-sm{ width:34px; height:34px; font-size:.78rem; }
.avatar-md{ width:42px; height:42px; font-size:.9rem; }
.avatar-c1{ background:#e0edff; color:#1d4ed8; }
.avatar-c2{ background:#ffe9d6; color:#c2410c; }
.avatar-c3{ background:#dcfce7; color:#15803d; }
.avatar-c4{ background:#ede9fe; color:#6d28d9; }
.avatar-c5{ background:#fde2e7; color:#be123c; }

/* ---------- Cards (override Bootstrap global) ---------- */
.card{
  border:1px solid var(--ozono-border); border-radius:var(--ozono-radius-lg);
  box-shadow:var(--ozono-shadow-sm); background:var(--ozono-surface);
}
.card-header{ background:transparent; border-bottom:1px solid var(--ozono-border); font-weight:600; padding:16px 20px; }
.card-body{ padding:20px; }
.shadow-sm{ box-shadow:var(--ozono-shadow-sm)!important; }

.page-head h1{ font-weight:800; letter-spacing:-.5px; }
.page-head .subtitle{ color:var(--ozono-muted); }

/* Métricas estilo dashboard */
.metric-card{ border-radius:var(--ozono-radius-lg); }
.metric-card .metric-ico{ width:54px; height:54px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; font-size:1.35rem; }
.metric-card .metric-value{ font-size:2rem; font-weight:800; line-height:1.1; color:var(--ozono-text); }
.metric-card .metric-label{ color:var(--ozono-muted); font-size:.92rem; }
.ico-blue{ background:#e0edff; color:#1d4ed8; }
.ico-amber{ background:#ffedd5; color:#c2410c; }
.ico-red{ background:#fde2e7; color:#be123c; }
.ico-green{ background:#dcfce7; color:#15803d; }
.ico-violet{ background:#ede9fe; color:#6d28d9; }

/* ---------- Botones ---------- */
.btn{ border-radius:12px; font-weight:600; }
.btn-lg,.btn-group-lg>.btn{ border-radius:14px; }
.btn-sm{ border-radius:9px; }
.btn-primary,.btn-ozono-primary{
  background:var(--ozono-primary); border-color:var(--ozono-primary); color:#fff;
  box-shadow:0 8px 18px rgba(0,91,187,.22);
}
.btn-primary:hover,.btn-ozono-primary:hover{ background:var(--ozono-primary-dark); border-color:var(--ozono-primary-dark); color:#fff; }
.btn-ozono-outline{ background:#fff; border:1px solid var(--ozono-border); color:var(--ozono-text); }
.btn-ozono-outline:hover{ border-color:var(--ozono-primary); color:var(--ozono-primary-dark); background:var(--ozono-primary-soft); }
.btn-ozono-soft{ background:var(--ozono-primary-soft); border:1px solid transparent; color:var(--ozono-primary-dark); }
.btn-ozono-soft:hover{ background:#d8eaff; color:var(--ozono-primary-dark); }
.btn-outline-secondary{ border-color:var(--ozono-border); color:#3b4d66; }
.btn-outline-secondary:hover{ background:var(--ozono-primary-soft); color:var(--ozono-primary-dark); border-color:var(--ozono-primary); }

/* ---------- Tablas ---------- */
.table{ --bs-table-bg:transparent; margin-bottom:0; color:var(--ozono-text); }
.table thead th{
  text-transform:uppercase; font-size:.72rem; letter-spacing:.6px; font-weight:700;
  color:var(--ozono-muted); background:transparent; border-bottom:1px solid var(--ozono-border); padding:14px 18px;
}
.table tbody td{ padding:14px 18px; border-color:#eef3f9; vertical-align:middle; }
.table-hover tbody tr:hover{ background:#f6faff; }
.table-light,.table thead.table-light th{ background:#f7faff!important; }

/* ---------- Formularios ---------- */
.form-control,.form-select,.ozono-input,.ozono-select{
  border:1px solid var(--ozono-border); border-radius:var(--ozono-radius-md);
  padding:.6rem .85rem; min-height:44px; color:var(--ozono-text); background:#fff;
}
.form-control:focus,.form-select:focus,.ozono-input:focus,.ozono-select:focus{
  border-color:var(--ozono-primary); box-shadow:0 0 0 4px rgba(0,91,187,.12);
}
.form-label{ font-weight:600; color:#33445e; margin-bottom:.35rem; }
.filter-bar,.form-card{ background:var(--ozono-surface); border:1px solid var(--ozono-border); border-radius:var(--ozono-radius-lg); }
.input-group-text{ border-radius:var(--ozono-radius-md); border-color:var(--ozono-border); background:#f8fbff; }

/* ---------- Badges suaves (modernizan los text-bg-* existentes) ---------- */
.badge{ font-weight:600; padding:.42em .7em; border-radius:999px; font-size:.74rem; }
.badge.text-bg-primary{ background:var(--ozono-primary-soft)!important; color:var(--ozono-primary-dark)!important; }
.badge.text-bg-success{ background:#dcfce7!important; color:#15803d!important; }
.badge.text-bg-warning{ background:#ffedd5!important; color:#b45309!important; }
.badge.text-bg-danger{ background:#fde2e7!important; color:#be123c!important; }
.badge.text-bg-info{ background:#e0f2fe!important; color:#0369a1!important; }
.badge.text-bg-secondary{ background:#eef2f7!important; color:#475569!important; }
.badge.text-bg-light{ background:#f1f5fb!important; color:#475569!important; }
.badge.text-bg-dark{ background:#e2e8f0!important; color:#1e293b!important; }
.badge-soft-primary{ background:var(--ozono-primary-soft); color:var(--ozono-primary-dark); }
.badge-soft-success{ background:#dcfce7; color:#15803d; }
.badge-soft-warning{ background:#ffedd5; color:#b45309; }
.badge-soft-danger{ background:#fde2e7; color:#be123c; }
.badge-soft-info{ background:#e0f2fe; color:#0369a1; }

/* ---------- Dropdowns / flash ---------- */
.dropdown-menu{ border:1px solid var(--ozono-border); border-radius:var(--ozono-radius-md); box-shadow:var(--ozono-shadow); }
.alert{ border-radius:var(--ozono-radius-md); border:1px solid var(--ozono-border); }

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .app-sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%); box-shadow:var(--ozono-shadow); }
  .app-shell.sidebar-open .app-sidebar{ transform:translateX(0); }
  .sidebar-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .topbar-search{ max-width:none; }
  .app-content{ padding:18px; }
  .hide-sm{ display:none!important; }
}
.sidebar-backdrop{ display:none; }
@media (max-width:991.98px){
  .app-shell.sidebar-open .sidebar-backdrop{ display:block; position:fixed; inset:0; background:rgba(15,23,42,.35); z-index:1025; }
}

/* ===== Sidebar colapsable (escritorio) — Sprint 9 ===== */
.sidebar-collapse-btn{display:none;border:1px solid var(--ozono-border);background:#fff;border-radius:10px;width:42px;height:42px;color:#3b4d66;align-items:center;justify-content:center;cursor:pointer;}
.sidebar-collapse-btn:hover{background:var(--ozono-primary-soft);color:var(--ozono-primary-dark);}
@media (min-width:992px){ .sidebar-collapse-btn{display:inline-flex;} }
html.ozono-collapsed .app-sidebar{ width:76px; flex-basis:76px; padding-left:10px; padding-right:10px; }
html.ozono-collapsed .sidebar-logo{ padding:18px 4px 14px; }
html.ozono-collapsed .sidebar-logo img{ max-width:44px; }
html.ozono-collapsed .sidebar-link{ justify-content:center; gap:0; padding-left:0; padding-right:0; }
html.ozono-collapsed .sidebar-link .label{ display:none; }
html.ozono-collapsed .sidebar-link i{ width:auto; font-size:1.15rem; }
html.ozono-collapsed .sidebar-footer .sidebar-link{ justify-content:center; }
@media (max-width:991.98px){ html.ozono-collapsed .app-sidebar{ width:var(--sidebar-w); flex-basis:var(--sidebar-w); padding-left:14px; padding-right:14px; } html.ozono-collapsed .sidebar-link .label{ display:inline; } html.ozono-collapsed .sidebar-link{ justify-content:flex-start; gap:13px; padding:11px 14px; } html.ozono-collapsed .sidebar-logo img{ max-width:150px; } }

/* ===== Pipeline CRM dinámico (Sprint 10) ===== */
.crm-board{ display:flex; gap:16px; padding-bottom:10px; overflow-x:auto; align-items:flex-start; }
.crm-col{ flex:0 0 280px; max-width:280px; background:#f4f7fb; border:1px solid var(--ozono-border); border-radius:16px; display:flex; flex-direction:column; }
.crm-col-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--ozono-border); border-radius:16px 16px 0 0; background:#fff; }
.crm-dropzone{ padding:10px; min-height:120px; display:flex; flex-direction:column; gap:10px; transition:background .12s ease; border-radius:0 0 16px 16px; }
.crm-dropzone.drag-over{ background:var(--ozono-primary-soft); outline:2px dashed var(--ozono-primary); outline-offset:-6px; }
.crm-card{ background:#fff; border:1px solid var(--ozono-border); border-radius:12px; padding:12px; box-shadow:var(--ozono-shadow-sm); cursor:grab; }
.crm-card:active{ cursor:grabbing; }
.crm-card.dragging{ opacity:.5; }
.crm-card.saving{ opacity:.6; pointer-events:none; }
.crm-card-name{ font-weight:700; color:var(--ozono-text); }
.crm-card-line{ font-size:.85rem; color:#475569; margin-top:3px; }
.crm-grip{ cursor:grab; }
.crm-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:#0b1f3a; color:#fff; padding:11px 18px; border-radius:12px; font-size:.9rem; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1080; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.crm-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.crm-toast.ok{ background:#15803d; } .crm-toast.err{ background:#be123c; }

/* ===== Mail corporativo · experiencia tipo Gmail ===== */
.mail-shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:620px;background:#fff;border:1px solid var(--ozono-border);}
.mail-shell-sidebar{background:#f8fbff;border-right:1px solid var(--ozono-border);padding:16px 10px;}
.mail-nav{position:sticky;top:82px;}
.mail-compose-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border-radius:16px;background:#dcecff;color:#0b477f;font-weight:700;border:0;box-shadow:0 1px 3px rgba(15,23,42,.08);}
.mail-compose-btn:hover{background:#cfe5ff;color:#083e70;}
.mail-nav-link{display:flex;align-items:center;gap:13px;min-height:42px;padding:9px 14px;border-radius:0 22px 22px 0;color:#33445e;text-decoration:none;font-size:.92rem;margin:2px 0;}
.mail-nav-link i{width:20px;text-align:center;}
.mail-nav-link:hover{background:#edf4fc;color:#1f3d61;}
.mail-nav-link.active{background:#dcecff;color:#0b477f;font-weight:700;}
.mail-count{margin-left:auto;font-size:.75rem;font-weight:700;}
.mail-nav-divider{height:1px;background:var(--ozono-border);margin:12px 8px;}
.mail-shell-main{min-width:0;background:#fff;}
.mail-toolbar{min-height:58px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ozono-border);}
.mail-list{min-width:0;}
.mail-row{display:grid;grid-template-columns:minmax(150px,220px) minmax(220px,1fr) minmax(150px,220px);gap:14px;align-items:center;min-height:48px;padding:8px 16px;border-bottom:1px solid #edf1f6;color:#33445e;text-decoration:none;background:#f8fafc;}
.mail-row:hover{box-shadow:inset 2px 0 0 var(--ozono-primary),0 1px 4px rgba(15,23,42,.08);background:#fff;color:#1e293b;position:relative;z-index:1;}
.mail-row.unread{background:#fff;color:#172033;font-weight:700;}
.mail-row-sender,.mail-row-subject{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mail-row-date{text-align:right;color:#64748b;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mail-pager{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--ozono-border);}
.mail-compose-layout{display:grid;grid-template-columns:230px minmax(0,920px);gap:18px;align-items:start;}
.mail-compose-layout>.mail-shell-sidebar{border:1px solid var(--ozono-border);border-radius:var(--ozono-radius-lg);}
.mail-compose-card{overflow:hidden;border:1px solid var(--ozono-border);}
.mail-compose-field{display:grid;grid-template-columns:72px 1fr;align-items:center;border-bottom:1px solid var(--ozono-border);padding:0 16px;min-height:48px;}
.mail-compose-field span{font-size:.84rem;color:#64748b;font-weight:600;}
.mail-compose-field input{border:0;outline:0;min-width:0;padding:12px 0;color:var(--ozono-text);background:transparent;}
.mail-editor{min-height:330px;border:0!important;font-size:.95rem;}
.mail-compose-card .ql-toolbar.ql-snow{border:0;border-bottom:1px solid var(--ozono-border);background:#f8fafc;}
.mail-compose-card .ql-container.ql-snow{border:0;}
.mail-compose-card .ql-editor{min-height:330px;padding:18px 20px;}
.mail-compose-footer{border-top:1px solid var(--ozono-border);padding:14px 16px;background:#fff;}
.mail-status-card{border-width:1px!important;border-left-width:4px!important;}
@media(max-width:991.98px){.mail-shell,.mail-compose-layout{grid-template-columns:1fr}.mail-shell-sidebar{border-right:0;border-bottom:1px solid var(--ozono-border);padding:10px}.mail-nav{position:static}.mail-nav nav{display:flex;gap:6px;overflow-x:auto}.mail-nav-link{flex:0 0 auto;border-radius:12px}.mail-nav-divider{display:none}.mail-row{grid-template-columns:minmax(120px,180px) 1fr}.mail-row-date{display:none}}
@media(max-width:575.98px){.mail-row{grid-template-columns:1fr;gap:2px}.mail-row-subject{font-size:.85rem}.mail-compose-field{grid-template-columns:58px 1fr}}
/* Mail deliverability diagnostics */
.mail-deliverability-card .deliverability-item{background:#fff;transition:box-shadow .15s ease,transform .15s ease}
.mail-deliverability-card .deliverability-item:hover{box-shadow:0 .25rem .75rem rgba(18,38,63,.08);transform:translateY(-1px)}
.mail-deliverability-card .badge{font-weight:600}