/* Consentimiento de cookies. Modulo portable del kit.

   No depende del sistema visual del tema: declara sus propias fichas y las
   toma de las del tema con valor de respaldo, asi el mismo archivo entra en
   cualquier re-skin sin tocar una linea.

   De "taberna marinera": la banda es su propio terreno, y toca el marron, que
   en este sistema tiene que aparecer al menos una vez por pagina. La terracota
   #C6693D no rellena ningun boton ni sostiene texto corrido, porque no llega a
   4.5:1; para eso esta --deep. Radio 4px, sin sombras, movimiento 0.55. */

.pc{
  --pc-crema:var(--bg, #F2EAE7);
  --pc-panel:var(--surface, #FCF8F6);
  --pc-tinta:var(--ink, #4E2B17);
  --pc-tinta-2:var(--muted, #6B4A33);
  --pc-bruma:var(--mist, #C9B4A3);
  --pc-terracota:var(--accent, #C6693D);
  --pc-honda:var(--deep, #9E4C27);
  --pc-filete:var(--rule, rgba(198,105,61,.30));
  --pc-filete-osc:var(--rule-on-ink, rgba(198,105,61,.45));
  --pc-display:var(--font-display, system-ui, sans-serif);
  --pc-body:var(--font-body, system-ui, sans-serif);
  --pc-radio:var(--radius-md, 4px);
  --pc-ease:var(--ease, cubic-bezier(.2,.65,.3,1));

  font-family:var(--pc-body);
  font-size:15px;
  line-height:1.6;
}

:where(.pc *, .pc *::before, .pc *::after){ box-sizing:border-box; }
:where(.pc p, .pc h2, .pc ul, .pc li){ margin:0; padding:0; list-style:none; }

/* ---- Primera capa: banda inferior ----
   Franja, no ventana modal: no se secuestra la navegacion para pedir permiso. */

.pc-banda{
  position:fixed; inset:auto 0 0 0; z-index:80;
  background:var(--pc-tinta); color:var(--pc-crema);
  border-top:1px solid var(--pc-filete-osc);
  padding:var(--space-md, 20px) var(--edge, 20px);
}

.pc-banda[hidden]{ display:none; }

@media (prefers-reduced-motion: no-preference){
  .pc-banda{ animation:pc-entra 500ms var(--pc-ease) both; }
}

@keyframes pc-entra{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}

.pc-banda__caja{
  max-width:var(--container, 1240px); margin-inline:auto;
  display:grid; gap:var(--space-md, 20px);
}

@media (min-width: 900px){
  .pc-banda__caja{
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center; gap:var(--space-lg, 48px);
  }
}

.pc-banda__titulo{
  font-family:var(--pc-display); font-weight:700;
  font-size:1.375rem; line-height:1.05;
  color:var(--pc-crema);
}

.pc-banda__texto{
  margin-top:var(--space-sm, 8px);
  color:var(--pc-bruma);
  max-width:66ch;
}

.pc-banda__resp{
  margin-top:6px; font-size:13px; color:var(--pc-bruma);
}

.pc-banda__resp a{ color:var(--pc-crema); text-decoration:underline; text-decoration-color:var(--pc-terracota); text-underline-offset:3px; }

/* Aceptar y rechazar comparten fila, tamano y color. La AEPD pide que
   rechazar este al mismo nivel, no un paso por detras. */
.pc-banda__acciones{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-sm, 8px);
}

/* ---- Controles ---- */

.pc-btn{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:12px 22px;
  border:0; border-radius:var(--pc-radio);
  background:var(--pc-honda); color:var(--pc-crema);
  font:inherit; font-weight:500; line-height:1.2;
  cursor:pointer;
  transition:transform 120ms var(--pc-ease);
}

.pc-btn:active{ transform:translateY(1px); }

/* Secundario del sistema: borde de 1px en el tono de tinta del terreno. */
.pc-btn--filete{
  background:transparent; color:var(--pc-tinta);
  border:1px solid var(--pc-tinta);
}

.pc-enlace{
  appearance:none; border:0; background:none;
  padding:12px 2px; font:inherit; color:inherit;
  text-decoration:underline; text-decoration-color:var(--pc-terracota);
  text-underline-offset:3px; text-decoration-thickness:2px;
  cursor:pointer;
}

.pc-btn:focus-visible,
.pc-enlace:focus-visible,
.pc-grupo__caja input:focus-visible + .pc-marca{
  outline:2px solid var(--pc-terracota); outline-offset:2px;
}

/* ---- Segunda capa: panel de finalidades ----
   Mismas medidas que el dialogo de reserva del tema, para que las dos
   ventanas del sitio se sientan iguales. */

.pc-panel{
  width:min(560px, 100vw - 2rem); max-width:none;
  max-height:min(860px, 100svh - 2rem);
  padding:0; border:0; border-radius:var(--pc-radio);
  background:var(--pc-crema); color:var(--pc-tinta);
  overflow:auto;
}

.pc-panel::backdrop{ background:rgba(78,43,23,.6); }

.pc-panel__cab{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-md, 20px);
  padding:var(--space-md, 20px) var(--space-md, 20px) 14px;
  border-bottom:1px solid var(--pc-filete);
}

.pc-panel__titulo{
  font-family:var(--pc-display); font-weight:700;
  font-size:1.5rem; line-height:1.05;
}

.pc-panel__cerrar{
  appearance:none; border:0; background:none; padding:4px;
  color:var(--pc-tinta); line-height:0; cursor:pointer;
  font-size:1.5rem;
}

.pc-panel__cuerpo{
  padding:14px var(--space-md, 20px);
  display:grid; gap:14px;
}

.pc-panel__pie{
  position:sticky; bottom:0;
  display:flex; flex-wrap:wrap; gap:var(--space-sm, 8px);
  padding:14px var(--space-md, 20px) var(--space-md, 20px);
  background:var(--pc-crema);
  border-top:1px solid var(--pc-filete);
}

.pc-panel__nota{
  flex-basis:100%; font-size:13px; color:var(--pc-tinta-2);
}

.pc-panel__nota a{ color:var(--pc-tinta); text-decoration:underline; text-decoration-color:var(--pc-terracota); text-underline-offset:3px; }

/* Una finalidad por bloque, separadas por filete, que en este sistema es el
   recurso de separacion por defecto, por delante de la tarjeta. */
.pc-grupo{
  padding-bottom:14px;
  border-bottom:1px solid var(--pc-filete);
}

.pc-grupo:last-child{ padding-bottom:0; border-bottom:0; }

.pc-grupo__caja{
  display:flex; align-items:center; gap:12px; cursor:pointer;
}

.pc-grupo__caja input{
  position:absolute; width:1px; height:1px; margin:0; opacity:0;
}

/* Casilla casi recta, como todo el sistema. Sin pastillas. */
.pc-marca{
  flex:0 0 auto; position:relative;
  width:20px; height:20px;
  border:1px solid var(--pc-tinta-2); border-radius:var(--pc-radio);
  background:transparent;
}

.pc-grupo__caja input:checked + .pc-marca{
  border-color:var(--pc-honda); background:var(--pc-honda);
}

.pc-grupo__caja input:checked + .pc-marca::after{
  content:""; position:absolute; inset:5px 5px 6px;
  border:solid var(--pc-crema); border-width:0 0 2px 2px;
  transform:rotate(-45deg);
}

.pc-grupo__caja input:disabled + .pc-marca{
  border-color:var(--pc-bruma); background:var(--pc-bruma);
}

.pc-grupo__nombre{ font-weight:500; }

.pc-grupo__fija{ font-weight:400; font-size:13px; color:var(--pc-tinta-2); }

.pc-grupo__texto,
.pc-grupo__quien{
  margin-top:6px; padding-left:32px; color:var(--pc-tinta-2);
}

.pc-grupo__quien{ font-size:13px; }

/* ---- Hueco de tercero sin permiso ----
   Sustituye al contenido externo mientras no hay consentimiento. El boton lo
   carga solo en esta visita, que es accion inequivoca de la persona. */

.pc-hueco{
  display:grid; gap:var(--space-sm, 8px); justify-items:start;
  padding:var(--space-md, 20px);
  border:1px solid var(--pc-filete); border-radius:var(--pc-radio);
  background:var(--pc-panel); color:var(--pc-tinta);
  font-family:var(--pc-body); font-size:15px;
}

.pc-hueco__texto{ color:var(--pc-tinta-2); max-width:56ch; }

.pc-hueco__acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-sm, 8px); }

/* ---- Tabla de cookies de la politica ----
   Fuente unica: se pinta desde el mismo inventario que usa el bloqueo, para
   que la politica no se desvie de lo que la web carga de verdad. */

.pc-tabla{
  width:100%; border-collapse:collapse;
  margin-top:var(--space-md, 20px);
  font-size:15px; font-variant-numeric:tabular-nums;
}

.pc-tabla caption{
  text-align:left; font-family:var(--pc-display); font-weight:700;
  font-size:1.125rem; margin-bottom:var(--space-sm, 8px);
}

.pc-tabla th,
.pc-tabla td{
  text-align:left; vertical-align:top;
  padding:8px 12px 8px 0;
  border-bottom:1px solid var(--pc-filete);
}

.pc-tabla thead th{ font-weight:500; white-space:nowrap; }

.pc-tabla tbody th{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:14px; font-weight:400;
}

@media (max-width: 767px){
  .pc-tabla thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .pc-tabla tbody tr{ display:grid; gap:2px; padding:12px 0; border-bottom:1px solid var(--pc-filete); }
  .pc-tabla tbody th,
  .pc-tabla tbody td{ border:0; padding:0; }
  .pc-tabla tbody td::before{ content:attr(data-th) ": "; color:var(--pc-tinta-2); }
}

/* Mientras la banda pide permiso, el boton fijo de WhatsApp se aparta: dos
   elementos fijos en el mismo borde se tapan el uno al otro. */
body.pc-preguntando .whatsapp{ display:none; }
