/* ============================================================
   style.css — Brand Tracker Jetstereo · Indicadores Principales
   Azul institucional #0069E1. Banda de encabezado azul con texto
   blanco, para contrastar con los encabezados blancos del propio
   tablero. El logotipo, que es un wordmark azul, va sobre pastilla
   blanca para no perderse en la banda.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --brand:        #0069E1;
    --brand-dk:     #0B4FA8;
    --brand-deep:   #08306B;
    --brand-soft:   #CDE2FB;
    --brand-wash:   #EEF4FD;

    --white:        #FFFFFF;
    --bg:           #F4F6FB;
    --ink:          #10182B;
    --ink-2:        #5B6577;
    --ink-3:        #8A94A6;
    --rule:         #E3E8F2;

    --radius:       10px;
    --radius-lg:    14px;
    --shadow:       0 1px 2px rgba(16,24,43,.04), 0 8px 28px rgba(0,105,225,.10);
    --shadow-hd:    0 1px 0 rgba(16,24,43,.06), 0 6px 20px rgba(16,24,43,.05);
    --tr:           .22s ease;
    --max:          1680px;

    /* Alto ocupado por encabezado, pie, notas y márgenes. Ajusta este
       valor si cambias la altura del encabezado o agregas elementos. */
    --chrome-alto:  282px;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    font-size: 16px;
    color: var(--ink);
    background-color: var(--bg);
    /* Lavado diagonal muy tenue: da profundidad sin competir con el tablero */
    background-image:
        radial-gradient(1200px 520px at 12% -8%, rgba(0,105,225,.09), transparent 62%),
        radial-gradient(900px 420px at 96% 6%, rgba(0,105,225,.05), transparent 60%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--brand-dk); text-decoration: underline; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--brand); color: #fff; padding: .6rem 1rem;
    border-radius: 0 0 var(--radius) 0; z-index: 999; font-size: .85rem;
}
.skip-link:focus { left: 0; }

/* ── Encabezado ──────────────────────────────────────────── */
/* Banda azul institucional: contrasta con los encabezados blancos
   del propio tablero de Power BI. El logotipo va sobre pastilla
   blanca porque es un wordmark azul. */
.site-header {
    background: var(--brand);
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 14px rgba(8,48,107,.22);
}

.header-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: .85rem 1.5rem .8rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-brand { flex: 0 0 auto; display: flex; align-items: center; }

.logo-chip {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--white);
    border-radius: 8px;
    padding: .4rem .75rem;
    box-shadow: 0 1px 3px rgba(8,48,107,.20);
}

.header-logo {
    height: 28px; width: auto; display: block;
    object-fit: contain;
}

/* Separador vertical entre el logotipo y el título */
.header-text {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: .12rem;
    padding-left: 1.25rem;
    border-left: 1px solid rgba(255,255,255,.28);
}

.header-title {
    font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
    color: var(--white); line-height: 1.25;
}

.header-subtitle {
    font-size: .8rem; color: rgba(255,255,255,.78); letter-spacing: .01em;
}

