/* ============================================================ J.MUIÑOS+ · Estilo compartido (v10.2) Tokens de marca según MANUAL-DE-MARCA.txt + los 19 diseños. Color, tipografía, radios y espaciado. Fuente única de verdad. ============================================================ */ @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;src:url('../fonts/instrument-sans-latin-400-normal.woff2') format('woff2');font-display:swap;} @font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400;src:url('../fonts/instrument-sans-latin-400-italic.woff2') format('woff2');font-display:swap;} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;src:url('../fonts/instrument-sans-latin-500-normal.woff2') format('woff2');font-display:swap;} @font-face{font-family:'Instrument Sans';font-style:italic;font-weight:500;src:url('../fonts/instrument-sans-latin-500-italic.woff2') format('woff2');font-display:swap;} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;src:url('../fonts/instrument-sans-latin-600-normal.woff2') format('woff2');font-display:swap;} @font-face{font-family:'Instrument Sans';font-style:italic;font-weight:600;src:url('../fonts/instrument-sans-latin-600-italic.woff2') format('woff2');font-display:swap;} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;src:url('../fonts/instrument-sans-latin-700-normal.woff2') format('woff2');font-display:swap;} @font-face{font-family:'Instrument Sans';font-style:italic;font-weight:700;src:url('../fonts/instrument-sans-latin-700-italic.woff2') format('woff2');font-display:swap;} @font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;src:url('../fonts/libre-baskerville-latin-400-normal.woff2') format('woff2');font-display:swap;} @font-face{font-family:'Libre Baskerville';font-style:italic;font-weight:400;src:url('../fonts/libre-baskerville-latin-400-italic.woff2') format('woff2');font-display:swap;} :root{ /* ---------- COLOR --------------------------------------------------- Ningún color se escribe en crudo fuera de este bloque. Si hace falta uno nuevo, se añade aquí con nombre; no se pega el hexadecimal en la pantalla que lo necesita. pruebas/estaticas.php lo comprueba. */ --fondo:#f4f6f9; --navy:#0d2a41; --verde:#10a774; --ficha:#fff; --borde:rgba(13,42,65,0.18); --navy-suave:rgba(13,42,65,0.30); --lin:rgba(13,42,65,0.08); --sec:rgba(13,42,65,0.6); --alerta:#a32d2d; --ambar:#ba7517; --cumple:#993556; /* Colores de proyecto. Estaban sueltos como literales en calendario.js y agenda-panel.js. Son la paleta de OTRAS marcas, no la de esta app, y por eso van con nombre propio y aparte. */ --proy-actives:#10a774; --proy-akdmy:#304871; --proy-otro:#0d2a41; /* ---------- PALETA AMPLIADA ------------------------------------------ Estos colores ya existían, pero sueltos como literales repartidos por index.php y los JS. Aquí solo se les pone nombre. Cada pareja "-suave / -hondo" es fondo y texto del mismo estado o proyecto. */ --verde-hondo:#0f6e56; --verde-vivo:#0d8f63; --verde-claro:#e1f5ee; --verde-suave:#eef6f2; --rojo-vivo:#cf2f2f; --rojo-hondo:#8f2323; --rojo-suave:#fbe9e9; --ambar-hondo:#854f0b; --ambar-suave:#faeeda; --amarillo-suave:#fff2b8; --azul-vivo:#1957b8; --azul-hondo:#0c447c; --azul-suave:#e6f1fb; --rosa-suave:#fbe9ef; --rosa-borde:#d4537e; /* NARANJA DEL CALENDARIO ESCOLAR (v15.4). No se reutiliza el ambar porque el ambar ya es el color del proyecto amiKitiae y en la vista Mes conviven los dos. Lo mismo que paso con los rojos en la v15.1. */ --naranja:#c96a14; --naranja-hondo:#7a3f08; --naranja-suave:#fad9a6; /* Tinte del escolar en la vista Mes. El -suave funciona en la celda pequeña del Año, pero llenando una celda grande de mes se come el dia y compite con las pastillas de los eventos. */ --naranja-tinte:#fdf3e4; /* VIOLETA DEL PROYECTO PERSONAL (v15.4). Personal estaba en azul con EXACTAMENTE los mismos tres valores que festivo_loc, asi que un festivo de Ferrol y una cita personal eran el mismo pixel en Mes y en Semana. Al pasar Galicia al azul el choque se heredaba, asi que se mueve Personal: los colores de festivo tienen que corresponderse con el calendario impreso y no son negociables; los de proyecto si. */ --violeta:#5a4ab5; --violeta-hondo:#332a70; --violeta-suave:#eeedfe; --navy-medio:#1d2f4d; --tinta:#1c2430; /* Verde y rojo LEGIBLES SOBRE NAVY. Los de siempre (--verde #10a774 y --rojo-vivo #cf2f2f) estan pensados para fondo claro y sobre el navy de las tarjetas oscuras pierden contraste. Estos dos son los mismos tonos aclarados para ese caso concreto, no colores nuevos. */ --verde-sobre-navy:#3ddba0; --rojo-sobre-navy:#ff8b8b; --gris-1:#fafcfb; --gris-2:#fafbfc; --gris-3:#f5f8f6; --gris-4:#eef1f4; --gris-5:#eef2f7; /* ---------- TIPOGRAFÍA ---------------------------------------------- Seis peldaños, no veinticinco. Todo cuelga de --t-base: subiendo ese único número crece la aplicación entera manteniendo las proporciones. 16px es el punto de partida; probar 17 o 18 y quedarse con el que se lea cómodo. No tocar los múltiplos. */ --t-base:16px; --t-xs: calc(var(--t-base) * 0.75); /* etiquetas, insignias, contadores */ --t-sm: calc(var(--t-base) * 0.875); /* texto secundario, listas */ --t-md: var(--t-base); /* texto normal */ --t-lg: calc(var(--t-base) * 1.25); /* títulos de sección */ --t-xl: calc(var(--t-base) * 1.625); /* cifras destacadas */ --t-2xl: calc(var(--t-base) * 2.125); /* la cifra grande del panel */ /* Pesos: solo estos cuatro. Ya estaban limpios, se dejan como estaban. */ --p-normal:400; --p-medio:500; --p-fuerte:600; --p-max:700; /* ---------- RADIOS --------------------------------------------------- Cuatro, no quince. Nadie distingue un 9 de un 10, pero cada valor suelto es una decisión que el siguiente tiene que adivinar. */ --r-xs:3px; /* celda de día pintada en la vista Año */ --r-sm:8px; /* campos, insignias, píldoras de filtro */ --r-md:12px; /* tarjetas, botones, teclas del PIN */ --r-lg:16px; /* modales */ --r-full:999px; /* toast y elementos redondos */ /* ---------- ESPACIADO ------------------------------------------------ Seis peldaños. Se conservan el 6 y el 8 juntos porque son con diferencia los dos más usados de la aplicación. */ --e-1:4px; --e-2:6px; --e-3:8px; --e-4:12px; --e-5:16px; --e-6:24px; } *{box-sizing:border-box;} html,body{margin:0;height:100%;} body{background:var(--fondo);font-family:'Instrument Sans',system-ui,sans-serif;color:var(--navy);} /* -------- puntos de corte (Mac 27" 2560×1440 = principal, iPad, iPhone) */ /* ≥1024px escritorio (objetivo principal, probado a ~1792px = 70% real) 768–1023 tablet (iPad 13") <768 móvil (solo Agenda a fondo; Finanzas no se rompe, sin más) */ /* -------- cita/acento editorial (Diario, frases destacadas) ---------- */ .acento-editorial{font-family:'Libre Baskerville',serif;font-style:italic;font-weight:var(--p-normal);} /* -------- topbar reutilizable en recibidores y módulos ---------------- */ .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;} .top .logo{display:flex;align-items:center;gap:12px;} .top .logo .l{display:flex;align-items:baseline;gap:1px;font-size:var(--t-lg);font-weight:var(--p-max);letter-spacing:-0.3px;} .top .logo .l .v{color:var(--verde);} .top .logo .sep{color:rgba(13,42,65,0.28);} .top .logo .mod{font-size:var(--t-md);font-weight:var(--p-medio);} .top .r{display:flex;gap:14px;color:var(--sec);} .top .r i{font-size:var(--t-lg);cursor:pointer;} .top .r .activo{color:var(--verde);} /* -------- overlay + modal de PIN (compartido en toda la app) --------- */ .overlay{position:fixed;inset:0;background:rgba(13,42,65,0.35);display:flex;align-items:center;justify-content:center;z-index:100;} /* El teclado del PIN es la capa de autenticación: debe salir SIEMPRE por delante de cualquier ficha o modal (evento, contacto...), que comparten .overlay con z-index 100. Al crearse la ficha después en el documento, sin esto el PIN quedaba por detrás y había que cancelar la ficha (y perder lo escrito) para poder teclearlo. */ #ov-pin{z-index:300;} .overlay.oculto{display:none;} .modal-pin{background:var(--ficha);border:1px solid var(--borde);border-radius:var(--r-lg);padding:36px 40px;width:340px;text-align:center;} .modal-pin .cand{width:52px;height:52px;border-radius:50%;background:var(--verde-suave);color:var(--verde);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:var(--t-lg);} .modal-pin h3{font-size:var(--t-md);font-weight:var(--p-medio);margin:0 0 4px;} .modal-pin p{font-size:var(--t-sm);color:var(--sec);margin:0 0 22px;} .pin-dots{display:flex;gap:10px;justify-content:center;margin-bottom:24px;} .pin-dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--borde);} .pin-dot.lleno{background:var(--navy);border-color:var(--navy);} .teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} .tecla{height:52px;border:1px solid var(--borde);border-radius:var(--r-md);background:var(--ficha);font-family:inherit;font-size:var(--t-lg);font-weight:var(--p-medio);color:var(--navy);cursor:pointer;} .tecla:hover{border-color:var(--verde);color:var(--verde);} .tecla.vacia{border:none;background:transparent;cursor:default;} .pin-err{min-height:18px;font-size:var(--t-sm);color:var(--alerta);margin-top:12px;} .btn-cancel-pin{margin-top:14px;background:none;border:none;color:var(--sec);font-family:inherit;font-size:var(--t-sm);cursor:pointer;} .btn-cancel-pin:hover{color:var(--navy);} /* -------- toast de aviso ------------------------------------- */ #toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:var(--ficha); font-size:var(--t-sm);padding:11px 20px;border-radius:var(--r-full);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:200;} #toast.visible{opacity:1;transform:translateX(-50%) translateY(0);} #toast.ko{background:var(--alerta);} /* ================================================================ PATRONES REPETIDOS Nacen de contar los estilos en línea: no son utilidades sueltas al gusto, son las formas que ya se repetían por la aplicación. Cada una sustituye a un puñado de style= idénticos. ================================================================ */ /* La flecha de volver de la barra superior. Aparecía siete veces escrita a mano, exactamente igual las siete. */ .ic-volver{font-size:var(--t-lg);color:var(--sec);cursor:pointer;} /* Iconos que acompañan a un texto. El tamaño va con el texto al que acompañan, no suelto: por eso son estos dos y no más. */ .ic-sm{font-size:var(--t-sm);} .ic-md{font-size:var(--t-md);} /* Iconos de acción de la barra superior (imprimir, ajustes). */ .ic-accion{cursor:pointer;} /* Un elemento que ocupa el hueco que quede en una fila flexible. */ .crece{flex:1;} /* Variantes de los componentes de Finanzas que se venían escribiendo en línea. Van con su componente, no como clase suelta. */ .vacio-modulo.encabezando{padding:28px 24px;margin-bottom:18px;} .fin-cab-modulo .barra{margin-top:14px;} .fin-cab-modulo .pie{font-size:var(--t-sm);color:var(--sec);margin-top:8px;} .fin-nota-alcance{font-size:var(--t-xs);color:var(--sec);margin:-6px 0 18px;} .fin-dato-sec{color:var(--sec);font-size:var(--t-xs);} .fin-oculto{display:none;} /* ============================================================ COMPONENTES ------------------------------------------------------------ Hasta la v14 esto no existía. Había 164 líneas de tokens aquí y 913 de CSS suelto dentro de index.php, así que el sitio natural para escribir un estilo nuevo era "al final del index" — y nadie iba a mirar si eso ya estaba escrito. Resultado: 56 reglas pintando la misma caja blanca, 52 la misma etiqueta gris, 11 maneras de hacer un botón y 4 cabeceras de módulo distintas. Lo que sigue es lo que ya estaba repetido, escrito una vez. No cambia ni un color ni la tipografía: cambia dónde vive. ============================================================ */ /* ---- LA CAJA ----------------------------------------------- Fondo blanco, borde fino, esquina. Tres escalas, y la escala la decide QUÉ ES el elemento, no quién lo escribió: --r-sm 8px controles: se pulsan o se escriben --r-md 12px contenedores: agrupan cosas --r-lg 16px superficies grandes: fichas, modales, puertas Antes las píldoras de Contactos y Diario iban a 16 y las de Presupuesto a 6. El mismo elemento con dos formas es lo que hacía que la aplicación pareciese copiada de sitios distintos. */ .caja{background:var(--ficha);border:1px solid var(--borde);border-radius:var(--r-md);} .caja--ctrl{border-radius:var(--r-sm);} .caja--sup{border-radius:var(--r-lg);} /* Sin borde, apoyada sobre el fondo. Para agrupar sin encerrar. */ .caja--plana{background:var(--gris-5);border-color:transparent;} /* Recordatorio: algo que conviene mirar, no algo que va mal. */ .caja--aviso{background:var(--ambar-suave);border-color:transparent; border-left:3px solid var(--ambar);color:var(--ambar-hondo);} /* Alerta: algo va mal de verdad. El rojo sigue reservado a esto. */ .caja--alerta{background:var(--rojo-suave);border-color:transparent; border-left:3px solid var(--rojo-vivo);color:var(--rojo-hondo);} /* La cifra que manda. Una por pantalla como mucho. */ .caja--oscura{background:var(--navy);border-color:var(--navy);color:var(--ficha);} /* ---- LA ETIQUETA ------------------------------------------- Texto pequeño y gris que nombra un dato. Estaba escrito en 52 sitios. .et-alta es la versión en mayúsculas para cabeceras. */ .et{font-size:var(--t-xs);color:var(--sec);} .et-alta{font-size:var(--t-xs);color:var(--sec);font-weight:var(--p-fuerte); letter-spacing:.3px;text-transform:uppercase;} /* ---- CABECERA DE MÓDULO ------------------------------------ La tarjeta de arriba de cada pantalla: icono, etiqueta, cifra grande, subtítulo y una tira de datos opcional. Antes eran cuatro maquetas distintas que ni coincidían en el tamaño de la cifra: 34 px en Cuentas, Crédito y Suscripciones, 26 px en Presupuesto y 26 px con peso 600 en Contactos. Una centrada con icono de 60 px, tres a la izquierda sin icono, y el orden etiqueta/cifra invertido según la pantalla. Medido en el navegador, no leído. SE LLAMA .cabmod Y NO .mod: ese nombre ya era el del módulo en la barra superior (Cuentas). Al usarlo como componente, el título salió metido en una caja blanca. .fin-cab-modulo se mantiene como alias para no tener que tocar el marcado de cinco ficheros a la vez: es el MISMO componente con otro nombre, no una segunda versión. */ .cabmod, .fin-cab-modulo{padding:18px 20px;margin-bottom:1.25rem;} .cabmod-top{display:flex;align-items:flex-start;gap:13px;} /* El icono en 36 px y a la izquierda. Antes solo Suscripciones tenía, de 60 px y centrado, y las otras tres ninguno. */ .cabmod-ic{width:36px;height:36px;border-radius:var(--r-sm);background:var(--gris-5);flex:none; display:flex;align-items:center;justify-content:center;font-size:var(--t-lg);color:var(--navy);} .cabmod-tx{flex:1;min-width:0;} /* La etiqueta en mayúsculas pequeñas: establece jerarquía ANTES de la cifra. Antes unas iban en minúscula y otras no existían. */ .cabmod-et, .fin-cab-modulo .l{font-size:var(--t-xs);color:var(--sec);font-weight:var(--p-fuerte); letter-spacing:.3px;text-transform:uppercase;display:flex;align-items:center;gap:6px;} .cabmod-cifra, .fin-cab-modulo .v{font-size:var(--t-2xl);font-weight:var(--p-max); letter-spacing:-.5px;line-height:1.1;margin-top:5px;} .cabmod-cifra small{font-size:var(--t-md);font-weight:var(--p-medio);color:var(--sec); margin-left:6px;letter-spacing:0;} .cabmod-sub, .fin-cab-modulo .sub{font-size:var(--t-sm);color:var(--sec);margin-top:3px;} /* La tira de datos de debajo: al inicio / entradas / salidas… */ .cabmod-tira{display:flex;gap:26px;border-top:1px solid var(--lin);margin-top:14px;padding-top:12px;} .cabmod-tira .d{display:flex;flex-direction:column;gap:3px;} .cabmod-tira .d.fin{margin-left:auto;text-align:right;} .cabmod-tira .n{font-size:var(--t-sm);font-weight:var(--p-fuerte);} /* ---- CABECERA DE FICHA ------------------------------------- La de arriba cuando abres UN elemento: un contrato de crédito, una suscripción. Centrada y con el icono grande, que es otra cosa que la cabecera de módulo —ahí se resume una pantalla, aquí se presenta una ficha— y por eso son dos componentes. Pero eran dos que hacían lo mismo sin parecerse: 64 px redondo contra 60 px cuadrado, margen de 22 contra 20, y la cifra a 34 px en Crédito mientras en Suscripciones el nombre iba a 20 px. Ahora comparten medidas; lo que cambia es qué se pone grande, que en Crédito es el importe y en Suscripciones el nombre. */ .ficha-cab, .fin-ficha-cab, .sus-cab{text-align:center;margin-bottom:22px;} .ficha-ic, .fin-ficha-ic, .sus-cab-ic{width:64px;height:64px;border-radius:50%; background:var(--fondo);border:1px solid var(--borde);display:flex;align-items:center; justify-content:center;margin:0 auto 14px;font-size:var(--t-xl);color:var(--navy);} .ficha-cifra, .fin-ficha-cifra{font-size:var(--t-2xl);font-weight:var(--p-max); letter-spacing:-.5px;margin-bottom:6px;} .ficha-nm, .sus-cab-nm{font-size:var(--t-lg);font-weight:var(--p-max);} .ficha-sub, .fin-ficha-sub, .sus-cab-sub{font-size:var(--t-sm);color:var(--sec);margin-top:2px;} /* ---- BOTONES ----------------------------------------------- Había ONCE maneras de hacer un botón: btn, ct-acc button, dia-acc button, fin-icobtn, cal-icobtn, aj-btn-sec, dia-escribir-btn, fin-accbar, pav-mas… y no coincidían en nada: radio de 12 px unos y 8 px otros, pesos 500 y 600 mezclados, y cuatro rellenos distintos (13 / 11 / 10-18 / 14 px). Aquí van las tres cosas que TODOS deben compartir —forma, tipo y peso— en un selector agrupado, para no tener que reescribir el marcado de trece ficheros de golpe. Cada botón conserva luego lo suyo: si es ancho completo, si lleva icono, su color. EL RADIO ES --r-sm (8 px) PORQUE UN BOTÓN ES UN CONTROL, no un contenedor. Los primarios estaban a 12 px, que es la medida de las cajas: parecían tarjetas pulsables. */ .bt, .btn, .ct-acc button, .dia-acc button, .dia-escribir-btn, .fin-icobtn, .cal-icobtn, .pav-mas, .aj-btn-sec, .pav-dev, .pav-chk{ font-family:inherit;font-weight:var(--p-fuerte);border-radius:var(--r-sm);cursor:pointer;} /* .pav-dev y .pav-chk son