/* ==========================================================================
   EMA Etiquetas — estilos propios (marca definitiva)
   Los dos colores salen del logo (assets/img/logo_EMA.svg), que usa
   exactamente esos dos y nada más. Cambiar aquí = cambia toda la aplicación,
   salvo las plantillas de email: el correo no admite variables CSS y lleva los
   hex a mano (app/Views/emails/*.php).
   ========================================================================== */

:root {
    --ema-primary: #68a8de;      /* azul claro de la marca */
    --ema-primary-dark: #1b254b; /* navy de la marca: TODOS los hovers */
    --ema-dark: #1b254b;         /* barra superior y títulos */

    /* El azul de marca es claro: texto blanco encima queda en 2,5:1 y no se
       lee. Sobre superficies azules el texto va en navy (5,8:1). */
    --ema-on-primary: #1b254b;

    --ema-muted: #64748b;
    --ema-bg: #f1f5f9;
}

body {
    background-color: var(--ema-bg);
}

/* Botones de marca: azul claro con texto navy en reposo, navy con texto
   blanco al pasar por encima. */
.btn-ema {
    background-color: var(--ema-primary);
    border-color: var(--ema-primary);
    color: var(--ema-on-primary);
    font-weight: 500;
    /* El halo de foco lo pone la clase base .btn de Bootstrap, y era su azul. */
    --bs-btn-focus-shadow-rgb: 104, 168, 222;
}
.btn-ema:hover,
.btn-ema:focus {
    background-color: var(--ema-primary-dark);
    border-color: var(--ema-primary-dark);
    color: #fff;
}

/* ==========================================================================
   El azul de fábrica de Bootstrap → azul de EMA

   Bootstrap 5.3 lleva su azul (#0d6efd) **compilado dentro de cada componente**,
   no derivado de `--bs-primary`; por eso tocar esa variable a secas no recolorea
   nada y estos controles se quedaban azul-Bootstrap aunque la marca ya estuviera
   aplicada. Se pisa componente a componente, aprovechando que 5.3 expone
   variables propias en cada uno (nada de `!important` salvo donde Bootstrap lo
   usa él).

   Si en una pantalla nueva aparece un azul ajeno, es que usa una clase que no
   está en esta lista.
   ========================================================================== */

/* Lo único que Bootstrap sí resuelve por variable: fondos y bordes utilitarios
   (.bg-primary, .text-bg-primary, .border-primary — insignias, burbujas del
   hilo de incidencias, zona de arrastre de archivos). */
:root {
    --bs-primary: #68a8de;
    --bs-primary-rgb: 104, 168, 222;

    /* Halo de foco genérico (utilidades .focus-ring y algún :focus-visible). */
    --bs-focus-ring-color: rgba(104, 168, 222, .35);

    /* Enlaces de texto (panel del cliente, ficha del pedido, manual). Van en
       navy y NO en el azul de marca: sobre blanco ese azul da 2,5:1. Como el
       reposo ya es navy, el hover no cambia de color — Bootstrap 5.3 subraya
       los enlaces por defecto, y eso es lo que los distingue del texto. */
    --bs-link-color-rgb: 27, 37, 75;
    --bs-link-hover-color-rgb: 27, 37, 75;
}

/* Botones de acción de los listados («Ver», «Editar», «Descargar», «Ver hilo»)
   y el conmutador Repetir/Nueva del formulario de pedido.
   En reposo: texto navy con el borde en azul de marca —el texto NO puede ir en
   azul claro, sobre blanco daría 2,5:1—. Al pasar por encima y al quedar
   activo/seleccionado: relleno navy con texto blanco. */
.btn-outline-primary {
    --bs-btn-color: var(--ema-dark);
    --bs-btn-border-color: var(--ema-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ema-primary-dark);
    --bs-btn-hover-border-color: var(--ema-primary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ema-primary-dark);
    --bs-btn-active-border-color: var(--ema-primary-dark);
    --bs-btn-disabled-color: var(--ema-muted);
    --bs-btn-disabled-border-color: var(--ema-primary);
    --bs-btn-focus-shadow-rgb: 104, 168, 222;
}

/* Bootstrap fuerza texto blanco en estas (`color:#fff!important`) y sobre el
   azul claro de la marca no se leería. De ahí el !important: es para deshacer
   el suyo, no para ganar especificidad. */
.text-bg-primary {
    color: var(--ema-on-primary) !important;
}

/* Casillas y radios marcados: navy, no azul claro. La marca de verificación
   que Bootstrap dibuja dentro es blanca y sobre el azul claro se pierde. */
.form-check-input:checked {
    background-color: var(--ema-primary-dark);
    border-color: var(--ema-primary-dark);
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--ema-primary-dark);
    border-color: var(--ema-primary-dark);
}

/* Halo de foco de los campos: Bootstrap lo trae hardcodeado (#86b7fe + su
   azul al 25%), así que hay que reescribir la regla entera. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--ema-primary);
    box-shadow: 0 0 0 .25rem rgba(104, 168, 222, .35);
}

/* Halo de foco de los enlaces de las barras (solo se ve navegando con Tab). */
.nav-link:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(104, 168, 222, .35);
}

/* Ítem activo de una lista: hoy ninguna vista lo usa, pero si mañana se marca
   uno, que no salga azul-Bootstrap. */