.header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.user-chip { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; color: var(--white); }
.header-avatar {
    width: 34px; height: 34px; flex: 0 0 34px; border: 2px solid rgba(255,255,255,.48);
    border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.18);
}
.header-avatar--fallback { display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }
.user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.user-meta strong { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.user-meta small { color: rgba(255,255,255,.76); font-size: .68rem; }

.btn-ghost {
    display: inline-flex; align-items: center; gap: .45rem;
    font: inherit; font-size: .78rem; font-weight: 600;
    color: var(--white); background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
    padding: .45rem .9rem; cursor: pointer;
    transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.btn-ghost:hover { background: var(--white); border-color: var(--white); color: var(--brand); }
.btn-ghost:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* ── Acceso ─────────────────────────────────────────────── */
.auth-shell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}

.auth-card {
    width: min(100%, 420px);
    padding: 2rem;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.auth-title { margin-bottom: .35rem; font-size: 1.5rem; line-height: 1.25; }
.auth-sub { margin-bottom: 1.5rem; color: var(--ink-2); line-height: 1.5; }
.auth-field { margin-bottom: 1rem; }
.auth-field label { display: block; margin-bottom: .4rem; font-size: .88rem; font-weight: 600; }
.auth-field input {
    width: 100%; padding: .75rem .85rem; border: 1px solid var(--rule);
    border-radius: var(--radius); color: var(--ink); font: inherit;
}
.auth-field input:focus { border-color: var(--brand); outline: 2px solid var(--brand-soft); }
.auth-btn {
    width: 100%; padding: .75rem 1rem; border: 0; border-radius: var(--radius);
    background: var(--brand); color: var(--white); font: inherit; font-weight: 600; cursor: pointer;
}
.auth-btn:hover { background: var(--brand-dk); }
.auth-alert { margin-bottom: 1rem; padding: .75rem .85rem; border-radius: var(--radius); font-size: .9rem; }
.auth-alert.error { background: #FDEAEA; color: #8F1D1D; }
.auth-alert.success { background: #EAF8EE; color: #176B35; }

/* ── Administración de usuarios ─────────────────────────── */
.users-page { max-width: var(--max); margin: 0 auto; }
.users-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.users-heading-actions { display: flex; align-items: center; gap: .6rem; }
.users-heading h1, .users-form-panel h2, .users-list-panel h2 { font-size: 1.25rem; line-height: 1.25; }
.users-heading p { margin-top: .3rem; color: var(--ink-2); }
.users-new, .users-home, .users-cancel { display: inline-flex; padding: .6rem .8rem; border: 1px solid var(--brand); border-radius: var(--radius); font-size: .85rem; font-weight: 600; }
.users-new { background: var(--brand); color: var(--white); }
.users-new:hover { background: var(--brand-dk); color: var(--white); text-decoration: none; }
.users-home { color: var(--brand); background: var(--white); }.users-home:hover { background: var(--brand-wash); text-decoration: none; }
.users-layout { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.7fr); gap: 1.25rem; align-items: start; }
.users-form-panel, .users-list-panel { padding: 1.25rem; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.users-form-panel h2, .users-list-panel h2 { margin-bottom: 1rem; }
.users-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.users-form-panel select { width: 100%; padding: .75rem .85rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); font: inherit; }
.users-checkbox { align-self: center; padding-top: .2rem; font-size: .9rem; }
.users-cancel { margin-top: .75rem; color: var(--ink-2); border-color: var(--rule); }
.users-table-wrap { overflow-x: auto; }
.users-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.users-table th, .users-table td { padding: .75rem .5rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.users-table th { color: var(--ink-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.users-identity { display: flex; align-items: center; gap: .6rem; min-width: 220px; }
.users-identity img, .users-identity > span { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; object-fit: cover; background: var(--brand-soft); }
.users-identity > span { display: inline-flex; align-items: center; justify-content: center; color: var(--brand-dk); font-weight: 700; }
.users-identity strong, .users-identity small { display: block; }.users-identity small { margin-top: .15rem; color: var(--ink-2); }
.status { display: inline-block; padding: .22rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }.status--active { color: #176B35; background: #EAF8EE; }.status--inactive { color: #8F1D1D; background: #FDEAEA; }
.users-actions { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 160px; }.users-actions form { display: inline; }.users-actions a, .users-actions button { border: 0; background: none; color: var(--brand); font: inherit; font-size: .78rem; cursor: pointer; }.users-actions .users-delete { color: #B42318; }

.btn-icon {
    width: 12px; height: 12px; flex: 0 0 auto;
    border: 2px solid currentColor; border-radius: 2px;
    clip-path: polygon(0 0, 42% 0, 42% 22%, 22% 22%, 22% 42%, 0 42%,
                       0 100%, 42% 100%, 42% 78%, 22% 78%, 22% 58%, 0 58%,
                       100% 100%, 58% 100%, 58% 78%, 78% 78%, 78% 58%, 100% 58%,
                       100% 0, 58% 0, 58% 22%, 78% 22%, 78% 42%, 100% 42%);
}

/* Regla inferior con el motivo inclinado del logotipo.
   El wordmark Jetstereo es itálico; las franjas repiten ese ángulo. */
.header-rule {
    height: 4px;
    background:
        repeating-linear-gradient(105deg,
            var(--brand-dk)   0px, var(--brand-dk)   14px,
            var(--brand-deep) 14px, var(--brand-deep) 18px);
}

/* ── Cuerpo ──────────────────────────────────────────────── */
.site-main { flex: 1; padding: 1.5rem 1.5rem 1.25rem; }

.page-section { max-width: var(--max); margin: 0 auto; }

/* ── Marco del tablero ───────────────────────────────────── */
.dashboard-wrapper {
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.dashboard-chrome {
    display: flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem;
    background: linear-gradient(180deg, #FBFCFE 0%, #F4F7FC 100%);
    border-bottom: 1px solid var(--rule);
}

.chrome-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand-soft); flex: 0 0 auto;
}
.chrome-dot:first-child { background: var(--brand); }

.chrome-label {
    margin-left: .6rem;
    font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3);
}

.dashboard-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 340px;
    background: var(--brand-wash);
}

/* El marco blanco se centra y toma el ancho que realmente ocupa el
   tablero, para que no queden franjas vacías a los lados. */
.dashboard-wrapper { margin-inline: auto; }

.dashboard-container iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: none; display: block;
}

/* ── Notas bajo el tablero ───────────────────────────────── */
.dashboard-note,
.dashboard-fallback {
    max-width: var(--max);
    margin: .7rem auto 0;
    font-size: .76rem;
    color: var(--ink-3);
    text-align: center;
    line-height: 1.5;
}
.dashboard-note { color: var(--ink-2); }
.dashboard-fallback { margin-top: .3rem; }

/* ── Pie ─────────────────────────────────────────────────── */
.site-footer { margin-top: 1.25rem; }

.footer-rule {
    height: 3px;
    background:
        repeating-linear-gradient(105deg,
            var(--brand)      0px, var(--brand)      14px,
            var(--brand-dk)  14px, var(--brand-dk)   18px);
}

.footer-inner {
    background: var(--brand-deep);
    color: rgba(255,255,255,.86);
    font-size: .78rem;
    padding: .85rem 1.5rem;
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: center; gap: .3rem .7rem;
}

.footer-main { font-weight: 600; color: #fff; }
.footer-sep  { color: var(--brand-soft); }
.footer-alt  { color: rgba(255,255,255,.62); }

/* ── Estado de carga (lo inyecta main.js) ────────────────── */
.pbi-loader {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-wash);
    transition: opacity .35s ease;
}
.pbi-loader__inner { text-align: center; color: var(--brand); font-size: .84rem; }
.pbi-loader__spin {
    width: 40px; height: 40px; margin: 0 auto .7rem;
    border: 3px solid var(--brand-soft);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: pbi-spin .8s linear infinite;
}
.pbi-loader--error .pbi-loader__inner { color: var(--ink-2); max-width: 30ch; line-height: 1.5; }
@keyframes pbi-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pbi-loader__spin { animation: none; }
    html { scroll-behavior: auto; }
}

/* ── Responsive ──────────────────────────────────────────── */

/* Tableta */
@media (min-width: 768px) {
    .header-inner { padding: .9rem 2rem .85rem; }
    .header-logo  { height: 38px; }
    .header-title { font-size: 1.12rem; }
    .site-main    { padding: 1.75rem 2rem 1.25rem; }
}

@media (max-width: 640px) {
    .header-inner { gap: .75rem; padding: .7rem 1rem; }
    .header-text { padding-left: .75rem; }
    .header-actions { gap: .35rem; }
    .header-actions .btn-ghost { padding: .4rem .55rem; font-size: .7rem; }
    .header-logo { height: 24px; }
    .user-meta { display: none; }
    .users-heading { align-items: flex-start; flex-direction: column; }.users-heading-actions { width: 100%; }.users-layout, .users-fields { grid-template-columns: 1fr; }
}

/* Escritorio: el tablero toma todo el alto disponible sin provocar
   desplazamiento vertical, hasta el límite que impone su relación 16:9. */
@media (min-width: 1024px) {
    .site-main { padding: 1.75rem 2.5rem 1.25rem; }

    /* Alto disponible del tablero: el menor entre lo que deja la pantalla
       y lo que impone la relación 16:9 del ancho utilizable. */
    .page-section {
        --pbi-h: max(460px, min(
            calc(100vh - var(--chrome-alto)),
            calc((100vw - 5rem - 2px) * 0.5625)
        ));
    }
    .dashboard-container {
        aspect-ratio: auto;
        height: var(--pbi-h);
    }
    /* …y el marco se ciñe a ese alto, de vuelta a 16:9 */
    .dashboard-wrapper {
        width: min(100%, calc(var(--pbi-h) / 0.5625 + 2px));
    }
    .dashboard-note, .dashboard-fallback {
        max-width: min(100%, calc(var(--pbi-h) / 0.5625 + 2px));
    }
}

@media (min-width: 1680px) {
    .site-main { padding: 2rem 3rem 1.25rem; }
    .page-section {
        --pbi-h: max(460px, min(
            calc(100vh - var(--chrome-alto)),
            calc(min(100vw - 6rem, var(--max)) * 0.5625)
        ));
    }
}

/* Móvil */
@media (max-width: 767px) {
    .header-inner { flex-wrap: wrap; gap: .75rem 1rem; padding: .75rem 1rem .7rem; }
    .header-text  { order: 3; flex-basis: 100%; border-left: 0; padding-left: 0; }
    .header-title { font-size: .95rem; }
    .header-actions { margin-left: auto; }
    .btn-label { display: none; }
    .btn-ghost { padding: .45rem .6rem; }
    .site-main { padding: 1rem 1rem .75rem; }
    .chrome-label { display: none; }
}

/* Impresión */
@media print {
    .site-header, .site-footer, .dashboard-fallback, .btn-ghost { display: none !important; }
    body { background: #fff; }
    .dashboard-wrapper { border: 1px solid #ccc; box-shadow: none; }
}