/* =====================================================================
   Capa shadcn — lenguaje visual shadcn/ui sobre el stack existente
   (Bootstrap + DevExtreme), en CSS plano (sin Tailwind).
   Se carga DESPUÉS de clinic.css en _LayoutModern (gana por orden).
   Acento = azul de marca. Para ir full-neutro: --sc-accent → #18181b.
   ===================================================================== */
:root {
    --sc-bg: #fafafa;
    --sc-card: #ffffff;
    --sc-border: #e4e4e7;      /* zinc-200  */
    --sc-line: #f4f4f5;        /* zinc-100  */
    --sc-fg: #18181b;          /* zinc-900  */
    --sc-muted: #71717a;       /* zinc-500  */
    --sc-muted-2: #a1a1aa;     /* zinc-400  */
    --sc-accent: #1B84FF;
    --sc-accent-ink: #0a5cd6;
    --sc-accent-soft: #eff6ff;
    --sc-ring: rgba(27,132,255,.18);
    --sc-radius: .75rem;
    --sc-radius-sm: .5rem;
    --sc-shadow: 0 1px 2px 0 rgba(0,0,0,.03);
    --sc-shadow-pop: 0 8px 24px -6px rgba(16,24,40,.12), 0 2px 6px -2px rgba(16,24,40,.06);
}

/* ---------- Base ---------- */
body { background: var(--sc-bg); color: var(--sc-fg); }
.text-muted { color: var(--sc-muted) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--sc-fg); }

/* ---------- Topbar MODERNO (.bg-primary): de azul a blanco neutro.
   Acotado a .bg-primary para NO tocar el topbar del tema viejo (.topbar
   .navbar-dark), que tiene texto blanco y quedaría invisible sobre blanco. ---------- */
.topbar.bg-primary { background: var(--sc-card) !important; border-bottom: 1px solid var(--sc-border) !important; box-shadow: none !important; }
.topbar .clinic-brand,
.topbar .clinic-title,
.topbar .clinic-user,
.topbar .clinic-username { color: var(--sc-fg) !important; }
.topbar .clinic-brand iconify-icon { color: var(--sc-accent) !important; }
.topbar .clinic-user iconify-icon { color: var(--sc-muted) !important; }