.list-group {
    --bs-list-group-active-bg: var(--ema-primary-dark);
    --bs-list-group-active-border-color: var(--ema-primary-dark);
}

/* ----- Pantallas de autenticación ----- */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: 1rem;
}
.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
}
.auth-brand__name {
    font-weight: 500;
    font-size: .8rem;
    color: var(--ema-muted);
    letter-spacing: .3px;
    text-align: center;
}

/* ----- Logo de marca -----
   Dos archivos, según el fondo donde caiga:
     · logo_EMA.svg           lockup completo, colores originales → fondo claro
     · isotipo_EMA_blanco.svg solo «eMA.» en blanco               → barras navy
   El navy del logo es el mismo #1b254b de las barras, así que ahí desaparecería.
   Solo se fija la altura: el ancho sale por proporción (lockup 4,35:1). */
.brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
}
.brand-logo--auth { height: 58px; }  /* login y pantallas de acceso */
.brand-logo--bar  { height: 30px; }  /* barras superiores de las dos áreas */
.brand-logo--help { height: 34px; }  /* cabecera del manual */

/* ----- Shell de backoffice ----- */
.admin-navbar {
    background-color: var(--ema-dark);
}
.admin-sidebar {
    min-height: calc(100vh - 56px);
    background-color: #fff;
    border-right: 1px solid #e2e8f0;
}
.admin-sidebar .nav-link {
    color: var(--ema-dark);
    border-radius: .5rem;
    margin-bottom: .15rem;
}
.admin-sidebar .nav-link.active {
    background-color: var(--ema-primary);
    color: var(--ema-on-primary);
    font-weight: 500;
}
.admin-sidebar .nav-link:hover:not(.active) {
    background-color: var(--ema-bg);
}

/* ----- Botón «?» de ayuda contextual (M16) -----
   Vive en las barras oscuras de las dos áreas, así que va aquí y no en
   help.css: se pinta en todas las pantallas, y help.css solo se carga en el
   manual. Lo genera help_button() desde los layouts. */
.help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .45);
    color: rgba(255, 255, 255, .85);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    flex: 0 0 auto;
}
.help-btn:hover {
    background-color: rgba(255, 255, 255, .15);
    border-color: #fff;
    color: #fff;
}

/* ----- Campana de avisos (M08, centro de notificaciones) -----
   Misma razón que .help-btn para vivir aquí: se pinta en las barras oscuras de
   las dos áreas, en todas las pantallas. Lo genera notification_bell() desde
   los layouts. */
.notif {
    flex: 0 0 auto;
}
.notif-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .45);
    background-color: transparent;
    color: rgba(255, 255, 255, .85);
    line-height: 1;
}
.notif-btn:hover,
.notif-btn:focus,
.notif-btn[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, .15);
    border-color: #fff;
    color: #fff;
}
/* Con avisos pendientes la campana deja de ser un icono más de la barra. */
.notif-btn--activa {
    border-color: #fff;
    color: #fff;
}

/* El contador se sale del círculo a propósito: es lo que se busca de un
   vistazo al entrar. */
.notif-contador {
    position: absolute;
    top: -.3rem;
    right: -.3rem;
    min-width: 1.05rem;
    padding: 0 .25rem;
    border-radius: .6rem;
    background-color: #dc3545;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.05rem;
}

.notif-panel {
    width: 22rem;
    max-width: calc(100vw - 1.5rem);
    padding: 0;
    overflow: hidden;
}
.notif-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .85rem;
    border-bottom: 1px solid #e2e8f0;
}
.notif-vacio {
    margin: 0;
    padding: 1.4rem .85rem;
    color: var(--ema-muted);
    font-size: .85rem;
    text-align: center;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .6rem .85rem;
    border-bottom: 1px solid #f1f5f9;
    color: inherit;
    text-decoration: none;
}
.notif-item:hover,
.notif-item:focus {
    background-color: var(--ema-bg);
    color: inherit;
}
/* El punto ocupa sitio siempre, leído o no: si apareciera y desapareciera, las
   líneas bailarían al marcar un aviso. */
.notif-punto {
    flex: 0 0 auto;
    width: .45rem;
    height: .45rem;
    margin-top: .4rem;
    border-radius: 50%;
    background-color: transparent;
}
.notif-item--nuevo {
    background-color: rgba(104, 168, 222, .08);
}
.notif-item--nuevo .notif-punto {
    background-color: var(--ema-primary);
}
.notif-item--nuevo .notif-titulo {
    font-weight: 600;
}

.notif-cuerpo {
    min-width: 0;
}
.notif-titulo {
    display: block;
    font-size: .85rem;
    line-height: 1.3;
}
.notif-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .2rem;
    font-size: .72rem;
    color: var(--ema-muted);
}
.notif-familia {
    font-size: .62rem;
    font-weight: 600;
    padding: .12rem .35rem;
}

.notif-pie {
    display: block;
    padding: .55rem .85rem;
    background-color: #f8fafc;
    color: var(--ema-primary-dark);
    font-size: .82rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}
.notif-pie:hover {
    background-color: var(--ema-bg);
    color: var(--ema-primary-dark);
    text-decoration: underline;
}

/* Fila sin leer del listado completo de avisos (`/avisos`, `/admin/avisos`).
   Mismo azul tenue que en el desplegable, para que «nuevo» se lea igual en los
   dos sitios. */
.notif-fila--nueva {
    background-color: rgba(104, 168, 222, .08);
}