/* ============================================================================
   INTELLI-DENTAL · Capa "Admiro" — el look de intelli-cevaluador
   ----------------------------------------------------------------------------
   Copia de lo que intelli-cevaluador tiene PRENDIDO hoy en Personalizar
   (medido en su panel el 16/sep/2026):

       paleta admiro · modo claro · densidad cómoda · fondo · geometría ·
       sombras · tipografía · tarjetas · botones · tablas · formularios ·
       KPI · menú lateral · barra superior

   Los valores salen de su assets/admiro/css/admiro-layer.css:
       fondo #f9f7f6 · texto #2f2f3b · títulos #292929 · tenue #aaa3a0
       borde #ebebeb · tarjetas 24px · botones e inputs 30px (píldora)
       sombra 0 0 50px rgba(0,0,0,.03) · letra Nunito Sans

   El COLOR DE ACENTO no se fija aquí: sigue siendo el que la clínica elige en
   Configuración del sistema (lo escribe partials/tema.php). El de fábrica de
   Admiro es #308e87, un verde azulado muy parecido al de la clínica demo.

   Se carga DESPUÉS de app.css y del <style> del tema, así que manda.
   Para volver al look anterior basta con quitar su <link> de partials/tema.php.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap");

/* ------------------------------------------------------------ 1. Tokens */
:root {
    --pc-bg:          #f9f7f6;
    --pc-surface:     #ffffff;
    --pc-text:        #2f2f3b;
    --pc-text-muted:  #8a8380;
    --pc-muted-navy:  #aaa3a0;
    --pc-border:      #ebebeb;
    --pc-heading:     #292929;
    --pc-heading-rgb: 41, 41, 41;
    --pc-radius:      24px;
    --pc-radius-lg:   24px;
    --pc-shadow:      0 0 50px rgba(0, 0, 0, .03);
    --pc-shadow-hover:0 10px 40px rgba(0, 0, 0, .06);
    --pc-font:        "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pc-font-head:   "Nunito Sans", system-ui, sans-serif;
    --pc-font-title:  "Nunito Sans", system-ui, sans-serif;

    --adm-secondary:  #f39159;
    --adm-success:    #3eb95f;
    --adm-warning:    #ea9200;
    --adm-danger:     #e74b2b;
    --adm-pill:       999px;
    --adm-input:      30px;
    --adm-pad:        30px;

    /* alias viejos que todavía leen algunas reglas */
    --navy:    #292929;
    --canvas:  #f9f7f6;
    --text:    #2f2f3b;
    --muted:   #aaa3a0;
    --border:  #ebebeb;
    --danger:  #e74b2b;
    --success: #3eb95f;
}

html, body { background: var(--pc-bg) !important; }
body { color: var(--pc-text); font-family: var(--pc-font); letter-spacing: .2px; }
h1, h2, h3, h4, h5, h6 { color: var(--pc-heading); font-family: var(--pc-font-head); letter-spacing: .5px; }
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
button, select, input, textarea, table { font-family: var(--pc-font); }
a { color: var(--pc-accent); }
.eyebrow { color: var(--pc-muted-navy); letter-spacing: .12em; }

