/* ===================================================================== PREFERENCIAS DE LECTURA · La Ferretería Diario --------------------------------------------------------------------- documento.js escribe en las preferencias de la cuenta: data-letra = normal | grande | muy_grande data-fondo = papel | claro | oscuro Esta hoja se carga en TODAS las páginas públicas, después de ferretero.css y sitio.css. El panel no la carga ni usa esos atributos. "normal" y "papel" son el diseño original: con esos valores esta hoja no cambia nada del diario (solo aporta los estilos de los bloques Foto y Lectura de Mi cuenta, al final). Las preferencias solo cambian cómo se VE: no dan ningún permiso. ===================================================================== */ /* ===================================================================== 1 · TAMAÑO DE LETRA --------------------------------------------------------------------- ferretero.css escribe los tamaños en px, así que agrandar la raíz no alcanza. Cada tamaño de texto del sistema se recalcula acá con una sola fórmula, con los mismos valores de partida y los mismos cortes responsive (container queries) que ferretero.css y sitio.css: tamaño = base + min(base, 20px) × --fd-extra --fd-extra = 0,2 (grande) · 0,4 (muy grande) · Todo texto de hasta 20 px crece en proporción: un 20 % o un 40 % (el cuerpo de lectura pasa de 20 a 24 o 28 px). · Los tamaños mayores suman lo mismo que el cuerpo (+4 o +8 px): los títulos grandes crecen menos en proporción, así no se desbordan y la jerarquía (título > bajada > texto) se mantiene en todos los tamaños. · El logotipo no cambia: su tamaño ya se calcula con el ancho de la página para que nunca se desborde. El selector [data-letra$="grande"] toma "grande" y "muy_grande". Para otras hojas (cuenta.css, planes.css…): si un texto propio fija su tamaño en px, que use la misma fórmula y crece solo con la preferencia: font-size: calc(16px + 16px * var(--fd-extra, 0)); (con letra normal --fd-extra no existe y vale 0). ===================================================================== */ html[data-letra="grande"] { --fd-extra: 0.2; } html[data-letra="muy_grande"] { --fd-extra: 0.4; } /* Una palabra larga (una dirección web, un nombre de producto) nunca empuja la página hacia el costado. */ html[data-letra$="grande"] .pag { overflow-wrap: break-word; } html[data-letra$="grande"] :is(.titulo-hero, .titulo-1, .titulo-destacada, .titulo-2, .titulo-3, .titulo-4, .titulo-seccion, .titulo-pagina, .muro-titulo, .estado-vacio-titulo, .precio, .cifra) { overflow-wrap: break-word; hyphens: auto; } html[data-letra$="grande"] .lectura :is(h2, h3) { overflow-wrap: break-word; hyphens: auto; } /* ---- Títulos y cifras (más de 20 px: suman +4 / +8 px) ---- */ html[data-letra$="grande"] .titulo-hero { font-size: calc(96px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-1 { font-size: calc(58px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-destacada { font-size: calc(52px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-2 { font-size: calc(44px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-3 { font-size: calc(24px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-4 { font-size: calc(20px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-seccion { font-size: calc(27px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-pagina { font-size: calc(clamp(32px, 5vw, 52px) + 20px * var(--fd-extra)); } html[data-letra$="grande"] .numeral--xl { font-size: calc(64px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .numeral--l { font-size: calc(48px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .numeral--m { font-size: calc(36px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .numeral--s { font-size: calc(30px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .numeral--xs { font-size: calc(26px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .cifra { font-size: calc(50px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .precio { font-size: calc(44px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .estado-vacio-titulo { font-size: calc(26px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .muro-titulo { font-size: calc(32px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .fecha-bloque-dia { font-size: calc(30px + 20px * var(--fd-extra)); } /* ---- Bajadas y texto ---- */ html[data-letra$="grande"] .bajada { font-size: calc(22px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .bajada--italica { font-size: calc(23px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .bajada-tarjeta { font-size: calc(17px + 17px * var(--fd-extra)); } html[data-letra$="grande"] .texto { font-size: calc(18px + 18px * var(--fd-extra)); } html[data-letra$="grande"] .texto-interfaz { font-size: calc(15px + 15px * var(--fd-extra)); } html[data-letra$="grande"] .texto-chico { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] :is(.kicker, .kicker-compuesto, .lema, .rotulo) { font-size: calc(12px + 12px * var(--fd-extra)); } html[data-letra$="grande"] .meta { font-size: calc(13.5px + 13.5px * var(--fd-extra)); } html[data-letra$="grande"] .numeral-chico { font-size: calc(18px + 18px * var(--fd-extra)); } html[data-letra$="grande"] .codigo { font-size: calc(14.5px + 14.5px * var(--fd-extra)); } html[data-letra$="grande"] .enlace-mas { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] .volver-arriba { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] .migas ol { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] .figura-pie { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] .medio-etiqueta { font-size: calc(11.5px + 11.5px * var(--fd-extra)); } html[data-letra$="grande"] .medio--ausente .medio-aviso { font-size: calc(13.5px + 13.5px * var(--fd-extra)); } /* ---- Controles: botones, sellos, chips, formularios, avisos ---- */ html[data-letra$="grande"] .saltar { font-size: calc(15px + 15px * var(--fd-extra)); } html[data-letra$="grande"] .boton { font-size: calc(14.5px + 14.5px * var(--fd-extra)); } html[data-letra$="grande"] .boton--principal { font-size: calc(15.5px + 15.5px * var(--fd-extra)); } html[data-letra$="grande"] .sello { font-size: calc(11.5px + 11.5px * var(--fd-extra)); white-space: normal; } html[data-letra$="grande"] .chip { font-size: calc(14px + 14px * var(--fd-extra)); white-space: normal; padding-block: 6px; } html[data-letra$="grande"] .segmentado > button { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] .etiqueta { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] .ayuda { font-size: calc(13.5px + 13.5px * var(--fd-extra)); } html[data-letra$="grande"] .campo { font-size: calc(16px + 16px * var(--fd-extra)); } html[data-letra$="grande"] .error-campo { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] .opcion { font-size: calc(15px + 15px * var(--fd-extra)); } /* Casillas y radios crecen con su texto (unidades relativas). */ html[data-letra$="grande"] .opcion input { width: 1.25em; height: 1.25em; } html[data-letra$="grande"] .resumen-errores-titulo { font-size: calc(16px + 16px * var(--fd-extra)); } html[data-letra$="grande"] .resumen-errores ul { font-size: calc(15px + 15px * var(--fd-extra)); } html[data-letra$="grande"] .aviso { font-size: calc(15px + 15px * var(--fd-extra)); } html[data-letra$="grande"] .estado-vacio-texto { font-size: calc(15px + 15px * var(--fd-extra)); } /* ---- Lectura larga (notas y guías) ---- */ html[data-letra$="grande"] .lectura, html[data-letra$="grande"] .lectura p, html[data-letra$="grande"] .lectura li { font-size: calc(20px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .lectura .entradilla { font-size: calc(22px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .lectura h2 { font-size: calc(34px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .lectura h3 { font-size: calc(24px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .cita p { font-size: calc(30px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .cita footer { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] .recuadro .kicker { font-size: calc(12px + 12px * var(--fd-extra)); } html[data-letra$="grande"] .recuadro li, html[data-letra$="grande"] .recuadro p { font-size: calc(16px + 16px * var(--fd-extra)); } html[data-letra$="grande"] .caja-prompt { font-size: calc(14.5px + 14.5px * var(--fd-extra)); } html[data-letra$="grande"] .indice a { font-size: calc(14.5px + 14.5px * var(--fd-extra)); } html[data-letra$="grande"] .indice-desplegable > summary { font-size: calc(13px + 13px * var(--fd-extra)); } html[data-letra$="grande"] .indice-lista a { font-size: calc(14.5px + 14.5px * var(--fd-extra)); } html[data-letra$="grande"] .indice-numero { font-size: calc(13px + 13px * var(--fd-extra)); } html[data-letra$="grande"] .tabla { font-size: calc(15px + 15px * var(--fd-extra)); } html[data-letra$="grande"] .tabla caption { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] .tabla thead th { font-size: calc(12px + 12px * var(--fd-extra)); } html[data-letra$="grande"] .tabla-nota { font-size: calc(13.5px + 13.5px * var(--fd-extra)); } html[data-letra$="grande"] .muro-lista li { font-size: calc(15.5px + 15.5px * var(--fd-extra)); } /* ---- Patrones compartidos ---- */ html[data-letra$="grande"] .ficha-fila { font-size: calc(14.5px + 14.5px * var(--fd-extra)); } html[data-letra$="grande"] .ficha--texto dd { font-size: calc(17px + 17px * var(--fd-extra)); } html[data-letra$="grande"] .paso-frase { font-size: calc(17px + 17px * var(--fd-extra)); } html[data-letra$="grande"] .fecha-bloque-mes { font-size: calc(11.5px + 11.5px * var(--fd-extra)); } html[data-letra$="grande"] .precio-periodo { font-size: calc(15px + 15px * var(--fd-extra)); } html[data-letra$="grande"] .pregunta > summary { font-size: calc(21px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .pregunta-respuesta { font-size: calc(15.5px + 15.5px * var(--fd-extra)); } html[data-letra$="grande"] .lista-check li { font-size: calc(15px + 15px * var(--fd-extra)); } /* ---- Cabecera y pie ---- */ html[data-letra$="grande"] .cab-util-enlace { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] .cab-suscribir { font-size: calc(13.5px + 13.5px * var(--fd-extra)); } html[data-letra$="grande"] .cab-sesion { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] .cab-menu-boton { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] .cab-oreja-rotulo { font-size: calc(11.5px + 11.5px * var(--fd-extra)); } html[data-letra$="grande"] .cab-oreja-dato { font-size: calc(17px + 17px * var(--fd-extra)); white-space: normal; } html[data-letra$="grande"] .cab-linea-edicion { font-size: calc(12px + 12px * var(--fd-extra)); } html[data-letra$="grande"] .cab-nav-enlace { font-size: calc(15px + 15px * var(--fd-extra)); } html[data-letra$="grande"] .cab-cajon-titulo { font-size: calc(12px + 12px * var(--fd-extra)); } html[data-letra$="grande"] .cab-cajon-enlace { font-size: calc(21px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .cab-cajon-enlace .numeral { font-size: calc(24px + 20px * var(--fd-extra)); width: auto; min-width: 34px; } html[data-letra$="grande"] .cab-cajon-enlace--recurso { font-size: calc(17px + 17px * var(--fd-extra)); } html[data-letra$="grande"] .cab-cajon-enlace[aria-current="page"]::after { font-size: calc(12px + 12px * var(--fd-extra)); } html[data-letra$="grande"] .pie-titulo { font-size: calc(12px + 12px * var(--fd-extra)); } html[data-letra$="grande"] .pie-lista a, html[data-letra$="grande"] .pie-lista .pie-texto { font-size: calc(15px + 15px * var(--fd-extra)); } html[data-letra$="grande"] .pie-legal { font-size: calc(13.5px + 13.5px * var(--fd-extra)); } /* La fila de utilidades y la de secciones se acomodan en dos renglones antes que salirse de la pantalla. */ html[data-letra$="grande"] .cab-util > .envoltura, html[data-letra$="grande"] .cab-util-grupo { flex-wrap: wrap; row-gap: 0; } html[data-letra$="grande"] .cab-nav-fila { flex-wrap: wrap; column-gap: 20px; row-gap: 0; } /* ---- Mismos cortes responsive que ferretero.css ---- */ @container pagina (max-width: 1180px) { html[data-letra$="grande"] .titulo-hero { font-size: calc(76px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-1 { font-size: calc(50px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-destacada { font-size: calc(46px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-2 { font-size: calc(40px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .cab-nav-enlace { font-size: calc(14px + 14px * var(--fd-extra)); } /* Con letra grande la fila de secciones ya no entra en tablet: pasa al menú desplegable (el mismo de celular) desde este ancho y no desde 960 px. */ html[data-letra$="grande"] .cab-nav { display: none; } html[data-letra$="grande"] .cab-menu-boton { display: inline-flex; } html[data-letra$="grande"] .cab .solo-cajon { display: flex !important; } html[data-letra$="grande"] .cab .solo-escritorio { display: none !important; } html[data-letra$="grande"] .cab-menu[open] .cab-cajon { display: block; } } @container pagina (max-width: 760px) { html[data-letra$="grande"] .titulo-hero { font-size: calc(clamp(40px, 13.5cqi, 54px) + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-1 { font-size: calc(clamp(30px, 9.4cqi, 38px) + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-destacada { font-size: calc(clamp(28px, 8.6cqi, 34px) + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-2 { font-size: calc(clamp(27px, 8cqi, 31px) + 20px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-3 { font-size: calc(22px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .nota-tarjeta--adapta .titulo-3 { font-size: calc(19px + 19px * var(--fd-extra)); } html[data-letra$="grande"] .titulo-seccion { font-size: calc(24px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .bajada, html[data-letra$="grande"] .bajada--italica { font-size: calc(18px + 18px * var(--fd-extra)); } html[data-letra$="grande"] .texto { font-size: calc(17px + 17px * var(--fd-extra)); } html[data-letra$="grande"] .meta { font-size: calc(14px + 14px * var(--fd-extra)); } html[data-letra$="grande"] .numeral--xl { font-size: calc(44px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .numeral--l { font-size: calc(40px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .cifra { font-size: calc(42px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .precio { font-size: calc(38px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .fecha-bloque-dia { font-size: calc(26px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .lectura p, html[data-letra$="grande"] .lectura li { font-size: calc(18px + 18px * var(--fd-extra)); } html[data-letra$="grande"] .lectura .entradilla { font-size: calc(19px + 19px * var(--fd-extra)); } html[data-letra$="grande"] .lectura h2 { font-size: calc(27px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .lectura h3 { font-size: calc(21px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .cita p { font-size: calc(23px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .muro-titulo { font-size: calc(26px + 20px * var(--fd-extra)); } html[data-letra$="grande"] .tabla--fichas tbody th { font-size: calc(16px + 16px * var(--fd-extra)); } html[data-letra$="grande"] .tabla--fichas td::before { font-size: calc(12px + 12px * var(--fd-extra)); } } /* ===================================================================== 2 · FONDOS --------------------------------------------------------------------- Tres paletas cerradas: nada de "elegí cualquier color". Cada fondo redefine las MISMAS variables de ferretero.css, así botones, sellos, enlaces, reglas, tarjetas y avisos cambian juntos y no desaparece nada. Contraste WCAG calculado con la fórmula de luminancia relativa; mínimo 4,5:1 para texto y 3:1 para bordes de controles (1.4.11). Cada valor es el PEOR caso contra los cinco papeles de la paleta (papel, papel claro, papel hundido, banda crema y hover de fila). papel (original) · lo documenta ferretero.css; no se toca. claro · blanco neutro, más contraste tinta #111111 ........ 15,56 cuerpo #1F1E1C ....... 13,73 gris-bajada #3D3C38 .. 9,10 gris-meta #5B5954 .... 5,77 clarete #7A1F2B ...... 8,41 clarete-hover #5A1520 11,07 ok #2F5D3A ........... 6,30 latón #735A2E ........ 5,36 borde-control #7A7770 3,68 (control, mín. 3) botón clarete: papel claro sobre clarete 9,52 · hover 12,54 botón tinta: papel sobre tinta 18,88 bandas oscuras (siguen en tinta #111111): sobre-tinta-texto 16,77 · secundario 8,79 · latón claro 8,42 · borde de control 5,32 oscuro · papel oscuro cálido, letra clara tinta #F3EEE4 ........ 12,01 cuerpo #E3DDD1 ....... 10,27 gris-bajada #CBC4B6 .. 8,01 gris-meta #AFA899 .... 5,87 clarete #EBA0A9 ...... 6,70 clarete-hover #F5C4CA 9,01 ok #93CFA1 ........... 7,72 latón #C9A96A ........ 6,19 borde-control #8C8474 3,75 (control, mín. 3) botón clarete: papel claro #24211C sobre clarete 7,74 · hover 10,41 botón tinta (se invierte): papel #1B1915 sobre tinta 15,18 foco (clarete) sobre papel 8,47 bandas (--fd-banda #0E0D0A): sobre-tinta-texto 17,26 · cuerpo 15,08 · secundario 9,05 · latón claro 8,67 · borde de control 5,47 · aviso sobre superficie #13110E 13,51 botón papel lleno en banda: #16140F sobre #F6F1E7 16,35 · hover sobre latón claro 8,21 ===================================================================== */ html[data-fondo="papel"] { color-scheme: light; } html[data-fondo="claro"] { color-scheme: light; --papel: #FFFFFF; --papel-claro: #F8F7F4; --papel-hundido: #EEEDE9; --banda-crema: #F3F2EE; --hover-fila: #EBE9E4; --tinta: #111111; --cuerpo: #1F1E1C; --gris-bajada: #3D3C38; --gris-meta: #5B5954; --regla: #DCDAD4; --regla-crema: #D3D0C9; --borde-control: #7A7770; --separador-nav: #C8C6C0; --laton: #735A2E; } /* En oscuro, "tinta" pasa a ser la letra clara y "papel" el fondo oscuro. Los componentes que en el diseño original combinan "tinta" con papel se invierten solos (el botón tinta queda claro con letra oscura). Los que combinan fondo tinta con letra "sobre tinta" (bandas, muro, pie, caja de prompt, bloque de fecha) se corrigen abajo: pasan a una banda más oscura que el papel y conservan sus colores de letra. */ html[data-fondo="oscuro"] { color-scheme: dark; --papel: #1B1915; --papel-claro: #24211C; --papel-hundido: #2D2A24; --banda-crema: #221F1A; --hover-fila: #302C25; --tinta: #F3EEE4; --cuerpo: #E3DDD1; --gris-bajada: #CBC4B6; --gris-meta: #AFA899; --regla: #3E3930; --regla-crema: #474137; --borde-control: #8C8474; --separador-nav: #4F493E; --clarete: #EBA0A9; --clarete-hover: #F5C4CA; --laton: #C9A96A; --laton-claro: #C9A96A; --superficie-oscura: #13110E; --ok: #93CFA1; --sombra-tarjeta: 0 22px 44px -28px rgba(0, 0, 0, 0.8); --sombra-cajon: 0 24px 48px -24px rgba(0, 0, 0, 0.8); --fd-banda: #0E0D0A; } /* Superficies "tinta" con letra clara: banda más oscura que el papel, con un filo para distinguirla. */ html[data-fondo="oscuro"] :is(.banda--tinta, .muro, .pie, .caja-prompt, .fecha-bloque) { background-color: var(--fd-banda); } html[data-fondo="oscuro"] .sobre-tinta:not(.tarjeta--oscura):not(.aviso) { background-color: var(--fd-banda); } html[data-fondo="oscuro"] :is(.banda--tinta, .pie) { border-top: 1px solid var(--borde-oscuro); } html[data-fondo="oscuro"] :is(.muro, .caja-prompt) { border: 1px solid var(--borde-oscuro); } html[data-fondo="oscuro"] .fecha-bloque { color: var(--sobre-tinta-texto); } /* Botones pensados para ir sobre tinta: conservan su aspecto original (claro con letra oscura). */ html[data-fondo="oscuro"] .boton--papel-lleno { background: var(--sobre-tinta-texto); border-color: var(--sobre-tinta-texto); color: #16140F; } html[data-fondo="oscuro"] .boton--papel-lleno:not([aria-disabled="true"]):hover { background: var(--laton-claro); border-color: var(--laton-claro); color: #16140F; } html[data-fondo="oscuro"] .boton--papel:not([aria-disabled="true"]):hover { background: var(--sobre-tinta-texto); border-color: var(--sobre-tinta-texto); color: #16140F; } /* Rayado de "sin imagen": visible sobre fondo oscuro. */ html[data-fondo="oscuro"] .medio--vacio { background-image: repeating-linear-gradient(135deg, rgba(243, 238, 228, 0.07) 0 1px, transparent 1px 9px); } /* ===================================================================== 3 · BLOQUE "FOTO" (Mi cuenta → Mi perfil) ===================================================================== */ .foto-bloque { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .foto-actual { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; } .foto-actual-texto { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 0; } /* Foto circular: el recorte es el círculo, centrado (object-fit), sin editor. */ .foto-perfil { --foto-tamano: 96px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--foto-tamano); height: var(--foto-tamano); border: 1px solid var(--regla); border-radius: 999px; overflow: hidden; background: var(--papel-hundido); color: var(--tinta); } .foto-perfil img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .foto-perfil--iniciales { font-family: var(--fuente-editorial); font-size: calc(var(--foto-tamano) * 0.38); line-height: 1; font-weight: 500; letter-spacing: 0.02em; user-select: none; } .foto-subida { gap: 16px; } .foto-archivo { height: auto; min-height: 52px; padding: 7px 10px; cursor: pointer; } /* El botón del selector nunca queda cortado: si no entra, parte su texto en dos renglones. */ .foto-archivo::file-selector-button { max-width: 100%; min-height: 36px; margin-right: 14px; padding: 6px 16px; border: 1px solid var(--tinta); background: transparent; color: var(--tinta); font: 600 0.875em/1.2 var(--fuente-interfaz); white-space: normal; text-align: center; cursor: pointer; } .foto-archivo:hover::file-selector-button { background: var(--tinta); color: var(--papel); } .foto-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .foto-accion { display: flex; margin: 0; } @container pagina (max-width: 520px) { .foto-accion { flex: 1 1 100%; } .foto-accion > .boton { width: 100%; } } /* ===================================================================== 4 · BLOQUE "LECTURA" (Mi cuenta) ===================================================================== */ .pref-bloque { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .pref-formulario { gap: 28px; } .pref-grupo { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; } .pref-grupo > legend { margin-bottom: 10px; padding: 0; } .pref-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; } /* Cada opción es una etiqueta grande con su radio nativo a la vista (teclado: Tab entra al grupo y las flechas eligen). Elegida = radio marcado + borde doble: no depende solo del color. */ .pref-opcion { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; border: 1px solid var(--borde-control); background: var(--papel-claro); color: var(--cuerpo); font-family: var(--fuente-interfaz); cursor: pointer; } .pref-opcion:hover { border-color: var(--tinta); } .pref-opcion:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); } .pref-opcion:has(input:focus-visible) { outline: 2px solid var(--clarete); outline-offset: 2px; } .pref-opcion input { flex: 0 0 auto; width: 1.25em; height: 1.25em; margin: 0; accent-color: var(--clarete); font-size: calc(16px + 16px * var(--fd-extra, 0)); } .pref-opcion-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pref-opcion-nombre { font-size: calc(15px + 15px * var(--fd-extra, 0)); line-height: 1.3; font-weight: 600; color: var(--tinta); } .pref-opcion-detalle { font-size: calc(13.5px + 13.5px * var(--fd-extra, 0)); line-height: 1.4; color: var(--gris-bajada); } /* En pantallas angostas la muestra va arriba del texto: así la descripción usa todo el ancho. */ @container pagina (max-width: 520px) { .pref-opcion { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 8px; } .pref-opcion > input { grid-row: 1 / span 2; } .pref-opcion > .pref-muestra-letra, .pref-opcion > .pref-muestra-fondo { grid-column: 2; justify-self: start; } .pref-opcion > .pref-opcion-textos { grid-column: 2; } } /* Muestras: siempre con los colores y tamaños de cada opción, sin importar la elegida. */ .pref-muestra-letra { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border: 1px solid var(--regla); background: var(--papel); color: var(--tinta); font-family: var(--fuente-editorial); line-height: 1; } .pref-muestra-letra--normal { font-size: 18px; } .pref-muestra-letra--grande { font-size: 21.6px; } .pref-muestra-letra--muy_grande { font-size: 25.2px; } .pref-muestra-fondo { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; flex: 0 0 auto; width: 60px; height: 48px; padding: 0 10px; border: 1px solid; font-family: var(--fuente-editorial); font-size: 18px; line-height: 1; } .pref-muestra-fondo-raya { display: block; width: 100%; height: 3px; } .pref-muestra-fondo--papel { background: #F6F1E7; color: #16140F; border-color: #8C8472; } .pref-muestra-fondo--papel .pref-muestra-fondo-raya { background: #7A1F2B; } .pref-muestra-fondo--claro { background: #FFFFFF; color: #111111; border-color: #7A7770; } .pref-muestra-fondo--claro .pref-muestra-fondo-raya { background: #7A1F2B; } .pref-muestra-fondo--oscuro { background: #1B1915; color: #F3EEE4; border-color: #8C8474; } .pref-muestra-fondo--oscuro .pref-muestra-fondo-raya { background: #EBA0A9; } /* Vista previa: muestra lo que está elegido en el formulario, antes de guardar. Cambia sola con :has() (sin JavaScript); en un navegador sin :has() muestra lo que está guardado ahora. Es decorativa (aria-hidden): las opciones ya están descriptas en texto. */ .pref-vista { --v-fondo: var(--papel); --v-tinta: var(--tinta); --v-cuerpo: var(--cuerpo); --v-acento: var(--clarete); --v-borde: var(--borde-control); --v-extra: var(--fd-extra, 0); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 20px 22px; border: 1px solid var(--v-borde); background: var(--v-fondo); color: var(--v-tinta); } .pref-vista-rotulo { font-family: var(--fuente-interfaz); font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-cuerpo); } .pref-vista-kicker { font-family: var(--fuente-interfaz); font-size: calc(12px + 12px * var(--v-extra)); line-height: 1.3; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-acento); } .pref-vista-titulo { font-family: var(--fuente-editorial); font-size: calc(24px + 20px * var(--v-extra)); line-height: 1.2; font-weight: 500; color: var(--v-tinta); overflow-wrap: break-word; } .pref-vista-texto { max-width: 60ch; font-family: var(--fuente-editorial); font-size: calc(18px + 18px * var(--v-extra)); line-height: 1.6; color: var(--v-cuerpo); overflow-wrap: break-word; } .pref-vista-enlace { color: var(--v-acento); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .pref-vista-boton { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; background: var(--v-tinta); color: var(--v-fondo); font-family: var(--fuente-interfaz); font-size: calc(14.5px + 14.5px * var(--v-extra)); line-height: 1.25; font-weight: 600; } .pref-formulario:has(input[name="fondo"][value="papel"]:checked) .pref-vista { --v-fondo: #F6F1E7; --v-tinta: #16140F; --v-cuerpo: #2A2620; --v-acento: #7A1F2B; --v-borde: #8C8472; } .pref-formulario:has(input[name="fondo"][value="claro"]:checked) .pref-vista { --v-fondo: #FFFFFF; --v-tinta: #111111; --v-cuerpo: #1F1E1C; --v-acento: #7A1F2B; --v-borde: #7A7770; } .pref-formulario:has(input[name="fondo"][value="oscuro"]:checked) .pref-vista { --v-fondo: #1B1915; --v-tinta: #F3EEE4; --v-cuerpo: #E3DDD1; --v-acento: #EBA0A9; --v-borde: #8C8474; } .pref-formulario:has(input[name="letra"][value="normal"]:checked) .pref-vista { --v-extra: 0; } .pref-formulario:has(input[name="letra"][value="grande"]:checked) .pref-vista { --v-extra: 0.2; } .pref-formulario:has(input[name="letra"][value="muy_grande"]:checked) .pref-vista { --v-extra: 0.4; } .pref-restaurar { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid var(--regla); } /* ===================================================================== 5 · MOVIMIENTO Solo hay transiciones si la persona no pidió movimiento reducido (ferretero.css además apaga todas las animaciones en ese caso). ===================================================================== */ @media (prefers-reduced-motion: no-preference) { .pref-opcion { transition: border-color var(--d-rapida) ease, box-shadow var(--d-rapida) ease; } } /* La vista previa cambia al instante, sin transición: lo que importa es comparar. */