/* ZENON — imagen y estilo de ADA: negro #1f1f22 + amarillo #FFC400, Nunito Sans.
   Se carga después de los estilos de cada página para reemplazar el azul heredado. */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap');
:root {
    --zn-black: #1f1f22; --zn-black-2: #29292d; --zn-black-3: #35353a;
    --zn-yellow: #FFC400; --zn-yellow-dark: #e0ac00; --zn-yellow-soft: rgba(255,196,0,.14);
    --zn-bg: #f5f5f3; --zn-border: #e6e6e3; --zn-text: #1d1d1b; --zn-muted: #7a7a75;
    --primary-color: #1f1f22; --secondary-color: #FFC400; --accent-color: #e0ac00;
    --gradient-primary: linear-gradient(135deg, #1f1f22 0%, #35353a 100%);
    --bs-primary: #FFC400; --bs-link-color: #1f1f22; --bs-link-hover-color: #a87800;
}
body { font-family: 'Nunito Sans', system-ui, sans-serif !important; background: var(--zn-bg) !important; color: var(--zn-text); -webkit-font-smoothing: antialiased; }
a { color: var(--zn-text); }
.text-primary { color: #a87800 !important; }
.bg-primary { background-color: var(--zn-yellow) !important; color: var(--zn-black) !important; }
.border-primary { border-color: var(--zn-yellow) !important; }

/* Marca */
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--zn-yellow); color: var(--zn-black); font-weight: 800; font-size: 1rem; }
.navbar-custom { background: var(--zn-black) !important; border-bottom: 3px solid var(--zn-yellow); box-shadow: 0 2px 10px rgba(0,0,0,.25) !important; }
.navbar-custom .brand-icon, .navbar-custom .brand-icon:hover { background: var(--zn-yellow) !important; padding: 0; }
.brand-name { letter-spacing: .12em !important; font-weight: 800 !important; }
.brand-name::after { content: ""; }
.brand-subtitle { color: var(--zn-yellow) !important; opacity: 1 !important; letter-spacing: .06em; text-transform: uppercase; font-size: .58rem !important; }
.indicadores-container { background: rgba(255,255,255,.07) !important; border-color: rgba(255,196,0,.35) !important; }
.indicador-item i { color: var(--zn-yellow); }
.user-role { color: var(--zn-yellow) !important; }
.dropdown-item i { color: #a87800 !important; }
.dropdown-item:active, .dropdown-item:hover { background: var(--zn-yellow-soft); color: var(--zn-black); }

/* Sidebar negra */
.sidebar-card { background: var(--zn-black) !important; border-radius: 0 12px 12px 0 !important; box-shadow: 2px 0 14px rgba(0,0,0,.22) !important; }
.sidebar-card .list-group, .sidebar-card .list-group-item { background: transparent !important; }
.sidebar-scroll::-webkit-scrollbar-track { background: var(--zn-black-2) !important; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--zn-black-3) !important; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: var(--zn-yellow) !important; }
.sidebar-card .sb-label { color: var(--zn-yellow) !important; font-size: .64rem !important; letter-spacing: .1em !important; }
.sidebar-card .sb-divider { background: var(--zn-black-3) !important; height: 1px; }
.sidebar-card .sidebar-item { color: #cfcfca !important; font-weight: 600 !important; border-left: 3px solid transparent !important; }
.sidebar-card .sidebar-item i { color: #8d8d87 !important; }
.sidebar-card .sidebar-item:hover { background: var(--zn-black-3) !important; color: #fff !important; border-left-color: var(--zn-yellow) !important; }
.sidebar-card .sidebar-item:hover i { color: var(--zn-yellow) !important; }
.sidebar-card .sidebar-item.active { background: var(--zn-yellow) !important; color: var(--zn-black) !important; border-left-color: var(--zn-yellow-dark) !important; font-weight: 800 !important; }
.sidebar-card .sidebar-item.active i { color: var(--zn-black) !important; }
.sidebar-card .sb-back { background: var(--zn-black-2) !important; color: #cfcfca !important; border-top: 1px solid var(--zn-black-3) !important; }
.sidebar-card .sb-back:hover { background: var(--zn-black-3) !important; color: #fff !important; }
.sidebar-card .sb-back i { color: var(--zn-yellow) !important; }

/* Botones: pill amarillo con texto negro (como ADA) */
.btn { border-radius: 999px; font-weight: 700; }
.btn-primary, .btn-primary:focus { background: var(--zn-yellow) !important; border-color: var(--zn-yellow) !important; color: var(--zn-black) !important; }
.btn-primary:hover, .btn-primary:active { background: var(--zn-yellow-dark) !important; border-color: var(--zn-yellow-dark) !important; color: var(--zn-black) !important; }
.btn-outline-primary { color: var(--zn-black) !important; border-color: var(--zn-yellow) !important; background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:active { background: var(--zn-yellow) !important; color: var(--zn-black) !important; }
.btn-secondary, .btn-dark { background: var(--zn-black) !important; border-color: var(--zn-black) !important; color: #fff !important; }
.btn-info { background: var(--zn-black-3) !important; border-color: var(--zn-black-3) !important; color: #fff !important; }
.btn-warning { background: var(--zn-yellow) !important; border-color: var(--zn-yellow) !important; color: var(--zn-black) !important; }
.btn-link { color: #a87800; }
.badge.bg-primary, .badge.bg-warning { background: var(--zn-yellow) !important; color: var(--zn-black) !important; }
.badge.bg-info { background: var(--zn-black-3) !important; color: #fff !important; }

/* Formularios, tarjetas, tablas, paginación */
.form-control:focus, .form-select:focus { border-color: var(--zn-yellow) !important; box-shadow: 0 0 0 .2rem rgba(255,196,0,.25) !important; }
.form-check-input:checked { background-color: var(--zn-yellow) !important; border-color: var(--zn-yellow) !important; }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(255,196,0,.25) !important; border-color: var(--zn-yellow); }
.card { border-color: var(--zn-border); border-radius: 12px; }
.card-header { border-bottom-color: var(--zn-border); }
.table thead th { border-bottom-color: var(--zn-yellow) !important; }
.page-item.active .page-link { background: var(--zn-yellow) !important; border-color: var(--zn-yellow) !important; color: var(--zn-black) !important; }
.page-link { color: var(--zn-black); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { background: var(--zn-yellow) !important; color: var(--zn-black) !important; border-color: var(--zn-yellow) !important; }
.nav-tabs .nav-link { color: var(--zn-text); }
.list-group-item.active { background: var(--zn-yellow) !important; border-color: var(--zn-yellow) !important; color: var(--zn-black) !important; }
.progress-bar { background-color: var(--zn-yellow) !important; color: var(--zn-black); }
.modal-header { border-bottom: 3px solid var(--zn-yellow); }
::selection { background: var(--zn-yellow); color: var(--zn-black); }

/* Acceso (login, recuperar, elegir empresa) — negro con detalles amarillos como ADA */
.auth-container { background: radial-gradient(circle at 20% 15%, #35353a 0%, #1f1f22 55%, #151517 100%) !important; }
.auth-left { background: var(--zn-black) !important; border-right: 4px solid var(--zn-yellow); }
.auth-left h2 { letter-spacing: .14em; font-weight: 800; }
.auth-left h2 i, .auth-left .feature-list i { color: var(--zn-yellow) !important; }
.btn-auth { background: var(--zn-yellow) !important; color: var(--zn-black) !important; font-weight: 800; border-radius: 999px !important; }
.btn-auth:hover { background: var(--zn-yellow-dark) !important; color: var(--zn-black) !important; }
.auth-right a { color: #a87800; }

/* ── Sidebar estilo ADA: panel negro plano, items redondeados 8px, sección en amarillo, activo = pill amarillo ── */
.sidebar-card { border-radius: 0 !important; box-shadow: none !important; padding: 14px 12px 0; border-right: 1px solid var(--zn-black-3) !important; }
.sidebar-card .list-group { padding: 0; }
.sidebar-card .sb-label { color: var(--zn-yellow) !important; font-size: .66rem !important; font-weight: 700 !important; letter-spacing: .1em !important; padding: 2px 0 !important; margin: 16px 12px 6px !important; }
.sidebar-card .sb-divider { background: var(--zn-black-3) !important; margin: 10px 4px !important; }
.sidebar-card .sidebar-item { display: flex !important; align-items: center !important; gap: 12px; padding: 9px 12px !important; margin-bottom: 2px; border: 0 !important; border-radius: 8px !important; font-size: .9rem !important; font-weight: 600 !important; color: #cfcfca !important; }
.sidebar-card .sidebar-item i { width: 18px; margin: 0 !important; text-align: center; opacity: .75; color: #cfcfca !important; }
.sidebar-card .sidebar-item:hover { background: var(--zn-black-3) !important; color: #fff !important; padding-left: 12px !important; border: 0 !important; }
.sidebar-card .sidebar-item:hover i { color: #fff !important; opacity: 1; transform: none; }
.sidebar-card .sidebar-item.active { background: var(--zn-yellow) !important; color: var(--zn-black) !important; font-weight: 700 !important; border: 0 !important; }
.sidebar-card .sidebar-item.active i { color: var(--zn-black) !important; opacity: 1; }
.sidebar-card .sb-back { background: transparent !important; border-top: 1px solid var(--zn-black-3) !important; border-radius: 0 !important; margin-top: 8px; padding: 12px !important; }
.sidebar-card .sb-back:hover { background: var(--zn-black-3) !important; }

/* ── Stat-cards estilo ADA: blanca, borde izq. de acento (amarillo por defecto), radio 12px, ícono cuadrado, etiqueta en mayúsculas ── */
.stat-card { position: relative; overflow: visible; background: #fff !important; border: 1px solid var(--zn-border) !important; border-left: 3px solid var(--zn-yellow) !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(0,0,0,.04) !important; padding: 9px 14px !important; gap: 11px !important; transition: box-shadow .18s ease, transform .18s ease, background .18s ease; }
.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08) !important; transform: translateY(-1px); border-left-color: var(--zn-yellow-dark) !important; }
.stat-card.is-active { background: #fffbea !important; box-shadow: 0 0 0 2px rgba(255,196,0,.28), 0 1px 2px rgba(0,0,0,.04) !important; border-left-color: var(--zn-yellow) !important; }
.stat-card .stat-icon { width: 34px !important; height: 34px !important; border-radius: 8px !important; font-size: .85rem !important; color: #fff; }
.stat-card .stat-icon[style*="FFC400" i], .stat-card .stat-icon[style*="ffc107" i] { color: var(--zn-black) !important; }
.stat-card .stat-num { font-size: 1.2rem !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -.01em; color: var(--zn-text); }
.stat-card .stat-lbl { font-size: .6rem !important; font-weight: 800 !important; color: var(--zn-muted) !important; margin-top: 3px; text-transform: uppercase; letter-spacing: .07em; }

/* ── Header y layout estilo SETCOM 360/ADA: header compacto, sidebar fijo de 248px pegado al borde izquierdo ── */
:root { --zn-nav-h: 78px; --zn-side-w: 248px; }
.navbar-custom { padding: 0 !important; min-height: var(--zn-nav-h); position: sticky; top: 0; z-index: 1050; }
.navbar-custom > .container-fluid { min-height: calc(var(--zn-nav-h) - 3px); flex-wrap: nowrap; }
.navbar-custom .navbar-brand { margin-right: 18px; padding: 0; }
.navbar-custom .brand-icon { width: 46px !important; height: 46px !important; border-radius: 12px !important; display: grid; place-items: center; overflow: hidden; margin-right: 12px !important; }
.navbar-custom .brand-icon .brand-mark { width: 100%; height: 100%; border-radius: 0; font-size: 1.25rem; background: transparent; }
.navbar-custom .brand-name { font-size: 1.3rem !important; letter-spacing: .1em !important; line-height: 1.1; color: #fff; }
.navbar-custom .brand-subtitle { font-size: .6rem !important; margin-top: 3px; white-space: nowrap; }
.navbar-custom .navbar-brand + div, .indicadores-container { white-space: nowrap; }
.navbar-custom .navbar-brand + div { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,196,0,.35); padding: .4rem .9rem !important; font-size: .82rem !important; }
.indicadores-container { padding: .4rem .9rem !important; }

@media (min-width: 768px) {
    body .container-fluid:has(> .row > .col-md-3.px-0) { padding-left: 0 !important; padding-right: 0 !important; }
    body .container-fluid:has(> .row > .col-md-3.px-0) > .row { margin-left: 0; margin-right: 0; }
    body .container-fluid .row > .col-md-3.px-0 { position: fixed !important; top: var(--zn-nav-h); left: 0; bottom: 0; width: var(--zn-side-w) !important; flex: none !important; max-width: var(--zn-side-w) !important; padding: 0 !important; z-index: 1040; }
    body .container-fluid .row > .col-md-3.px-0 .sidebar-card { height: 100% !important; width: 100%; padding: 20px 14px 0; }
    body .container-fluid .row > .col-md-3.px-0 + .col-md-9 { margin-left: var(--zn-side-w); flex: 0 0 calc(100% - var(--zn-side-w)) !important; max-width: calc(100% - var(--zn-side-w)) !important; padding: 20px 28px !important; }
}
.sidebar-card .sidebar-scroll { scrollbar-width: none; }
.sidebar-card .sidebar-scroll::-webkit-scrollbar { display: none; }
.sidebar-card .sidebar-item { text-transform: none !important; font-size: .95rem !important; letter-spacing: 0 !important; line-height: 1.3; }

/* ── Estilo completo ADA/SETCOM 360 ── */
/* Cabecera de página: franja blanca a todo el ancho del contenido (título negro + subtítulo gris), en vez de banner negro */
.dash-hero, .page-header { background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--zn-border) !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 28px !important; margin-bottom: 20px !important; }
.col-md-9 > .dash-hero, .col-md-9 > .page-header, .col-md-9 > .row:first-child > * > .page-header { margin: -20px -28px 20px !important; }
.dash-hero-title, .ph-title { color: var(--zn-text) !important; font-size: 1.25rem !important; font-weight: 800 !important; letter-spacing: -.01em; }
.dash-hero-sub, .ph-sub { color: var(--zn-muted) !important; font-size: .82rem !important; }
.dash-hero > div:last-child { color: var(--zn-muted) !important; }
.dash-hero-title i { color: var(--zn-yellow-dark); }
.dash-hero-sub strong { color: var(--zn-text) !important; }
.ph-icon-wrap { background: var(--zn-yellow) !important; color: var(--zn-black) !important; border-radius: 10px !important; }
.page-header .btn-outline-light, .page-header .btn-light { background: #fff !important; color: var(--zn-black) !important; border: 1px solid var(--zn-border) !important; }
.page-header .btn-outline-light:hover, .page-header .btn-light:hover { border-color: var(--zn-yellow) !important; background: #fffbea !important; }

/* Títulos de sección y paneles: barra negra con punto amarillo, mayúsculas */
.sec-title { color: var(--zn-black) !important; letter-spacing: .1em !important; }
.sec-title i { color: var(--zn-yellow-dark); }
.card { border: 1px solid var(--zn-border) !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(0,0,0,.04) !important; overflow: hidden; }
.card > .card-header { background: var(--zn-black) !important; color: #fff !important; border: 0 !important; padding: 13px 18px !important; font-size: .78rem !important; font-weight: 800 !important; letter-spacing: .09em; text-transform: uppercase; display: flex; align-items: center; gap: 9px; }
.card > .card-header::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--zn-yellow); flex: none; }
.card > .card-header h1, .card > .card-header h2, .card > .card-header h3, .card > .card-header h4, .card > .card-header h5, .card > .card-header h6, .card > .card-header .card-title { color: #fff !important; font-size: inherit !important; font-weight: inherit !important; margin: 0; letter-spacing: inherit; text-transform: inherit; }

/* Tablas: encabezado claro en mayúsculas pequeñas, filas con hover amarillo suave */
.table > :not(caption) > * > * { padding: 10px 12px; border-bottom-color: #efefec; }
.table thead th { background: #fafaf8 !important; color: #57574f !important; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--zn-border) !important; white-space: nowrap; }
.table tbody tr:hover > * { background: #fffbea !important; --bs-table-accent-bg: transparent; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #fcfcfb; }

/* Tarjetas de proyecto y vacíos */
.proyecto-card, .ejec-card, .empty-proyectos { border-radius: 12px !important; border-color: var(--zn-border) !important; }
.proyecto-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08) !important; transform: translateY(-1px) !important; }
.card.sidebar-card { border: 0 !important; border-right: 1px solid var(--zn-black-3) !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible; }

/* Sidebar con grupos plegables como SETCOM 360 */
.sidebar-card .nav-grupo { margin: 0; }
.sidebar-card .nav-grupo > summary.sb-label { display: flex !important; align-items: center; gap: 6px; list-style: none; cursor: pointer; user-select: none; }
.sidebar-card .nav-grupo > summary::-webkit-details-marker { display: none; }
.sidebar-card .nav-grupo > summary:hover { color: #ffd033 !important; }
.sidebar-card .nav-grupo > summary i { margin-left: auto; font-size: .6rem; opacity: .8; color: var(--zn-yellow); transition: transform .15s ease; }
.sidebar-card .nav-grupo[open] > summary i { transform: rotate(180deg); }
.sidebar-card .nav-grupo:not([open]) { margin-bottom: 2px; }
.sidebar-card .nav-grupo:first-child > summary.sb-label { margin-top: 4px !important; }

/* ══ Botones: mismos colores que ADA ══
   Principal  = píldora amarilla, letra negra; hover gris oscuro con letra amarilla
   Oscuro     = negro, letra blanca; hover gris oscuro con letra amarilla
   Neutro     = blanco con borde; hover negro con letra blanca
   Peligro    = blanco con borde rojo; hover rojo con letra blanca */
.btn-page-primary, .btn-link-grad, .btn-save, .btn-filter, .btn-page-success, .btn-glass-yellow, .btn-glass-yellow-primary, .btn-sge-primary, .btn-hdr-glass, .section-header .btn-link-grad, .section-header .btn-cancel, .card-header .btn-cancel, .btn-whatsapp-x {
    background: var(--zn-yellow) !important; color: var(--zn-black) !important; border: 0 !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: none !important; backdrop-filter: none !important; text-shadow: none !important; }
.btn-page-primary:hover, .btn-page-primary:focus, .btn-link-grad:hover, .btn-save:hover, .btn-filter:hover, .btn-page-success:hover, .btn-glass-yellow:hover, .btn-glass-yellow-primary:hover, .btn-sge-primary:hover, .btn-hdr-glass:hover, .section-header .btn-link-grad:hover, .section-header .btn-cancel:hover, .card-header .btn-cancel:hover {
    background: var(--zn-black-3) !important; color: var(--zn-yellow) !important; transform: none !important; box-shadow: none !important; opacity: 1 !important; }
.btn-page-primary i, .btn-link-grad i, .btn-save i, .btn-filter i, .btn-page-success i, .btn-hdr-glass i { color: inherit !important; }
.btn-page-primary::after, .btn-link-grad::after, .btn-save::after { display: none !important; }

.btn-page-search, .btn-sge-secondary, .btn-glass, .btn-glass-blue, .btn-glass-green, .btn-glass-red { background: var(--zn-black) !important; color: #fff !important; border: 1px solid var(--zn-black) !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: none !important; }
.btn-page-search:hover, .btn-page-search:focus, .btn-sge-secondary:hover, .btn-glass:hover, .btn-glass-blue:hover, .btn-glass-green:hover, .btn-glass-red:hover { background: var(--zn-black-3) !important; color: var(--zn-yellow) !important; border-color: var(--zn-black-3) !important; transform: none !important; box-shadow: none !important; }
.btn-page-search i { color: inherit !important; }

.btn-page-reset, .btn-filter-reset, .btn-sge-reset, .btn-glass-white, .btn-cancel, .btn-copy, .btn-toggle { background: #fff !important; color: var(--zn-black) !important; border: 1px solid var(--zn-border) !important; border-radius: 999px !important; font-weight: 600 !important; box-shadow: none !important; backdrop-filter: none !important; }
.btn-page-reset:hover, .btn-page-reset:focus, .btn-filter-reset:hover, .btn-sge-reset:hover, .btn-glass-white:hover, .btn-cancel:hover, .btn-copy:hover, .btn-toggle:hover { background: var(--zn-black) !important; color: #fff !important; border-color: var(--zn-black) !important; transform: none !important; }
.btn-page-reset i, .btn-cancel i { color: inherit !important; }

.btn-page-danger { background: #fff !important; color: #c83a3a !important; border: 1px solid #eb5757 !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: none !important; }
.btn-page-danger:hover, .btn-page-danger:focus { background: #d63c3c !important; color: #fff !important; border-color: #d63c3c !important; transform: none !important; }

/* Acciones de tabla (ver/editar/restaurar = amarillo; eliminar = rojo suave) y botones de acción */
.btn-act, .btn-accion, .btn-act-view, .btn-act-edit, .btn-act-restore { background: var(--zn-yellow) !important; color: var(--zn-black) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; }
.btn-act:hover, .btn-accion:hover, .btn-act-view:hover, .btn-act-edit:hover, .btn-act-restore:hover { background: var(--zn-black-3) !important; color: var(--zn-yellow) !important; transform: none !important; }
.btn-act-delete, .btn-accion.text-danger { background: rgba(235,87,87,.15) !important; color: #d63c3c !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; }
.btn-act-delete:hover { background: #d63c3c !important; color: #fff !important; transform: none !important; }
.btn-action { background: var(--zn-yellow) !important; color: var(--zn-black) !important; border: 0 !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: none !important; }
.btn-action:hover { background: var(--zn-black-3) !important; color: var(--zn-yellow) !important; transform: none !important; }
.btn-action i, .btn-act i, .btn-accion i { color: inherit !important; }

/* Cabecera blanca de página: «Volver / Cancelar» y variantes glass se ven como botón neutro de ADA */
.page-header .btn-cancel, .page-header .btn-hdr-glass, .dash-hero .btn-cancel { background: #fff !important; color: var(--zn-black) !important; border: 1px solid var(--zn-border) !important; }
.page-header .btn-cancel:hover, .page-header .btn-hdr-glass:hover, .dash-hero .btn-cancel:hover { background: var(--zn-black) !important; color: #fff !important; border-color: var(--zn-black) !important; }

/* Bootstrap estándar */
.btn-light { background: var(--zn-yellow) !important; color: var(--zn-black) !important; border: 0 !important; }
.btn-light:hover { background: var(--zn-black-3) !important; color: var(--zn-yellow) !important; }
.btn-outline-secondary { color: var(--zn-black) !important; border-color: var(--zn-border) !important; background: #fff; }
.btn-outline-secondary:hover { background: var(--zn-black) !important; color: #fff !important; border-color: var(--zn-black) !important; }
.btn-danger { background: #d63c3c !important; border-color: #d63c3c !important; }
.btn-secondary:hover, .btn-dark:hover { background: var(--zn-black-3) !important; color: var(--zn-yellow) !important; }