@import url('/css/_layouts/panelfotografo.css');

/*
 * Paleta EAL Media Distribution
 * Primario: azul real del logo, muestreado del PNG (2026-06-01) → #007DF1 (rgb 0,125,241).
 *   El hex que declaró el cliente (#3278E6) tiene más rojo y NO coincide con su logotipo;
 *   se usa el del logo para coherencia paleta=imágenes. (Trasladar discrepancia al cliente.)
 * Hover: derivado ~12% más oscuro del primario.
 * Adicionales: blanco y negro
 */
:root {
    --eal-primary:       #007DF1;
    --eal-primary-hover: #006ED4;
    --eal-secondary:     #000000;
    --eal-surface:       #ffffff;
    --eal-surface-alt:   #f5f8fc;
    --eal-border:        #d0e2f7;
    --eal-text:          #000000;
    --eal-text-inverse:  #ffffff;
}

html,
body,
.white-skin,
.white-skin .md-skin,
.fixed-sn main,
main,
.view,
.content-wrapper {
    background-color: var(--eal-surface) !important;
    color: var(--eal-text) !important;
}

/* Banda blanca EAL: el <main class="bg-app"> es gris (#e2e2e2) pero EAL pinta el
   body de blanco; los margenes de los hijos (section mt/mb) colapsaban a traves
   de main (sin padding) y dejaban asomar el body blanco como banda full-width
   entre el nav y el main, y entre el main y el footer. Dando a main un block
   formatting context (flow-root) los margenes quedan contenidos: el gris conecta
   directo con nav y footer, sin banda. */
main.bg-app {
    display: flow-root !important;
}

body a,
.white-skin a {
    color: var(--eal-primary) !important;
}

body a:hover,
.white-skin a:hover {
    color: var(--eal-primary-hover) !important;
}

.card,
.card-body,
.modal-content,
.dropdown-menu,
.z-depth-1,
.stepper-horizontal,
.white-skin .card,
.white-skin .modal-content,
.white-skin .dropdown-menu {
    color: var(--eal-text) !important;
    border-color: var(--eal-border) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

.card .card-header,
.modal-header,
.table thead tr,
.stepper-horizontal li.active .step-content {
    background-color: var(--eal-surface-alt) !important;
    color: var(--eal-text) !important;
    border-bottom-color: var(--eal-border) !important;
}

.table {
    background-color: var(--eal-surface) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--eal-surface-alt) !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--eal-surface) !important;
}

.table thead th,
.table tbody td {
    border-color: var(--eal-border) !important;
    color: var(--eal-text) !important;
}

.btn,
.btn-primary,
.btn-default,
.btn-outline-primary,
.btn-info,
.btn-warning {
    background-color: var(--eal-primary) !important;
    border-color: var(--eal-primary) !important;
    color: var(--eal-text-inverse) !important;
}

.btn:hover,
.btn:focus {
    background-color: var(--eal-primary-hover) !important;
    border-color: var(--eal-primary-hover) !important;
    color: var(--eal-text-inverse) !important;
}

/* Iconos btn-i-custom: el base los pinta gris #6E6E6E; sobre los botones azules
   de EAL quedan gris-sobre-azul (poco visibles, y se funden al hacer hover).
   Blancos, igual que el texto del boton. */
.btn .btn-i-custom {
    color: var(--eal-text-inverse) !important;
}

/* === Congruencia de color en hover: los botones con color propio NO deben
   saltar a azul al pasar el raton (el blanket .btn:hover los pisaba). === */

/* Convencion de toggles: seleccionado (.active) = terracota #D96440, no
   seleccionado = azul (el .btn de EAL). Aplica en rest, hover y focus, y a todos
   los grupos de toggle del panel (btn-grid en alerts/manage, btn-blue-grey en
   ISRC/UPC de presave). Especificidad 0,0,2,0 (rest) / 0,0,3,0 (:hover) gana
   al .btn azul y al .btn:hover. */
