/* * Autos Valls · Theme v2 — Legal (aviso legal, privacidad, cookies) * Epica EP-17 (AUTOVA-208) · Tarea AV-T-201. * * Carga DESPUES de theme-v2-home.css, que hace de base en todas las paginas v2. * * 🔴 TODA REGLA QUE TOQUE UN .av-wrap VA PREFIJADA CON .av-v2, o la seccion sale * a 1240 px y la pagina queda con dos ejes distintos. Leccion de EP-13. * * 🔴 DOS COLORES DEL PROTOTIPO NO SE COPIAN, y no es una opinion: * * - El boton «Escribenos» de la banda de cierre es, en el prototipo, * fondo --av-cielo con texto --av-blanco. Blanco sobre ese cian da ~2,3:1. * theme-v2-tokens.css lo dice literalmente: «Nunca bajo texto blanco». * Aqui el boton es BLANCO sobre la banda marino (12,9:1). * - El prototipo pone `a { color: cielo }` como color de enlace de cuerpo. * Cian sobre blanco da 2,78:1, por debajo del minimo AA de 4,5:1. Aqui los * enlaces van en --av-enlace. Para eso existe ese token. * * El cian queda para lo que confirma o esta activo: el borde inferior de la * pestana activa y el anillo de foco. Ahi si, y es donde el prototipo lo usa * bien. */ /* --- Pestanas de seccion ---------------------------------------------- */ .av-v2 .av-legal-tabs { background: var(--av-blanco); border-bottom: 1px solid var(--av-borde); position: sticky; top: 0; z-index: 10; } .av-v2 .av-legal-tabs__in { display: flex; gap: 4px; /* A 390 px las tres etiquetas no caben: hacen scroll dentro de su contenedor, nunca empujando el . */ overflow-x: auto; scrollbar-width: none; } .av-v2 .av-legal-tabs__in::-webkit-scrollbar { display: none; } .av-v2 .av-legal-tabs__tab { font-family: var(--av-fuente-titulo); font-weight: 700; font-size: var(--av-t-nav); padding: 16px 14px; color: var(--av-texto-3); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; } .av-v2 .av-legal-tabs__tab:hover { color: var(--av-marino); } /* El cian SI va aqui: marca lo activo y no lleva texto encima. */ .av-v2 .av-legal-tabs__tab.is-actual { color: var(--av-marino); border-bottom-color: var(--av-cielo); } /* --- Cabecera del documento ------------------------------------------- */ .av-v2-legal .av-legal-cab { display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--av-borde); padding-bottom: 20px; margin-bottom: 28px; } .av-v2-legal .av-legal-cab__h1 { font-family: var(--av-fuente-titulo); font-weight: 800; font-size: var(--av-t-h1-pagina); line-height: 1.1; margin: 0; color: var(--av-marino); } .av-v2-legal .av-legal-cab__fecha { font-size: var(--av-t-xs); color: var(--av-texto-3); margin: 0; } /* --- Rejilla de la seccion -------------------------------------------- */ .av-v2 .av-legal__grid { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: start; padding-block: 16px 80px; } /* * 🔴 SIN INDICE, UNA SOLA COLUMNA. Con `220px 1fr` y un unico hijo el navegador * mete ese hijo en la PRIMERA pista: el documento entero se pintaba en 220 px, * con el titular partido en cuatro lineas. Pasaba en la privacidad —la unica sin *

, y la que hoy se publica— y no lo veia ninguna medida numerica: * desbordaBody daba false y el HTML era correcto. Solo se vio en la captura. * * La clase la pone la plantilla con av_v2_legal_tiene_indice(). Se hace en PHP y * no con :has() para no depender del soporte del navegador en una pagina legal. * * El ancho se limita para que el texto no llegue a 1425 px de linea: por encima * de ~75 caracteres se lee peor, y un documento legal ya cuesta bastante. * * ⚠️ Y SE ALINEA A LA IZQUIERDA, NO SE CENTRA. Con `justify-content: center` la * columna quedaba a 360 px del borde mientras las migas seguian a 0: dos ejes * distintos en la misma pagina, visible de un vistazo en la captura de 1440. / .av-v2 .av-legalgrid--solo { grid-template-columns: minmax(0, 78ch); } .av-v2-legal .av-legaldoc { color: var(--av-texto-2); font-family: var(--av-fuente-texto); font-size: var(--av-t-md); line-height: 1.7; / * 🔴 Sin esto, la tabla de servicios que genera Complianz —la mas ancha de * las tres paginas, y no la controlamos— estira la columna de la rejilla y * empuja el . `min-width:0` deja que el hijo haga su propio scroll. / min-width: 0; } .av-v2-legal .av-legaldoc a { color: var(--av-enlace); } .av-v2-legal .av-legaldoc a:hover { color: var(--av-marino); } / Los anclajes del indice no pueden quedar tapados por la barra de pestanas. / .av-v2-legal .av-legal__doc h2 { scroll-margin-top: 88px; } / --- Indice lateral --------------------------------------------------- / .av-v2 .av-legal-indice { position: sticky; / La barra de pestanas mide 50 px; 76 deja aire y coincide con el diseno. / top: 76px; display: flex; flex-direction: column; gap: 2px; / Alinea la primera entrada con el

width: 100% !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .av-v2 .av-legal-cuerpo table tbody, .av-v2 .av-legal-cuerpo table thead { display: table; width: 100%; min-width: 30rem; }