/*
 * Marca del desarrollador ATRIO (guía de marca: Noche #1E1726, Oro #E8C26A, Cobre #B4743A, Ciruela #7A4588,
 * Índigo #2E5A8C, Niebla #F4F1F6; Chakra Petch solo para el nombre). La pinta <x-atrio-brand>.
 *
 * Archivo estático (no pasa por Vite): lo cargan el layout y las pantallas de acceso, que no usan app.css.
 */
:root {
    --atrio-ink: #f4f1f6;
    --atrio-at: #9a5f2c; /* "AT" sobre fondos claros */
    --atrio-rio: #1e1726;
}

.atrio-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    line-height: 1;
    white-space: nowrap;
}

.atrio-mark {
    flex: 0 0 auto;
}

.atrio-mark-ink {
    fill: var(--atrio-ink);
}

.atrio-wordmark {
    font-family: 'Chakra Petch', 'Source Sans Pro', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--atrio-rio);
    padding-top: 0.08em; /* centrado óptico junto a la placa */
}

.atrio-wordmark-at {
    color: var(--atrio-at);
}

/* Líneas "Desarrollado por ATRIO" (pie de la aplicación y pantallas de acceso). */
.developer-credit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 13px;
}

/* Pie de la aplicación: el crédito va a la izquierda y el resto a la derecha. En escritorio el menú
   lateral (210px) tapa el primer tramo del pie, así que el crédito empieza justo después. */
.main-footer .developer-credit {
    margin-right: auto;
}

@media (min-width: 992px) {
    .main-footer .developer-credit {
        margin-left: 210px;
    }
}

@media (max-width: 575px) {
    .main-footer .developer-credit-label {
        display: none;
    }
}

/* === Diálogo "Acerca del sistema" === */
.about-system-logo {
    max-width: 220px;
}

.about-system .atrio-brand {
    font-size: 1.5rem;
}

.about-system .atrio-mark {
    filter: drop-shadow(0 4px 10px rgba(122, 69, 136, 0.35));
}

/* En móvil la cabecera del layout usa z-index 3075: el diálogo y su fondo deben quedar por encima. */
.about-system {
    z-index: 3095;
}

.about-system.show ~ .modal-backdrop {
    z-index: 3090;
}
