/**
 * PLUGIN: AVISOS F10
 * ARCHIVO: ESTILOS CSS PARA EL FRONTEND (PAGINA WEB PUBLICA)
 * DESCRIPCION: ESTILOS PARA AVISOS ESTATICOS, CABECERAS, AVISOS PROGRAMADOS
 *              Y ZONA DE SUBIDA DE ARCHIVOS VISIBLES EN LA TIENDA
 */

/* ==========================================================================
   SECCION 1: ZONA DE SUBIDA DE ARCHIVOS
   DESCRIPCION: ESTILO PARA EL AREA DE SUBIDA DE ARCHIVOS EN EL FRONTEND
   ========================================================================== */

.archivo-subido {
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
    padding: 30px;
    margin: 30px auto;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* ESTADO HOVER: RESALTA EL BORDE AL PASAR EL RATON POR ENCIMA */
.archivo-subido:hover {
    border-color: #8c8f94;
}

/* ESTADO FOCUS-WITHIN: RESALTA CUANDO UN ELEMENTO HIJO TIENE EL FOCO */
.archivo-subido:focus-within {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

/* ==========================================================================
   SECCION 2: AVISO ESTATICO DEL CARRITO
   DESCRIPCION: CAJA DE AVISO CON BORDE REDONDEADO CENTRADA EN EL CARRITO
   SE USA PARA MOSTRAR MENSAJES INFORMATIVOS AL USUARIO
   ========================================================================== */

.campo2-carrito {
    border-radius: 3px;
    line-height: 1.5;
    margin-bottom: 2%;
    width: 100%;
    padding: 2%;
    text-align: center;
}

/* ==========================================================================
   SECCION 3: AVISO DE CABECERA
   DESCRIPCION: FRANJA DE AVISO EN LA CABECERA DE LA PAGINA WEB
   OCUPA TODO EL ANCHO Y PUEDE TENER IMAGEN DE FONDO (BACKGROUND-SIZE: COVER)
   ========================================================================== */

.aviso-cabecera {
    background-size: cover;
    line-height: 1.5;
    width: 100%;
    padding: 1%;
    text-align: center;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   SECCION 4: AVISOS PROGRAMADOS
   DESCRIPCION: ESTILOS PARA LOS AVISOS QUE SE MUESTRAN EN UN RANGO DE FECHAS
   INCLUYE VARIANTES: NORMAL, CENTRADO, COMPACTO Y CABECERA
   ========================================================================== */

/* AVISO PROGRAMADO ESTANDAR - ALINEACION POR DEFECTO (IZQUIERDA) */
/* TIENE BORDES REDONDEADOS Y MARGEN VERTICAL PARA SEPARARSE DEL CONTENIDO */
div.aviso-progamado {
    border-radius: 5px;
    padding: 10px;
    margin: 1.5em 0;
}

/* AVISO PROGRAMADO CENTRADO - IGUAL AL ESTANDAR PERO CON TEXTO CENTRADO */
/* SE USA CUANDO EL AVISO DEBE DESTACAR EN EL CENTRO DE LA SECCION */
div.aviso-progamado-centrado {
    border-radius: 5px;
    padding: 10px;
    margin: 1.5em 0;
    text-align: center;
}

/* AVISO PROGRAMADO COMPACTO - MARGEN VERTICAL REDUCIDO */
/* SE USA CUANDO HAY VARIOS AVISOS CONSECUTIVOS PARA EVITAR EXCESO DE ESPACIO */
div.aviso-progamado-2 {
    border-radius: 5px;
    padding: 10px;
    margin: 0.1em 0;
}

/* AVISO PROGRAMADO DE CABECERA - FRANJA COMPLETA TIPO BANNER */
/* COMPARTE ESTILOS CON .aviso-cabecera: ANCHO COMPLETO, IMAGEN DE FONDO */
div.aviso-progamado-cabecera {
    background-size: cover;
    line-height: 1.5;
    width: 100%;
    padding: 1%;
    text-align: center;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
}

/* AVISO PROGRAMADO DENTRO DE TABLA HTML - USA <TR><TD> EN LUGAR DE <DIV> */
/* SE APLICA A HOOKS QUE SE EJECUTAN DENTRO DE <TABLE><TBODY> DE WOOCOMMERCE */
/* (CARRITO: CONTENIDO Y TOTALES, CHECKOUT: REVISION DE PEDIDO) */
tr.aviso-progamado-tabla td {
    padding: 10px 15px;
    text-align: center;
    border-radius: 0;
}

/* ==========================================================================
   SECCION 5: ESTADOS INTERACTIVOS PARA AVISOS CON ENLACES
   DESCRIPCION: HOVER Y FOCUS PARA ENLACES DENTRO DE LOS AVISOS PROGRAMADOS
   MEJORA LA ACCESIBILIDAD Y LA EXPERIENCIA DE USUARIO
   ========================================================================== */

/* HOVER EN ENLACES DENTRO DE AVISOS - SUBRAYA EL TEXTO AL PASAR EL RATON */
div.aviso-progamado a:hover,
div.aviso-progamado-centrado a:hover,
div.aviso-progamado-2 a:hover,
div.aviso-progamado-cabecera a:hover,
.aviso-cabecera a:hover,
.campo2-carrito a:hover,
tr.aviso-progamado-tabla a:hover {
    text-decoration: underline;
}

/* FOCUS EN ENLACES DENTRO DE AVISOS - CONTORNO VISIBLE PARA NAVEGACION CON TECLADO */
div.aviso-progamado a:focus,
div.aviso-progamado-centrado a:focus,
div.aviso-progamado-2 a:focus,
div.aviso-progamado-cabecera a:focus,
.aviso-cabecera a:focus,
.campo2-carrito a:focus,
tr.aviso-progamado-tabla a:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}