/**
 * Barra de Accesibilidad - Capital Utilities
 * 
 * Estilos basados en lineamientos Gov.co
 * @version 1.0.0
 */

/* ==========================================================================
   Variables CSS
   ========================================================================== */
:root {
    --accessibility-primary: #004884;
    --accessibility-secondary: #3366CC;
    --accessibility-white: #ffffff;
    --accessibility-black: #000000;
    --accessibility-text: #4B4B4B;
    --accessibility-bar-width: 48px;
    --accessibility-bar-height: auto;
    --accessibility-tooltip-width: 172px;
    --accessibility-btn-size: 40px;
    --accessibility-icon-size: 24px;
    --accessibility-border-radius: 10px;
    --accessibility-transition: 0.2s ease-in-out;
}

/* ==========================================================================
   Screen Reader Only (Texto oculto para lectores de pantalla)
   ========================================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Barra de Accesibilidad - Contenedor Principal
   ========================================================================== */
.barra-accesibilidad-govco {
    position: fixed;
    right: 0;
    top: 35%;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: var(--accessibility-bar-width);
    height: var(--accessibility-bar-height);
    padding: 12px 0;
    background-color: var(--accessibility-primary);
    border-radius: var(--accessibility-border-radius) 0 0 var(--accessibility-border-radius);
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Botones de Accesibilidad
   ========================================================================== */
.barra-accesibilidad-govco .accessibility-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--accessibility-bar-width);
    height: 50px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--accessibility-transition);
    -webkit-tap-highlight-color: transparent;
}

/* Estilos adicionales para enlaces (Centro de Relevo) */
.barra-accesibilidad-govco a.accessibility-btn {
    text-decoration: none;
    color: inherit;
}

.barra-accesibilidad-govco a.accessibility-btn:visited {
    color: inherit;
}

/* Iconos usando pseudo-elementos */
.barra-accesibilidad-govco .accessibility-btn::after {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--accessibility-icon-size);
    height: var(--accessibility-icon-size);
    padding: 4px;
    background-color: var(--accessibility-white);
    color: var(--accessibility-primary);
    border-radius: 5px;
    font-size: 16px;
    line-height: 1;
    transition: color var(--accessibility-transition);
}

/* Iconos SVG inline como background */
.barra-accesibilidad-govco .icon-contraste::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23004884'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18V4c4.41 0 8 3.59 8 8s-3.59 8-8 8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

.barra-accesibilidad-govco .icon-reducir::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23004884'%3E%3Cpath d='M19 13H5v-2h14v2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

.barra-accesibilidad-govco .icon-aumentar::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23004884'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

/* Ícono Centro de Relevo / Signos en Red */
.barra-accesibilidad-govco .icon-centro-relevo::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15' fill='%23004884'%3E%3Cpath d='M3.53,5.48c-.29.01-.45.35-.29.58.09.13.69.42.86.5.96.47,1.99.82,3.01,1.13.11.9,1.25,1.24,1.81.51.7-.93-.53-2.11-1.42-1.4-.08.06-.14.2-.25.17-.93-.3-1.87-.61-2.76-1.03-.26-.12-.58-.35-.83-.44-.05-.02-.09-.03-.14-.03Z'/%3E%3Cpath d='M21.58,10.4c-.1,1.89-1.57,3.48-3.47,3.68-4.67.04-9.34.04-14.01,0-3.17-.34-4.82-4.14-2.81-6.65.12-.15.21-.3.43-.18.99.64,2.04,1.22,3.15,1.63.33.12.69.21,1,.34.38.16.72.51,1.08.74.49.31.86.39,1.38.58.83.31,1.37.96,1.92,1.62.22.27.61.94,1.04.83.1-.03.19-.15.21-.25.05-.41-.44-1.03-.65-1.38-.17-.29-.52-.89-.47-1.22.04-.23.51-.06.65-.01.78.27,2,1.09,2.79,1.06.4-.02.71-.24.4-.63-.48-.62-1.67-1.1-2.32-1.57-.12-.09-.29-.2-.26-.37,1.01-.01,2.01.18,3.01.27.36.03,1.19.11,1.4-.28s-.33-.57-.61-.67c-1.06-.39-2.35-.44-3.36-.86-.08-.03-.27-.11-.27-.2.01-.1.15-.14.24-.18.79-.31,1.8-.4,2.6-.71.22-.09.64-.33.52-.63-.11-.26-.79-.26-1.03-.25-.93,0-1.95.08-2.88.02-.27-.02-.64-.03-.38-.36.24-.31.68-.61.96-.92s.85-1.22.54-1.63c-.28-.37-.64.18-.84.36-.72.66-1.54,1.29-2.32,1.88-.36.27-1.4,1.08-1.83,1.07-.4-.01-1.28-.31-1.68-.46-.14-.05-.52-.18-.62-.25-.2-.15.06-.51.15-.67,1.28-2.25,3.83-3.51,6.41-3.19,2.8.35,5.11,2.56,5.54,5.35.06.04.11,0,.17,0,.54,0,1,.01,1.52.18,1.52.49,2.61,1.91,2.7,3.5v.41Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

