.notificacion {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    gap: var(--espaciado-4);
    background-color: var(--color-notificacion-claro);
    border-radius: var(--border-radius-12);
    padding: var(--espaciado-8);
    min-width: fit-content;
}

.notificacion>div.icono>i {
    color: var(--color-notificacion);
    font-size: var(--letra-regular);
}

.notificacion>div.descripcion {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-16);
    color: var(--color-texto-primario);
}

.notificacion>div.descripcion > p{
    margin: 0;
}

.notificacion>div.descripcion>div.opciones {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: var(--espaciado-4);
}

.notificacion>div.descripcion>div.opciones * {
    border-radius: var(--border-radius-12);
    padding: var(--espaciado-4) var(--espaciado-8);
    corner-shape: squircle;
    text-decoration: none;
}

.notificacion div.opciones .solido {
    background-color: var(--color-notificacion);
    color: var(--color-blanco);
}

.notificacion div.opciones .delineado {
    border: var(--border-width-1) solid var(--color-notificacion);
    color: var(--color-notificacion);
}

.notificacion div.opciones .fantasma {
    color: var(--color-notificacion);
}

/* notificacion - exito */
.notificacion.exito {
    background-color: var(--color-exito-claro);
}

.notificacion.exito>div.icono>i {
    color: var(--color-exito);
    font-size: var(--letra-regular);
}

.notificacion.exito div.opciones .solido {
    background-color: var(--color-exito);
  
}

.notificacion.exito div.opciones .delineado {
    border: var(--border-width-1) solid var(--color-exito);
    color: var(--color-exito);
}

.notificacion.exito div.opciones .fantasma {
    color: var(--color-exito);
}

/* notificacion - advertencia */
.notificacion.advertencia {
    background-color: var(--color-advertencia-claro);
}

.notificacion.advertencia>div.icono>i {
    color: var(--color-advertencia);
    font-size: var(--letra-regular);
}

.notificacion.advertencia div.opciones .solido {
    background-color: var(--color-advertencia);
   
}

.notificacion.advertencia div.opciones .delineado {
    border: var(--border-width-1) solid var(--color-advertencia);
    color: var(--color-advertencia);
}

.notificacion.advertencia div.opciones .fantasma {
    color: var(--color-advertencia);
}

/* notificacion - error */
.notificacion.error {
    background-color: var(--color-error-claro);
}

.notificacion.error>div.icono>i {
    color: var(--color-error);
    font-size: var(--letra-regular);
}

.notificacion.error div.opciones .solido {
    background-color: var(--color-error);
   
}

.notificacion.error div.opciones .delineado {
    border: var(--border-width-1) solid var(--color-error);
    color: var(--color-error);
}

.notificacion.error div.opciones .fantasma {
    color: var(--color-error);
}