/* === MENÚ DE POLÍTICAS (Etiketten) === */

.policies-menu .list-group-item {
  border: 0;
  border-left: 4px solid transparent;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: all 0.25s ease;
  color: #212529; /* texto oscuro base */
  background-color: #fff;
}

/* Hover: fondo suave */
.policies-menu .list-group-item:hover {
  background-color: rgba(10,163,231,0.08);
  border-left-color: rgba(10,163,231,0.4);
}

/* ACTIVO (clic) */
.policies-menu .list-group-item.active,
.policies-menu .list-group-item.is-active {
  background: linear-gradient(90deg, rgba(10,163,231,0.18) 0%, rgba(10,163,231,0.08) 100%);
  border-left-color: #84BD00;
  color: #0a0a0a !important;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(10,163,231,0.25);
  transform: translateX(3px);
}

/* Ícono activo en color corporativo */
.policies-menu .list-group-item.active i,
.policies-menu .list-group-item.is-active i {
  color: #0aa3e7 !important;
}

/* Transición general */
.policies-menu .list-group-item,
.policies-menu .list-group-item * {
  transition: all 0.25s ease;
}

/* Dark mode amigable (opcional) */
@media (prefers-color-scheme: dark) {

  .policies-menu .list-group-item:hover { background-color: rgba(10, 231, 95, 0.2); }
  .policies-menu .list-group-item.active,
  .policies-menu .list-group-item.is-active {
    background-color: rgba(10, 231, 65, 0.3);
    color: #fff;
  }
}







/* ===== Presentación (fullscreen) ===== */
#policies.policies-present {
  position: fixed;
  inset: 0;
  background: #0e1116;
  z-index: 1090;
  overflow: auto;
  padding: 2rem 0 1rem;
}

#policies.policies-present .policy-panel.card{
  margin: 0 auto;
  width: min(1100px, 92vw);
  max-height: 80vh;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid #e9edf2;
  box-shadow: 0 20px 60px rgba(16,24,40,.24);
  animation: polFade .35s ease;
}

@keyframes polFade {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}

/* Overlay de controles */
.policies-overlay[hidden]{ display:none !important; }
.policies-overlay{
  position: fixed; inset: 0; z-index: 1091;
  pointer-events: none; display: grid; grid-template-rows: auto 1fr;
}
.pol-controls{
  pointer-events: auto;
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  padding:.5rem .75rem;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
.pol-status{ display:grid; grid-template-rows:auto auto auto; gap:.25rem; justify-items:center; color:#e5eef7 }
.pol-dots{ display:flex; gap:.4rem; align-items:center }
.pol-dot{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.25) }
.pol-dot.active{ background:#26d07c }

.pol-progress{ width:320px; max-width:50vw; height:4px; background:rgba(255,255,255,.15); border-radius:999px; overflow:hidden }
#polProgressBar{ height:100%; width:0%; background:#26d07c }

/* Opcional: ocultar barras de scroll dentro del panel en presentación */
#policies.policies-present .policy-panel::-webkit-scrollbar{ display:none }
#policies.policies-present .policy-panel{ scrollbar-width:none }
/* ===== Branding arriba derecha ===== */
.pol-brand{
  position: fixed; top: 18px; right: 18px; z-index: 1092; pointer-events: none;
}
.pol-brand img{
  height: 34px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
  opacity: .95;
}

/* ===== Footer tipo slide ===== */
.pol-footer{
  position: fixed; left:0; right:0; bottom: 0; z-index: 1092;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14,17,22,0) 0%, rgba(14,17,22,.85) 70%);
}
.pol-footer-inner{
  pointer-events: auto;
  margin: 0 auto; width: min(1100px, 92vw);
  display:flex; align-items:center; justify-content:space-between;
  padding: .6rem .9rem .9rem;
  color: #e9eff6;
}
.pol-footer-title{
  font-weight: 700;
  letter-spacing: .2px;
}
#polSlideNo{
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  padding: .2rem .5rem; border-radius: 999px;
}

/* ===== “Marca de agua” en el panel activo ===== */
#policies.policies-present .policy-panel{
  position: relative;
  background: #ffffff;
}
#policies.policies-present .policy-panel::after{
  content:"";
  position: absolute; right: 2rem; bottom: 2rem;
  width: 180px; height: 180px; opacity: .06;
  background: url("img/brand/etiketten-iso-mark.svg") no-repeat center/contain;
  pointer-events: none;
}

