/* ==========================================================================
   Estilos para Alertas Modernas (Tipo Toast)
   ========================================================================== */

/* --- Contenedor Base (.alert) --- */
.alert {
    position: fixed;        /* ¡CLAVE! Sigue fijo a la ventana */
    top: 20px;              /* Espacio desde arriba */
    right: 20px;             /* Espacio desde la derecha */
    z-index: 1051;          /* Alto z-index para estar encima de todo */
    max-width: 380px;       /* Ancho máximo de la notificación */
    width: auto;            /* El ancho se ajusta al contenido, hasta max-width */
    padding: 15px 20px;     /* Espaciado interno */
    margin-bottom: 1rem;    /* Espacio si aparecen múltiples alertas (requiere JS extra) */
    border: 1px solid transparent;
    border-radius: 8px;     /* Bordes redondeados modernos */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
    font-family: 'Arial', sans-serif; /* <-- ¡¡CAMBIA ESTO por tu fuente!! */
    font-size: 14px;        /* Ligeramente más pequeño para toast */
    line-height: 1.4;
    color: #f0f0f0;         /* Texto claro por defecto */
    display: flex;          /* Usar Flexbox para alinear contenido interno */
    align-items: flex-start; /* Alinear items al inicio (útil si el texto tiene varias líneas) */
    opacity: 0.98;          /* Casi opaco */
    overflow: hidden;       /* Evitar desbordamientos */

    /* ELIMINAMOS: left, margin: auto, width: 90%, max-width: 800px */
}

/* --- Icono (Opcional pero recomendado) --- */
/* Necesitarías añadir un <i> o <span> en tu PHP message() para el icono */
/* .alert .alert-icon { */
    /* flex-shrink: 0; /* Evita que el icono se encoja */
    /* margin-right: 15px; */
    /* font-size: 20px; */
    /* line-height: 1.2; /* Alinear mejor con la primera línea de texto */
/* } */

/* --- Contenedor del Texto (Título + Mensaje) --- */
/* Necesitarías envolver el título y mensaje en un div/span en tu PHP message() */
/* .alert .alert-content { */
    /* flex-grow: 1; /* Permite que el texto ocupe el espacio disponible */
/* } */

/* --- Botón de Cierre (.close) --- */
.alert .close {
    flex-shrink: 0;         /* Evita que el botón se encoja */
    margin-left: 15px;      /* Espacio entre el texto y el botón */
    padding: 0;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    font-size: 20px;        /* Ajusta el tamaño de la 'x' */
    font-weight: bold;
    line-height: 1;         /* Ajuste de línea */
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
    text-shadow: none;
    align-self: center;     /* Centrar verticalmente el botón si los otros items se alinean a flex-start */
}

.alert .close:hover,
.alert .close:focus {
    color: inherit;
    opacity: 1;
    text-decoration: none;
    outline: none;
}

/* --- Estilos Específicos por Tipo (Mismos colores que antes) --- */
.alert.alert-danger {
    color: #fdd; background-color: #5c1a1a; border-color: #a83c3c;
}
.alert.alert-success {
    color: #dfd; background-color: #1a5c31; border-color: #3ca86a;
}
.alert.alert-warning {
    color: #ffd; background-color: #6b4f1e; border-color: #c79a3f;
}
.alert.alert-info {
    color: #ddf; background-color: #1f3a6e; border-color: #4a7fc9;
}