@charset "utf-8";

/* ============================================================
 BAYMEET · Messages System Premium
//public/assets/css/core/components.css
============================================================ */

#messages-container {
    display: none;         /* oculto por defecto */
    width: 100%;
    margin: 0;

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity .35s ease,
        transform .35s ease;
}

/* Cuando JS lo activa */
#messages-container.visible {
    display: block;        /* se vuelve visible */
    margin-bottom: 1rem;
 
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   CAJA DEL MENSAJE (COMPORTAMIENTO NATURAL)
   - Ícono a la izquierda
   - Texto inmediatamente después
   - Sin centrados
============================================================ */

/* Inputs de contraseña enmascarados para evitar password manager */
.password-field {
    -webkit-text-security: disc;
    
}



.msg {
    padding: 0.95rem 1.15rem;
    border-radius: 12px;

    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.25;

    display: flex;
    align-items: flex-start;   /* ícono alineado al texto */
    gap: 0.7rem;               /* separación natural entre icono y texto */

    border: 1px solid transparent;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);

    animation: msgFadeIn 0.35s ease;
}

@keyframes msgFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Lista interna dentro del mensaje */
.msg ul {
    margin: 0.25rem 0 0 0;
    padding-left: 1.2rem;
}

/* ============================================================
   ICONOS INLINE PREMIUM — SIEMPRE A LA IZQUIERDA
============================================================ */
.msg::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;

    background-size: contain;
    background-repeat: no-repeat;
}

/* ============================================================
   ESTADOS
============================================================ */


/* NORMALIZAR INPUT DATE */
input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 6px;
}

/* ERROR */
input[type="date"].input-error {
    border-color: #d80027 !important;
    background-color: #fff5f5 !important;
}

/* OK */
input[type="date"].input-ok {
    border-color: #2ecc71 !important;
    background-color: #f6fffa !important;
}

.field-error {
    display: none;
    margin-top:0;
    font-size: 13px;
    color: #d80027;
}

.field-error.visible {
    display: block;
}



/* ERROR */
.msg-error {
    background: #ffe8ec;
    border-color: #ffced7;
    color: #b10020;
}

.msg-error::before {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' fill='%23b10020' viewBox='0 0 24 24'>\
<path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 5h2v6h-2V7zm0 8h2v2h-2v-2z'/>\
</svg>");
}

/* SUCCESS */
.msg-success {
    background: #e8fff0;
    border-color: #c6f1d4;
    color: #0a7d28;
}

.msg-success::before {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' fill='%230a7d28' viewBox='0 0 24 24'>\
<path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.59L6.41 13 5 14.41l5 5 9-9L17.59 9 10 16.59z'/>\
</svg>");
}

/* LOADING */
.msg-loading {
    background: #f4f4f4;
    border-color: #ddd;
    color: #555;
}

.msg-loading::before {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23555'>\
<path d='M12 4V2C6.48 2 2 6.48 2 12h2c0-4.41 3.59-8 8-8z'/>\
</svg>");
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============================================================
   LOGIN — Override mínimo
   Solo indica que ocupa ancho, NO cambia alineación
============================================================ */
.login-wrapper #messages-container {
    width: 100%;
}

/* ¡No hay más overrides en login! 
   Así el icono queda pegado al texto correctamente. */