/* ===== Transición tipo slide ===== */
@keyframes polSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(.985) }
  to   { opacity: 1; transform: translateY(0)    scale(1) }
}
#policies.policies-present .policy-panel{ animation: polSlideIn .45s cubic-bezier(.2,.7,.2,1) }

/* (Opcional) banda superior sutil bajo el header de la card */
#policies.policies-present .policy-panel .card-body{
  border-radius: 16px;
}



/* === Tokens de marca === */
:root{
  --etk-green-376: #84BD00;        /* Pantone 376 aproximado */
  --etk-green-376-ink: #4A6A00;    /* texto/contorno sobre 376 */
}

/* Aplicar theme claro cuando entrás al modo presentación */
#policies.policies-present{
  /* Fondo blanco con acentos verdes suaves y una grilla ligera */
  --bg-base: #ffffff;
  --bg-spot-1: color-mix(in oklab, var(--etk-green-376) 16%, white);
  --bg-spot-2: color-mix(in oklab, var(--etk-green-376) 10%, white);
  background:
    /* esquina superior derecha */
    radial-gradient(900px 500px at 95% -10%, var(--bg-spot-1), transparent 60%),
    /* esquina inferior izquierda */
    radial-gradient(800px 520px at -10% 110%, var(--bg-spot-2), transparent 55%),
    /* sutil pattern diagonal */
    linear-gradient(180deg, rgb(227, 255, 216), rgba(0,0,0,0)) 0 0/100% 100%,
    repeating-linear-gradient(135deg, rgba(0,0,0,.02) 0 14px, rgba(0,0,0,0) 14px 28px),
    var(--bg-base);
}

/* Card “slide” sobre fondo claro */
#policies.policies-present .policy-panel.card{
  border: 1px solid #E6EAEF;
  box-shadow: 0 24px 80px rgba(26, 43, 12, .12);
  background: #fff;
}


/* Marca de agua (isotipo) más sutil sobre blanco */
#policies.policies-present .policy-panel::after{
  opacity: .08;                     /* antes .06 si querés aún más suave */
  filter: saturate(120%);
}

/* === Overlay claro (controles + footer + brand) === */
.policies-overlay .pol-controls{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  color: #2b2b2b;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.policies-present .btn.btn-light{
  background: #fff; border-color:#DCE3EA; color:#2b2b2b;
}
.policies-present .btn.btn-danger{ background:#EA3A3A; border-color:#EA3A3A; }

.pol-status{ color:#3a3f46; }
.pol-dot{ background: rgba(132,189,0,.25); }
.pol-dot.active{ background: var(--etk-green-376); }

.pol-progress{ background: rgba(132,189,0,.18); }
#polProgressBar{ background: var(--etk-green-376); }

/* Logo (arriba derecha) con halo suave */
.pol-brand img{
  height: 36px;
  filter: drop-shadow(0 3px 10px rgba(74,106,0,.25));
  opacity: .98;
}

/* Logo */
.pol-brand{ position:fixed; top:20px; right:20px; z-index:1092; pointer-events:none; }
.pol-brand img{ height:34px; width:auto; filter:drop-shadow(0 3px 10px rgba(0,0,0,.18)); opacity:.98; }

/* Barra de controles centrada con “reserva” a la derecha */
.policies-overlay .pol-controls{
  max-width: min(1100px, 92vw);
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 96px;   /* reserva para que el botón “Siguiente” no quede bajo el logo */
}

/* Por si acaso, asegura el z-index del botón */
.policies-overlay [data-pol="next"]{ position: relative; z-index: 1093; }

/* Responsive: logo + reserva más chica en pantallas angostas */
@media (max-width: 768px){
  .pol-brand img{ height:28px; }
  .policies-overlay .pol-controls{ padding-right: 68px; }
}


/* Footer tipo slide claro */
.pol-footer{
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 70%);
  border-top: 1px solid rgba(0,0,0,.06);
}
.pol-footer-inner{ color:#2b2b2b; }
#polSlideNo{
  background: rgba(132,189,0,.12);
  border-color: rgba(132,189,0,.28);
  color:#2b2b2b;
}
.pol-footer-title{ color:#2b2b2b; }

/* Opcional: una “onda” verde muy suave al pie del slide */
#policies.policies-present::before{
  content:"";
  position: fixed; left:0; right:0; bottom:-12vw; height: 26vw; z-index:0;
  background:
    radial-gradient(120% 70% at 0% 100%, color-mix(in oklab, var(--etk-green-376) 16%, white) 0%, transparent 60%),
    radial-gradient(80% 60% at 100% 120%, color-mix(in oklab, var(--etk-green-376) 12%, white) 0%, transparent 60%);
  pointer-events:none;
}