/* =============================================================================
   componentes/aviso-web.css — Franja de aviso al público  (componentes/_aviso-web.php)
   -----------------------------------------------------------------------------
   Arriba del todo, encima de la cabecera, de lado a lado (13-11-2026; se pone en
   admin › Web › Mantenimiento). No es fija: se va al bajar, como la cabecera. El
   texto se parte en varias líneas en el móvil. Tres colores: info, aviso, urgente,
   con contraste AA. Los teléfonos son enlaces de llamada, subrayados.
   ============================================================================= */

.ss-aviso-web {
   background: #fff3cd;
   color: #5c4400;
   border-bottom: 1px solid #ffda6a;
   font-size: .9rem;
   line-height: 1.4;
}
.ss-aviso-web[hidden] { display: none; }
.ss-aviso-web--info    { background: #e7f1ff; color: #0a3a7a; border-bottom-color: #9ec5fe; }
.ss-aviso-web--urgente { background: #b3261e; color: #fff;    border-bottom-color: #8c1d18; }

.ss-aviso-web__dentro {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .6rem;
   padding-top: .55rem;
   padding-bottom: .55rem;
}
.ss-aviso-web__icono { flex: none; }
.ss-aviso-web__texto {
   margin: 0;
   text-align: center;
   font-weight: 500;
   overflow-wrap: anywhere;
}
.ss-aviso-web__texto a {
   color: inherit;
   font-weight: 700;
   white-space: nowrap;
   text-decoration: underline;
   text-underline-offset: 2px;
}
.ss-aviso-web__cerrar {
   flex: none;
   margin-left: .25rem;
   width: 2rem;
   height: 2rem;
   display: inline-grid;
   place-items: center;
   border: 0;
   border-radius: 50%;
   background: transparent;
   color: inherit;
   cursor: pointer;
}
.ss-aviso-web__cerrar[hidden] { display: none; }
.ss-aviso-web__cerrar:hover { background: rgb(0 0 0 / .08); }
.ss-aviso-web--urgente .ss-aviso-web__cerrar:hover { background: rgb(255 255 255 / .15); }
.ss-aviso-web__cerrar:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 575.98px) {
   .ss-aviso-web { font-size: .85rem; }
   .ss-aviso-web__dentro { align-items: flex-start; justify-content: flex-start; }
   .ss-aviso-web__icono { margin-top: .2rem; }
   .ss-aviso-web__texto { text-align: left; flex: 1; }
}

@media print { .ss-aviso-web { display: none; } }