/* ===================================================================
   ICO-VIVIENDA.ES · Estilos de páginas legales y banner de cookies
   Ubicación: /public_html/assets/legal.css
   =================================================================== */
:root{
  --brand:#0b2945; --ink:#10233b; --blue:#0c5e8e; --blue-accent:#0b6c93;
  --green:#159b72; --green-deep:#14775b; --mint:#e7f7f0;
  --muted:#5c6c7d; --soft:#f4f8f9; --soft-blue:#eaf4f7; --line:#dfe9ee;
  --line-soft:#e6edf2; --footer:#061d2d; --warn:#fff8e1; --warn-line:#e6b800;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:auto;padding:0 24px}

/* ── Logotipo ──────────────────────────────────────────────────── */
.brand{display:flex;flex-direction:column;line-height:1;white-space:nowrap;font-weight:800;color:var(--brand)}
.brand span{font-size:20px;letter-spacing:-.8px}
.brand b{font-size:10px;letter-spacing:1.5px;color:var(--green);margin-top:5px;font-weight:800}
.brand.inv span{color:#fff}

/* ── Cabecera ──────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.nav{height:74px;display:flex;align-items:center;gap:24px}
.nav nav{display:flex;gap:20px;flex:1;justify-content:center}
.nav nav a{color:#536579;font-size:13px;font-weight:600;transition:color .2s;text-decoration:none}
.nav nav a:hover{color:var(--blue);text-decoration:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blue);color:#fff;border:0;border-radius:10px;padding:14px 20px;
  font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;transition:all .2s;
}
.btn:hover{filter:brightness(.94);text-decoration:none;color:#fff}
.btn.small{padding:10px 15px;font-size:13px}
.btn.ghost{background:var(--soft-blue);color:var(--blue)}
.btn.ghost:hover{background:#dceef3}

/* ── Portada del documento ─────────────────────────────────────── */
.doc-hero{background:linear-gradient(135deg,#f2fbfc,#fff 55%,#eef9f3);padding:56px 0 44px;border-bottom:1px solid var(--line-soft)}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--green);text-transform:uppercase;margin-bottom:12px}
h1{font-size:clamp(30px,4.4vw,44px);line-height:1.08;letter-spacing:-.04em;margin:0 0 14px;color:var(--brand);font-weight:800}
.doc-meta{color:var(--muted);font-size:14px}

/* ── Cuerpo del documento ──────────────────────────────────────── */
.doc{display:grid;grid-template-columns:250px 1fr;gap:52px;padding:52px 0 72px;align-items:start}
.toc{position:sticky;top:98px;border-left:2px solid var(--line);padding-left:18px}
.toc h2{font-size:10.5px;font-weight:800;letter-spacing:1.4px;color:var(--green);text-transform:uppercase;margin:0 0 12px}
.toc a{display:block;color:var(--muted);font-size:13px;padding:5px 0;line-height:1.4}
.toc a:hover{color:var(--blue);text-decoration:none}

.doc-body h2{font-size:23px;color:var(--brand);letter-spacing:-.025em;margin:44px 0 14px;font-weight:800;scroll-margin-top:98px}
.doc-body h2:first-child{margin-top:0}
.doc-body h3{font-size:16.5px;color:var(--brand);margin:26px 0 8px;font-weight:700}
.doc-body p{margin:0 0 14px;color:#3d4f61;font-size:15px}
.doc-body ul,.doc-body ol{margin:0 0 16px;padding-left:22px;color:#3d4f61;font-size:15px}
.doc-body li{margin:7px 0}
.doc-body strong{color:var(--ink);font-weight:700}

table.data{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:14px}
table.data th,table.data td{padding:11px 13px;border:1px solid var(--line);text-align:left;vertical-align:top}
table.data th{background:var(--soft);color:var(--brand);font-weight:700;font-size:12.5px}
table.data td{color:#3d4f61}

.callout{border-radius:0 12px 12px 0;padding:18px 20px;margin:22px 0}
.callout h4{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.callout p{margin:0 0 8px;font-size:14px}
.callout p:last-child{margin:0}
.c-info{background:var(--soft-blue);border-left:4px solid var(--blue)}
.c-info h4{color:var(--blue)}
.c-green{background:var(--mint);border-left:4px solid var(--green)}
.c-green h4{color:var(--green-deep)}
.c-warn{background:var(--warn);border-left:4px solid var(--warn-line)}
.c-warn h4{color:#8a6d00}

/* Dato legal sin completar: imposible de pasar por alto */
.pendiente{
  background:#ffe9a8;color:#7a5c00;font-weight:800;padding:2px 8px;
  border-radius:5px;border:1px dashed #c9a227;font-size:.92em;
}

/* ── Pie ───────────────────────────────────────────────────────── */
footer{background:var(--footer);color:#b7c8d2;padding:52px 0;font-size:13px}
.foot{display:grid;grid-template-columns:1fr 1.5fr .7fr;gap:45px}
.foot b{color:#fff;display:block;margin-bottom:8px}
.foot a{color:#b7c8d2}
.foot a:hover{color:var(--green)}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
.legal-bar{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;opacity:.72}

/* ── Banner de cookies (criterio AEPD) ─────────────────────────── */
#cookieBanner{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;display:none;
  background:#fff;border-top:3px solid var(--green);
  box-shadow:0 -8px 40px rgba(11,41,69,.18);padding:22px 0;
}
#cookieBanner.on{display:block}
.ck{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.ck h3{margin:0 0 7px;font-size:16px;color:var(--brand);font-weight:800}
.ck p{margin:0;font-size:13.5px;color:var(--muted);max-width:660px}
/* Aceptar y rechazar: mismo tamaño, mismo peso visual, mismo nivel */
.ck-actions{display:flex;gap:10px;flex-shrink:0}
.ck-actions button{
  min-width:132px;padding:13px 18px;border-radius:10px;font-weight:700;
  font-size:14px;cursor:pointer;font-family:inherit;border:2px solid var(--blue);
}
.ck-accept{background:var(--blue);color:#fff}
.ck-reject{background:#fff;color:var(--blue)}
.ck-accept:hover,.ck-reject:hover{filter:brightness(.95)}
.ck-config{
  background:transparent;border:0;color:var(--muted);font-size:13px;
  text-decoration:underline;cursor:pointer;font-family:inherit;padding:13px 4px;min-width:auto;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media(max-width:980px){
  .nav nav{display:none}
}
@media(max-width:900px){
  .doc{grid-template-columns:1fr;gap:0}
  .toc{position:static;border-left:0;border-bottom:1px solid var(--line);padding:0 0 20px;margin-bottom:28px}
  .toc a{display:inline-block;margin-right:16px}
  .foot{grid-template-columns:1fr;gap:28px}
  .ck{grid-template-columns:1fr;gap:16px}
  .ck-actions{flex-direction:column-reverse}
  .ck-actions button{width:100%}
  .doc-hero{padding:40px 0 32px}
  table.data{font-size:13px}
  table.data th,table.data td{padding:9px 10px}
}