/**
 * @file alertas.css
 * @description Avisos (compactos) y alertas (completas) comunes con colores fijos y estilo global elegible en Sistema
 * @version 1.1.1
 * @updated 2026-09-28
 * @copyright La Tecla Network S.L.
 * @license Proprietary - All rights reserved
 */

/* =====================================================================
   AVISO COMPACTO: una o dos lineas, con icono opcional
   <div class="aviso aviso-info"><i class="bi bi-info-circle"></i> Texto</div>
   Bloque de texto normal (no flex): enlaces, negritas y codigo fluyen dentro de la misma linea.
   ===================================================================== */

.aviso {
    display: block;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.aviso > i { line-height: inherit; margin-right: 4px; }
.aviso a { color: inherit; font-weight: 600; text-decoration: underline; }
.aviso code { background: rgba(0, 0, 0, .06); padding: 2px 6px; border-radius: 4px; word-break: break-all; }

.aviso-info    { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; }
.aviso-success { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.aviso-danger  { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.aviso-warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }

/* =====================================================================
   ALERTA COMPLETA: icono grande, titulo y explicacion
   <div class="alerta alerta-info"><i class="bi bi-info-circle"></i>
       <div><strong>Titulo</strong><p>Explicacion</p></div></div>
   ===================================================================== */

.alerta {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    border-left: 4px solid transparent;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.alerta > i { font-size: 22px; line-height: 1.1; flex-shrink: 0; }
.alerta strong { font-weight: 700; }
.alerta > div > strong:first-child { display: block; margin-bottom: 4px; }
.alerta p { margin: 0; font-size: 13px; }
.alerta p + p { margin-top: 6px; }
.alerta a { color: inherit; font-weight: 600; text-decoration: underline; }

.alerta-info    { background: #EFF6FF; border-left-color: #3B82F6; color: #1E3A8A; }
.alerta-success { background: #ECFDF5; border-left-color: #10B981; color: #065F46; }
.alerta-danger  { background: #FEF2F2; border-left-color: #EF4444; color: #991B1B; }
.alerta-warning { background: #FFFBEB; border-left-color: #F59E0B; color: #92400E; }

.alerta-info > i    { color: #3B82F6; }
.alerta-success > i { color: #10B981; }
.alerta-danger > i  { color: #EF4444; }
.alerta-warning > i { color: #F59E0B; }

/* =====================================================================
   ESTILO GLOBAL (Configuracion -> Sistema -> Estilo de los mensajes)
   Clase del <body>: sin clase, cada mensaje con su formato; con clase, todos igual.
   ===================================================================== */

/* Siempre compacto: las alertas completas se dibujan como avisos */
.mensajes-compactos .alerta {
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid transparent;
    margin-bottom: 16px;
}
.mensajes-compactos .alerta > i { font-size: inherit; line-height: inherit; }
.mensajes-compactos .alerta > div > strong:first-child { display: inline; margin: 0 4px 0 0; }
.mensajes-compactos .alerta p { display: inline; font-size: inherit; }
.mensajes-compactos .alerta p + p { margin: 0 0 0 4px; }
.mensajes-compactos .alerta-info    { border-color: #BFDBFE; }
.mensajes-compactos .alerta-success { border-color: #A7F3D0; }
.mensajes-compactos .alerta-danger  { border-color: #FECACA; }
.mensajes-compactos .alerta-warning { border-color: #FDE68A; }
.mensajes-compactos .alerta > i { color: inherit; }

/* Siempre completo: los avisos compactos se dibujan como alertas */
.mensajes-completos .aviso {
    padding: 16px 20px;
    border: 0;
    border-left: 4px solid transparent;
    margin-bottom: 20px;
}
.mensajes-completos .aviso > i { float: left; font-size: 22px; line-height: 1.1; margin-right: 12px; }
.mensajes-completos .aviso::after { content: ""; display: table; clear: both; }
.mensajes-completos .aviso-info    { border-left-color: #3B82F6; }
.mensajes-completos .aviso-success { border-left-color: #10B981; }
.mensajes-completos .aviso-danger  { border-left-color: #EF4444; }
.mensajes-completos .aviso-warning { border-left-color: #F59E0B; }
.mensajes-completos .aviso-info > i    { color: #3B82F6; }
.mensajes-completos .aviso-success > i { color: #10B981; }
.mensajes-completos .aviso-danger > i  { color: #EF4444; }
.mensajes-completos .aviso-warning > i { color: #F59E0B; }