/* ---------- Menú horizontal: items neutros; activo tenue + acento ---------- */
.left-sidebar.with-horizontal { background: var(--sc-card); border-bottom: 1px solid var(--sc-border); box-shadow: none; }
.left-sidebar.with-horizontal .sidebar-link { color: #3f3f46; border-radius: var(--sc-radius-sm); font-weight: 500; padding: .45rem .7rem; }
.left-sidebar.with-horizontal .sidebar-link .aside-icon { color: var(--sc-muted); }
.left-sidebar.with-horizontal .sidebar-link:hover { background: var(--sc-line); }
.left-sidebar.with-horizontal .sidebar-item.selected .sidebar-link,
.left-sidebar.with-horizontal .sidebar-link.active { background: var(--sc-accent-soft) !important; color: var(--sc-accent) !important; }
.left-sidebar.with-horizontal .sidebar-item.selected .sidebar-link .aside-icon,
.left-sidebar.with-horizontal .sidebar-link.active .aside-icon { color: var(--sc-accent) !important; }

/* ---------- Cards (todas las pantallas: modern + normal + default) ---------- */
.card { border: 1px solid var(--sc-border) !important; border-radius: var(--sc-radius) !important; box-shadow: var(--sc-shadow) !important; }
.card-header { background: transparent; border-bottom: 1px solid var(--sc-line); font-weight: 600; }

/* ---------- Botones (Bootstrap) ---------- */
.btn { border-radius: var(--sc-radius-sm); font-weight: 500; box-shadow: none !important; }
.btn-primary { background: var(--sc-accent); border-color: var(--sc-accent); }
.btn-primary:hover, .btn-primary:focus { background: var(--sc-accent-ink); border-color: var(--sc-accent-ink); }
.btn-outline-primary { color: var(--sc-accent); border-color: var(--sc-border); }
.btn-outline-primary:hover { background: var(--sc-accent-soft); border-color: var(--sc-accent); color: var(--sc-accent); }
/* Active/focus: BS5 pinta fondo azul sólido y esta capa dejaba el texto azul → invisible. */
.btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary:focus,
.btn-outline-primary:first-child:active, .btn-check:checked + .btn-outline-primary {
    background: var(--sc-accent-soft) !important; border-color: var(--sc-accent) !important; color: var(--sc-accent-ink) !important;
}
.btn-light, .btn-outline-secondary { background: var(--sc-card); border-color: var(--sc-border); color: #3f3f46; }
.btn-light:hover, .btn-outline-secondary:hover { background: var(--sc-line); border-color: var(--sc-border); color: var(--sc-fg); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sc-ring) !important; }

/* ---------- Formularios ---------- */
.form-label { font-size: .8rem; color: var(--sc-muted); font-weight: 500; margin-bottom: .25rem; }
.form-control, .form-select { border: 1px solid var(--sc-border); border-radius: var(--sc-radius-sm); color: var(--sc-fg); }
.form-control::placeholder { color: var(--sc-muted-2); }
.form-control:focus, .form-select:focus { border-color: var(--sc-accent); box-shadow: 0 0 0 3px var(--sc-ring); }
.input-group-text { background: var(--sc-line); border-color: var(--sc-border); color: var(--sc-muted); }

/* ---------- Tablas (Bootstrap) ---------- */
.table { color: var(--sc-fg); }
.table > thead th { color: var(--sc-muted); font-weight: 500; font-size: .75rem; border-bottom: 1px solid var(--sc-border); background: transparent; }
.table > tbody > tr > td { border-top: 1px solid var(--sc-line); vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: #fafafa; }

/* ---------- Badges / pills ---------- */
.badge { font-weight: 500; border-radius: 9999px; }
.sc-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 500; padding: .15rem .55rem; border-radius: 9999px; border: 1px solid transparent; line-height: 1.4; }
.sc-pill .dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; opacity: .8; }
.sc-pill-green { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.sc-pill-amber { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.sc-pill-blue  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.sc-pill-gray  { background: #f4f4f5; color: #52525b; border-color: #e4e4e7; }
.sc-pill-rose  { background: #fef2f2; color: #be123c; border-color: #fecdd3; }

/* ---------- Footer (todas las pantallas) ---------- */
.sc-footer { margin-top: 1.25rem; padding: .9rem .25rem 1.1rem; border-top: 1px solid var(--sc-line); font-size: .8rem; color: var(--sc-muted); }
.sc-footer .sc-footer-ver { font-weight: 500; color: var(--sc-muted); background: var(--sc-line); border: 1px solid var(--sc-border); border-radius: 9999px; padding: .1rem .6rem; }

/* ---------- Dropdowns (popover shadcn) ---------- */
.dropdown-menu { border: 1px solid var(--sc-border); border-radius: var(--sc-radius-sm); box-shadow: var(--sc-shadow-pop); padding: .3rem; }
.dropdown-item { border-radius: calc(var(--sc-radius-sm) - .15rem); font-size: .875rem; padding: .45rem .6rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sc-line); }
.dropdown-divider { border-color: var(--sc-line); }

/* =====================================================================
   DevExtreme — neutralización hacia shadcn (grids, toolbar, pager, botones,
   editores). Es la mayor superficie visual de la app. Overrides conservadores.
   ===================================================================== */
.dx-widget { font-family: inherit; }

/* DataGrid: contenedor con borde/radio de card */
.dx-datagrid,
.dx-datagrid-rowsview { border-color: var(--sc-border) !important; }
.dx-datagrid { color: var(--sc-fg); }

/* Encabezado: fondo tenue, texto muted, sin mayúsculas pesadas */
.dx-datagrid-headers,
.dx-datagrid .dx-header-row { background: #fafafa !important; }
.dx-datagrid .dx-header-row > td { color: var(--sc-muted) !important; font-weight: 500 !important; border-color: var(--sc-line) !important; }

/* Celdas y filas: líneas suaves, hover neutro */
.dx-datagrid .dx-row > td { border-color: var(--sc-line) !important; }
.dx-datagrid-rowsview .dx-row-alt > td { background: transparent !important; }
.dx-datagrid-rowsview .dx-data-row.dx-state-hover > td { background: #fafafa !important; }
.dx-datagrid-rowsview .dx-selection.dx-row > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > td { background: var(--sc-accent-soft) !important; color: var(--sc-accent-ink) !important; }

/* Filtro / búsqueda */
.dx-datagrid-filter-row { background: #fff !important; }
.dx-datagrid-search-panel { border-radius: var(--sc-radius-sm); }

/* Toolbar del grid */
.dx-toolbar { background: transparent !important; }

/* Pager */
.dx-datagrid-pager { border-top: 1px solid var(--sc-line) !important; }
.dx-pager .dx-page,
.dx-pager .dx-page-size { border-radius: var(--sc-radius-sm); }
.dx-pager .dx-selection { background: var(--sc-accent) !important; color: #fff !important; }

/* Botones DevExtreme */
.dx-button { border-radius: var(--sc-radius-sm); }
.dx-button-mode-contained.dx-button-default { background: var(--sc-accent); border-color: var(--sc-accent); }
.dx-button-mode-contained.dx-button-default.dx-state-hover { background: var(--sc-accent-ink); border-color: var(--sc-accent-ink); }
.dx-button-mode-outlined { border-color: var(--sc-border); }

/* Editores (textbox, selectbox, etc.): borde + radio + ring */
.dx-texteditor.dx-editor-outlined { border-radius: var(--sc-radius-sm); border-color: var(--sc-border); }
.dx-texteditor.dx-editor-outlined.dx-state-focused { border-color: var(--sc-accent); box-shadow: 0 0 0 3px var(--sc-ring); }

/* Popups (~card shadcn) */
.dx-popup-normal { border-radius: var(--sc-radius) !important; }
.dx-overlay-content { box-shadow: var(--sc-shadow-pop) !important; }