:root {
  /* Paleta ------------------------------------------------------------- */
  --rojo:      #DA291C;   /* Marca. Nunca para inclinar una decisión.      */
  --rojo-osc:  #B31F14;
  --rojo-suave:#FDECEA;
  --tinta:     #14161A;   /* Botones de decisión (idénticos entre sí)      */
  --tinta-2:   #2B2F36;
  --pizarra:   #5A6472;
  --linea:     #E3E6EA;
  --linea-2:   #EFF1F4;
  --niebla:    #F6F7F9;
  --papel:     #FFFFFF;
  --verde:     #0E7A55;
  --ambar:     #8A6100;

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r-card: 16px;
  --r-btn: 10px;
  --sombra: 0 1px 2px rgba(20,22,26,.04), 0 12px 32px rgba(20,22,26,.14), 0 32px 64px rgba(20,22,26,.08);
}

/* Disparador permanente del pie: obligatorio para revocar el consentimiento */
.pie-cookies {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: inherit !important;
  color: #e3dede !important;
  text-decoration: none !important;
  box-shadow: none !important;
  display: inline-block !important;
  text-align: left !important;
}
.pie-cookies:hover {
  color: var(--rojo, #DA291C) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ===========================================================================
   CAPA 1 — BANNER
   =========================================================================== */
.velo {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(20,22,26,.38) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .28s ease !important;
  z-index: 99990 !important;
}
.velo.visible { opacity: 1 !important; }
.velo.bloqueante { pointer-events: auto !important; }

.banner {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 99999 !important;
  padding: 0 16px 16px !important;
  transform: translateY(120%) !important;
  transition: transform .38s cubic-bezier(.22,1,.36,1) !important;
  box-sizing: border-box !important;
}
.banner.visible { transform: translateY(0) !important; }
.banner[hidden] { display: none !important; }

.banner-caja {
  max-width: 1120px !important;
  margin: 0 auto !important;
  background: #FFFFFF !important;
  border: 1px solid var(--linea) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--sombra) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.filete {
  height: 4px !important;
  background: var(--rojo) !important;
  width: 100% !important;
}

.banner-cuerpo {
  padding: 20px 24px 22px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 376px) !important;
  gap: 28px !important;
  align-items: start !important;
  box-sizing: border-box !important;
}
.banner h2 {
  margin: 0 0 8px !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: #14161A !important;
  line-height: 1.2 !important;
}
.banner p {
  margin: 0 0 6px !important;
  font-size: 14.5px !important;
  color: #2B2F36 !important;
  max-width: 74ch !important;
  line-height: 1.5 !important;
}
.banner p.legal {
  font-size: 13px !important;
  color: var(--pizarra) !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}
.banner a {
  color: #14161A !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: var(--rojo) !important;
  text-decoration-thickness: 1.5px !important;
}
.banner a:hover {
  color: var(--rojo) !important;
}

/* --- Botonera: los dos botones de decisión son gemelos exactos ---------- */
.acciones {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.acciones .btn-config {
  grid-column: 1 / -1 !important;
}

/* --- REGLAS DE BOTONES DE ALTA ESPECIFICIDAD (#banner .btn & #panel .btn) --- */
#banner .btn, #panel .btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  text-transform: none !important;
  text-decoration: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

#banner .btn:focus-visible, #panel .btn:focus-visible {
  outline: 3px solid #DA291C !important;
  outline-offset: 2px !important;
}

/* Gemelos: idéntico fondo, borde, tipografía y contraste (#14161A) */
#banner .btn-decision, #panel .btn-decision {
  background-color: #14161A !important;
  background: #14161A !important;
  color: #FFFFFF !important;
  border: 1.5px solid #14161A !important;
}
#banner .btn-decision:hover, #panel .btn-decision:hover {
  background-color: #000000 !important;
  background: #000000 !important;
  border-color: #000000 !important;
  color: #FFFFFF !important;
}