.btn-grid.active,
.btn-grid.active:hover,
.btn-grid.active:focus,
.btn-blue-grey.active,
.btn-blue-grey.active:hover,
.btn-blue-grey.active:focus {
    background-color: #D96440 !important;
    border-color: #D96440 !important;
    color: #fff !important;
}

/* Toggle NO seleccionado = azul de marca. En runtime algun estilo (MDB/JS) deja
   el btn-blue-grey/btn-grid sin .active en verde; lo forzamos a azul con alta
   especificidad (grupo + clase + :not(.active) = 0,0,3,0). */
.btn-group .btn-blue-grey:not(.active),
.btn-group .btn-grid:not(.active) {
    background-color: var(--eal-primary) !important;
    border-color: var(--eal-primary) !important;
    color: var(--eal-text-inverse) !important;
}

/* Boton de accion principal (.btn-orange) = terracota #D96440 (su color
   semantico), no azul. Es el color de "Enviar producto", Rescan, Actualizar,
   Guardar, etc. Hover = terracota mas oscuro. Mi regla va despues de .btn /
   .btn:hover de EAL, asi que gana a igual especificidad. */
.btn-orange {
    background-color: #D96440 !important;
    border-color: #D96440 !important;
    color: #fff !important;
}
.btn-orange:hover,
.btn-orange:focus {
    background-color: #c5552f !important;
    border-color: #c5552f !important;
    color: #fff !important;
}

/* "Cancelar" y demas .btn.label-basic-color: son BOTONES, deben comportarse como
   uno normal (azul + texto blanco, hover azul mas oscuro). La regla de EAL que
   pone .label-basic-color transparente+oscuro es para etiquetas de formulario
   (<p>/labels), no para botones; aqui la reanulamos solo en contexto boton.
   Especificidad 0,0,2,0 (y :hover 0,0,3,0) > las reglas de etiqueta/.btn:hover. */
.btn.label-basic-color {
    background-color: var(--eal-primary) !important;
    border-color: var(--eal-primary) !important;
    color: var(--eal-text-inverse) !important;
}
.btn.label-basic-color .fa,
.btn.label-basic-color i {
    color: var(--eal-text-inverse) !important;
}
.btn.label-basic-color:hover,
.btn.label-basic-color:focus {
    background-color: var(--eal-primary-hover) !important;
    border-color: var(--eal-primary-hover) !important;
    color: var(--eal-text-inverse) !important;
}

.toolbar-color {
    background: var(--eal-primary) !important;
}

.toolbar-color,
.toolbar-color a,
.toolbar-color .nav-link,
.toolbar-color .dropdown-item,
.toolbar-color .fa,
.toolbar-color .fas,
.toolbar-color .navbar-brand,
.toolbar-color .navbar-text {
    color: var(--eal-text-inverse) !important;
}

/* Dropdowns: asegurar texto oscuro sobre fondo claro */
.dropdown-menu,
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item i {
    color: var(--eal-text) !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--eal-primary) !important;
    color: var(--eal-text-inverse) !important;
}

/* Links en panel/login (terminos de uso, etc.) */
.font-size-0-9 a,
.font-size-0-9 a:visited,
.card-body-logo a,
.card-body-logo a:visited {
    color: var(--eal-text) !important;
}
.font-size-0-9 a:hover,
.card-body-logo a:hover {
    color: var(--eal-primary-hover) !important;
}


/* Encuadre login: imagen cuadrada al 100% del ancho de la card, sin distorsion,
   pegada al bloque de credenciales (sin gap). */
.login-logo-header {
    padding: 0 !important;
    margin: 0 !important;
}
.login-logo,
.login-logo::before {
    background-image: url('/img/logoEAL_M.png?v=eal2');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-origin: content-box;
    background-color: #ffffff;
    display: block !important;
    box-sizing: content-box !important;
    width: 100% !important;
    height: 18vh !important;
    margin: 0 !important;
    padding: 3vh 0 0 0 !important;
}

