/* =====================================================================
   Asambleas de Circuito — Tema "iCloud" (multicolor + grafito)
   Tarjetas grandes y aireadas, cabecera tintada, iconos squircle de
   colores, filas tipo lista. Controles en grafito neutro. Modo claro.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg: #f5f5f7;
    --surface: #ffffff;
    --glass: rgba(255, 255, 255, .72);
    --ink: #1d1d1f;
    --muted: #6e6e73;
    --faint: #86868b;
    --line: rgba(0, 0, 0, .08);
    --line-soft: rgba(0, 0, 0, .06);

    /* Controles: grafito */
    --accent: #1d1d1f;
    --accent-soft: #3a3a3c;

    /* Colores de módulo (estilo apps iCloud) */
    --c-green:  #34C759;
    --c-purple: #AF52DE;
    --c-orange: #FF9500;
    --c-red:    #FF3B30;
    --c-teal:   #30B0C7;
    --c-pink:   #FF2D92;
    --c-gray:   #8E8E93;

    --radius-lg: 22px;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 34px rgba(0,0,0,.06);
    --shadow-hover: 0 10px 24px rgba(0,0,0,.08), 0 22px 50px rgba(0,0,0,.10);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 "Inter", system-ui, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(1100px 520px at 100% -10%, #eef1f6 0, rgba(238,241,246,0) 60%),
        radial-gradient(900px 480px at -5% 0%, #f0f0f3 0, rgba(240,240,243,0) 55%),
        var(--bg);
    background-attachment: fixed;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.022em; font-weight: 600; }
.fw-bold { font-weight: 700 !important; }

/* ---------- Navbar / Sidebar (vibrancy) ---------- */
.navbar {
    background: var(--glass) !important;
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line) !important;
}
.navbar-brand { color: var(--ink); font-weight: 600; }
.navbar-brand .text-primary, .text-primary { color: var(--ink) !important; }
aside, .offcanvas-body { background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
aside.border-end { border-color: var(--line) !important; }
.nav .nav-link {
    color: #3a3a3c; border-radius: 8px; margin: 2px 10px; padding: .5rem .7rem; font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.nav .nav-link:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.nav .nav-link.active { background: rgba(0,0,0,.08); color: var(--ink) !important; font-weight: 600; }
.text-uppercase.small { letter-spacing: .045em; color: var(--faint) !important; }

/* =====================================================================
   Tarjetas estilo iCloud
   ===================================================================== */
.ic-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}
.ic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.ic-card__head {
    display: flex; align-items: center; gap: 14px;
    padding: 17px 20px;
    background: linear-gradient(180deg, #fcfcfe 0%, #f4f5f8 100%);
    border-bottom: 1px solid var(--line-soft);
}
.ic-card__icon {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
    display: grid; place-items: center; color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.14);
}
.ic-card__icon i, .ic-card__icon svg { width: 24px; height: 24px; stroke-width: 2.1; }
.ic-card__titles { min-width: 0; }
.ic-card__title { font-weight: 700; font-size: 1.15rem; line-height: 1.15; }
.ic-card__sub { color: var(--muted); font-size: .85rem; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.ic-card__sub i, .ic-card__sub svg { width: 14px; height: 14px; }
.ic-card__action { margin-left: auto; color: var(--faint); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; }
.ic-card__action:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.ic-card__body { padding: 6px 10px 12px; }

/* Filas tipo lista */
.ic-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 12px; border-radius: 12px;
    text-decoration: none; color: var(--ink);
    transition: background .13s ease;
}
.ic-row:hover { background: #f4f5f8; color: var(--ink); }
.ic-row + .ic-row { box-shadow: 0 -1px 0 var(--line-soft); }
.ic-row__icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.ic-row__icon i, .ic-row__icon svg { width: 17px; height: 17px; }
.ic-row__main { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ic-row__main b { font-weight: 600; }
.ic-row__main small { color: var(--muted); font-size: .8rem; margin-top: 1px; }
.ic-row__meta { margin-left: auto; color: var(--faint); font-size: .82rem; white-space: nowrap; }
.ic-row__chev { margin-left: auto; color: #c7c7cc; width: 18px; height: 18px; }

/* Colores de icono */
.ic--green  { background: var(--c-green); }
.ic--purple { background: var(--c-purple); }
.ic--orange { background: var(--c-orange); }
.ic--red    { background: var(--c-red); }
.ic--teal   { background: var(--c-teal); }
.ic--pink   { background: var(--c-pink); }
.ic--gray   { background: var(--c-gray); }

.ic-empty { text-align: center; color: var(--muted); padding: 34px 16px; }
.ic-empty i, .ic-empty svg { width: 40px; height: 40px; color: #c7c7cc; }

/* =====================================================================
   Componentes Bootstrap (para el resto de páginas) — grafito neutro
   ===================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--line) !important;
    border-radius: 18px;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.card.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.card-header, .card-footer { background: transparent; border-color: var(--line-soft); }

.btn { border-radius: var(--radius-sm); font-weight: 500; }
.btn-primary { background: var(--ink); border: none; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.btn-primary:hover, .btn-primary:focus { background: #000; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.btn-outline-primary { color: var(--ink); border-color: rgba(0,0,0,.25); }
.btn-outline-primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-outline-secondary { color: #3a3a3c; border-color: var(--line); background: var(--surface); }
.btn-outline-secondary:hover { background: #f2f2f4; color: var(--ink); border-color: var(--line); }
.btn-sm { border-radius: 8px; }

.badge { border-radius: 7px; font-weight: 600; }
.badge.text-bg-light { background: #f0f0f2 !important; color: #3a3a3c !important; border: 1px solid var(--line-soft); }
.badge.text-bg-success { background: var(--c-green) !important; }
.badge.text-bg-warning { background: var(--c-orange) !important; color: #fff !important; }
.badge.text-bg-info { background: var(--c-teal) !important; color: #fff !important; }
.badge.text-bg-primary { background: var(--ink) !important; }
.badge.text-bg-secondary { background: var(--c-gray) !important; }
.badge.text-bg-dark { background: #48484a !important; }

.form-control, .form-select { border-color: var(--line); border-radius: var(--radius-sm); color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: #a1a1a6; box-shadow: 0 0 0 4px rgba(0,0,0,.08); }
.form-label { font-weight: 500; color: #3a3a3c; font-size: .9rem; }
.form-text { color: var(--faint); }

.table { --bs-table-hover-bg: rgba(0,0,0,.025); }
.table > thead.table-light th { background: #fafafb; color: var(--faint); text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; font-weight: 600; border-color: var(--line-soft); }
.table td, .table th { border-color: var(--line-soft); }

.breadcrumb { --bs-breadcrumb-divider-color: #c7c7cc; }
.breadcrumb-item a { color: var(--muted); text-decoration: none; }
.breadcrumb-item.active { color: #3a3a3c; }

.text-secondary { color: var(--muted) !important; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: #000; text-decoration: underline; }
.shadow-sm { box-shadow: var(--shadow) !important; }

body.auth-bg { background: radial-gradient(900px 500px at 50% -10%, #eef0f4 0, rgba(238,240,244,0) 60%), var(--bg); }

/* =====================================================================
   Actualización: acento AZUL + tarjetas con cabecera en gradiente
   ===================================================================== */
:root {
    --accent: #1d4ed8;
    --accent-strong: #1e3a8a;
    --grad-blue: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%);
    --line2: rgba(2, 6, 23, .08);
    --card-shadow: 0 6px 20px rgba(15, 23, 42, .06);
    --card-shadow-hover: 0 14px 30px rgba(15, 23, 42, .12);
}

/* --- Menú lateral con vida --- */
.nav .nav-link { color: #334155; font-weight: 500; }
.nav .nav-link i, .nav .nav-link svg { opacity: .9; }
.nav .nav-link:hover { background: rgba(29, 78, 216, .08); color: var(--accent); }
.nav .nav-link.active {
    background: var(--grad-blue) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(29, 78, 216, .28);
}
.nav .nav-link.active i, .nav .nav-link.active svg { color: #fff; opacity: 1; }
.text-secondary.small.text-uppercase, .text-uppercase.small { color: #94a3b8 !important; }

/* --- Botones y enlaces en azul --- */
.btn-primary { background: var(--grad-blue); border: none; color: #fff; box-shadow: 0 4px 12px rgba(29, 78, 216, .22); }
.btn-primary:hover, .btn-primary:focus { filter: brightness(.97); color: #fff; box-shadow: 0 6px 16px rgba(29, 78, 216, .32); }
.btn-outline-primary { color: var(--accent); border-color: rgba(29, 78, 216, .5); }
.btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
a { color: var(--accent); }
a:hover { color: var(--accent-strong); }
.text-primary { color: var(--accent) !important; }
.navbar-brand .text-primary { color: var(--accent) !important; }
.badge.text-bg-primary { background: var(--accent) !important; }
.form-control:focus, .form-select:focus { border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(59, 130, 246, .18); }

/* --- Tarjeta con cabecera en gradiente --- */
.gcard {
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.gcard:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.gcard__head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    background: var(--grad-blue);
    color: #fff; font-weight: 700; font-size: 1.02rem;
    border-top-left-radius: 16px; border-top-right-radius: 16px;
}
.gcard__head i, .gcard__head svg { width: 20px; height: 20px; color: #fff; stroke-width: 2.1; }
.gcard__head .gcard__actions { margin-left: auto; display: flex; gap: 6px; }
.gcard__head .gcard__actions a {
    color: #fff; opacity: .85; width: 32px; height: 32px;
    display: grid; place-items: center; border-radius: 8px;
}
.gcard__head .gcard__actions a:hover { opacity: 1; background: rgba(255,255,255,.18); color: #fff; }
.gcard__chip { background: rgba(255,255,255,.22); color:#fff; padding: 2px 11px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.gcard__body { padding: 18px; }
.gcard__body dl { margin: 0; }

/* =====================================================================
   Hero con banner rectangular (ficha de asamblea)
   ===================================================================== */
.asm-hero {
    position: relative;
    min-height: 210px;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--line2);
    box-shadow: var(--card-shadow);
}
.asm-hero__scrim {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 22px 26px;
    background: linear-gradient(180deg, rgba(2,6,23,0) 25%, rgba(2,6,23,.78) 100%);
    color: #fff;
}
.asm-hero__title { font-size: 2rem; font-weight: 800; line-height: 1.08; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.asm-hero__sub { font-style: italic; font-weight: 500; font-size: 1.08rem; opacity: .96; margin-top: 3px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.asm-hero__edit {
    position: absolute; top: 14px; right: 14px;
    background: rgba(255,255,255,.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: #fff; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
}
.asm-hero__edit:hover { background: rgba(255,255,255,.4); color: #fff; }

/* Hero de respaldo (sin banner): gradiente azul */
.asm-hero--grad { background: var(--grad-blue); min-height: 150px; }
.asm-hero--grad .asm-hero__scrim { background: none; }

/* Datos más legibles */
.asm-data dt { font-style: italic; font-weight: 400; color: var(--muted); }
.asm-data dd { font-weight: 700; font-size: 1.02rem; }

/* =====================================================================
   Tarjeta de asamblea en el listado (con banner de cabecera)
   ===================================================================== */
.atile {
    display: block; height: 100%;
    background: #fff; border: 1px solid var(--line2); border-radius: 16px;
    overflow: hidden; box-shadow: var(--card-shadow);
    text-decoration: none; color: var(--ink);
    transition: transform .18s ease, box-shadow .18s ease;
}
.atile:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); color: var(--ink); text-decoration: none; }
.atile__media { position: relative; height: 152px; background-size: cover; background-position: center; }
.atile__media--grad { background: var(--grad-blue); }
.atile__scrim {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(2,6,23,0) 35%, rgba(2,6,23,.82) 100%);
    color: #fff;
}
.atile__title { font-weight: 800; font-size: 1.14rem; line-height: 1.12; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.atile__sub { font-style: italic; font-size: .85rem; opacity: .95; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.atile__badge { position: absolute; top: 10px; right: 10px; }
.atile__body { padding: 14px 16px; }
.atile__meta { color: var(--muted); font-size: .9rem; }
.atile__meta i, .atile__meta svg { width: 15px; height: 15px; vertical-align: -2px; }
.atile__meta .lbl { font-style: italic; }

/* =====================================================================
   Formularios con campos grandes y con diseño (.bigform)
   ===================================================================== */
.bigform .form-label { font-weight: 600; font-size: .95rem; color: #334155; margin-bottom: .35rem; }
.bigform .form-control,
.bigform .form-select {
    padding: .72rem .95rem;
    font-size: 1.02rem;
    border-radius: 12px;
    background: #fbfcff;
    border: 1px solid var(--line2);
}
.bigform textarea.form-control { min-height: 130px; line-height: 1.5; }
.bigform .form-control:focus,
.bigform .form-select:focus {
    background: #fff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(59,130,246,.16);
}
.bigform .form-text { font-size: .82rem; }
.bigform .input-icon { position: relative; }
.bigform .input-icon > i, .bigform .input-icon > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #94a3b8; }
.bigform .input-icon > .form-control { padding-left: 40px; }

/* =====================================================================
   Captura simple para el usuario final (texto grande, bloques, barra inferior)
   ===================================================================== */
.cap { padding-bottom: 96px; }
.cap h1 { font-size: 2rem; }
.cap .lead-xl { font-size: 1.25rem; }

/* Bloques grandes de selección */
.cap-blocks { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 768px) { .cap-blocks { grid-template-columns: 1fr 1fr; } }
.cap-block {
    display: flex; align-items: center; gap: 18px;
    background: #fff; border: 1px solid var(--line2); border-radius: 20px;
    box-shadow: var(--card-shadow); padding: 26px 24px; text-decoration: none; color: var(--ink);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cap-block:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); border-color: rgba(29,78,216,.35); color: var(--ink); }
.cap-block__icon { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--grad-blue); }
.cap-block__icon i, .cap-block__icon svg { width: 34px; height: 34px; }
.cap-block__title { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.cap-block__sub { color: var(--muted); font-size: 1.05rem; }
.cap-block__arrow { margin-left: auto; color: #c7c7cc; }
.cap-block__arrow svg, .cap-block__arrow i { width: 28px; height: 28px; }

/* Preguntas grandes */
.cap .q { margin-bottom: 26px; }
.cap .q-label { display: block; font-size: 1.35rem; font-weight: 700; margin-bottom: 10px; line-height: 1.25; }
.cap .q-help { font-size: 1.02rem; color: var(--muted); margin-bottom: 10px; }
.cap .form-control, .cap .form-select { font-size: 1.2rem; padding: .8rem 1rem; border-radius: 12px; }
.cap textarea.form-control { min-height: 130px; }
.cap .form-check { min-height: auto; margin-bottom: 8px; padding-left: 2.2rem; }
.cap .form-check-input { width: 1.5rem; height: 1.5rem; margin-left: -2.2rem; margin-top: .15rem; }
.cap .form-check-label { font-size: 1.2rem; }

/* Barra inferior fija */
.cap-footer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    background: var(--glass); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--line2); box-shadow: 0 -6px 20px rgba(15,23,42,.06);
}
.cap-footer__inner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; max-width: 1100px; margin: 0 auto; }
.cap-footer .status { font-weight: 700; font-size: 1.05rem; }
.cap-footer .btn { font-size: 1.1rem; padding: .6rem 1.1rem; }
.cap .progress { height: 12px; border-radius: 8px; }
@media (min-width: 992px) { .cap { padding-left: 0; } }

/* Igualar altura solo cuando se pide explícitamente */
.gcard.h-100 { height: 100%; }

/* =====================================================================
   Contador estilo aeropuerto (split-flap) para tarjetas de asamblea
   ===================================================================== */
.flap-cd {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: flex; align-items: center; gap: 6px;
    background: rgba(2, 6, 23, .55);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    padding: 6px 9px; border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.flap-cd .cells { display: flex; gap: 3px; }
.flap-cd .cell {
    position: relative;
    background: linear-gradient(#141c2b, #0b1220);
    color: #ffb300; font-weight: 800;
    font-family: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.15rem; line-height: 1; padding: 6px 7px; border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.4);
    min-width: 20px; text-align: center;
}
.flap-cd .cell::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 1px; background: rgba(0,0,0,.55); transform: translateY(-.5px); }
.flap-cd .lbl { color: #e5e7eb; font-size: .62rem; font-weight: 800; letter-spacing: .08em; }
.flap-cd .time { color: #cbd5e1; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* =====================================================================
   Panel — encabezado y tarjetas de estadísticas (rediseño ago-2026)
   ===================================================================== */
.dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dash-hero__date { color: var(--faint); font-size: .78rem; font-weight: 600; letter-spacing: .08em; }
.dash-hero__title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; margin: 2px 0 4px; }
.dash-hero__sub { color: var(--muted); }

.dash-stat {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--surface); border-radius: var(--radius);
    padding: 16px 18px; box-shadow: var(--shadow);
    text-decoration: none; color: var(--ink);
    transition: transform .18s ease, box-shadow .18s ease;
    height: 100%;
}
.dash-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: var(--ink); }
.dash-stat__icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; color: #fff; margin-bottom: 2px;
}
.dash-stat__icon i, .dash-stat__icon svg { width: 19px; height: 19px; }
.dash-stat__num { font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.dash-stat__label { color: var(--muted); font-size: .85rem; font-weight: 500; }

/* =====================================================================
   REDISEÑO ago-2026 — Shell cálido + Panel
   Bloque final: reemplaza la paleta azul/multicolor por una neutra con
   un único acento ámbar. Va al final a propósito (gana en cascada).
   ===================================================================== */
:root {
    --bg: #f6f5f3;
    --surface: #ffffff;
    --glass: rgba(255, 255, 255, .78);
    --ink: #1c1d1f;
    --muted: #4a4f57;
    --faint: #8b9099;
    --line: rgba(0, 0, 0, .07);
    --line-soft: #f2f1ee;
    --line2: rgba(0, 0, 0, .07);

    --accent: #c2831c;          /* acento de marca (iconos, bordes)  */
    --accent-ink: #8a6110;      /* mismo tono legible sobre blanco   */
    --accent-strong: #a06f14;
    --amber-soft: #fdf4e4;
    --amber-soft-2: #faedd6;
    --amber-line: #f3e2c4;

    --ok: #2f8a5b;   --ok-soft: #eef7f1;   --ok-line: #dcece2;
    --warn: #b07d16; --warn-soft: #fdf6ea; --warn-line: #f3e5cc;

    --radius-lg: 22px;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(28,29,31,.04), 0 8px 24px -12px rgba(28,29,31,.14);
    --shadow-hover: 0 2px 6px rgba(28,29,31,.05), 0 16px 34px -14px rgba(28,29,31,.20);
    --card-shadow: var(--shadow);
    --card-shadow-hover: var(--shadow-hover);
    --grad-blue: linear-gradient(90deg, #b3781a 0%, #d19a2e 100%); /* ya no es azul */
}

body {
    background:
        radial-gradient(46% 46% at 68% -8%, rgba(255, 214, 153, .40), transparent 62%),
        radial-gradient(38% 40% at 96% -12%, rgba(186, 196, 255, .32), transparent 66%),
        radial-gradient(42% 38% at 34% -10%, rgba(255, 236, 214, .42), transparent 70%),
        var(--bg);
    background-attachment: fixed;
}

/* ---------- Barra superior ---------- */
.navbar {
    background: rgba(255, 255, 255, .70) !important;
    border-bottom: 1px solid var(--line-soft) !important;
}
.navbar-brand, .navbar-brand .text-primary { color: var(--ink) !important; font-weight: 650; }

/* ---------- Menú lateral flotante ---------- */
aside {
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.side-card {
    display: flex; flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 14px 12px;
    margin: 16px 4px 16px 10px;
    min-height: calc(100vh - 108px);
}
.offcanvas-body { background: var(--surface) !important; backdrop-filter: none !important; }
.offcanvas-body .side-card { margin: 0; box-shadow: none; min-height: auto; }

.side-user {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 11px; margin-bottom: 6px;
    border: 1px solid var(--line-soft); border-radius: 16px;
    background: #fdfdfc;
}
.side-user__avatar {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(160deg, #3b4a63, #222c3c);
    color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .02em;
}
.side-user__data { min-width: 0; }
.side-user__name {
    font-weight: 600; font-size: .92rem; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-user__role {
    display: inline-block; margin-top: 3px;
    background: var(--amber-soft-2); color: var(--accent-strong);
    font-size: .68rem; font-weight: 600; letter-spacing: .02em;
    padding: 2px 8px; border-radius: 999px;
}

.side-group {
    display: block;
    font-size: .64rem; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: #b0b5bd;
    padding: 16px 12px 6px;
}
.nav .nav-link {
    display: flex; align-items: center; gap: 12px;
    color: var(--muted); font-weight: 500; font-size: .93rem;
    border-radius: 13px; margin: 1px 0; padding: .6rem .75rem;
}
.nav .nav-link i, .nav .nav-link svg {
    width: 19px; height: 19px; flex: 0 0 19px;
    stroke-width: 1.6; color: #8f959e; opacity: 1;
}
.nav .nav-link:hover { background: #f8f7f5; color: var(--ink); }
.nav .nav-link:hover i, .nav .nav-link:hover svg { color: var(--muted); }
.nav .nav-link.active {
    background: var(--amber-soft) !important;
    color: var(--accent-strong) !important;
    font-weight: 600;
    box-shadow: none;
}
.nav .nav-link.active i, .nav .nav-link.active svg { color: var(--accent); }

.side-note {
    margin-top: auto;
    display: flex; align-items: flex-start; gap: 9px;
    background: #faf9f7; border: 1px solid var(--line-soft);
    border-radius: 14px; padding: 11px 12px;
    font-size: .76rem; line-height: 1.4; color: var(--faint);
}
.side-note i, .side-note svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; stroke-width: 1.6; }

/* ---------- Encabezado del panel ---------- */
.dash-hero__date { color: #a9aeb6; letter-spacing: .12em; }
.dash-hero__title { font-weight: 650; letter-spacing: -.028em; }
.dash-hero__sub { color: var(--muted); }

/* ---------- Tarjetas de contador ---------- */
.pnl-stat {
    display: flex; flex-direction: column; gap: 9px; height: 100%;
    background: var(--surface); border-radius: 20px;
    box-shadow: var(--shadow); padding: 17px 19px 16px;
    text-decoration: none; color: var(--ink);
    transition: transform .18s ease, box-shadow .18s ease;
}
.pnl-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: var(--ink); text-decoration: none; }
.pnl-stat__top { display: flex; align-items: center; gap: 12px; }
.pnl-stat__label { color: var(--muted); font-size: .84rem; font-weight: 500; line-height: 1.2; }
.pnl-stat__num { font-size: 2rem; font-weight: 650; line-height: 1; letter-spacing: -.03em; }
.pnl-stat__sub { color: var(--faint); font-size: .77rem; }

.pnl-ic {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center;
}
.pnl-ic i, .pnl-ic svg { width: 19px; height: 19px; stroke-width: 1.7; }
.pnl-ic.is-amber  { background: #fdf1dd; } .pnl-ic.is-amber i,  .pnl-ic.is-amber svg  { color: #c2831c; }
.pnl-ic.is-blue   { background: #eaf0fd; } .pnl-ic.is-blue i,   .pnl-ic.is-blue svg   { color: #3f6cc7; }
.pnl-ic.is-green  { background: #e9f5ee; } .pnl-ic.is-green i,  .pnl-ic.is-green svg  { color: #2f8a5b; }
.pnl-ic.is-violet { background: #f0edfd; } .pnl-ic.is-violet i, .pnl-ic.is-violet svg { color: #6d5bc4; }

/* ---------- Tarjeta de sección ---------- */
.pnl-card {
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 20px 22px 18px;
}
.pnl-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.pnl-sec {
    font-size: .7rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #9aa0a8; margin: 0;
}
.pnl-link { font-size: .84rem; color: var(--muted); font-weight: 500; text-decoration: none; }
a.pnl-link:hover { color: var(--accent-strong); text-decoration: none; }

/* ---------- Filas ---------- */
.pnl-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 13px; margin-bottom: 8px;
    border: 1px solid var(--line-soft); border-radius: 16px;
    text-decoration: none; color: var(--ink);
    transition: background .15s ease, border-color .15s ease;
}
.pnl-row:last-child { margin-bottom: 0; }
.pnl-row:hover { background: #fdfaf4; border-color: var(--amber-line); color: var(--ink); text-decoration: none; }
.pnl-row__ic {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px;
    background: #fdf1dd; display: grid; place-items: center;
}
.pnl-row__ic i, .pnl-row__ic svg { width: 20px; height: 20px; color: var(--accent); stroke-width: 1.6; }
.pnl-row__body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pnl-row__title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; line-height: 1.25; }
.pnl-row__title b { font-weight: 600; letter-spacing: -.012em; }
.pnl-row__sub {
    font-size: .82rem; color: var(--faint); margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pnl-badge {
    background: var(--amber-soft-2); color: var(--accent-strong);
    font-size: .65rem; font-weight: 700; letter-spacing: .06em;
    padding: 3px 7px; border-radius: 7px;
}
.pnl-state { font-size: .74rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.pnl-state.is-ok   { background: var(--ok-soft);   color: var(--ok); }
.pnl-state.is-warn { background: var(--amber-soft-2); color: var(--accent-strong); }
.pnl-state.is-off  { background: #f4f4f2; color: var(--faint); }
.pnl-chev { width: 18px; height: 18px; flex: 0 0 18px; color: #c3c8cf; stroke-width: 1.8; }

/* ---------- Avisos ---------- */
.pnl-note {
    display: flex; align-items: flex-start; gap: 11px;
    border-radius: 15px; padding: 13px 15px; margin-bottom: 9px;
    font-size: .88rem; line-height: 1.45;
}
.pnl-note:last-child { margin-bottom: 0; }
.pnl-note i, .pnl-note svg { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px; stroke-width: 1.7; }
.pnl-note.is-ok   { background: var(--ok-soft);   border: 1px solid var(--ok-line);   color: #2c6b4b; }
.pnl-note.is-warn { background: var(--warn-soft); border: 1px solid var(--warn-line); color: #8a6a22; }

/* ---------- Actividad ---------- */
.pnl-act { display: flex; align-items: center; gap: 13px; padding: 11px 2px; border-bottom: 1px solid var(--line-soft); }
.pnl-act:last-child { border-bottom: none; }
.pnl-act__ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background: #f6f5f3; display: grid; place-items: center; }
.pnl-act__ic i, .pnl-act__ic svg { width: 16px; height: 16px; color: var(--faint); stroke-width: 1.7; }
.pnl-act__txt { font-size: .88rem; color: var(--muted); min-width: 0; }
.pnl-act__txt strong { color: var(--ink); font-weight: 600; }
.pnl-act__time { margin-left: auto; font-size: .77rem; color: #a9aeb6; white-space: nowrap; }

/* ---------- Accesos rápidos ---------- */
.pnl-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.pnl-quick__item {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--line-soft); border-radius: 999px;
    padding: 8px 14px; font-size: .85rem; font-weight: 500;
    color: var(--muted); text-decoration: none; background: #fdfdfc;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pnl-quick__item:hover { background: var(--amber-soft); border-color: var(--amber-line); color: var(--accent-strong); text-decoration: none; }
.pnl-quick__item i, .pnl-quick__item svg { width: 16px; height: 16px; stroke-width: 1.7; }

/* ---------- Vacíos ---------- */
.pnl-empty { text-align: center; color: var(--faint); font-size: .86rem; padding: 24px 10px 20px; }
.pnl-empty__ic {
    width: 44px; height: 44px; border-radius: 14px; background: #f7f6f4;
    display: grid; place-items: center; margin: 0 auto 10px;
}
.pnl-empty__ic i, .pnl-empty__ic svg { width: 21px; height: 21px; color: #b5bac1; stroke-width: 1.6; }

/* ---------- Resto del sistema hereda la paleta ---------- */
a { color: var(--accent-ink); }
a:hover { color: #6f4d0c; }
.text-primary { color: var(--accent-ink) !important; }
.btn-primary {
    background: linear-gradient(90deg, #b3781a 0%, #cf9629 100%);
    border: none; color: #fff;
    box-shadow: 0 4px 12px rgba(179, 120, 26, .22);
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(.96); color: #fff; box-shadow: 0 6px 16px rgba(179, 120, 26, .30); }
.btn-outline-primary { color: var(--accent-ink); border-color: rgba(179, 120, 26, .45); }
.btn-outline-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.badge.text-bg-primary { background: var(--accent-strong) !important; }
.badge.text-bg-info { background: #d3a03a !important; color: #fff !important; }
.form-control:focus, .form-select:focus { border-color: #e0bd77; box-shadow: 0 0 0 4px rgba(194, 131, 28, .16); }
.gcard__head, .atile__media--grad, .asm-hero--grad, .cap-block__icon { background: var(--grad-blue); }

@media (max-width: 991.98px) {
    .side-card { margin: 0; }
}

/* En móvil la fila se apila: icono + estado arriba, texto debajo. */
@media (max-width: 575.98px) {
    .pnl-card { padding: 18px 16px 16px; }
    .pnl-row { flex-wrap: wrap; row-gap: 6px; gap: 10px; }
    .pnl-row__ic { order: 1; }
    .pnl-state { order: 2; margin-left: auto; }
    .pnl-row__body { order: 3; flex: 1 1 100%; }
    .pnl-row__sub { white-space: normal; }
    .pnl-chev { display: none; }
    .pnl-stat__num { font-size: 1.7rem; }
}