/* ============================================================
   Páginas legales públicas — /legal/*
   ============================================================
   Encima de app.css: hereda los tokens de color y tema. Lo propio es la
   composición de una página de lectura (una columna de ~70 caracteres)
   en vez de la de una aplicación. */

body.legal { display: block; min-height: 100vh; background: var(--fondo); color: var(--fg); }

.legal__cabeza {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
    flex-wrap: wrap; padding: var(--e4) var(--e5);
    background: var(--sup); border-bottom: 1px solid var(--linea);
}
.legal__marca { display: flex; align-items: center; gap: var(--e3); color: inherit; text-decoration: none; }
.legal__marca small { display: block; font-size: var(--t-xs); color: var(--fg-3); }
.legal__logo {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
    background: var(--marca); color: #fff; font-weight: 800; font-size: var(--t-lg);
}
.legal__nav { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; font-size: var(--t-sm); }
.legal__nav a { color: var(--fg-2); text-decoration: none; }
.legal__nav a[aria-current="page"] { color: var(--marca); font-weight: 600; }
.legal__nav a.btn { color: var(--fg); }

.legal__cuerpo { padding: var(--e6) var(--e5); }
.legal__articulo {
    max-width: 760px; margin: 0 auto; padding: var(--e6);
    background: var(--sup); border: 1px solid var(--linea); border-radius: var(--radio-g);
    line-height: 1.65;
}
.legal__articulo h1 { font-size: var(--t-xl); margin: 0 0 var(--e1); }
.legal__articulo h2 { font-size: var(--t-md); font-weight: 700; margin: var(--e6) 0 var(--e2); color: var(--fg); }
.legal__articulo p, .legal__articulo li { font-size: var(--t-md); color: var(--fg-2); }
.legal__articulo ul, .legal__articulo ol { padding-left: 22px; }
.legal__articulo li { margin-bottom: var(--e2); }
.legal__articulo a { color: var(--marca); }
.legal__fecha { font-size: var(--t-xs); color: var(--fg-3); margin-bottom: var(--e5); }

.legal__tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin: var(--e3) 0 var(--e4); }
.legal__tabla th, .legal__tabla td { text-align: left; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linea); vertical-align: top; }
.legal__tabla th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
.legal__tabla td:last-child { white-space: nowrap; font-weight: 600; color: var(--fg); }

.legal__proveedor {
    padding: var(--e3) var(--e4); margin-bottom: var(--e4);
    background: var(--sup-2); border: 1px solid var(--linea); border-radius: var(--radio);
    font-size: var(--t-sm); color: var(--fg-2);
}

/* ---- Formulario del Libro de Reclamaciones ---- */
.legal__form fieldset { border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e4); margin: 0 0 var(--e5); }
.legal__form legend { padding: 0 var(--e2); font-weight: 700; font-size: var(--t-sm); color: var(--fg); }
.legal__form .campo input, .legal__form .campo select, .legal__form .campo textarea { width: 100%; }
.legal__radios { display: grid; gap: var(--e3); margin-bottom: var(--e4); }
.legal__radios label { display: grid; grid-template-columns: auto 1fr; gap: var(--e1) var(--e3); align-items: start; cursor: pointer; }
.legal__radios label input { margin-top: 4px; }
.legal__radios label .pista { grid-column: 2; margin: 0; }
.legal__leyenda {
    font-size: var(--t-xs); color: var(--fg-3); line-height: 1.55;
    padding: var(--e3) var(--e4); border-left: 3px solid var(--marca); background: var(--sup-2);
    margin-bottom: var(--e4);
}
/* Trampa antirrobots: fuera de la vista y del orden de tabulación, no `display:none`
   (algunos robots saltan los display:none). */
.legal__trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.legal__hecho { text-align: center; padding: var(--e6) var(--e4); }
.legal__hecho i { font-size: 48px; color: var(--ok); }
.legal__hecho h2 { margin-top: var(--e3); }

.legal__pie {
    max-width: 760px; margin: var(--e6) auto 0; padding: var(--e5) 0 var(--e6);
    display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    font-size: var(--t-xs); color: var(--fg-3); line-height: 1.6;
    border-top: 1px solid var(--linea);
}
.legal__pie a { color: var(--fg-2); text-decoration: none; display: block; }
.legal__pie a:hover { color: var(--marca); }