/* ==========================================================================
   Estados: Hover
   ========================================================================== */
.barra-accesibilidad-govco .accessibility-btn:hover::after {
    background-color: var(--accessibility-white);
}

.barra-accesibilidad-govco .icon-contraste:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233366CC'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18V4c4.41 0 8 3.59 8 8s-3.59 8-8 8z'/%3E%3C/svg%3E");
}

.barra-accesibilidad-govco .icon-reducir:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233366CC'%3E%3Cpath d='M19 13H5v-2h14v2z'/%3E%3C/svg%3E");
}

.barra-accesibilidad-govco .icon-aumentar:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233366CC'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}

.barra-accesibilidad-govco .icon-centro-relevo:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15' fill='%233366CC'%3E%3Cpath d='M3.53,5.48c-.29.01-.45.35-.29.58.09.13.69.42.86.5.96.47,1.99.82,3.01,1.13.11.9,1.25,1.24,1.81.51.7-.93-.53-2.11-1.42-1.4-.08.06-.14.2-.25.17-.93-.3-1.87-.61-2.76-1.03-.26-.12-.58-.35-.83-.44-.05-.02-.09-.03-.14-.03Z'/%3E%3Cpath d='M21.58,10.4c-.1,1.89-1.57,3.48-3.47,3.68-4.67.04-9.34.04-14.01,0-3.17-.34-4.82-4.14-2.81-6.65.12-.15.21-.3.43-.18.99.64,2.04,1.22,3.15,1.63.33.12.69.21,1,.34.38.16.72.51,1.08.74.49.31.86.39,1.38.58.83.31,1.37.96,1.92,1.62.22.27.61.94,1.04.83.1-.03.19-.15.21-.25.05-.41-.44-1.03-.65-1.38-.17-.29-.52-.89-.47-1.22.04-.23.51-.06.65-.01.78.27,2,1.09,2.79,1.06.4-.02.71-.24.4-.63-.48-.62-1.67-1.1-2.32-1.57-.12-.09-.29-.2-.26-.37,1.01-.01,2.01.18,3.01.27.36.03,1.19.11,1.4-.28s-.33-.57-.61-.67c-1.06-.39-2.35-.44-3.36-.86-.08-.03-.27-.11-.27-.2.01-.1.15-.14.24-.18.79-.31,1.8-.4,2.6-.71.22-.09.64-.33.52-.63-.11-.26-.79-.26-1.03-.25-.93,0-1.95.08-2.88.02-.27-.02-.64-.03-.38-.36.24-.31.68-.61.96-.92s.85-1.22.54-1.63c-.28-.37-.64.18-.84.36-.72.66-1.54,1.29-2.32,1.88-.36.27-1.4,1.08-1.83,1.07-.4-.01-1.28-.31-1.68-.46-.14-.05-.52-.18-.62-.25-.2-.15.06-.51.15-.67,1.28-2.25,3.83-3.51,6.41-3.19,2.8.35,5.11,2.56,5.54,5.35.06.04.11,0,.17,0,.54,0,1,.01,1.52.18,1.52.49,2.61,1.91,2.7,3.5v.41Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Estados: Focus (Accesibilidad por teclado)
   ========================================================================== */
.barra-accesibilidad-govco .accessibility-btn:focus {
    outline: none;
}