/* ------------------------------------------------ 2. Menú lateral (sidebar) */
.sidebar {
    background: var(--pc-surface) !important;
    border-right: 0 !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, .03) !important;
}
.brand--inverse { border-bottom: 0; }
.brand strong { color: var(--pc-heading); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
.brand small { color: var(--pc-muted-navy); }
.brand-mark { border-radius: 14px; box-shadow: none; }

.side-search-field { border-radius: var(--adm-pill) !important; border-color: var(--pc-border) !important; background: var(--pc-surface) !important; }
.side-search-field input { border: 0 !important; min-height: 0; padding-left: 4px; background: transparent !important; box-shadow: none !important; }

.primary-nav { gap: 4px; grid-auto-rows: max-content; align-content: start; }
.primary-nav::before { display: none; }

/* Las cabeceras de grupo: píldora azul clara, como las de cevaluador */
.nav-group {
    margin: 10px 0 2px;
    padding: 8px 12px;
    border-radius: 16px;
    background: #dbeafe;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .03);
    color: var(--pc-muted-navy);
    font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
}

.nav-item {
    grid-template-columns: 30px 1fr auto;
    gap: 10px;
    min-height: 48px;
    padding: 9px 10px;
    border-radius: var(--adm-pill);
    color: var(--pc-text);
    font-size: 13.5px; font-weight: 500;
}
.nav-item > svg.icon {
    box-sizing: border-box;
    width: 30px; height: 30px;
    padding: 6px;
    border-radius: 12px;
    background: rgba(var(--pc-accent-rgb), .07);
    color: var(--pc-accent) !important;
}
a.nav-item:hover { background: rgba(var(--pc-accent-rgb), .08); color: var(--pc-accent); }
.nav-item.is-active {
    background: rgba(var(--pc-accent-rgb), .2);
    color: var(--pc-accent);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}
.nav-item.is-active > svg.icon { background: var(--pc-accent); color: #fff !important; }
.nav-item.is-disabled > svg.icon { background: #f4f4f4; color: var(--pc-muted-navy) !important; }
.nav-item small { border-radius: var(--adm-pill); background: #fff5d9; color: #c97800; }

/* «Inicio»: el botón azul del tope del menú de cevaluador */
.primary-nav > a.nav-item:first-child {
    margin-bottom: 4px;
    min-height: 44px;
    padding: 9px 13px;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(37, 99, 235, .22);
}
.primary-nav > a.nav-item:first-child > svg.icon { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: rgba(255, 255, 255, .18); color: #fff !important; }
.primary-nav > a.nav-item:first-child:hover { background: #1d4ed8; color: #fff; }

.sidebar-footer { border-top: 1px solid var(--pc-border); }
.side-user { border-radius: 18px; }
.side-avatar { border-radius: 50%; background: var(--pc-accent); color: #fff; }
.side-links a {
    border-radius: var(--adm-pill);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
}
.side-links a[data-secure-logout] { background: rgba(231, 75, 43, .1); color: var(--adm-danger); }

/* ------------------------------------------------- 3. Barra superior */
.topbar, .page-heading {
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow);
    padding: 20px 26px;
}
.topbar h1, .page-heading h1 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: .3px; }
.topbar-context, .page-heading p { color: var(--pc-muted-navy); }
.nbell-btn { border-radius: 50%; background: rgba(var(--pc-accent-rgb), .08); color: var(--pc-accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.nbell-panel { border-radius: 24px; border: 0; box-shadow: 0 18px 50px rgba(0, 0, 0, .12); }

/* ---------------------------------------------------------- 4. Botones */
.button {
    height: 44px;
    padding: 0 1.4rem;
    border-radius: var(--adm-input);
    font-size: 14px; font-weight: 600; letter-spacing: .3px;
    box-shadow: none !important;
    transition: all .2s ease;
}
.button--small { height: 34px; padding: 0 1rem; font-size: 12px; }
.button--primary { background: var(--pc-accent); color: #fff; border: 1px solid var(--pc-accent); }
/* El secundario de cevaluador es el «outline»: blanco con borde del acento */
.button--secondary {
    background: var(--pc-surface);
    color: var(--pc-accent);
    border: 1px solid var(--pc-accent);
}
.button--secondary:hover { background: var(--pc-accent); color: #fff; filter: none; }
.button--danger { background: var(--adm-danger); color: #fff; border: 1px solid var(--adm-danger); }
.button--ghost { border-radius: var(--adm-input); }
.button:hover { filter: brightness(1.06); }

/* ------------------------------------------------------- 5. Formularios */
select,
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"],
.stacked-form input, .stacked-form select, .cfg-input {
    min-height: 44px;
    padding-left: 1.1rem; padding-right: 1.1rem;
    border: 1px solid var(--pc-border) !important;
    border-radius: var(--adm-input) !important;
    background-color: var(--pc-surface);
    color: var(--pc-text);
    font-size: 14px;
}
textarea { border: 1px solid var(--pc-border) !important; border-radius: 16px !important; padding: .7rem 1.1rem; }
input::placeholder, textarea::placeholder { color: var(--pc-muted-navy); }
input:focus, select:focus, textarea:focus {
    border-color: var(--pc-accent) !important;
    box-shadow: 0 0 0 4px rgba(var(--pc-accent-rgb), .12);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--pc-accent); }
.stacked-form label, .patient-form label, .consent-form label, .appointment-form label,
.continuity-form label, .soap-form label, .context-switcher label, .cfg-etiqueta {
    color: var(--pc-heading); font-size: 13px; font-weight: 600;
}

/* ------------------------------------------------ 6. Tarjetas y paneles */
.panel, .schedule-toolbar, .schedule-summary div, .day-timeline > li > article,
.patient-form-card, .cash-session-panel, .cut-grid article,
.inventory-item-list article, .inventory-movements article,
.charge-card, .payment-list > article, .billing-eligible > article,
.waitlist article, .series-list article, .clinical-entry,
.encounter-list > a, .receipt-grid article, .decision-receipt,
.plan-items article, .periodontal-metrics article, .billing-metrics article,
.reminder-readiness > div, .odontogram-board, .periodontal-board,
.finding-register > div, .chart-integrity, .account-card, .credential-card,
.chart-card, .settings-panel, .role-card, .pf-card, .pend {
    border: 0 !important;
    border-radius: var(--pc-radius) !important;
    background: var(--pc-surface);
    box-shadow: var(--pc-shadow) !important;
    transition: transform .3s ease, box-shadow .3s ease;
}
.panel { padding: var(--adm-pad); }
.panel:hover, .chart-card:hover { transform: translateY(-2px); }

/* Renglones y cajitas dentro de las tarjetas: redondeo intermedio */
.patient-row, .svc-row, .pend-col, .pend-col li, .appointment-list > li,
.empty-state, .checklist li {
    border-radius: 16px;
}
.pend-col { background: #fbfaf9; border-color: var(--pc-border); }

/* -------------------------------------------------------------- 7. KPI */
.kpi-tile, .metric-card {
    position: relative;
    overflow: hidden;
    padding: var(--adm-pad) !important;
    border: 0 !important;
    border-radius: var(--pc-radius) !important;
    background: var(--pc-surface) !important;
    box-shadow: var(--pc-shadow) !important;
}
.kpi-tile::after, .metric-card::after {
    content: "";
    position: absolute; right: -30px; top: -30px;
    width: 110px; height: 110px; border-radius: 50%;
    background: rgba(var(--pc-accent-rgb), .05);
    pointer-events: none;
}
.kpi-tile .kpi-name, .metric-card > span:not(.metric-icon), .metric-label {
    color: var(--pc-muted-navy) !important;
    font-size: 12px !important; font-weight: 600 !important;
    letter-spacing: .6px; text-transform: uppercase;
}
.kpi-tile .kpi-value, .metric-card strong, .metric-value {
    color: var(--pc-heading) !important;
    font-size: 26px !important; font-weight: 700 !important; line-height: 1.25;
}
.kpi-tile .kpi-foot, .metric-card small, .metric-note { color: var(--pc-muted-navy) !important; font-size: 12px !important; }
.kpi-tile .kpi-ic, .metric-card .metric-icon, .access-kpi-icon, .settings-panel__icon {
    position: relative; z-index: 1;
    width: 46px; height: 46px;
    border-radius: 14px !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------- 8. Tablas */
.workspace table { border-collapse: collapse; color: var(--pc-text); }
.workspace table th, .workspace table td { padding: 16px 18px; border-bottom: 1px solid var(--pc-border); }
.workspace table thead th {
    background: var(--pc-surface) !important;
    color: var(--pc-heading) !important;
    font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: none;
}
.workspace table tbody tr:nth-of-type(odd) > * { background: #f4f4f4; }
.workspace table tbody tr:hover > * { background: rgba(var(--pc-accent-rgb), .05); }

/* ------------------------------------------------ 9. Insignias y avisos */
.badge, .status, .billing-state, .chip, .pill, .stage-pill, .pend-tag {
    border-radius: var(--adm-pill) !important;
    font-weight: 700;
}
.status, .badge { padding: 3px 10px; font-size: 11px; }
.flash {
    border: 0 !important;
    border-radius: 16px;
    box-shadow: var(--pc-shadow);
}
.flash--success { background: rgba(62, 185, 95, .12); color: #237a3b; }
.flash--error { background: rgba(231, 75, 43, .1); color: #b3321a; }

/* ------------------------------------------------ 10. Tabs y detalles */
.filter-tab, .cfg-tab, .settings-nav__item { border-radius: var(--adm-pill) !important; }
.filter-tab.is-active, .cfg-tab.is-active, .settings-nav__item.is-active {
    background: rgba(var(--pc-accent-rgb), .2) !important;
    color: var(--pc-accent) !important;
}
details > summary { border-radius: 16px; }

/* ------------------------------------------------ 11. Teléfono */
@media (max-width: 860px) {
    :root { --adm-pad: 20px; }
    .primary-nav > a.nav-item:first-child { margin-bottom: 0; min-height: 0; }
    /* En el teléfono el menú es una tira horizontal: la cabecera de grupo
       no cabe como píldora, se queda como etiqueta. */
    .nav-group { margin: 0; padding: 0 4px; background: none; box-shadow: none; align-self: center; }
}

@media print {
    .panel, .chart-card, .kpi-tile, .metric-card { box-shadow: none !important; transform: none !important; }
    .kpi-tile::after, .metric-card::after { display: none; }
}

/* Campos que ya dibujan su propia «píldora» con icono (acceso, buscador del
   menú): el input interior NO lleva borde, fondo ni sombra, si no se ve
   doble. Va con !important porque la regla general de arriba también lo usa. */
.auth-input input, .auth-input input:focus,
.side-search-field input, .side-search-field input:focus {
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    box-shadow: none !important; min-height: 0; padding-left: 0; padding-right: 0; outline: none;
}