/**
 * @file aviso-consentimiento.css
 * @description Archivo de estilos para el componente web personalizado AvisoConsentimiento.
 *              Proporciona diseño responsive completo con efectos claymorphism avanzados,
 *              modal fullscreen adaptativo, animaciones suaves de entrada y salida,
 *              botones interactivos con micro-animaciones, enlaces estilizados para políticas,
 *              soporte completo para todos los dispositivos y orientaciones, integración
 *              perfecta con el sistema de temas global y optimización táctil para móviles.
 * @author Enri Rego
 * @version 1.0.0
 * @date 14 de Junio 2025
 * @since 1.0.0
 * @requires scripts/components/aviso-consentimiento.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

/* ==========================================================================
   CONFIGURACIÓN BASE DEL COMPONENTE AVISO-CONSENTIMIENTO
   ========================================================================== */

/**
 * Elemento principal del modal de aviso de consentimiento
 * Overlay fullscreen con fondo semi-transparente que cubre toda la ventana
 * del navegador. Estado inicial oculto con transiciones suaves optimizadas
 * para efectos de aparición/desaparición elegantes y profesionales
 */

/* Estado inicial oculto del modal */
aviso-consentimiento {
    /* Posicionamiento fullscreen fijo */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Z-index crítico para aparecer sobre todo el contenido */
    z-index: var(--z-overlays-criticos, 9999);

    /* Z-index reducido cuando hay modales de políticas activos */
    transition: z-index 0.1s ease;

    /* Fondo semi-transparente oscuro para efecto overlay */
    background-color: rgba(0, 0, 0, 0.8);

    /* Centrado del contenido */
    align-items: center;
    justify-content: center;

    /* Prevenir scroll interno del overlay */
    overflow: hidden;

    /* Transiciones suaves para efectos de aparición */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

/**
 * Estado visible del modal de consentimiento
 * Overlay completamente visible con transición suave desde estado oculto.
 * Usa flexbox para centrado perfecto en todos los dispositivos
 */

/* Modal visible con centrado automático */
aviso-consentimiento.visible {
    /* Mostrar como flexbox para centrado */
    display: flex;

    /* Opacidad completa con transición suave */
    opacity: 1;
}

/**
 * Estado del modal cuando hay modales de políticas activos
 * Reduce temporalmente el z-index para permitir que los modales de políticas
 * se muestren por encima del aviso de consentimiento durante su lectura
 */

/* Z-index reducido para permitir modales de políticas por encima */
aviso-consentimiento.modal-politicas-activo {
    /* Z-index temporal menor que modales de políticas */
    z-index: var(--z-modal-fondo, 90);
}

/* ==========================================================================
   CONTENEDOR PRINCIPAL DEL MODAL CON EFECTOS CLAYMORPHISM
   ========================================================================== */

/**
 * Contenedor principal del modal de consentimiento
 * Implementa efectos claymorphism avanzados consistentes con el sistema de diseño.
 * Dimensiones adaptativas con máximos responsivos para diferentes dispositivos
 * y sombras optimizadas para crear sensación de profundidad y elevación
 */

/* Contenedor modal con efectos claymorphism */
.aviso-contenedor {
    /* Posicionamiento relativo para elementos hijos */
    position: relative;

    /* Dimensiones adaptativas con máximos */
    width: 90%;
    max-width: 480px;
    max-height: 85vh;

    /* Efectos claymorphism del sistema */
    background-color: var(--crema, #FFF0E5);
    border-radius: var(--borde-radio-grande, 16px);
    box-shadow: var(--sombra-elevacion-alta, 0 8px 20px rgba(0, 0, 0, 0.2), 0 6px 8px rgba(0, 0, 0, 0.15));

    /* Animación de entrada desde escala pequeña */
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Scroll interno si el contenido es muy largo */
    overflow: hidden;
}

/**
 * Contenedor en estado visible con animación completa
 * Escala y posición finales para efecto de aparición suave.
 * Se activa cuando el modal padre tiene la clase 'visible'
 */

/* Animación de entrada del contenedor */
aviso-consentimiento.visible .aviso-contenedor {
    /* Escala y posición normales */
    transform: scale(1) translateY(0);
}

/**
 * Adaptación del contenedor para tema oscuro
 * Colores y efectos específicos para modo oscuro manteniendo
 * la coherencia visual con el resto del sistema de temas
 */

/* Tema oscuro para el contenedor modal */
:root[data-tema="oscuro"] .aviso-contenedor {
    /* Fondo oscuro con transparencia */
    background-color: var(--gris-obscuro, #1A1A1A);

    /* Sombras ajustadas para tema oscuro */
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.4),
        0 8px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   ESTRUCTURA VERTICAL DEL MODAL CON LAYOUT FLEXBOX
   ========================================================================== */

/**
 * Contenedor de datos principales del modal
 * Layout vertical que organiza encabezado, cuerpo y pie en secciones
 * claramente definidas con altura máxima controlada para scroll interno
 * cuando el contenido excede la altura disponible del dispositivo
 */

/* Layout vertical para estructura del modal */
.aviso-datos {
    /* Flexbox vertical para organizar secciones */
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 85vh;
}

/* ==========================================================================
   ENCABEZADO DEL MODAL CON TÍTULO Y ICONOGRAFÍA
   ========================================================================== */

/**
 * Encabezado del modal de consentimiento
 * Sección superior que contiene el título principal con iconografía FontAwesome.
 * Espaciado optimizado y borde inferior sutil para separación visual
 * clara del contenido principal del modal
 */

/* Barra de encabezado con título e icono */
.aviso-encabezado {
    /* Espaciado interno optimizado */
    padding: var(--espaciado-lg, 24px) var(--espaciado-lg, 24px) var(--espaciado-md, 16px);

    /* Borde inferior sutil para separación */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/**
 * Adaptación del encabezado para tema oscuro
 * Borde inferior con transparencia clara para mantener
 * la separación visual en el modo oscuro sin crear contraste excesivo
 */

/* Encabezado en tema oscuro */
:root[data-tema="oscuro"] .aviso-encabezado {
    /* Borde claro semi-transparente */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/**
 * Título principal del modal de consentimiento
 * Elemento h2 estilizado con color de marca naranja, iconografía FontAwesome,
 * tipografía semi-bold y espaciado optimizado. Incluye flexbox para
 * alineación perfecta del icono con el texto
 */

/* Título del modal con icono y color de marca */
.aviso-encabezado h2 {
    /* Resetear márgenes para control preciso */
    margin: 0;

    /* Tipografía jerarquizada */
    font-size: var(--texto-grande, 1.2rem);
    font-weight: 600;
    color: var(--naranja, #FF6B35);

    /* Layout para icono y texto */
    display: flex;
    align-items: center;
    gap: var(--espaciado-xs, 8px);

    /* Altura de línea optimizada */
    line-height: 1.3;
}

/**
 * Icono del encabezado con tamaño consistente
 * Tamaño específico para iconos FontAwesome que mantiene proporción
 * adecuada con el texto y proporciona consistencia visual
 */

/* Icono del título */
.aviso-encabezado h2 i {
    /* Tamaño consistente del icono */
    font-size: var(--tamano-icono-principal, 24px);

    /* Evitar flex shrink */
    flex-shrink: 0;
}

/* ==========================================================================
   CUERPO DEL MODAL CON CONTENIDO PRINCIPAL
   ========================================================================== */

/**
 * Cuerpo principal del modal de consentimiento
 * Sección central que contiene el mensaje principal y los enlaces a políticas.
 * Configurado con scroll interno independiente para contenido extenso
 * y espaciado optimizado para legibilidad en todos los dispositivos
 */

/* Cuerpo scrolleable del modal */
.aviso-cuerpo {
    /* Flex grow para ocupar espacio disponible */
    flex: 1;

    /* Espaciado interno consistente */
    padding: var(--espaciado-lg, 24px);

    /* Scroll interno si el contenido es extenso */
    overflow-y: auto;
    overflow-x: hidden;

    /* Espaciado interno entre secciones */
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-lg, 24px);
}

/**
 * Mensaje principal del aviso de consentimiento
 * Párrafo optimizado para lectura con tipografía clara,
 * espaciado de línea confortable y color de texto apropiado
 * para máxima legibilidad en ambos temas
 */

/* Mensaje principal del aviso */
.aviso-mensaje p {
    /* Resetear márgenes */
    margin: 0;

    /* Tipografía optimizada para lectura */
    font-size: var(--texto-base, 1rem);
    line-height: 1.6;
    color: var(--negro, #444040);

    /* Justificación del texto para mejor apariencia */
    text-align: justify;
    text-justify: inter-word;
}

/**
 * Mensaje principal en tema oscuro
 * Adaptación del color de texto para modo oscuro manteniendo
 * contraste adecuado y legibilidad óptima
 */

/* Mensaje en tema oscuro */
:root[data-tema="oscuro"] .aviso-mensaje p {
    /* Color de texto claro para tema oscuro */
    color: var(--crema, #FFF0E5);
}

/* ==========================================================================
   ENLACES A POLÍTICAS Y TÉRMINOS CON ESTILO DE BOTONES
   ========================================================================== */

/**
 * Contenedor de enlaces a políticas de privacidad y términos
 * Layout flexbox que organiza los enlaces de manera responsive
 * con espaciado consistente y alineación centrada
 */

/* Contenedor de enlaces a políticas */
.aviso-enlaces {
    /* Layout flexbox responsive */
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm, 12px);
    align-items: stretch;
}

/**
 * Enlaces estilizados como botones para políticas
 * Botones secundarios con efectos claymorphism sutiles,
 * iconografía FontAwesome y estados hover interactivos.
 * Diseñados para ser claramente identificables como enlaces a documentos
 */

/* Estilo base para enlaces de políticas */
.aviso-enlace-politicas,
.aviso-enlace-terminos {
    /* Resetear estilos de botón por defecto */
    border: none;
    background: none;
    cursor: pointer;

    /* Espaciado interno y layout */
    padding: var(--espaciado-sm, 12px) var(--espaciado-md, 16px);
    display: flex;
    align-items: center;
    gap: var(--espaciado-xs, 8px);

    /* Tipografía */
    font-size: var(--texto-chico, 0.875rem);
    font-weight: 500;
    color: var(--naranja, #FF6B35);
    text-decoration: none;

    /* Efectos visuales sutiles */
    border-radius: var(--borde-radio-estandar, 8px);
    background-color: rgba(255, 107, 53, 0.1);
    border: 1px solid rgba(255, 107, 53, 0.2);

    /* Transiciones suaves */
    transition: all var(--transicion-base, 0.3s) ease;

    /* Forzar ancho completo en móvil */
    width: 100%;
    justify-content: center;
}

/**
 * Estados hover para enlaces de políticas
 * Efectos de elevación y cambio de color que proporcionan
 * feedback visual claro al usuario sobre la interactividad
 */

/* Efectos hover para enlaces */
.aviso-enlace-politicas:hover,
.aviso-enlace-terminos:hover {
    /* Elevación con claymorphism */
    transform: translateY(-2px);
    box-shadow: var(--sombra-elevacion-media, 0 4px 10px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1));

    /* Intensificación del color de fondo */
    background-color: rgba(255, 107, 53, 0.15);
    border-color: rgba(255, 107, 53, 0.3);
}

/**
 * Iconos en enlaces de políticas
 * Tamaño consistente y posicionamiento para iconos FontAwesome
 * que representan visualmente el tipo de documento
 */

/* Iconos de los enlaces */
.aviso-enlace-politicas i,
.aviso-enlace-terminos i {
    /* Tamaño del icono */
    font-size: var(--tamano-icono-secundario, 18px);

    /* Evitar flex shrink */
    flex-shrink: 0;
}

/**
 * Adaptación de enlaces para tema oscuro
 * Colores y efectos específicos para modo oscuro manteniendo
 * la legibilidad y coherencia visual
 */

/* Enlaces en tema oscuro */
:root[data-tema="oscuro"] .aviso-enlace-politicas,
:root[data-tema="oscuro"] .aviso-enlace-terminos {
    /* Fondo más oscuro para tema oscuro */
    background-color: rgba(255, 107, 53, 0.15);
    border-color: rgba(255, 107, 53, 0.25);
}

:root[data-tema="oscuro"] .aviso-enlace-politicas:hover,
:root[data-tema="oscuro"] .aviso-enlace-terminos:hover {
    /* Fondo más intenso en hover para tema oscuro */
    background-color: rgba(255, 107, 53, 0.25);
    border-color: rgba(255, 107, 53, 0.4);
}

/* ==========================================================================
   PIE DEL MODAL CON BOTONES DE ACCIÓN PRINCIPALES
   ========================================================================== */

/**
 * Pie del modal con botones de acción
 * Sección inferior que contiene los botones principales de aceptar y abandonar.
 * Layout responsive que se adapta entre disposición horizontal y vertical
 * según el espacio disponible y el dispositivo
 */

/* Pie con botones de acción */
.aviso-pie {
    /* Separación visual del contenido */
    border-top: 1px solid rgba(0, 0, 0, 0.1);

    /* Espaciado interno */
    padding: var(--espaciado-md, 16px) var(--espaciado-lg, 24px);

    /* Layout flexbox para botones */
    display: flex;
    gap: var(--espaciado-md, 16px);
    justify-content: center;
    align-items: center;

    /* Layout responsive: columna en móvil, fila en desktop */
    flex-direction: column;
}

/**
 * Pie del modal en tema oscuro
 * Adaptación del borde superior para tema oscuro manteniendo
 * la separación visual clara sin crear contraste excesivo
 */

/* Pie del modal en tema oscuro */
:root[data-tema="oscuro"] .aviso-pie {
    /* Borde claro semi-transparente */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   BOTONES PRINCIPALES CON EFECTOS CLAYMORPHISM
   ========================================================================== */

/**
 * Estilo base para todos los botones del modal
 * Configuración común que incluye reseteo de estilos por defecto,
 * espaciado base, tipografía y cursor apropiado
 */

/* Estilo base para botones */
.aviso-boton {
    /* Resetear estilos por defecto */
    border: none;
    background: none;
    cursor: pointer;

    /* Espaciado interno generoso para área táctil */
    padding: var(--espaciado-md, 16px) var(--espaciado-lg, 24px);

    /* Tipografía consistente */
    font-size: var(--texto-base, 1rem);
    font-weight: 600;

    /* Layout para icono y texto */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaciado-xs, 8px);
    /* Forma y dimensiones */
    border-radius: var(--arcilla-radio, 24px);
    min-height: var(--tamano-boton-flotante, 44px);

    /* Ancho completo en móvil */
    width: 100%;

    /* Transiciones suaves */
    transition: all var(--transicion-base, 0.3s) ease;
}

/**
 * Botón principal de aceptar con efectos claymorphism
 * Botón primario con colores de marca y efectos visuales prominentes.
 * Diseñado para ser el call-to-action principal con máxima visibilidad
 * y efectos hover que invitan a la interacción
 */

/* Botón de aceptar con estilo primario */
.aviso-boton-aceptar {
    /* Colores de marca para botón primario */
    background-color: var(--naranja, #FF6B35);
    color: var(--blanco, #FFFFFF);

    /* Sombra para efecto de elevación */
    box-shadow: var(--sombra-elevacion-media, 0 4px 10px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1));

    /* Borde sutil del mismo color */
    border: 1px solid var(--naranja-oscuro, #E55A28);
}

/**
 * Efectos hover para botón de aceptar
 * Elevación adicional y cambios de color que proporcionan
 * feedback visual inmediato y atractivo para la acción principal
 */

/* Efectos hover del botón aceptar */
.aviso-boton-aceptar:hover {
    /* Color más intenso en hover */
    background-color: var(--naranja-oscuro, #E55A28);

    /* Elevación claymorphism en hover */
    transform: translateY(-2px);
    box-shadow: var(--sombra-hover-claymorphism, 0 10px 25px rgba(0, 0, 0, 0.25), 0 8px 10px rgba(0, 0, 0, 0.2));
}

/**
 * Estado activo del botón aceptar
 * Efecto de presión que simula la depresión física del botón
 * para feedback táctil visual
 */

/* Estado presionado del botón aceptar */
.aviso-boton-aceptar:active {
    /* Efecto de presión */
    transform: translateY(0);
    box-shadow: var(--sombra-elevacion-baja, 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05));
}

/**
 * Botón secundario de abandonar con estilo sutil
 * Botón secundario con colores neutros y efectos visuales menos prominentes.
 * Diseñado para estar disponible pero no competir visualmente con la acción principal
 */

/* Botón de abandonar con estilo secundario */
.aviso-boton-abandonar {
    /* Colores neutros para botón secundario */
    background-color: transparent;
    color: var(--gris-claro, #707070);

    /* Borde sutil */
    border: 1px solid rgba(112, 112, 112, 0.3);

    /* Sombra muy sutil */
    box-shadow: var(--sombra-elevacion-baja, 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05));
}

/**
 * Efectos hover para botón de abandonar
 * Efectos sutiles que proporcionan feedback sin ser demasiado prominentes
 * manteniendo la jerarquía visual con el botón principal
 */

/* Efectos hover del botón abandonar */
.aviso-boton-abandonar:hover {
    /* Color de texto más oscuro */
    color: var(--negro, #444040);

    /* Fondo sutil en hover */
    background-color: rgba(112, 112, 112, 0.1);

    /* Borde más definido */
    border-color: rgba(112, 112, 112, 0.5);

    /* Elevación sutil */
    transform: translateY(-1px);
    box-shadow: var(--sombra-elevacion-media, 0 4px 10px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1));
}

/**
 * Botones en tema oscuro
 * Adaptaciones específicas para modo oscuro manteniendo
 * la jerarquía visual y legibilidad apropiada
 */

/* Botón abandonar en tema oscuro */
:root[data-tema="oscuro"] .aviso-boton-abandonar {
    /* Color claro para tema oscuro */
    color: var(--crema, #FFF0E5);

    /* Borde claro */
    border-color: rgba(255, 240, 229, 0.3);
}

:root[data-tema="oscuro"] .aviso-boton-abandonar:hover {
    /* Fondo sutil para tema oscuro */
    background-color: rgba(255, 240, 229, 0.1);
    border-color: rgba(255, 240, 229, 0.5);
}

/**
 * Iconos en botones principales
 * Tamaño consistente para iconos FontAwesome en botones
 * que proporciona coherencia visual y facilita la identificación rápida
 */

/* Iconos de los botones */
.aviso-boton i {
    /* Tamaño del icono */
    font-size: var(--tamano-icono-secundario, 18px);

    /* Evitar flex shrink */
    flex-shrink: 0;
}

/* ==========================================================================
   BLOQUEO DE SCROLL Y ESTADOS GLOBALES
   ========================================================================== */

/**
 * Bloqueo de scroll del body cuando el modal está activo
 * Previene el scroll del contenido de fondo mientras el modal
 * está visible, mejorando la experiencia de usuario y el focus
 */

/* Bloquear scroll del body con modal abierto */
body.modal-abierto {
    /* Prevenir scroll del fondo */
    overflow: hidden;

    /* Mantener ancho para evitar jump de layout */
    width: 100%;
}

/* ==========================================================================
   ADAPTACIONES RESPONSIVE PARA DIFERENTES DISPOSITIVOS
   ========================================================================== */

/**
 * Optimizaciones para tablets y dispositivos medianos
 * Ajustes de espaciado y layout para aprovechar mejor el espacio
 * disponible en pantallas de tamaño intermedio
 */

/* Adaptaciones para tablets (768px - 1023px) */
@media (min-width: 768px) {

    /**
   * Contenedor modal más grande en tablets
   * Aprovechamiento del espacio adicional disponible con
   * dimensiones optimizadas para tablets
   */
    .aviso-contenedor {
        /* Ancho óptimo para tablets */
        width: 70%;
        max-width: 520px;
    }

    /**
   * Layout horizontal para botones en tablets
   * Cambio a disposición horizontal aprovechando el ancho disponible
   * con espaciado optimizado entre botones
   */
    .aviso-pie {
        /* Layout horizontal en tablets */
        flex-direction: row;
        justify-content: center;
    }

    /**
   * Botones con ancho fijo en tablets
   * Dimensiones específicas que proporcionan mejor balance visual
   * y aprovechamiento del espacio horizontal
   */
    .aviso-boton {
        /* Ancho fijo en lugar de 100% */
        width: auto;
        min-width: 160px;
    }

    /**
   * Enlaces en layout horizontal para tablets
   * Mejor aprovechamiento del espacio horizontal disponible
   * con distribución equilibrada de los enlaces
   */
    .aviso-enlaces {
        /* Layout horizontal en tablets */
        flex-direction: row;
        justify-content: center;
    }

    .aviso-enlace-politicas,
    .aviso-enlace-terminos {
        /* Ancho flexible en tablets */
        width: auto;
        flex: 1;
        max-width: 200px;
    }
}

/**
 * Optimizaciones para desktop y laptops
 * Ajustes adicionales para pantallas grandes con mayor resolución
 * y mayor espacio disponible para el contenido
 */

/* Adaptaciones para desktop (1024px+) */
@media (min-width: 1024px) {

    /**
   * Contenedor modal optimizado para desktop
   * Dimensiones que aprovechan el espacio sin ser excesivamente grandes
   * manteniendo proporciones adecuadas para lectura
   */
    .aviso-contenedor {
        /* Dimensiones óptimas para desktop */
        width: 50%;
        max-width: 580px;
        max-height: 75vh;
    }

    /**
   * Espaciado generoso en desktop
   * Mayor espaciado interno aprovechando el espacio adicional
   * disponible en pantallas grandes
   */
    .aviso-encabezado,
    .aviso-cuerpo,
    .aviso-pie {
        /* Espaciado aumentado para desktop */
        padding-left: var(--espaciado-xl, 32px);
        padding-right: var(--espaciado-xl, 32px);
    }

    /**
   * Tipografía escalada para desktop
   * Tamaños de fuente ligeramente mayores aprovechando la
   * mayor resolución y distancia de visualización típica
   */
    .aviso-encabezado h2 {
        /* Título más grande en desktop */
        font-size: 1.4rem;
    }

    .aviso-mensaje p {
        /* Texto base más grande en desktop */
        font-size: 1.1rem;
    }
}

/**
 * Optimizaciones para pantallas ultra anchas
 * Ajustes específicos para monitores de alta resolución y pantallas
 * ultra anchas manteniendo proporciones legibles
 */

/* Adaptaciones para pantallas ultra anchas (1440px+) */
@media (min-width: 1440px) {

    /**
   * Contenedor con dimensiones máximas controladas
   * Evita que el modal se vuelva excesivamente grande en
   * pantallas muy anchas manteniendo proporciones legibles
   */
    .aviso-contenedor {
        /* Ancho controlado para pantallas muy grandes */
        width: 40%;
        max-width: 640px;
    }
}

/**
 * Optimizaciones específicas para móviles pequeños
 * Ajustes para dispositivos con pantallas muy pequeñas
 * optimizando el uso del espacio limitado
 */

/* Adaptaciones para móviles pequeños (max 480px) */
@media (max-width: 480px) {

    /**
   * Contenedor optimizado para móviles pequeños
   * Aprovechamiento máximo del espacio disponible con
   * márgenes mínimos pero funcionales
   */
    .aviso-contenedor {
        /* Aprovechamiento máximo en móviles pequeños */
        width: 95%;
        max-height: 90vh;
        margin: 5vh auto;
    }

    /**
   * Espaciado compacto para móviles pequeños
   * Reducción del espaciado para maximizar el área de contenido
   * sin comprometer la legibilidad
   */
    .aviso-encabezado,
    .aviso-cuerpo,
    .aviso-pie {
        /* Espaciado reducido para móviles */
        padding-left: var(--espaciado-md, 16px);
        padding-right: var(--espaciado-md, 16px);
    }

    /**
   * Título compacto para móviles pequeños
   * Ajuste del tamaño de fuente para dispositivos con
   * pantallas muy pequeñas manteniendo legibilidad
   */
    .aviso-encabezado h2 {
        /* Título más compacto en móviles pequeños */
        font-size: 1.1rem;
    }

    /**
   * Botones con altura optimizada para touch
   * Altura mínima que garantiza área táctil adecuada
   * según las recomendaciones de usabilidad móvil
   */
    .aviso-boton {
        /* Altura táctil óptima */
        min-height: 48px;
    }
}

/**
 * Optimizaciones para landscape mobile
 * Ajustes específicos para dispositivos móviles en orientación horizontal
 * donde el espacio vertical es muy limitado
 */

/* Adaptaciones para landscape mobile */
@media (max-height: 667px) and (orientation: landscape) {

    /**
   * Contenedor optimizado para landscape mobile
   * Dimensiones que aprovechan el espacio horizontal disponible
   * mientras minimizan el uso del espacio vertical limitado
   */
    .aviso-contenedor {
        /* Ancho mayor para aprovechar landscape */
        width: 80%;
        max-width: 700px;

        /* Altura máxima ajustada para landscape */
        max-height: 95vh;
        margin: 2.5vh auto;
    }

    .aviso-cuerpo {
        /* Padding vertical mínimo para el cuerpo */
        padding-top: var(--espaciado-sm, 12px);
        padding-bottom: var(--espaciado-sm, 12px);
    }

    /**
   * Layout siempre horizontal en landscape
   * Aprovechamiento del espacio horizontal disponible
   * con disposición optimizada de botones y enlaces
   */
    .aviso-pie {
        /* Siempre horizontal en landscape */
        flex-direction: row;
    }

    .aviso-enlaces {
        /* Enlaces horizontales en landscape */
        flex-direction: row;
    }
}

/**
 * Optimizaciones para landscape mobile muy pequeño
 * Ajustes extremos para dispositivos con altura muy limitada
 * en orientación horizontal (como teléfonos pequeños)
 */

/* Adaptaciones para landscape muy pequeño */
@media (max-height: 450px) and (orientation: landscape) {

    /**
   * Contenedor con altura máxima expandida
   * Aprovechamiento completo del espacio vertical disponible
   * en dispositivos con altura muy limitada
   */
    .aviso-contenedor {
        /* Altura máxima casi completa */
        max-height: 98vh;
        margin: 1vh auto;
    }

    .aviso-mensaje p {
        /* Texto base compacto */
        font-size: 0.9rem;
        line-height: 1.4;
    }
}