/*  brand-palette.css  —  capa de diseno de EAL / Prisma / Nexo / Universal Orchard,
    generalizada para que se pueda configurar desde la ficha de marca.

    De donde sale: esas cuatro hojas son la generica (panelfotografo.css) mas una capa
    de overrides construida sobre el mismo vocabulario de ranuras. De las 94
    declaraciones que comparten las cuatro, 65 usan LA MISMA ranura, 17 son literales
    identicos y 12 discrepan porque cada marca elige distinto: esas 12 llevan cadena
    de respaldo para admitir las dos lecturas.

    IMPORTANTE: esta hoja se carga SOLO cuando la marca tiene la paleta ampliada
    rellenada (ver _BrandTokens.cshtml). Por eso los var() no llevan respaldo literal:
    si no hay paleta, la hoja no se carga y no puede alterar a nadie.  */

html {
    background-color: var(--brand-surface) !important;
    color: var(--brand-text) !important;
}
body a {
    color: var(--brand-primary) !important;
}
.white-skin a {
    color: var(--brand-primary) !important;
}
body a:hover {
    color: var(--brand-primary-hover, var(--brand-secondary)) !important;
}
.white-skin a:hover {
    color: var(--brand-primary-hover, var(--brand-secondary)) !important;
}
.card {
    color: var(--brand-text) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 4px 10px rgba(34, 19, 48, 0.04) !important;
}
.card-body {
    color: var(--brand-text) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 4px 10px rgba(34, 19, 48, 0.04) !important;
}
.modal-content {
    color: var(--brand-text) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 4px 10px rgba(34, 19, 48, 0.04) !important;
}
.dropdown-menu {
    color: var(--brand-text) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 4px 10px rgba(34, 19, 48, 0.04) !important;
}
.z-depth-1 {
    color: var(--brand-text) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 4px 10px rgba(34, 19, 48, 0.04) !important;
}
.stepper-horizontal {
    color: var(--brand-text) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 4px 10px rgba(34, 19, 48, 0.04) !important;
}
.white-skin .card {
    color: var(--brand-text) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 4px 10px rgba(34, 19, 48, 0.04) !important;
}
.white-skin .modal-content {
    color: var(--brand-text) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 4px 10px rgba(34, 19, 48, 0.04) !important;
}
.white-skin .dropdown-menu {
    color: var(--brand-text) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 4px 10px rgba(34, 19, 48, 0.04) !important;
}
.card .card-header {
    background-color: var(--brand-surface-alt) !important;
    color: var(--brand-text) !important;
    border-bottom-color: var(--brand-border) !important;
}
.modal-header {
    background-color: var(--brand-surface-alt) !important;
    color: var(--brand-text) !important;
    border-bottom-color: var(--brand-border) !important;
}
.table thead tr {
    background-color: var(--brand-surface-alt) !important;
    color: var(--brand-text) !important;
    border-bottom-color: var(--brand-border) !important;
}
.stepper-horizontal li.active .step-content {
    background-color: var(--brand-surface-alt) !important;
    color: var(--brand-text) !important;
    border-bottom-color: var(--brand-border) !important;
}
.table {
    background-color: var(--brand-surface) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--brand-surface-alt) !important;
}
.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--brand-surface) !important;
}
.table thead th {
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}
.table tbody td {
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}
.btn {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text-inverse) !important;
}
.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text-inverse) !important;
}
.btn-default {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text-inverse) !important;
}
.btn-outline-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text-inverse) !important;
}
.btn-info {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text-inverse) !important;
}
.btn:hover {
    background-color: var(--brand-primary-hover, var(--brand-secondary)) !important;
    border-color: var(--brand-primary-hover, var(--brand-secondary)) !important;
}
.font-size-0-9 a {
    color: var(--brand-links, var(--brand-text)) !important;
}
.font-size-0-9 a:hover {
    color: var(--brand-primary-hover, var(--brand-secondary)) !important;
}
/*  MB-34: el logo de la barra del panel. ESTABA HARDCODEADO al de Prisma, porque esta capa se
    generalizo a partir de su hoja y este selector se colo con su valor literal: por eso EAL,
    Orchard y Nexo mostraban en la barra el anagrama de Prisma en vez del suyo. Ahora sale del
    token de la marca, igual que en base-panel.css. */
.panel-logo {
    background-image: var(--brand-logo, none);
    background-size: var(--brand-panel-logo-size, 7vh 7vh);
    background-repeat: no-repeat;
}

/*  MB-34: color del contenido sobre la BARRA del panel (menu, iconos, marca del navbar).
    Las hojas propias de familia C traen esta regla y al generalizar la capa se quedo fuera,
    porque .toolbar-color estaba en la lista de "selectores del login". Sin ella, el menu hereda
    --brand-text (negro en Orchard) sobre una barra oscura y queda ilegible.

    Se ancla en "nav.toolbar-color" A PROPOSITO, no en ".toolbar-color" suelto: esa misma clase
    la lleva el <main> del login, y alli el color heredado correcto es --brand-on-brand (en Nexo
    es negro). Anclando al <nav> se separan los dos casos y no se toca el login.

    El token es --brand-text-inverse ("texto sobre el color de marca"), que es el que usan sus
    hojas para la barra; --brand-on-brand queda de respaldo y el blanco como ultimo recurso. */
nav.toolbar-color,
nav.toolbar-color a,
nav.toolbar-color .nav-link,
nav.toolbar-color .navbar-brand,
nav.toolbar-color .navbar-text,
nav.toolbar-color .fa,
nav.toolbar-color .fas,
nav.toolbar-color .dropdown-toggle {
    color: var(--brand-text-inverse, var(--brand-on-brand, #ffffff)) !important;
}

/*  El desplegable de cuenta se abre sobre fondo claro: su texto NO debe heredar el color de la
    barra. Se devuelve al color de texto normal de la marca. */
.dropdown-menu,
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item i {
    color: var(--brand-text) !important;
}