/* AXO Consent: identidad AXO (deck corporativo 2023) sobre Bootstrap.
   Neutros cálidos de la guía + MORADO 2 de la paleta de Sistemas como acento.
   Sin estilos en línea: la CSP solo permite 'self'. */
:root {
  --axo-ink: #1a1718;          /* fondo de portada y header */
  --axo-charcoal: #373535;
  --axo-gray: #414042;         /* GRIS: texto */
  --axo-taupe: #79776b;
  --axo-khaki: #9f9985;
  --axo-sand: #e0ceb0;         /* acento sobre fondo oscuro */
  --axo-beige: #e3dcd0;
  --axo-paper: #f4f1eb;        /* fondo de página */
  --axo-line: #ddd5c8;
  --axo-head: #efe9df;         /* encabezado de tablas */
  --axo-purple: #862f8b;       /* MORADO 2 (Sistemas): acciones y enlaces */
  --axo-purple-dark: #6c2470;
  --axo-orange: #ed722f;       /* NARANJA 1 */
  --axo-muted: #6f6c66;

  --bs-body-font-family: "Segoe UI", Calibri, Arial, system-ui, -apple-system, sans-serif;
  --bs-body-color: var(--axo-gray);
  --bs-body-color-rgb: 65, 64, 66;
  --bs-emphasis-color: var(--axo-ink);
  --bs-secondary-color: var(--axo-muted);
  --bs-secondary-rgb: 111, 108, 102;
  --bs-primary: var(--axo-purple);
  --bs-primary-rgb: 134, 47, 139;
  --bs-link-color: var(--axo-purple);
  --bs-link-color-rgb: 134, 47, 139;
  --bs-link-hover-color: var(--axo-purple-dark);
  --bs-link-hover-color-rgb: 108, 36, 112;
  --bs-border-color: var(--axo-line);
  --bs-focus-ring-color: rgba(134, 47, 139, .25);
}

body { background-color: var(--axo-paper); }
a { text-underline-offset: .15em; }

/* --- header ---------------------------------------------------------------------------- */
.navbar-axo { background: var(--axo-ink); padding-top: .55rem; padding-bottom: .55rem;
              --bs-navbar-color: #cfc8bb; --bs-navbar-hover-color: #fff;
              --bs-navbar-active-color: var(--axo-sand); }
.navbar-axo .navbar-brand { display: flex; align-items: center; gap: .7rem; color: #fff; }
.navbar-axo .navbar-brand img { height: 42px; width: auto; }
.brand-divider { width: 1px; height: 26px; background: var(--axo-taupe); }
.brand-app { line-height: 1.05; font-size: 1rem; font-weight: 600; letter-spacing: .02em; }
.brand-app small { display: block; font-size: .68rem; font-weight: 400; letter-spacing: .12em;
                   text-transform: uppercase; color: var(--axo-khaki); }
.navbar-axo .nav-link { font-size: .92rem; }
.navbar-axo .nav-link.active { box-shadow: inset 0 -2px 0 var(--axo-sand); }
/* selector de país: etiqueta + flecha arena visibles sobre el fondo oscuro */
.country-picker { display: flex; align-items: center; gap: .45rem; }
.country-picker label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
                        color: var(--axo-khaki); margin: 0; }
.navbar-axo .country-picker .form-select { width: auto; min-width: 7.5rem; cursor: pointer;
  color: #fff; font-weight: 600; background-color: var(--axo-charcoal);
  border: 1px solid var(--axo-taupe); border-radius: .5rem;
  background-image: url("img/caret-sand.svg"); background-size: 14px 14px;
  background-position: right .6rem center; padding-right: 2rem; }
.navbar-axo .country-picker .form-select:hover { border-color: var(--axo-sand); }
.navbar-axo .country-picker .form-select:focus { border-color: var(--axo-sand);
                                                 box-shadow: 0 0 0 .2rem rgba(224, 206, 176, .25); }
