/* ============================================================
   Archivo  : trianon-brand.css
   Ruta     : Web.Finanzas/wwwroot/css/
   Modulo   : Branding / Layout
   Fase     : 8 - Views (capa de marca)
   Version  : V1.0 - 2026-08-20
   Sistema  : Hana_Trianon_Satelital
   ------------------------------------------------------------
   Capa de MARCA sobre Inspinia v5. Se carga DESPUES de
   app.min.css y solo redefine variables CSS del tema, por lo
   que NO requiere recompilar el SCSS con gulp/bun.
   El prefijo de variables del tema en esta build es --theme-.
   ============================================================ */

/* ── 1 · Tokens de marca Grupo Trianon ───────────────────── */
:root {
    --ts-navy-900: #0B2545;
    --ts-navy-800: #0E3160;
    --ts-navy-700: #123C71;
    --ts-navy:     #164A8A;
    --ts-blue-300: #4A7FC1;
    --ts-gold:     #E0AD0A;
    --ts-gold-300: #F5C542;
    --ts-ink:      #17202E;
}

/* ── 2 · El logo del sistema respira mejor a 32px ─────────── */
:root {
    --theme-logo-lg-height: 32px;
    --theme-logo-sm-height: 30px;
}

/* ── 3 · Skin "gradient" recoloreado a la paleta Trianon ──── */
/*    Sidenav: navy profundo -> azul corporativo               */
html[data-menu-color='gradient'] {
    --theme-sidenav-bg:                 linear-gradient(160deg, #0B2545 0%, #123C71 58%, #164A8A 100%);
    --theme-sidenav-border-color:       transparent;
    --theme-sidenav-item-color:         #A9BFDA;
    --theme-sidenav-item-hover-color:   #FFFFFF;
    --theme-sidenav-item-hover-bg:      rgba(255, 255, 255, .07);
    --theme-sidenav-item-active-color:  #FFFFFF;
    --theme-sidenav-item-active-bg:     rgba(255, 255, 255, .10);
}

/*    Topbar: arranca en el mismo navy que el sidenav          */
html[data-topbar-color='gradient'] {
    --theme-topbar-bg:                  linear-gradient(180deg, #0B2545 0%, #123C71 100%);
    --theme-topbar-item-color:          rgba(255, 255, 255, .78);
    --theme-topbar-item-hover-color:    #FFFFFF;
    --theme-topbar-search-bg:           rgba(255, 255, 255, .10);
    --theme-topbar-search-border:       rgba(255, 255, 255, .16);
}

/*    Filo dorado en el item activo del menu (el tema solo pinta
      el activo de primer nivel: .side-nav > .side-nav-item.active > a) */
html[data-menu-color='gradient'] .side-nav > .side-nav-item.active > a {
    box-shadow: inset 3px 0 0 0 var(--ts-gold);
}

/*    El tema NO estiliza el enlace activo de segundo nivel, aunque
      el JS del sidebar le pone .active. Se marca en dorado.        */
html[data-menu-color='gradient'] .side-nav .collapse a.side-nav-link.active {
    color: var(--ts-gold-300) !important;
    font-weight: 600;
}

/*    Titulos de seccion del menu, en dorado tenue             */
html[data-menu-color='gradient'] .side-nav-title {
    color: rgba(245, 197, 66, .72);
    letter-spacing: .06em;
}

/* ── 4 · Bug del tema: con topbar "gradient" el logo que se
      mostraba era el oscuro (texto navy sobre fondo navy).    */
html[data-topbar-color='gradient'] .logo-topbar .logo-light { display: block; }
html[data-topbar-color='gradient'] .logo-topbar .logo-dark  { display: none;  }

/* ── 5 · Bloque de usuario del sidenav sobre el gradiente ─── */
html[data-menu-color='gradient'] .sidenav-user span:not(.ts-avatar) {
    color: rgba(255, 255, 255, .66);
}

html[data-menu-color='gradient'] .sidenav-user .sidenav-user-name {
    color: #FFFFFF;
}

html[data-menu-color='gradient'] .sidenav-user hr {
    border-color: rgba(255, 255, 255, .12);
}

/* ── 6 · Avatar de iniciales (0 requests, 0 imagenes) ─────── */
.ts-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--ts-gold-300) 0%, var(--ts-gold) 100%);
    color: var(--ts-navy-900);
    font-weight: 700;
    font-size: .82rem;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    user-select: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .20), 0 2px 6px rgba(11, 37, 69, .25);
}

.ts-avatar:hover { color: var(--ts-navy-900); }

/* Tamanos por contexto: no hace falta pasar parametros        */
.sidenav-user .ts-avatar { width: 46px; height: 46px; font-size: .95rem; }
.nav-user     .ts-avatar { width: 34px; height: 34px; font-size: .74rem; margin-inline-end: .5rem; }

/* Sobre fondo claro el anillo blanco no se ve: usa navy       */
html[data-topbar-color='light'] .nav-user .ts-avatar,
html[data-topbar-color='gray']  .nav-user .ts-avatar {
    box-shadow: 0 0 0 2px rgba(11, 37, 69, .12), 0 2px 6px rgba(11, 37, 69, .18);
}

/* ── 7 · Marca en el pie ─────────────────────────────────── */
.footer .ts-foot-brand { color: var(--ts-navy); font-weight: 600; }

/* ── 8 · Campos de solo lectura que SE VEAN de solo lectura ─
      Dos problemas encadenados, los dos medidos en esta build:

      (a) Bootstrap 5 saco [readonly] de la regla de :disabled, asi que un
          input readonly queda con fondo blanco, identico a uno editable.
          El usuario intenta escribir y no entiende por que no pasa nada.

      (b) La utilidad .bg-body-secondary NO sirve para grisarlo aqui: en
          esta build compila a rgba(var(--theme-secondary-bg-rgb),...) y
          --theme-secondary-bg vale #fff, o sea BLANCO. Y como las
          utilidades llevan !important, ponerla no solo no gris el campo:
          ademas BLOQUEA cualquier regla propia que intente pintarlo.

      Por eso los colores van LITERALES y sin utilidades de fondo.
      Caso concreto: "Moneda Local" en Empresas SAP, que la sincroniza SAP
      desde OADM.MainCurncy y el portal no debe poder tocar.               */
.form-control[readonly]:not(.form-control-plaintext),
.form-select[readonly]:not(.form-control-plaintext) {
    background-color: #EDF1F6;
    color: #55637A;
    cursor: default;
}

.form-control[readonly]:not(.form-control-plaintext):focus {
    background-color: #EDF1F6;
    border-color: #CBD4E0;
    box-shadow: none;
}

/* El addon del input-group acompaña el estado */
.input-group:has(> .form-control[readonly]:not(.form-control-plaintext)) > .input-group-text {
    background-color: #E3E9F1;
    color: #55637A;
}