/* =============================================================================
   Flash messages — estilo toast en top-right, apilables.
   =============================================================================
   Cakephp renderiza cada flash dentro de un <div class="message-flash"> (el
   wrapper de Flash->render()). Posicionamos ese wrapper como contenedor
   fixed, y cada .app-flash adentro queda como una tarjeta apilada.
   ========================================================================== */

.message-flash,
.flash-messages {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;          /* el wrapper no bloquea clicks detrás */
    max-width: min(420px, calc(100vw - 2rem));
}

.app-flash {
    pointer-events: auto;           /* los alerts sí son interactivos */
    border: 0;
    border-left: 4px solid transparent;
    padding: .75rem 2.5rem .75rem 1rem;
    border-radius: 10px;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.25);
    font-size: .9rem;
    display: flex;
    align-items: flex-start;
    line-height: 1.4;
    animation: appFlashIn .3s ease-out;
}

.app-flash .mdi {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.app-flash .btn-close {
    padding: .35rem;
    margin: -.35rem .25rem -.35rem auto;
    font-size: .7rem;
}

/* Acentos por tipo (borde izquierdo) — respetan los colores Bootstrap pero
   dan más identidad visual que el alert plano. */
.app-flash.alert-success { border-left-color: #198754; }
.app-flash.alert-danger  { border-left-color: #dc3545; }
.app-flash.alert-info    { border-left-color: #0dcaf0; }
.app-flash.alert-warning { border-left-color: #ffc107; }

@keyframes appFlashIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 575.98px) {
    .message-flash,
    .flash-messages {
        top: .5rem;
        right: .5rem;
        left: .5rem;
        max-width: none;
    }
}