.navbar-axo .country-picker option { color: var(--axo-ink); background: #fff; }
.navbar-axo .user-role { color: var(--axo-khaki); }
.env-badge { background: var(--axo-orange); color: var(--axo-ink); font-size: .65rem;
             font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
             border-radius: .25rem; padding: .15rem .4rem; }
/* franja rayada del deck, bajo el header (solo la mitad derecha) */
.axo-hatch { height: 7px; margin-left: 50%;
             background: repeating-linear-gradient(135deg, var(--axo-khaki) 0 1px,
                                                   transparent 1px 7px);
             opacity: .45; }

/* --- contenido ------------------------------------------------------------------------- */
.app-main h1 { color: var(--axo-ink); font-weight: 700; }
.app-main h1::before { content: ""; display: inline-block; width: 1.55em; height: .8em;
                       margin-right: .45em; vertical-align: -.02em;
                       background: url("img/chevrons.svg") no-repeat left center / contain; }
.app-main h2.h6 { text-transform: uppercase; letter-spacing: .07em; font-size: .76rem;
                  font-weight: 700; color: var(--axo-taupe); margin-bottom: .6rem; }
.app-main h2.h6 .small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.app-main h2.h5 { color: var(--axo-ink); font-weight: 600; }
code { color: var(--axo-purple-dark); }
.card { --bs-card-border-color: var(--axo-line); --bs-card-border-radius: .75rem;
        --bs-card-inner-border-radius: calc(.75rem - 1px);
        box-shadow: 0 1px 2px rgba(26, 23, 24, .04); }
.card > .table-responsive { border-radius: var(--bs-card-inner-border-radius); }
.table { --bs-table-hover-bg: #f7f3ec; }
.table > thead th { --bs-table-bg: var(--axo-head); color: var(--axo-gray); font-size: .75rem;
                    font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
                    border-bottom-color: var(--axo-line); white-space: nowrap; }
.table-sm td, .table-sm th { vertical-align: middle; }
.dropdown-menu { --bs-dropdown-border-color: var(--axo-line);
                 --bs-dropdown-link-active-bg: var(--axo-purple); }

/* botones y formularios con el morado de Sistemas */
.btn-primary { --bs-btn-bg: var(--axo-purple); --bs-btn-border-color: var(--axo-purple);
               --bs-btn-hover-bg: var(--axo-purple-dark); --bs-btn-hover-border-color: var(--axo-purple-dark);
               --bs-btn-active-bg: #5a1e5d; --bs-btn-active-border-color: #5a1e5d;
               --bs-btn-disabled-bg: var(--axo-purple); --bs-btn-disabled-border-color: var(--axo-purple);
               --bs-btn-focus-shadow-rgb: 134, 47, 139; }
.btn-outline-primary { --bs-btn-color: var(--axo-purple); --bs-btn-border-color: var(--axo-purple);
                       --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--axo-purple);
                       --bs-btn-hover-border-color: var(--axo-purple); --bs-btn-active-color: #fff;
                       --bs-btn-active-bg: var(--axo-purple-dark);
                       --bs-btn-active-border-color: var(--axo-purple-dark);
                       --bs-btn-focus-shadow-rgb: 134, 47, 139; }
.btn-secondary { --bs-btn-bg: var(--axo-gray); --bs-btn-border-color: var(--axo-gray);
                 --bs-btn-hover-bg: var(--axo-ink); --bs-btn-hover-border-color: var(--axo-ink);
                 --bs-btn-active-bg: var(--axo-ink); --bs-btn-active-border-color: var(--axo-ink); }
.btn-outline-secondary { --bs-btn-color: var(--axo-gray); --bs-btn-border-color: #b9b2a5;
                         --bs-btn-hover-bg: var(--axo-beige); --bs-btn-hover-color: var(--axo-ink);
                         --bs-btn-hover-border-color: #b9b2a5; --bs-btn-active-bg: var(--axo-beige);
                         --bs-btn-active-color: var(--axo-ink); --bs-btn-active-border-color: #b9b2a5; }
.form-control:focus, .form-select:focus { border-color: #b98cbc;
                                          box-shadow: 0 0 0 .2rem rgba(134, 47, 139, .18); }
.form-check-input:checked { background-color: var(--axo-purple); border-color: var(--axo-purple); }
.form-check-input:focus { border-color: #b98cbc; box-shadow: 0 0 0 .2rem rgba(134, 47, 139, .18); }

/* barra de filtros sobre los gráficos */
.filters { background: #fff; border: 1px solid var(--axo-line); border-radius: .75rem;
           padding: .6rem .75rem; }

/* indicadores */
.stat-tile { background: #fff; border: 1px solid var(--axo-line); border-radius: .75rem;
             padding: .8rem 1rem; height: 100%; }
.stat-label { font-size: .78rem; color: var(--axo-muted); }
.stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: var(--axo-ink);
              font-variant-numeric: tabular-nums; }
.stat-note { font-size: .75rem; color: var(--axo-muted); }
.flow-title { display: flex; align-items: center; gap: .5rem; }
.flow-title .arrow { color: var(--axo-khaki); }

/* --- ayuda ---------------------------------------------------------------------------- */
.navbar-axo .help-link { display: flex; align-items: center; }
.navbar-axo .help-link svg { color: var(--axo-sand); }
.navbar-axo .help-link:hover svg, .navbar-axo .help-link.active svg { color: #fff; }
.help-toc .card { position: sticky; top: 1rem; }
.help-section { background: #fff; border: 1px solid var(--axo-line); border-radius: .75rem;
                padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; scroll-margin-top: 1rem; }
.help-section h2 { font-size: 1.15rem; font-weight: 700; color: var(--axo-ink); }
.help-section h3 { font-size: .8rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .06em; color: var(--axo-taupe); margin-top: 1rem; }
.help-section li { margin-bottom: .3rem; }
.help-state { background: var(--axo-paper); border-radius: .5rem; padding: .6rem .6rem .6rem 1.6rem; }

/* --- login ----------------------------------------------------------------------------- */
body.login-page { background: var(--axo-ink); min-height: 100vh; }
body.login-page::after { content: ""; position: fixed; right: 0; bottom: 0; width: 50%;
                         height: 22px; pointer-events: none; opacity: .35;
                         background: repeating-linear-gradient(135deg, var(--axo-khaki) 0 1px,
                                                               transparent 1px 8px); }
.login-brand { text-align: center; margin: 3.5rem 0 1.5rem; color: var(--axo-sand); }
.login-brand img { height: 84px; width: auto; }
.login-brand .app-name { margin-top: .8rem; font-size: .8rem; letter-spacing: .22em;
                         text-transform: uppercase; color: var(--axo-khaki); }
.login-card { border: 0; border-radius: 1rem; background: #fbf9f5; }
.login-card h1 { font-size: 1.15rem; font-weight: 700; color: var(--axo-ink); }

/* --- utilidades del panel -------------------------------------------------------------- */
.qr svg { width: 220px; height: 220px; }
pre.json { max-height: 420px; overflow: auto; background: #faf8f4; border: 1px solid var(--axo-line);
           border-radius: .5rem; padding: .75rem; font-size: .8rem; white-space: pre-wrap;
           word-break: break-word; }
.text-break-all { word-break: break-all; }
.tz { font-size: .68em; font-weight: 600; letter-spacing: .04em; color: var(--axo-khaki);
      vertical-align: .1em; }
.health-dot { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; }
.health-ok { background: #198754; }
.health-warn { background: #ffc107; }
.health-error { background: #dc3545; }
.health-off { background: #adb5bd; }
.codes { font-family: var(--bs-font-monospace); font-size: 1.1rem; }
.inline-form { display: inline; }
.btn-link-inline { padding: 0; border: 0; background: none; color: var(--bs-link-color);
                   text-decoration: underline; }

/* --- gráficos SVG -----------------------------------------------------------------------
   Paleta validada (CVD y visión normal): morado = altas / crecimiento, naranjo = bajas /
   caída. El contraste del naranjo es < 3:1, por eso cada gráfico trae tabla con los datos. */
svg.chart { width: 100%; height: auto; display: block; }
svg.chart .grid { stroke: #e8e2d8; stroke-width: 1; }
svg.chart .zero { stroke: var(--axo-khaki); stroke-width: 1; }
svg.chart .axis { fill: var(--axo-muted); font-size: 13px; }
svg.chart .s1 { fill: #862f8b; }
svg.chart .s2 { fill: #ed722f; }
svg.chart .s3 { fill: #3974b7; }
svg.chart .s4 { fill: #9f9985; }
svg.chart .s1-line { fill: none; stroke: #862f8b; stroke-width: 2; }
svg.chart circle.s1 { stroke: #fff; stroke-width: 2; }
svg.chart .hit { fill: transparent; }
svg.chart .hit:hover { fill: rgba(26, 23, 24, .05); }
.legend-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px;
                 margin-right: .25rem; vertical-align: baseline; }
.legend-s1 { background: #862f8b; }
.legend-s2 { background: #ed722f; }
.legend-s3 { background: #3974b7; }
.legend-s4 { background: #9f9985; }
.chart-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem;
              margin-bottom: .25rem; }
.chart-title { font-weight: 600; color: var(--axo-ink); }