.barra-accesibilidad-govco .accessibility-btn:focus-visible {
    outline: none;
}

.barra-accesibilidad-govco .accessibility-btn:focus-visible::after {
    outline: 2px solid var(--accessibility-black);
    outline-offset: 2px;
}

.barra-accesibilidad-govco .icon-contraste:focus-visible::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233366CC'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18V4c4.41 0 8 3.59 8 8s-3.59 8-8 8z'/%3E%3C/svg%3E");
}

.barra-accesibilidad-govco .icon-reducir:focus-visible::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233366CC'%3E%3Cpath d='M19 13H5v-2h14v2z'/%3E%3C/svg%3E");
}

.barra-accesibilidad-govco .icon-aumentar:focus-visible::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233366CC'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}

.barra-accesibilidad-govco .icon-centro-relevo:focus-visible::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15' fill='%233366CC'%3E%3Cpath d='M3.53,5.48c-.29.01-.45.35-.29.58.09.13.69.42.86.5.96.47,1.99.82,3.01,1.13.11.9,1.25,1.24,1.81.51.7-.93-.53-2.11-1.42-1.4-.08.06-.14.2-.25.17-.93-.3-1.87-.61-2.76-1.03-.26-.12-.58-.35-.83-.44-.05-.02-.09-.03-.14-.03Z'/%3E%3Cpath d='M21.58,10.4c-.1,1.89-1.57,3.48-3.47,3.68-4.67.04-9.34.04-14.01,0-3.17-.34-4.82-4.14-2.81-6.65.12-.15.21-.3.43-.18.99.64,2.04,1.22,3.15,1.63.33.12.69.21,1,.34.38.16.72.51,1.08.74.49.31.86.39,1.38.58.83.31,1.37.96,1.92,1.62.22.27.61.94,1.04.83.1-.03.19-.15.21-.25.05-.41-.44-1.03-.65-1.38-.17-.29-.52-.89-.47-1.22.04-.23.51-.06.65-.01.78.27,2,1.09,2.79,1.06.4-.02.71-.24.4-.63-.48-.62-1.67-1.1-2.32-1.57-.12-.09-.29-.2-.26-.37,1.01-.01,2.01.18,3.01.27.36.03,1.19.11,1.4-.28s-.33-.57-.61-.67c-1.06-.39-2.35-.44-3.36-.86-.08-.03-.27-.11-.27-.2.01-.1.15-.14.24-.18.79-.31,1.8-.4,2.6-.71.22-.09.64-.33.52-.63-.11-.26-.79-.26-1.03-.25-.93,0-1.95.08-2.88.02-.27-.02-.64-.03-.38-.36.24-.31.68-.61.96-.92s.85-1.22.54-1.63c-.28-.37-.64.18-.84.36-.72.66-1.54,1.29-2.32,1.88-.36.27-1.4,1.08-1.83,1.07-.4-.01-1.28-.31-1.68-.46-.14-.05-.52-.18-.62-.25-.2-.15.06-.51.15-.67,1.28-2.25,3.83-3.51,6.41-3.19,2.8.35,5.11,2.56,5.54,5.35.06.04.11,0,.17,0,.54,0,1,.01,1.52.18,1.52.49,2.61,1.91,2.7,3.5v.41Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Estados: Activo/Seleccionado
   ========================================================================== */
.barra-accesibilidad-govco .accessibility-btn.is-active {
    background-color: var(--accessibility-secondary);
}

.barra-accesibilidad-govco .accessibility-btn.is-active::after {
    background-color: var(--accessibility-white);
}

.barra-accesibilidad-govco .icon-contraste.is-active::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233366CC'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18V4c4.41 0 8 3.59 8 8s-3.59 8-8 8z'/%3E%3C/svg%3E");
}

.barra-accesibilidad-govco .icon-reducir.is-active::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233366CC'%3E%3Cpath d='M19 13H5v-2h14v2z'/%3E%3C/svg%3E");
}

.barra-accesibilidad-govco .icon-aumentar.is-active::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233366CC'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Tooltips
   ========================================================================== */
