/* ================================================================
   MENSAJES GLOBALES VECTORPOS
   ================================================================ */

/*
 * Contenedor global de mensajes.
 *
 * Se mantiene centrado horizontalmente y por encima de:
 * - Modales Bootstrap.
 * - Menús.
 * - Contenido de las vistas.
 *
 * El ancho máximo evita mensajes demasiado largos en escritorio,
 * mientras calc() mantiene márgenes adecuados en tablet y móvil.
 */
#msg {
    position: fixed;
    top: 16px;
    left: 50%;
    width: calc(100% - 30px);
    max-width: 520px;
    padding: 0;
    transform: translateX(-50%);
    z-index: 2000;
    text-align: left;
}


/* ================================================================
   TOAST
   ================================================================ */

/*
 * Tarjeta principal.
 *
 * Ya no utilizamos visualmente el alert Bootstrap tradicional.
 * El mensaje adopta una apariencia propia de VectorPOS.
 */
#msg .msg-toast {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid #dce3e6;
    border-radius: 7px;
    background: #fff;
    color: #212529;
    box-shadow: 0 5px 16px rgba(0, 39, 45, .20);
}


/*
 * Franja lateral semántica.
 *
 * Permite reconocer rápidamente el tipo de mensaje sin llenar
 * toda la tarjeta con un color fuerte.
 */
#msg .msg-toast-accent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
}


/*
 * Contenedor interior.
 */
#msg .msg-toast-content {
    display: flex;
    min-width: 0;
    min-height: 64px;
    padding: 13px 42px 13px 15px;
    align-items: flex-start;
}


/* ================================================================
   ICONO SEMÁNTICO
   ================================================================ */

/*
 * Círculo del icono.
 *
 * Sigue el lenguaje visual utilizado por varios iconos de VectorPOS:
 * una figura clara y reconocible sobre una superficie circular.
 */
#msg .msg-toast-icon {
    display: flex;
    width: 34px;
    height: 34px;
    min-width: 34px;
    margin-right: 12px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
}


/* ================================================================
   TEXTO
   ================================================================ */

#msg .msg-toast-body {
    min-width: 0;
    flex: 1;
}


/*
 * Título opcional.
 *
 * Solo existe cuando la llamada alert...() lo suministra.
 */
#msg .msg-toast-title {
    display: block;
    margin: 0 0 4px;
    color: #263238;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}


/*
 * Texto principal.
 *
 * Se utiliza un peso medio para conservar legibilidad sin dar
 * al mensaje exitoso apariencia de advertencia crítica.
 */
#msg .msg-toast-message {
    color: #263238;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}


/* ================================================================
   BOTÓN CERRAR
   ================================================================ */

/*
 * El botón debe estar disponible, pero no competir visualmente
 * con el contenido principal.
 */
#msg .msg-toast-close {
    position: absolute;
    top: 7px;
    right: 9px;
    display: flex;
    width: 30px;
    height: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #7a858a;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: normal;
    line-height: 1;
    cursor: pointer;
}

#msg .msg-toast-close:hover,
#msg .msg-toast-close:focus {
    background: rgba(0, 39, 45, .06);
    color: #344248;
    outline: none;
}


/* ================================================================
   CONTADOR
   ================================================================ */

/*
 * Contador circular utilizado principalmente por alertError().
 *
 * El spinner comunica visualmente que el mensaje tiene un tiempo
 * restante sin necesidad de mostrar textos adicionales.
 */
#msg .msg-toast-countdown {
    position: relative;
    display: flex;
    width: 32px;
    height: 32px;
    margin-top: 9px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
}


/*
 * Spinner Bootstrap utilizado únicamente como círculo animado.
 */
#msg .msg-toast-countdown .spinner-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border-width: 2px;
}


/*
 * Número colocado dentro del spinner.
 */
#msg .msg-toast-seconds {
    position: relative;
    z-index: 1;
    min-width: 16px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}


