:root {
    --azul-color: #173195;
    --amarillo-color: #FFD000;
    --rosa--color: #FF0078;
    --background-color: #f4f4f4;
    --text-color: #333;
    --hover-azul: #00B1FF;
    --hover-amarillo: #FFF200;
    --hover-gris: #cfcfcf;
}

/* === ESTILOS DEL MODAL === */
.modal-dialog {
    max-width: 380px;
    /* 🔹 popup más pequeño */
    margin: 1.75rem auto;
}

.modal-content.popup {
    position: relative;
    background: white;
    border: none;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    padding: 25px 15px 55px;
}

/* Franja diagonal inferior */
.modal-content.popup::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45px;
    background: linear-gradient(8deg, var(--azul-color) 50%, var(--amarillo-color) 51%);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

/* Logo en esquina superior izquierda */
.modal-content.popup .logo {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 28px;
    height: 28px;
}

/* === CABECERA === */
.modal-header {
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 0;
}

.modal-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--azul-color);
    font-weight: bold;
    font-size: 17px;
    margin: 0;
}

/* Botón de cerrar (X) */
.modal-header .close {
    position: absolute;
    top: 8px;
    right: 12px;
    color: var(--rosa--color);
    opacity: 0.8;
    font-size: 1.2rem;
    border: none;
    background: transparent;
}

.modal-header .close:hover {
    opacity: 1;
}

/* === CUERPO === */
.modal-body {
    text-align: center;
    width: 100%;
    padding: 8px 15px;
}

.modal-body p {
    color: var(--text-color);
    font-size: 16px;
    margin: 15px 0 20px;
}

/* === PIE (BOTONES) === */
.modal-footer {
    width: 100%;
    border: none !important;
    display: flex;
    justify-content: center;
    gap: 10px;
    /* 🔹 botones más cerca */
    padding: 0;
    margin-top: 5px;
}

.btn-aceptar,
.btn-cancelar {
    padding: 0.45rem 1.5rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.btn-aceptar:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Botón principal (Guardar) */
.btn-aceptar {
    background: linear-gradient(135deg, var(--azul-color), #0056d6);
    color: white;
}

.btn-aceptar:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--hover-azul), #0044b3);
}

/* Botón de cancelar (amarillo) */
.btn-cancelar {
    background: linear-gradient(135deg, var(--amarillo-color), #ffcc33);
    color: #222;
}

.btn-cancelar:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--hover-amarillo), #e6b800);
}

/* popup-types.css - estilos por tipo */
.popup-error   { border-top: 4px solid #e74c3c; }   /* rojo */
.popup-confirm { border-top: 4px solid var(--azul-color, #173195); } /* azul */
.popup-aviso   { border-top: 4px solid var(--amarillo-color, #FFD000); } /* amarillo */
.popup-pregunta{ border-top: 4px solid var(--rosa--color, #FF0078); } /* rosa */