/* ============================================================
   BJINFORMATICA SERVICIOS — Módulo de cumplimiento
   Ley N° 21.719 (Protección de Datos Personales, Chile)
   Banner de cookies · Centro de preferencias · Modales legales
   Paleta alineada al sitio: azul corporativo #1983ca
   ============================================================ */

:root {
     --bj-azul: #1983ca;
     --bj-azul-hover: #146aa6;
     --bj-texto: #333333;
     --bj-texto-suave: #666666;
     --bj-borde: #e2e2e2;
     --bj-fondo: #ffffff;
}

/* Salvaguarda: respeta el atributo hidden de HTML5 */
[hidden] { display: none !important; }

/* ------------------------------------------------------------
   1) AVISO DE COOKIES (banner inferior fijo)
------------------------------------------------------------ */
.cookie-banner {
     position: fixed;
     left: 0; right: 0; bottom: 0;
     z-index: 9999;
     background: var(--bj-fondo);
     border-top: 3px solid var(--bj-azul);
     box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
     padding: 16px 20px;
}
.cookie-banner:not([hidden]) { animation: bj-slide-up .35s ease both; }
@keyframes bj-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.cookie-banner__inner {
     max-width: 1100px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     gap: 18px;
     flex-wrap: wrap;
}
.cookie-banner__text { flex: 1 1 420px; }
.cookie-banner__text h2 { font-size: 17px; margin: 0 0 6px; color: #1c1c1c; }
.cookie-banner__text p { font-size: 14px; line-height: 1.5; color: var(--bj-texto); margin: 0; }
.cookie-banner__text a { color: var(--bj-azul); text-decoration: underline; }

.cookie-banner__actions {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-left: auto;
}

/* "Rechazar" y "Aceptar" tienen la misma jerarquía visual (sin dark patterns) */
.btn-cookie {
     padding: 10px 20px;
     font-size: 15px;
     font-family: inherit;
     border-radius: 4px;
     border: 1px solid transparent;
     cursor: pointer;
     transition: background-color .25s, color .25s, border-color .25s;
}
.btn-cookie--primary { background: var(--bj-azul); color: #fff; border-color: var(--bj-azul); }
.btn-cookie--primary:hover { background: var(--bj-azul-hover); border-color: var(--bj-azul-hover); }
.btn-cookie--ghost { background: #fff; color: var(--bj-texto); border-color: #9a9a9a; }
.btn-cookie--ghost:hover { color: var(--bj-azul); border-color: var(--bj-azul); }
.btn-cookie:focus-visible { outline: 3px solid rgba(25, 131, 202, .4); outline-offset: 2px; }

/* ------------------------------------------------------------
   2) MODALES (preferencias + políticas legales)
------------------------------------------------------------ */
.bj-modal {
     position: fixed;
     inset: 0;
     z-index: 10000;
     background: rgba(0, 0, 0, .6);
     padding: 20px;
     overflow-y: auto;
}
.bj-modal:not([hidden]) { display: flex; align-items: flex-start; justify-content: center; }

.bj-modal__box {
     position: relative;
     background: var(--bj-fondo);
     width: 100%;
     max-width: 560px;
     max-height: 85vh;
     overflow-y: auto;
     border-radius: 8px;
     box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
     padding: 26px 28px;
     margin: auto 0;
     animation: bj-fade .25s ease both;
}
@keyframes bj-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.bj-modal__box--legal { max-width: 780px; }
.bj-modal__box h2 { font-size: 20px; margin: 0 0 12px; color: #1c1c1c; padding-right: 30px; }
.bj-modal__intro { font-size: 14px; color: var(--bj-texto-suave); margin-bottom: 16px; }

.bj-modal__close {
     position: absolute;
     top: 10px; right: 12px;
     background: none; border: none;
     font-size: 28px; line-height: 1;
     color: var(--bj-texto-suave);
     cursor: pointer;
}
.bj-modal__close:hover { color: #000; }

.bj-modal__actions {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
     flex-wrap: wrap;
     margin-top: 18px;
}

/* Categorías de cookies */
.cookie-cat {
     border: 1px solid var(--bj-borde);
     border-left: 4px solid var(--bj-azul);
     border-radius: 6px;
     padding: 12px 14px;
     margin-bottom: 12px;
}
.cookie-cat__head { display: flex; align-items: center; gap: 12px; }
.cookie-cat__head h3 { font-size: 16px; margin: 0; color: #1c1c1c; }
.cookie-cat__head small { font-weight: normal; color: var(--bj-texto-suave); }
.cookie-cat p { font-size: 13.5px; color: #555; margin: 8px 0 0; }

/* Interruptores (switches) accesibles por teclado */
.switch { position: relative; display: inline-block; width: 46px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
     position: absolute; inset: 0;
     background: #c1c1c1;
     border-radius: 24px;
     transition: background-color .25s;
}
.switch .slider::before {
     content: "";
     position: absolute;
     width: 18px; height: 18px;
     left: 3px; top: 3px;
     background: #fff;
     border-radius: 50%;
     transition: transform .25s;
}
.switch input:checked + .slider { background: var(--bj-azul); }
.switch input:checked + .slider::before { transform: translateX(22px); }
.switch input:disabled + .slider { opacity: .55; cursor: not-allowed; }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(25, 131, 202, .35); }

/* ------------------------------------------------------------
   3) CONTENIDO LEGAL
------------------------------------------------------------ */
.legal-meta {
     font-size: 12.5px; color: var(--bj-texto-suave);
     border-bottom: 1px solid #eee;
     padding-bottom: 10px; margin: 0 0 8px;
}
.legal-content h3 { font-size: 16px; margin: 18px 0 6px; color: #1c1c1c; }
.legal-content p { font-size: 14px; line-height: 1.6; color: var(--bj-texto); margin: 0 0 8px; }
.legal-content ul { margin: 0 0 10px 20px; }
.legal-content li { font-size: 14px; line-height: 1.6; color: var(--bj-texto); }

.cookie-table-wrap { overflow-x: auto; margin: 8px 0 12px; }
.cookie-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cookie-table th, .cookie-table td {
     border: 1px solid #ddd; padding: 8px;
     text-align: left; vertical-align: top;
}
.cookie-table th { background: #f2f6f9; }

/* ------------------------------------------------------------
   4) BOTÓN FLOTANTE (revocar/configurar en cualquier momento)
------------------------------------------------------------ */
.cookie-fab {
     position: fixed;
     right: 18px; bottom: 18px;
     z-index: 9998;
     width: 46px; height: 46px;
     border-radius: 50%;
     border: none;
     background: var(--bj-azul);
     color: #fff;
     font-size: 20px;
     box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
     cursor: pointer;
     transition: transform .2s, background-color .2s;
}
.cookie-fab:hover { background: var(--bj-azul-hover); transform: translateY(-2px); }
.cookie-fab:focus-visible { outline: 3px solid rgba(25, 131, 202, .4); outline-offset: 2px; }

/* ------------------------------------------------------------
   5) BLOQUE LEGAL DEL PIE DE PÁGINA
------------------------------------------------------------ */
.legal-block {
     text-align: center;
     padding: 16px 0 4px;
     border-bottom: 1px solid rgba(128, 128, 128, .25);
     margin-bottom: 14px;
}
.legal-links {
     list-style: none; margin: 0; padding: 0;
     display: flex; justify-content: center; flex-wrap: wrap;
     gap: 8px 24px;
}
.legal-links a { color: inherit; opacity: .85; font-size: 13.5px; text-decoration: none; }
.legal-links a:hover { opacity: 1; text-decoration: underline; }
.legal-id { font-size: 12px; opacity: .7; margin: 8px 0 0; }

/* ------------------------------------------------------------
   6) RESPONSIVE Y ACCESIBILIDAD
------------------------------------------------------------ */
@media (max-width: 640px) {
     .cookie-banner__actions { width: 100%; margin-left: 0; }
     .cookie-banner__actions .btn-cookie { flex: 1 1 100%; }
     .bj-modal__box { padding: 20px 16px; }
     .cookie-fab { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
     .cookie-banner:not([hidden]), .bj-modal__box { animation: none; }
     .switch .slider, .switch .slider::before, .btn-cookie, .cookie-fab { transition: none; }
}