/* Header panel: logo horizontal isotipo+wordmark (logo+texto), badge azul a ratio de caja. */
.panel-logo,
.panel-logo::before{
    background-image: url('/img/logoEAL_A.png?v=eal6');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    width: 220px !important;
    height: 78px !important;
}

/* Mover SOLO el logo a la izquierda sin desplazar el menu (Catalogo, Analiticas,
   Contabilidad, Marketing). Se usa transform (no afecta al flujo) en vez de tocar
   el padding del wrapper, que encogia el contenedor y arrastraba el menu.
   Solo afecta a EAL (este CSS es EAL-only). */
#navbarMain .logoHeader .panel-logo{
    transform: translateX(-80px);
}


/* FIX contraste EAL (2026-06-09): estas clases son etiquetas/titulos/filas de
   CONTENIDO del panel (no van sobre el header azul). El base las pinta en verde
   teal #70B094; el override previo a `white` las dejaba INVISIBLES sobre las
   superficies claras de EAL → afectaba splits (aviso 100 Splits), billing
   (Listado facturas), listings (Liquidaciones/Listado artistas/cuentas/Splits)
   y las filas Top Pistas/Proyectos/Artistas de analytics (ServiceAnalytics.GetTrends).
   Se mapean al azul de marca: legible sobre claro y on-brand. */
.label-color,
.text-fotopick {
    color: var(--eal-primary) !important;
}

/* Resto de clases de texto-acento del base que el theme MusicAdders pinta en
   teal (#70B094 / #009688) o malva (#9F89D4). Son visibles pero off-brand para EAL.
   Se unifican al azul de marca para coherencia y para descartar cualquier otra
   combinacion de bajo contraste en el panel. */
.h2-color,
.h4-color,
.h4-header-color,
.type-label-color,
.grid-caption-color,
.dist-text,
.text-cyan {
    color: var(--eal-primary) !important;
}

/* Excepcion: si estas clases-acento van sobre un .btn (fondo azul de marca EAL),
   el texto debe ser blanco, no azul, o queda azul-sobre-azul e invisible
   (botones "Subir Contrato" y "Cancelar" en edit-subaccount, y otros). Mayor
   especificidad (.btn.x = 0,0,2,0) que la regla de acento, asi que gana. */
.btn.text-fotopick,
.btn.label-color,
.btn .text-fotopick,
.btn .label-color {
    color: var(--eal-text-inverse) !important;
}

.bg-fotopick,
.label-basic-color {
    background-color: var(--eal-primary) !important;
    color: var(--eal-text-inverse) !important;
}

/* Formularios: etiquetas con fondo claro y texto oscuro */
.label-basic-color {
    background-color: transparent !important;
    color: var(--eal-text) !important;
    font-weight: 600;
}

.label-basic-color .fa,
.label-basic-color i {
    color: var(--eal-text) !important;
}

.side-nav .collapsible a {
    color: var(--eal-text-inverse) !important;
}

.side-nav {
    background: var(--eal-primary) !important;
}

.page-footer.toolbar-color,
.page-footer.toolbar-color a,
.page-footer.toolbar-color .grey-text {
    color: var(--eal-text-inverse) !important;
}

.social-section .btn-floating {
    background-color: rgba(255,255,255,0.15) !important;
    color: var(--eal-text-inverse) !important;
}

/* Footer EAL: alinear el "© Copyright" con el logo del header (izquierda).
   El footer base usa .container (centrado), por lo que en pantallas anchas el
   copyright queda muy a la derecha mientras el logo va pegado a la izquierda
   (navbar full-width + translateX -80px). En EAL hacemos el contenedor del
   footer full-width para que el © arranque a la izquierda, alineado al logo. */
.pf {
    padding-left: 0 !important;
}
.page-footer .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 32px !important;
}