/* ── Modales globales Kinítos ── */
#knitos-modal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(44, 62, 80, 0.45);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
#knitos-modal-overlay.visible {
    opacity: 1; pointer-events: auto;
}
.knitos-modal-box {
    background: #fff;
    border-radius: 20px;
    padding: 2rem 2.25rem;
    max-width: 420px; width: 90%;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    display: flex; flex-direction: column; gap: 1rem;
    transform: translateY(12px);
    transition: transform 0.22s ease;
    font-family: 'Inter', sans-serif;
}
#knitos-modal-overlay.visible .knitos-modal-box {
    transform: translateY(0);
}
.knitos-modal-icon {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
}
.knitos-modal-icon.error   { background: #FED7D7; color: #E53E3E; }
.knitos-modal-icon.success { background: #C6F6D5; color: #276749; }
.knitos-modal-icon.info    { background: #BEE3F8; color: #2B6CB0; }
.knitos-modal-icon.warning { background: #FEFCBF; color: #744210; }
.knitos-modal-msg {
    text-align: center; color: #2C3E50;
    font-size: 0.97rem; line-height: 1.55;
}
.knitos-modal-btn {
    display: block; width: 100%;
    padding: 0.85rem; border: none; border-radius: 12px;
    font-family: 'Inter', sans-serif; font-size: 0.97rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    background: linear-gradient(135deg, #5B9BD5 0%, #4A90A4 100%);
    color: #fff;
}
.knitos-modal-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── Modal de confirmación (dos botones) ── */
#knitos-confirm-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(44, 62, 80, 0.45);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
#knitos-confirm-overlay.visible {
    opacity: 1; pointer-events: auto;
}
#knitos-confirm-overlay .knitos-modal-box {
    transform: translateY(12px);
    transition: transform 0.22s ease;
}
#knitos-confirm-overlay.visible .knitos-modal-box {
    transform: translateY(0);
}
.knitos-confirm-titulo {
    text-align: center;
    font-size: 1.05rem; font-weight: 700;
    color: #2C3E50;
    margin: 0;
}
.knitos-confirm-msg {
    text-align: center; color: #5A6C7D;
    font-size: 0.9rem; line-height: 1.55;
    margin: 0;
}
.knitos-confirm-btns {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem;
    margin-top: 0.25rem;
}
.knitos-btn-cancelar {
    padding: 0.85rem; border: 2px solid #E0E0E0; border-radius: 12px;
    background: #fff; font-family: 'Inter', sans-serif;
    font-size: 0.95rem; font-weight: 600; color: #5A6C7D;
    cursor: pointer; transition: all 0.2s;
}
.knitos-btn-cancelar:hover { background: #F5F5DC; border-color: #CBD5E0; }
.knitos-btn-confirmar {
    padding: 0.85rem; border: none; border-radius: 12px;
    font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 700;
    cursor: pointer; transition: all 0.2s; color: #fff;
}
.knitos-btn-confirmar.danger  { background: linear-gradient(135deg, #FC8181, #C53030); }
.knitos-btn-confirmar.warning { background: linear-gradient(135deg, #ECC94B, #B7791F); }
.knitos-btn-confirmar.primary { background: linear-gradient(135deg, #5B9BD5, #4A90A4); }
.knitos-btn-confirmar:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── Toast de éxito (auto-dismiss) ── */
#knitos-toast {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 99998;
    background: #2C3E50; color: #fff;
    font-family: 'Inter', sans-serif; font-size: 0.9rem;
    padding: 0.85rem 1.25rem; border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    display: flex; align-items: center; gap: 0.5rem;
    transform: translateY(100px); opacity: 0;
    transition: all 0.3s ease; pointer-events: none;
}
#knitos-toast.visible {
    transform: translateY(0); opacity: 1; pointer-events: auto;
}
#knitos-toast.success { background: linear-gradient(135deg,#48BB78,#276749); }
#knitos-toast.error   { background: linear-gradient(135deg,#FC8181,#C53030); }