#banner .btn-config, #panel .btn-config {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  color: #14161A !important;
  border: 1.5px solid #E3E6EA !important;
}
#banner .btn-config:hover, #panel .btn-config:hover {
  border-color: #14161A !important;
  background-color: #F6F7F9 !important;
  background: #F6F7F9 !important;
  color: #14161A !important;
}

/* Rojo = confirmar la configuración propia del usuario */
#banner .btn-guardar, #panel .btn-guardar {
  background-color: #DA291C !important;
  background: #DA291C !important;
  color: #FFFFFF !important;
  border: 1.5px solid #DA291C !important;
}
#banner .btn-guardar:hover, #panel .btn-guardar:hover {
  background-color: #B31F14 !important;
  background: #B31F14 !important;
  border-color: #B31F14 !important;
  color: #FFFFFF !important;
}

#banner .btn-texto, #panel .btn-texto {
  background: none !important;
  border: 1.5px solid transparent !important;
  color: #5A6472 !important;
  font-size: 14px !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
}
#banner .btn-texto:hover, #panel .btn-texto:hover {
  color: #DA291C !important;
  text-decoration: underline !important;
}

@media (max-width: 900px) {
  .banner-cuerpo { grid-template-columns: 1fr !important; gap: 20px !important; padding: 20px !important; }
  .banner h2 { font-size: 18px !important; }
}
@media (max-width: 520px) {
  .banner { padding: 0 8px 8px !important; }
  .banner p { font-size: 14px !important; }
  #banner .btn, #panel .btn { font-size: 14.5px !important; padding: 12px 10px !important; }
}
@media (max-width: 359px) {
  .acciones { grid-template-columns: 1fr !important; }
}

/* ===========================================================================
   CAPA 2 — CENTRO DE PREFERENCIAS
   =========================================================================== */
.panel {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}
.panel.abierto { display: flex !important; }
.panel-caja {
  width: min(760px, 100%) !important;
  max-height: min(88vh, 860px) !important;
  background: #FFFFFF !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--sombra) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: subir .3s cubic-bezier(.22,1,.36,1) !important;
  box-sizing: border-box !important;
}
@keyframes subir {
  from { opacity: 0; transform: translateY(16px) scale(.99); }
  to { opacity: 1; transform: none; }
}

