/* ============================================
   TOAST — mismo aspecto que el de Reckonnt
   Reproduce el jquery-toast-plugin tal como lo viste Reckonnt (publico/css/jquery.toast.css más su
   override global en componentesModulo.css): tarjeta blanca, encabezado de color, chip circular con
   icono y barra de progreso. Aquí se arma sin jQuery (ver scripts/toast.js) con las mismas clases.
   Si cambia allá, cambia aquí.
   ============================================ */
.jq-toast-wrap {
    display: block;
    position: fixed;
    width: 380px;
    max-width: calc(100% - 24px);
    margin: 0;
    padding: 0;
    pointer-events: none !important;
    z-index: 9000 !important;
}

.jq-toast-wrap.top-center {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.jq-toast-wrap * {
    margin: 0;
    padding: 0;
}

.jq-toast-single {
    display: block;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    pointer-events: all !important;
    background-color: #ffffff;
    color: #27282a;
    border: 1px solid #e3e6ef;
    border-radius: .6rem;
    box-shadow: 0 12px 32px rgba(39, 40, 42, .18);
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 14px;
    padding: 14px 14px 20px 62px;
    opacity: 1;
    transition: opacity .4s ease;
}

.jq-toast-single.jq-toast-hiding {
    opacity: 0;
}

.jq-toast-single .jq-toast-heading {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    background: none;
    letter-spacing: normal;
}

/* Chip circular de estado con su icono */
.jq-toast-single::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

.jq-icon-success::before {
    background-color: var(--light-green, #accdb8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23345041' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.jq-icon-success .jq-toast-heading { color: var(--dark-green, #345041); }

.jq-icon-warning::before {
    background-color: #cbc5a5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767257' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.jq-icon-warning .jq-toast-heading { color: #767257; }

.jq-icon-error::before {
    background-color: var(--coral, #d9615b);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
}
.jq-icon-error .jq-toast-heading { color: var(--dark-red, #64232e); }

.close-jq-toast-single {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #9aa1b1;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: none;
    transition: background-color .15s ease, color .15s ease;
}
.close-jq-toast-single:hover {
    color: var(--dark-violet, #3e3354);
    background-color: rgba(62, 51, 84, .08);
}

/* Barra de progreso: pista fija y relleno que avanza hasta llenarse mientras dura el aviso */
.jq-toast-single::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    height: 3px;
    border-radius: 999px;
    background: rgba(39, 40, 42, .08);
}
.jq-toast-single .jq-toast-loader {
    display: block;
    position: absolute;
    left: 14px;
    bottom: 10px;
    height: 3px;
    width: 0;
    border-radius: 999px;
    z-index: 1;
}
.jq-toast-single .jq-toast-loader.jq-toast-loaded {
    width: calc(100% - 28px);
}