/*
==========================================
PM UI Framework
Alerts
Version: 0.1.0
==========================================
*/

/* ==========================================
   ALERTA BASE
========================================== */

.pm-alert {
    --pm-alert-bg: var(--pm-surface, #ffffff);
    --pm-alert-color: var(--pm-text, #222222);
    --pm-alert-border: var(--pm-border, #dddddd);

    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;

    width: 100%;

    padding: 1rem 1.25rem;

    margin: 1rem 0;

    background: var(--pm-alert-bg);
    color: var(--pm-alert-color);

    border: 1px solid var(--pm-alert-border);
    border-radius: var(--pm-radius-md);

    box-shadow: var(--pm-shadow-sm);

    font-size: 0.95rem;
    line-height: 1.6;

    overflow: hidden;

    animation: pm-alert-fade .25s ease;
}

/* ==========================================
   CONTENIDO
========================================== */

.pm-alert-content{
    flex:1;
    min-width:0;
}

.pm-alert-title{
    display:block;
    margin:0 0 .35rem;

    font-size:1rem;
    font-weight:700;
    line-height:1.35;

    color:inherit;
}

.pm-alert p{
    margin:.25rem 0;
}

.pm-alert p:last-child{
    margin-bottom:0;
}

.pm-alert a{
    color:inherit;
    font-weight:600;
    text-decoration:underline;
}

.pm-alert a:hover{
    text-decoration:none;
}

/* ==========================================
   ICONO
========================================== */

.pm-alert-icon{

    flex:0 0 auto;

    width:2.2rem;
    height:2.2rem;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    font-size:1rem;
    font-weight:700;

    line-height:1;
}

.pm-alert-icon svg{

    width:1.15rem;
    height:1.15rem;

    fill:currentColor;
}

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

.pm-alert-close{

    appearance:none;

    border:none;
    background:transparent;

    cursor:pointer;

    margin-left:auto;

    padding:.25rem;

    color:inherit;

    opacity:.55;

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

.pm-alert-close:hover{
    opacity:1;
    transform:scale(1.08);
}

.pm-alert-close:focus-visible{

    outline:2px solid currentColor;
    outline-offset:2px;
}

.pm-alert-close svg{

    width:1rem;
    height:1rem;

    fill:currentColor;
}

/* ==========================================
   TAMAÑOS
========================================== */

.pm-alert-sm{

    padding:.75rem 1rem;

    font-size:.9rem;
}

.pm-alert-lg{

    padding:1.35rem 1.6rem;

    font-size:1rem;
}

.pm-alert-lg .pm-alert-title{

    font-size:1.15rem;
}

/* ==========================================
   ANIMACIÓN
========================================== */

@keyframes pm-alert-fade{

    from{

        opacity:0;
        transform:translateY(-6px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }
}

/* ==========================================
   SUCCESS
========================================== */

.pm-alert-success{

    background:#edf9f0;
    border-color:#b9e3c5;
    color:#1b5e20;
}

.pm-alert-success .pm-alert-icon{

    background:#d8f3df;
    color:#2e7d32;
}

/* ==========================================
   INFO
========================================== */

.pm-alert-info{

    background:#eef6fd;
    border-color:#bfdcf8;
    color:#0d47a1;
}

.pm-alert-info .pm-alert-icon{

    background:#dceeff;
    color:#1976d2;
}

/* ==========================================
   WARNING
========================================== */

.pm-alert-warning{

    background:#fff8e8;
    border-color:#ffe39b;
    color:#8a5a00;
}

.pm-alert-warning .pm-alert-icon{

    background:#fff0c2;
    color:#ff9800;
}

/* ==========================================
   DANGER
========================================== */

.pm-alert-danger{

    background:#fff1f1;
    border-color:#ffc5c5;
    color:#b71c1c;
}

.pm-alert-danger .pm-alert-icon{

    background:#ffdede;
    color:#d32f2f;
}

/* ==========================================
   NEUTRAL
========================================== */

.pm-alert-neutral{

    background:#f7f7f7;
    border-color:#dddddd;
    color:#444444;
}

.pm-alert-neutral .pm-alert-icon{

    background:#ececec;
    color:#666666;
}

/* ==========================================
   SOFT VARIANTS
========================================== */

.pm-alert-soft-success{

    background:rgba(46,125,50,.08);
    border-color:rgba(46,125,50,.18);
    color:#2e7d32;
}

.pm-alert-soft-success .pm-alert-icon{

    background:rgba(46,125,50,.14);
    color:#2e7d32;
}

.pm-alert-soft-info{

    background:rgba(25,118,210,.08);
    border-color:rgba(25,118,210,.18);
    color:#1976d2;
}

.pm-alert-soft-info .pm-alert-icon{

    background:rgba(25,118,210,.14);
    color:#1976d2;
}

.pm-alert-soft-warning{

    background:rgba(255,193,7,.12);
    border-color:rgba(255,193,7,.25);
    color:#b26a00;
}

.pm-alert-soft-warning .pm-alert-icon{

    background:rgba(255,193,7,.20);
    color:#ff9800;
}

.pm-alert-soft-danger{

    background:rgba(211,47,47,.08);
    border-color:rgba(211,47,47,.18);
    color:#c62828;
}

.pm-alert-soft-danger .pm-alert-icon{

    background:rgba(211,47,47,.14);
    color:#d32f2f;
}

/* ==========================================
   BORDER LEFT ALERTS
========================================== */

.pm-alert-border-left{

    border-left-width:4px;
    border-left-style:solid;

}


/* ==========================================
   BORDER LEFT VARIANTS
========================================== */

.pm-alert-border-left.pm-alert-success{

    border-left-color:var(--pm-primary,#2e7d32);

}

.pm-alert-border-left.pm-alert-info{

    border-left-color:var(--pm-secondary,#1976d2);

}

.pm-alert-border-left.pm-alert-warning{

    border-left-color:var(--pm-accent,#ffc107);

}

.pm-alert-border-left.pm-alert-danger{

    border-left-color:#d32f2f;

}

.pm-alert-border-left.pm-alert-neutral{

    border-left-color:#777;

}


/* ==========================================
   OUTLINE ALERTS
========================================== */

.pm-alert-outline{

    background:transparent;

    box-shadow:none;

}


.pm-alert-outline.pm-alert-success{

    border-color:#2e7d32;
    color:#2e7d32;

}

.pm-alert-outline.pm-alert-info{

    border-color:#1976d2;
    color:#1976d2;

}

.pm-alert-outline.pm-alert-warning{

    border-color:#ff9800;
    color:#b26a00;

}

.pm-alert-outline.pm-alert-danger{

    border-color:#d32f2f;
    color:#c62828;

}

.pm-alert-outline.pm-alert-neutral{

    border-color:#777;
    color:#555;

}


/* ==========================================
   BANNER ALERT
========================================== */

.pm-alert-banner{

    border-radius:0;

    margin:0;

    border-left:none;
    border-right:none;

    padding:1rem 1.5rem;

}


/* ==========================================
   CENTER ALERT
========================================== */

.pm-alert-center{

    justify-content:center;

    text-align:center;

}


.pm-alert-center .pm-alert-content{

    flex:none;

}


/* ==========================================
   PREMIUM SHADOW
========================================== */

.pm-alert-elevated{

    box-shadow:
        0 8px 24px rgba(0,0,0,.08);

}


/* ==========================================
   HOVER EFFECT
========================================== */

.pm-alert-hover{

    transition:

        transform .2s ease,
        box-shadow .2s ease;

}


.pm-alert-hover:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 28px rgba(0,0,0,.12);

}


/* ==========================================
   DISABLED / MUTED STATE
========================================== */

.pm-alert-muted{

    opacity:.65;

    pointer-events:none;

}

/* ==========================================
   ACCESIBILIDAD
========================================== */

.pm-alert[role="alert"]{

    position:relative;

}


.pm-alert:focus-within{

    outline:2px solid var(--pm-secondary,#1976d2);

    outline-offset:2px;

}


/* ==========================================
   ALERT WITH FULL WIDTH CONTENT
========================================== */

.pm-alert-full{

    width:100%;

}


/* ==========================================
   ALERT SPACING HELPERS
========================================== */

.pm-alert+.pm-alert{

    margin-top:.75rem;

}


.pm-alert .pm-alert-icon + .pm-alert-content{

    padding-top:.05rem;

}


/* ==========================================
   ICON ONLY ALERT
========================================== */

.pm-alert-icon-only{

    width:auto;

    padding:.75rem;

}


.pm-alert-icon-only .pm-alert-content{

    display:none;

}


/* ==========================================
   LOADING ALERT
========================================== */

.pm-alert-loading{

    display:flex;

    align-items:center;

    gap:.75rem;

}


.pm-alert-loading::before{

    content:"";

    width:1rem;

    height:1rem;

    border:2px solid currentColor;

    border-right-color:transparent;

    border-radius:50%;

    animation:

        pm-alert-spin .8s linear infinite;

}


@keyframes pm-alert-spin{

    to{

        transform:rotate(360deg);

    }

}


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

@media(max-width:768px){


    .pm-alert{

        padding:.9rem 1rem;

        gap:.65rem;

        font-size:.9rem;

    }


    .pm-alert-title{

        font-size:.95rem;

    }


    .pm-alert-lg{

        padding:1rem;

    }


    .pm-alert-close{

        padding:.15rem;

    }


}


@media(max-width:480px){


    .pm-alert{

        flex-direction:column;

        align-items:flex-start;

    }


    .pm-alert-close{

        position:absolute;

        top:.65rem;

        right:.65rem;

    }


    .pm-alert-icon{

        width:2rem;

        height:2rem;

    }


}

/* ==========================================
   PM ALERT PRESETS
   Combinaciones recomendadas
========================================== */

/*
Ejemplos:

Alerta básica:
<div class="pm-alert pm-alert-success">
    Mensaje correcto
</div>


Alerta con icono:
<div class="pm-alert pm-alert-info">
    <div class="pm-alert-icon">
        !
    </div>

    <div class="pm-alert-content">
        Información importante
    </div>
</div>


Alerta premium:
<div class="pm-alert 
            pm-alert-success 
            pm-alert-border-left 
            pm-alert-elevated">
</div>


Alerta banner:
<div class="pm-alert 
            pm-alert-warning 
            pm-alert-banner">
</div>


Alerta cerrable:
<div class="pm-alert">

    Contenido

    <button class="pm-alert-close">
        ×
    </button>

</div>

*/


/* ==========================================
   PRINT MODE
========================================== */

@media print{


    .pm-alert{

        box-shadow:none;

        animation:none;

    }


    .pm-alert-close{

        display:none;

    }

}