.panel-cab {
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid var(--linea) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
.panel-cab h2 { margin: 0 0 4px !important; font-size: 20px !important; letter-spacing: -.02em !important; color: #14161A !important; }
.panel-cab p { margin: 0 !important; font-size: 13.5px !important; color: var(--pizarra) !important; max-width: 56ch !important; }
.cerrar {
  flex: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  border: 1.5px solid var(--linea) !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  color: var(--pizarra) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.cerrar:hover { border-color: #14161A !important; color: #14161A !important; }
.cerrar:focus-visible { outline: 3px solid var(--rojo) !important; outline-offset: 2px !important; }

.panel-cuerpo { overflow-y: auto !important; padding: 4px 24px 20px !important; flex: 1 !important; }

.responsable {
  margin: 16px 0 20px !important;
  padding: 14px 16px !important;
  background: var(--niebla) !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
  color: var(--pizarra) !important;
  line-height: 1.6 !important;
}
.responsable b { color: var(--tinta-2) !important; font-weight: 600 !important; }

.cat { border: 1px solid var(--linea) !important; border-radius: 13px !important; margin-bottom: 10px !important; overflow: hidden !important; }
.cat-cab { padding: 16px 18px !important; display: grid !important; grid-template-columns: 1fr auto !important; gap: 16px !important; align-items: start !important; }
.cat-tit { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; margin-bottom: 6px !important; }
.cat-tit h3 { margin: 0 !important; font-size: 15.5px !important; letter-spacing: -.01em !important; color: #14161A !important; }
.cat-desc { margin: 0 !important; font-size: 13.5px !important; color: var(--tinta-2) !important; max-width: 60ch !important; }

.chip {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}
.chip-fijo { background: var(--niebla) !important; color: var(--pizarra) !important; border: 1px solid var(--linea) !important; }
.chip-on { background: #E7F5EF !important; color: var(--verde) !important; }
.chip-off { background: var(--rojo-suave) !important; color: var(--rojo-osc) !important; }

.sw {
  flex: none !important;
  width: 52px !important;
  height: 30px !important;
  border-radius: 999px !important;
  border: none !important;
  position: relative !important;
  background: #C9CFD8 !important;
  cursor: pointer !important;
  transition: background .18s !important;
  padding: 0 !important;
}
.sw::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: transform .18s !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.28) !important;
}
.sw[aria-checked="true"] { background: var(--rojo) !important; }
.sw[aria-checked="true"]::after { transform: translateX(22px) !important; }
.sw[disabled] { cursor: not-allowed !important; opacity: .42 !important; }
.sw[disabled][aria-checked="true"] { background: var(--rojo) !important; }
.sw:focus-visible { outline: 3px solid var(--rojo) !important; outline-offset: 3px !important; }

.detalle-btn {
  background: none !important;
  border: 0 !important;
  padding: 10px 18px 14px !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--pizarra) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.detalle-btn:hover { color: var(--rojo) !important; }
.detalle-btn:focus-visible { outline: 3px solid var(--rojo) !important; outline-offset: -2px !important; border-radius: 6px !important; }
.detalle-btn .flecha { transition: transform .18s !important; display: inline-block !important; font-size: 10px !important; }
.detalle-btn[aria-expanded="true"] .flecha { transform: rotate(90deg) !important; }

.detalle { display: none; padding: 0 18px 18px !important; border-top: 1px solid var(--linea-2) !important; margin-top: 2px !important; }
.detalle.abierto { display: block !important; }
.detalle dl { margin: 14px 0 0 !important; display: grid !important; grid-template-columns: auto 1fr !important; gap: 8px 18px !important; font-size: 12.5px !important; }
.detalle dt { color: var(--pizarra) !important; font-weight: 600 !important; white-space: nowrap !important; }
.detalle dd { margin: 0 !important; color: var(--tinta-2) !important; }
.pend { background: #FFF6DF !important; color: var(--ambar) !important; padding: 1px 5px !important; border-radius: 4px !important; font-weight: 600 !important; font-size: 11.5px !important; }

.constancia {
  margin-top: 18px !important;
  border: 1px dashed var(--linea) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  background: var(--niebla) !important;
}
.constancia h4 {
  margin: 0 0 10px !important;
  font-size: 11px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--pizarra) !important;
}
.constancia dl {
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 6px 16px !important;
  font-size: 12px !important;
  font-family: var(--mono) !important;
}
.constancia dt { color: var(--pizarra) !important; }
.constancia dd { margin: 0 !important; color: var(--tinta-2) !important; word-break: break-all !important; }

.panel-pie {
  border-top: 1px solid var(--linea) !important;
  padding: 16px 24px !important;
  background: #FFFFFF !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.panel-pie .btn-guardar { grid-column: 1 / -1 !important; }
.panel-pie .retirar { grid-column: 1 / -1 !important; justify-self: center !important; margin-top: 2px !important; }

@media (max-width: 560px) {
  .panel { padding: 0 !important; align-items: flex-end !important; }
  .panel-caja { max-height: 94vh !important; border-radius: 18px 18px 0 0 !important; width: 100% !important; }
  .cat-cab { grid-template-columns: 1fr auto !important; gap: 12px !important; }
  .detalle dl { grid-template-columns: 1fr !important; gap: 2px 0 !important; }
  .detalle dt { margin-top: 8px !important; }
}

.aviso {
  position: fixed !important;
  left: 50% !important;
  bottom: 16px !important;
  transform: translate(-50%, 120%) !important;
  visibility: hidden !important;
  background: #14161A !important;
  color: #FFFFFF !important;
  padding: 13px 20px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  z-index: 9999999 !important;
  box-shadow: var(--sombra) !important;
  max-width: calc(100% - 32px) !important;
  transition: transform .32s cubic-bezier(.22,1,.36,1) !important;
}
.aviso.visible { transform: translate(-50%, 0) !important; visibility: visible !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}