.barra-accesibilidad-govco .accessibility-tooltip {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    width: var(--accessibility-tooltip-width);
    height: var(--accessibility-btn-size);
    padding: 5px 0 5px 12px;
    background-color: var(--accessibility-secondary);
    color: var(--accessibility-white);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    border-radius: var(--accessibility-border-radius) 0 0 var(--accessibility-border-radius);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--accessibility-transition), visibility var(--accessibility-transition);
}

/* Mostrar tooltip en hover */
.barra-accesibilidad-govco .accessibility-btn:hover  {
    background-color: var(--accessibility-secondary);
}

.barra-accesibilidad-govco .accessibility-btn:hover .accessibility-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Mostrar tooltip en focus */
.barra-accesibilidad-govco .accessibility-btn:focus-visible .accessibility-tooltip {
    opacity: 1;
    visibility: visible;
    outline: 2px solid var(--accessibility-black);
    outline-offset: 2px;
}

/* Ocultar tooltip cuando está activo */
.barra-accesibilidad-govco .accessibility-btn.is-active .accessibility-tooltip {
    display: none;
}

/* ==========================================================================
   Modo Alto Contraste - Estilos Globales
   ========================================================================== */
body.high-contrast-mode {
    background-color: var(--accessibility-black) !important;
    color: var(--accessibility-white) !important;
}

body.high-contrast-mode * {
    background-color: inherit;
    color: inherit;
    border-color: var(--accessibility-white) !important;
}

body.high-contrast-mode a {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

body.high-contrast-mode a:hover,
body.high-contrast-mode a:focus {
    color: #00ffff !important;
}

body.high-contrast-mode img {
    filter: grayscale(100%) contrast(120%);
}

body.high-contrast-mode button,
body.high-contrast-mode input,
body.high-contrast-mode select,
body.high-contrast-mode textarea {
    background-color: var(--accessibility-black) !important;
    color: var(--accessibility-white) !important;
    border: 2px solid var(--accessibility-white) !important;
}

/* Excluir la barra de accesibilidad del modo contraste */
body.high-contrast-mode .barra-accesibilidad-govco,
body.high-contrast-mode .barra-accesibilidad-govco * {
    background-color: revert;
    color: revert;
    border-color: revert;
}

body.high-contrast-mode .barra-accesibilidad-govco {
    background-color: var(--accessibility-primary) !important;
}

body.high-contrast-mode .barra-accesibilidad-govco .accessibility-btn::after {
    background-color: var(--accessibility-white) !important;
}

body.high-contrast-mode .barra-accesibilidad-govco .accessibility-tooltip {
    background-color: var(--accessibility-secondary) !important;
    color: var(--accessibility-white) !important;
}

/* ==========================================================================
   Clases de Tamaño de Fuente
   ========================================================================== */
body.font-size-increased-1 {
    font-size: calc(1em + 2px);
}

body.font-size-increased-2 {
    font-size: calc(1em + 4px);
}

body.font-size-increased-3 {
    font-size: calc(1em + 6px);
}

body.font-size-increased-4 {
    font-size: calc(1em + 8px);
}

body.font-size-decreased-1 {
    font-size: calc(1em - 2px);
}

body.font-size-decreased-2 {
    font-size: calc(1em - 4px);
}

/* ==========================================================================
   Responsive - Dispositivos Móviles
   ========================================================================== */
@media screen and (max-width: 768px) {
    .barra-accesibilidad-govco {
        top: auto;
        bottom: 20px;
        right: 10px;
    }

    .barra-accesibilidad-govco .accessibility-tooltip {
        display: none !important;
    }
}

/* Soporte para zoom hasta 400% */
@media screen and (max-width: 320px) {
    .barra-accesibilidad-govco {
        width: 40px;
        height: auto;
        padding: 8px 0 12px;
    }

    .barra-accesibilidad-govco .accessibility-btn {
        width: 40px;
        height: 36px;
    }

    .barra-accesibilidad-govco .accessibility-btn::after {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   Preferencias de Usuario - Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .barra-accesibilidad-govco .accessibility-btn,
    .barra-accesibilidad-govco .accessibility-btn::after,
    .barra-accesibilidad-govco .accessibility-tooltip {
        transition: none;
    }
}

/* ==========================================================================
   Print - Ocultar en impresión
   ========================================================================== */
@media print {
    .barra-accesibilidad-govco {
        display: none !important;
    }
}