/* ═══════════════════════════════════════════════════════════════════════
   SISCON — Sistema de consentimiento de cookies
   Profesional · accesible · coherente con el UX/UI del sitio
   ═══════════════════════════════════════════════════════════════════════ */

/* Overlay del modal */
.cc-ov{position:fixed;inset:0;background:rgba(10,14,19,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:9998;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.cc-ov.show{opacity:1;visibility:visible}

/* Banner principal (aparece abajo) */
.cc-banner{position:fixed;left:20px;right:20px;bottom:20px;max-width:920px;margin:0 auto;background:#fff;border:1px solid #E5E7EB;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.08);padding:24px 28px;z-index:9997;display:none;animation:cc-up .4s cubic-bezier(.16,1,.3,1)}
.cc-banner.show{display:block}

@keyframes cc-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

.cc-banner-g{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
@media(max-width:760px){.cc-banner-g{grid-template-columns:1fr;gap:16px}}

.cc-banner-t{display:flex;align-items:flex-start;gap:14px}
.cc-banner-icon{font-size:32px;line-height:1;flex-shrink:0}
.cc-banner h2{font-size:16px;font-weight:800;color:#0A0E13;margin:0 0 4px;line-height:1.3}
.cc-banner p{font-size:13.5px;color:#52606D;margin:0;line-height:1.55;max-width:560px}
.cc-banner p a{color:#00B4A0;text-decoration:underline;text-underline-offset:2px}
.cc-banner p a:hover{color:#009688}

.cc-btns{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:760px){.cc-btns{width:100%}.cc-btns button{flex:1;min-width:120px}}

.cc-btn{font-family:inherit;font-size:13px;font-weight:600;padding:11px 18px;border-radius:100px;cursor:pointer;border:none;transition:all .2s ease;white-space:nowrap}
.cc-btn-p{background:#0A0E13;color:#fff}
.cc-btn-p:hover{background:#00B4A0;transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,180,160,.3)}
.cc-btn-s{background:#F3F4F6;color:#0A0E13;border:1px solid #E5E7EB}
.cc-btn-s:hover{background:#E5E7EB}
.cc-btn-t{background:transparent;color:#52606D;border:1px solid #E5E7EB}
.cc-btn-t:hover{background:#F3F4F6;color:#0A0E13}

/* Modal de preferencias detalladas */
.cc-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);width:calc(100% - 40px);max-width:560px;max-height:calc(100vh - 40px);background:#fff;border-radius:16px;box-shadow:0 40px 80px rgba(0,0,0,.25);z-index:9999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease,transform .25s ease}
.cc-modal.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}

.cc-modal-h{padding:24px 28px 16px;border-bottom:1px solid #F3F4F6;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-shrink:0}
.cc-modal-h h2{font-size:20px;font-weight:800;color:#0A0E13;margin:0 0 4px;line-height:1.3}
.cc-modal-h p{font-size:13px;color:#52606D;margin:0;line-height:1.5}
.cc-modal-x{background:none;border:none;font-size:24px;color:#9AA5B1;cursor:pointer;padding:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;transition:all .2s ease}
.cc-modal-x:hover{background:#F3F4F6;color:#0A0E13}

.cc-modal-b{padding:20px 28px;overflow-y:auto;flex:1}

/* Categorías de cookies */
.cc-cat{padding:16px 0;border-bottom:1px solid #F3F4F6}
.cc-cat:last-child{border-bottom:none}
.cc-cat-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.cc-cat-h h3{font-size:14.5px;font-weight:700;color:#0A0E13;margin:0;display:flex;align-items:center;gap:8px}
.cc-cat-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;background:#E5F7F5;color:#009688;text-transform:uppercase;letter-spacing:.5px}
.cc-cat p{font-size:12.5px;color:#52606D;margin:0;line-height:1.55}

/* Switch toggle */
.cc-sw{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.cc-sw input{opacity:0;width:0;height:0}
.cc-sw-slider{position:absolute;cursor:pointer;inset:0;background:#CBD2D9;border-radius:24px;transition:.25s}
.cc-sw-slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.cc-sw input:checked + .cc-sw-slider{background:#00B4A0}
.cc-sw input:checked + .cc-sw-slider:before{transform:translateX(18px)}
.cc-sw input:disabled + .cc-sw-slider{background:#00B4A0;opacity:.55;cursor:not-allowed}
.cc-sw input:focus-visible + .cc-sw-slider{box-shadow:0 0 0 3px rgba(0,180,160,.25)}

.cc-modal-f{padding:16px 28px 24px;border-top:1px solid #F3F4F6;display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
.cc-modal-f .cc-btn{flex:1;min-width:140px}

/* Botón flotante (FAB) para reabrir preferencias */
.cc-fab{position:fixed;bottom:20px;left:20px;width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid #E5E7EB;box-shadow:0 8px 20px rgba(0,0,0,.12);cursor:pointer;z-index:9990;display:none;align-items:center;justify-content:center;font-size:22px;line-height:1;padding:0;transition:all .2s ease}
.cc-fab.show{display:flex;animation:cc-fab-in .4s ease}
.cc-fab:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.16);border-color:#00B4A0}
@keyframes cc-fab-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:760px){
  .cc-fab{width:42px;height:42px;font-size:18px;bottom:16px;left:16px}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .cc-banner,.cc-modal,.cc-fab,.cc-btn,.cc-sw-slider,.cc-sw-slider:before{animation:none !important;transition:none !important}
}