/* ================================================================
   ÉXITO
   ================================================================ */

/*
 * Los mensajes exitosos son deliberadamente suaves.
 *
 * El objetivo es transmitir "todo salió bien", no una alerta.
 */
#msg .msg-toast-success {
    border-color: #cfe8d5;
    background: #f4fbf6;
}

#msg .msg-toast-success .msg-toast-accent {
    background: #63b875;
}

#msg .msg-toast-success .msg-toast-icon {
    background: #dcefe1;
    color: #347b43;
}

#msg .msg-toast-success .msg-toast-countdown {
    color: #347b43;
}


/* ================================================================
   ERROR
   ================================================================ */

/*
 * El rojo se concentra en la franja y en el icono.
 *
 * El fondo se mantiene suave para facilitar lectura de mensajes largos.
 */
#msg .msg-toast-danger {
    border-color: #efcdd0;
    background: #fff6f6;
}

#msg .msg-toast-danger .msg-toast-accent {
    background: #d65b63;
}

#msg .msg-toast-danger .msg-toast-icon {
    background: #f7dcde;
    color: #b63840;
}

#msg .msg-toast-danger .msg-toast-countdown {
    color: #b63840;
}


/* ================================================================
   INFORMACIÓN
   ================================================================ */

/*
 * El azul/turquesa se integra con la identidad visual de VectorPOS.
 */
#msg .msg-toast-info {
    border-color: #cce5eb;
    background: #f5fbfc;
}

#msg .msg-toast-info .msg-toast-accent {
    background: #26a9c0;
}

#msg .msg-toast-info .msg-toast-icon {
    background: #dcf1f5;
    color: #08798a;
}

#msg .msg-toast-info .msg-toast-countdown {
    color: #08798a;
}


/* ================================================================
   MENSAJE DE ESPERA
   ================================================================ */

/*
 * alertWait() utiliza el mismo #msg, pero cambia temporalmente
 * a modo bloqueante.
 *
 * Se conserva la funcionalidad histórica:
 * ocupa toda la pantalla y requiere alertClear() para desaparecer.
 */
#msg.msg-wait {
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    transform: none;
    background: rgba(0, 39, 45, .16);
}


/*
 * Tarjeta central del proceso de espera.
 */
#msg .msg-wait-content {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    min-width: 260px;
    max-width: calc(100% - 30px);
    padding: 18px 24px;
    align-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid #cddfe2;
    border-radius: 7px;
    background: #fff;
    color: #263238;
    box-shadow: 0 5px 18px rgba(0, 39, 45, .22);
}


/*
 * Spinner de espera.
 */
#msg .msg-wait-icon {
    display: flex;
    width: 38px;
    height: 38px;
    min-width: 38px;
    margin-right: 13px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dcf1f5;
    color: #08798a;
    font-size: 18px;
}


/*
 * Texto de espera.
 */
#msg .msg-wait-message {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media screen and (max-width: 575px) {

    /*
     * Reduce los márgenes laterales para aprovechar mejor
     * pantallas pequeñas.
     */
    #msg {
        top: 10px;
        width: calc(100% - 20px);
    }

    #msg .msg-toast-content {
        min-height: 58px;
        padding: 11px 38px 11px 11px;
    }

    #msg .msg-toast-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        margin-right: 9px;
        font-size: 14px;
    }

    #msg .msg-toast-title {
        font-size: 13px;
    }

    #msg .msg-toast-message {
        font-size: 13px;
    }

    #msg .msg-toast-close {
        top: 5px;
        right: 6px;
    }

    #msg .msg-toast-countdown {
        width: 30px;
        height: 30px;
        margin-top: 7px;
    }

    #msg .msg-toast-countdown .spinner-border {
        width: 30px;
        height: 30px;
    }

    #msg .msg-wait-content {
        width: calc(100% - 30px);
        min-width: 0;
        padding: 15px 18px;
    }
}