/* Hoja de estilos del panel de ACV 21. Octubre de 2026: el mismo sistema que el gestor del equipo de ESECE (hoja de papel sobre el lienzo, menú lateral, barra inferior en el móvil, diálogos que suben desde abajo) con la piel de acv21.es: papel cálido, tinta azul marino, el azul de Adeslas como acento y el amarillo de su estrella como chispa. Fraunces habla (títulos), Instrument Sans trabaja. Cada bloque dice por qué es así; las fichas de la sección 1 mandan. */ /* ========================================================================= 0. TIPOGRAFÍAS ------------------------------------------------------------------------- Las mismas de la web, autoalojadas en /fuentes (subconjunto latino): la marca se lee igual en acv21.es y en el panel, y no dependen de Google. ========================================================================= */ @font-face { font-family: 'Fraunces'; src: url('fuentes/fraunces-display.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('fuentes/fraunces-display-italic.woff2') format('woff2'); font-weight: 300 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('fuentes/instrument-sans-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fuentes/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* Respaldo métrico: mientras llegan las fuentes, Georgia y Arial ajustadas ocupan casi lo mismo y los titulares no saltan al cambiar (los de la web). */ @font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'), local('Times New Roman'); size-adjust: 96%; ascent-override: 96%; descent-override: 25%; } @font-face { font-family: 'Instrument Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 97%; ascent-override: 98%; descent-override: 25%; } /* ========================================================================= 1. SISTEMA DE DISEÑO — FICHAS ------------------------------------------------------------------------- Todo el color, el redondeo, la sombra, la letra y el movimiento salen de aquí. Los nombres son los del gestor de ESECE, así que las piezas se comparten; los valores son los de acv21.es. Contrastes medidos (AA): botón blanco sobre --marca-solida 5,65:1 · --marca sobre papel 6,1:1 · --tenue sobre el lienzo 5,2:1 · --oro-texto sobre papel 5,0:1. ========================================================================= */ :root { color-scheme: light; --fuente: 'Instrument Sans', 'Instrument Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --fuente-titulo: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif; --fuente-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; /* --- Marca --- --marca acento sobre fondo claro (texto, iconos, bordes activos) --marca-solida relleno del botón primario y lo seleccionado --marca-claro tinte suave de fondo (la «niebla» de la web) El amarillo (--oro) es decoración: la chispa de la estrella, el carril de lo activo. Como texto, --oro-texto, que sí llega a AA. */ --marca: #0A5E8C; --marca-solida: #0C6DA1; --marca-solida-hover: #0A5E8C; --marca-osc: #084B70; --marca-claro: #E4ECF1; --marca-rgb: 10, 94, 140; --oro: #FBB81F; --oro-texto: #8A5D0A; --oro-bg: #FCF3DC; --oro-rgb: 251, 184, 31; /* --- Superficies: papel, no gris --- */ --lienzo: #EAE3D6; --fondo: #F4EFE6; --superficie: #FFFFFF; --superficie-2: #FBF9F5; --elevado: #FFFFFF; --gris: #F1EBE0; --acento: rgba(14, 27, 44, .045); --acento-fuerte: rgba(14, 27, 44, .08); --vidrio: rgba(244, 239, 230, .84); --vidrio-lienzo: rgba(234, 227, 214, .86); --velo: rgba(11, 26, 42, .48); --tostada-bg: #0E1B2C; --tostada-tx: #F4EFE6; --tostada-suave: rgba(244, 239, 230, .62); --tostada-borde: rgba(255, 255, 255, .08); --tostada-acento: rgba(255, 255, 255, .1); --tostada-ok: #6fcf97; --tostada-error: #f08a7c; --tostada-aviso: #FBB81F; --tostada-info: #6CB8E4; /* --- Texto: tinta azul marino --- */ --texto: #0E1B2C; --suave: #3B4654; --muted: #3B4654; --tenue: #545E6B; --sobre-marca: #FFFFFF; --borde: rgba(14, 27, 44, .12); --borde-suave: rgba(14, 27, 44, .07); --borde-fuerte: rgba(14, 27, 44, .22); /* --- Estados (par fondo / texto, AA en los dos temas) --- */ --rojo: #B23A0F; --rojo-bg: #FBEBE4; --rojo-borde: rgba(178, 58, 15, .24); --verde: #256B2A; --verde-bg: #E2EDDD; --verde-borde: rgba(37, 107, 42, .26); --amarillo: #8A5D0A; --amarillo-bg: #FCF0D2; --amarillo-borde: rgba(138, 93, 10, .26); --azul: #0A5E8C; --azul-bg: #E4ECF1; --azul-borde: rgba(10, 94, 140, .24); --naranja: #B4460F; --naranja-bg: #FCEFE3; --naranja-borde: rgba(180, 70, 15, .26); --morado: #6E3F8E; --morado-bg: #F1E9F6; --indigo: #3F46B8; --indigo-bg: #ECEEFC; --turquesa: #0B6F66; --turquesa-bg: #E2F2F0; --neutro: #545E6B; --neutro-bg: #ECE7DE; --peligro-solido: #B23A0F; --sobre-peligro: #FFFFFF; --verde-vivo: #2E9E4F; /* --- Avatares: cada persona, su tono (sale de su nombre) --- */ --av-1-bg: #DCE9F2; --av-1: #0A5E8C; /* ría */ --av-2-bg: #E2EDDD; --av-2: #2D5F2F; /* monte */ --av-3-bg: #F6E3D8; --av-3: #8A3D1E; /* teja */ --av-4-bg: #EEE5F2; --av-4: #643A72; /* ciruela */ --av-5-bg: #FBEFCF; --av-5: #7A5512; /* estrella */ --av-6-bg: #DFF0EE; --av-6: #1D6363; /* mar */ --sk-base: #EBE4D8; --sk-brillo: #F6F1E9; --scroll-fondo: #EBE4D8; --scroll-pulgar: #A39C90; /* --- Redondeo (el de la web es más redondo: base 14px) --- */ --r: .875rem; --r-xs: 6px; --r-sm: calc(var(--r) - 4px); /* 10px */ --r-md: calc(var(--r) - 2px); /* 12px */ --r-lg: var(--r); /* 14px */ --r-xl: calc(var(--r) + 4px); /* 18px */ --r-2xl: calc(var(--r) + 10px); /* 24px */ --r-full: 999px; --abajo-seguro: env(safe-area-inset-bottom, 0px); --ancho-menu: 16.5rem; --alto-barra: 3.5rem; --margen-hoja: .5rem; /* --- Sombras: tinta azulada, nunca negro puro (como la web) --- */ --sh-xs: 0 1px 2px rgba(14, 27, 44, .05); --sh-sm: 0 1px 2px rgba(14, 27, 44, .05), 0 2px 6px -2px rgba(14, 27, 44, .07); --sh-md: 0 1px 2px rgba(14, 27, 44, .04), 0 8px 18px -6px rgba(14, 27, 44, .13); --sh-lg: 0 2px 4px rgba(14, 27, 44, .04), 0 18px 36px -10px rgba(14, 27, 44, .2); --sh-xl: 0 4px 10px rgba(14, 27, 44, .05), 0 32px 72px -16px rgba(14, 27, 44, .32); --sh-brillo: inset 0 1px 0 rgba(255, 255, 255, .16); --ring: var(--marca); --ring-w: 3px; --ring-sombra: 0 0 0 var(--ring-w) rgba(var(--marca-rgb), .28); --ring-peligro: 0 0 0 var(--ring-w) rgba(178, 58, 15, .26); --ms-1: .12s; --ms-2: .16s; --ms-3: .2s; --ms-4: .24s; --ease: cubic-bezier(0, 0, .3, 1); --ease-sal: cubic-bezier(.7, 0, 1, 1); --ease-suave: cubic-bezier(.3, 0, .7, 1); --ease-enfasis: cubic-bezier(.16, 1, .3, 1); --txt--1: clamp(0.8331rem, 0.8108rem + 0.09907vw, 0.9rem); --txt-0: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem); --txt-1: clamp(1.2rem, 1.131rem + 0.3056vw, 1.406rem); --txt-2: clamp(1.44rem, 1.334rem + 0.4713vw, 1.758rem); --txt-3: clamp(1.6rem, 1.47rem + 0.6vw, 2.05rem); --txt-4: clamp(1.85rem, 1.6rem + 1.1vw, 2.6rem); --txt-5: clamp(2.3rem, 1.92rem + 1.7vw, 3.4rem); --esp-2xs: clamp(0.5rem, 0.4792rem + 0.09259vw, 0.5625rem); --esp-xs: clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem); --esp-s: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem); --esp-m: clamp(1.25rem, 1.083rem + 0.7407vw, 1.75rem); --esp-l: clamp(2rem, 1.75rem + 1.111vw, 2.75rem); --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* La cubierta: la «noche» de la web, igual en los dos temas. */ --cubierta: #0B1A2A; --cubierta-2: #12283D; --sobre-cubierta: #F4EFE6; --sobre-cubierta-suave: rgba(244, 239, 230, .74); --sobre-cubierta-acento: rgba(244, 239, 230, .1); --cubierta-sombra: rgba(0, 0, 0, .3); --relleno-brillo: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 55%); } @supports (color: color-mix(in oklab, black 8%, transparent)) { :root { --borde: color-mix(in oklab, #0E1B2C 12%, transparent); --borde-suave: color-mix(in oklab, #0E1B2C 7%, transparent); --borde-fuerte: color-mix(in oklab, #0E1B2C 22%, transparent); --acento: color-mix(in oklab, #0E1B2C 4.5%, transparent); --acento-fuerte: color-mix(in oklab, #0E1B2C 8%, transparent); } } /* ========================================================================= 2. MODO OSCURO ------------------------------------------------------------------------- Noche de ría, no negro: las superficies suben de luminosidad con la elevación (lienzo < hoja < tarjeta < diálogo). ========================================================================= */ html[data-tema="oscuro"] { color-scheme: dark; --marca: #6CB8E4; --marca-solida: #1A5F8A; --marca-solida-hover: #227099; --marca-osc: #227099; --marca-claro: #13283A; --marca-rgb: 108, 184, 228; --oro: #FBB81F; --oro-texto: #F5C85A; --oro-bg: #2B2410; --oro-rgb: 251, 184, 31; --lienzo: #070F18; --fondo: #0B1622; --superficie: #101E2C; --superficie-2: #132334; --elevado: #172838; --gris: #142536; --acento: rgba(255, 255, 255, .045); --acento-fuerte: rgba(255, 255, 255, .085); --vidrio: rgba(11, 22, 34, .82); --vidrio-lienzo: rgba(7, 15, 24, .84); --velo: rgba(0, 0, 0, .62); --tostada-bg: #EEF1F4; --tostada-tx: #0E1B2C; --tostada-suave: rgba(14, 27, 44, .6); --tostada-borde: rgba(0, 0, 0, .06); --tostada-acento: rgba(0, 0, 0, .07); --tostada-ok: #256B2A; --tostada-error: #B23A0F; --tostada-aviso: #8A5D0A; --tostada-info: #0A5E8C; --texto: #E8EDF2; --suave: #A9B6C3; --muted: #A9B6C3; --tenue: #8D9BAA; --sobre-marca: #F2F8FC; --borde: rgba(255, 255, 255, .1); --borde-suave: rgba(255, 255, 255, .06); --borde-fuerte: rgba(255, 255, 255, .19); --rojo: #F08A7C; --rojo-bg: #351D1A; --rojo-borde: rgba(240, 138, 124, .28); --verde: #7FCB8A; --verde-bg: #15291A; --verde-borde: rgba(127, 203, 138, .28); --amarillo: #F5C85A; --amarillo-bg: #302614; --amarillo-borde: rgba(245, 200, 90, .28); --azul: #6CB8E4; --azul-bg: #13283A; --azul-borde: rgba(108, 184, 228, .28); --naranja: #F59A6A; --naranja-bg: #33210F; --naranja-borde: rgba(245, 154, 106, .3); --morado: #C793E3; --morado-bg: #2A1C36; --indigo: #A3ACF7; --indigo-bg: #1C1F3D; --turquesa: #62CBBD; --turquesa-bg: #0F2B29; --neutro: #A6B2BF; --neutro-bg: #1C2A38; --peligro-solido: #C2412F; --sobre-peligro: #FFFFFF; --verde-vivo: #3CCF7A; --av-1-bg: #13283A; --av-1: #9CCDEB; --av-2-bg: #1B2D1D; --av-2: #A6D3AC; --av-3-bg: #3A2219; --av-3: #F0B39C; --av-4-bg: #33213A; --av-4: #DCB0DE; --av-5-bg: #352A14; --av-5: #E6C27E; --av-6-bg: #163231; --av-6: #8FD3CF; --sk-base: #172838; --sk-brillo: #20354A; --scroll-fondo: #132334; --scroll-pulgar: #3B5064; --sh-xs: 0 1px 2px rgba(0, 0, 0, .35); --sh-sm: 0 1px 3px rgba(0, 0, 0, .4); --sh-md: 0 6px 16px -4px rgba(0, 0, 0, .5); --sh-lg: 0 16px 32px -8px rgba(0, 0, 0, .55); --sh-xl: 0 28px 64px -12px rgba(0, 0, 0, .65); --sh-brillo: inset 0 1px 0 rgba(255, 255, 255, .08); --ring-sombra: 0 0 0 var(--ring-w) rgba(var(--marca-rgb), .36); --ring-peligro: 0 0 0 var(--ring-w) rgba(240, 138, 124, .32); --cubierta: #08131F; --cubierta-2: #0F2234; } @supports (color: color-mix(in oklab, black 8%, transparent)) { html[data-tema="oscuro"] { --borde: color-mix(in oklab, #ffffff 10%, transparent); --borde-suave: color-mix(in oklab, #ffffff 6%, transparent); --borde-fuerte: color-mix(in oklab, #ffffff 19%, transparent); --acento: color-mix(in oklab, #ffffff 4.5%, transparent); --acento-fuerte: color-mix(in oklab, #ffffff 8.5%, transparent); } } /* ========================================================================= 3. BASE ========================================================================= */ * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--fondo); } body { font-family: var(--fuente); font-size: 16px; line-height: 1.5; background: var(--fondo); color: var(--texto); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-optical-sizing: auto; transition: background-color var(--ms-3) var(--ease), color var(--ms-3) var(--ease); } a { color: var(--marca); text-decoration-thickness: from-font; text-underline-offset: .18em; } button { font-family: inherit; cursor: pointer; color: inherit; } input, select, textarea { font-family: inherit; font-size: .95rem; color: inherit; } /* Los números alineados en columna (importes, contadores, horas) solo se comparan de un vistazo si todas las cifras ocupan lo mismo. */ td, th, .num, .k-val, .stat .num, .md-count .n, .calc-tot b, .col-count, .badge, .kpi-n, time { font-variant-numeric: tabular-nums; } h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.012em; font-weight: 650; } ::selection { background: rgba(var(--marca-rgb), .2); } hr, .separador { border: none; border-top: 1px solid var(--borde); margin: 1rem 0; } code, kbd, .mono { font-family: var(--fuente-mono); } .mono { font-size: .92em; } /* --- Anillo de foco global (reui / coss) ----------------------------- :focus-visible solo se dispara con teclado, así que el ratón no deja anillos por toda la pantalla, pero navegar con Tab nunca se pierde. */ :focus-visible { outline: none; box-shadow: var(--ring-sombra); position: relative; z-index: 1; } /* Cada cosa conserva su redondeo con el anillo puesto (antes «inherit» le daba el del padre: un campo enfocado se quedaba con esquinas rectas). Solo lo que no tiene redondeo propio recibe uno pequeño. */ a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { border-radius: var(--r-xs); } /* Saltar al contenido: primera parada del tabulador, invisible hasta que recibe el foco. Sin esto, el teclado recorre todo el menú en cada vista. */ .saltar { position: fixed; top: -100px; left: 50%; transform: translateX(-50%); z-index: 300; background: var(--elevado); color: var(--marca); border: 1px solid var(--marca); border-radius: 0 0 var(--r-md) var(--r-md); padding: .6rem 1.1rem; font-weight: 600; font-size: .9rem; text-decoration: none; transition: top var(--ms-2) var(--ease); } .saltar:focus { top: 0; } /* Quien pide menos movimiento en el sistema recibe la app entera quieta: sin deslizamientos, sin brillos y sin desplazamiento suave. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================= 3b. MARCA ------------------------------------------------------------------------- La brújula de acv21.es: cuadrado azul Adeslas, la aguja blanca y el punto amarillo de la estrella. El nombre, como en la web: «ACV21» de palo y «asesores» en Fraunces cursiva. Va en la entrada, el menú y el móvil. ========================================================================= */ .sello { display: inline-flex; flex: none; width: 2.2rem; height: 2.2rem; } .sello svg { width: 100%; height: 100%; display: block; overflow: visible; } .sello .s-fondo { fill: #0F77AE; } html[data-tema="oscuro"] .sello .s-fondo { fill: #1B6E9E; } .sello .s-aro { fill: none; stroke: #fff; stroke-width: .7; opacity: .28; } .sello .s-marcas { stroke: #fff; stroke-width: 1; stroke-linecap: round; opacity: .5; } .sello .s-aguja { fill: #fff; } .sello .s-sombra { fill: #fff; fill-opacity: .32; } .sello .s-punto { fill: var(--oro); } .sello .s-giro { transform-origin: 22px 22px; transition: transform .7s var(--ease-enfasis); } .marca-txt { display: flex; flex-direction: column; line-height: 1.02; min-width: 0; } .marca-txt b { font-weight: 650; font-size: 1.12rem; letter-spacing: -.02em; color: var(--texto); white-space: nowrap; } .marca-txt b i { font-family: var(--fuente-titulo); font-style: italic; font-weight: 380; font-synthesis: none; letter-spacing: -.01em; color: var(--marca); margin-left: .12em; } .marca-txt small { font-family: var(--fuente-mono); font-size: .6rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); margin-top: .34rem; white-space: nowrap; } /* ========================================================================= 3c. ENTRADA ------------------------------------------------------------------------- Dos mitades: la cubierta, en el verde de la marca con un mapa de curvas de nivel que se mueve despacio (la ría vista desde arriba), y el formulario sobre papel. En el móvil la cubierta se queda en una franja con el sello y el formulario sube: lo primero que ve el pulgar es dónde escribir. ========================================================================= */ #login { min-height: 100vh; min-height: 100dvh; display: flex; align-items: stretch; background: var(--fondo); } .login-cubierta { position: relative; flex: 1 1 52%; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 4vw, 3.5rem); background: radial-gradient(120% 90% at 85% 10%, rgba(var(--oro-rgb), .16), transparent 55%), radial-gradient(90% 80% at 0% 100%, var(--cubierta-sombra), transparent 60%), var(--cubierta); color: var(--sobre-cubierta); } /* El grano: sin él, el verde es un plano de plantilla. */ .login-cubierta::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grano); background-size: 180px; opacity: .09; mix-blend-mode: overlay; } .login-curvas { position: absolute; inset: -10% -20% -10% -10%; z-index: -1; width: 130%; height: 120%; color: var(--oro); opacity: .5; pointer-events: none; } .login-curvas path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; } .login-curvas path:nth-child(3n) { opacity: .55; } .login-curvas path:nth-child(3n+1) { opacity: .3; } .login-curvas g { animation: deriva 38s ease-in-out infinite alternate; transform-origin: 60% 50%; } @keyframes deriva { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-3%, 2%, 0) rotate(-2.5deg); } } .login-cab { display: flex; align-items: center; gap: .8rem; } .login-cab .sello { width: 2.6rem; height: 2.6rem; } .login-cab .sello .s-fondo { fill: var(--sobre-cubierta-acento); } .login-cab .marca-txt b { color: var(--sobre-cubierta); font-size: 1.55rem; } .login-cab .marca-txt small { color: var(--sobre-cubierta-suave); } .login-lema { max-width: 34rem; } .login-lema h1 { font-family: var(--fuente-titulo); font-weight: 400; font-synthesis: none; font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.6rem); line-height: .98; letter-spacing: -.02em; text-wrap: balance; } .login-lema h1 em { font-style: italic; color: var(--oro); } .login-lema p { margin-top: 1.1rem; max-width: 26rem; font-size: 1.02rem; line-height: 1.55; color: var(--sobre-cubierta-suave); text-wrap: pretty; } .login-areas { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.6rem; list-style: none; } .login-areas li { font-size: .78rem; font-weight: 500; letter-spacing: .02em; padding: .3rem .75rem; border-radius: var(--r-full); border: 1px solid rgba(var(--oro-rgb), .38); color: var(--sobre-cubierta); background: var(--sobre-cubierta-acento); } .login-pie { font-size: .78rem; color: var(--sobre-cubierta-suave); letter-spacing: .02em; } .login-lado { flex: 1 1 48%; display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); position: relative; } #login .card { position: relative; z-index: 1; background: none; border: 0; box-shadow: none; padding: 0; max-width: 23.5rem; animation: sube var(--ms-4) var(--ease-enfasis) both; } .login-tit { font-family: var(--fuente-titulo); font-weight: 400; font-synthesis: none; font-size: var(--txt-4); line-height: 1.05; letter-spacing: -.015em; margin-bottom: .35rem; } .login-sub { color: var(--suave); margin-bottom: 1.8rem; font-size: .95rem; } .login-recordar { display: flex; align-items: center; gap: .55rem; font-weight: 500; font-size: .88rem; margin: .1rem 0 1.2rem; cursor: pointer; color: var(--texto); } .login-nota { margin-top: .75rem; text-align: center; font-size: .8rem; } .login-enlaces { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: .35rem; text-align: center; font-size: .85rem; } .login-enlaces a { color: var(--marca); font-weight: 600; text-decoration: none; } .login-enlaces a:hover { text-decoration: underline; } @keyframes sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (max-width: 820px) { #login { flex-direction: column; } .login-cubierta { flex: none; padding: max(1.4rem, env(safe-area-inset-top)) 1.25rem 1.6rem; min-height: 15.5rem; } .login-lema h1 { font-size: 2.45rem; } .login-lema p, .login-areas, .login-pie { display: none; } .login-lado { flex: 1; align-items: flex-start; padding: 1.75rem 1.25rem calc(1.5rem + var(--abajo-seguro)); } #login .card { max-width: none; } .login-tit { font-size: 2rem; } } /* Tarjeta suelta (la usa establecer-password.html). */ .card { background: var(--elevado); border: 1px solid var(--borde-suave); border-radius: var(--r-2xl); box-shadow: var(--sh-xl); padding: 2.2rem; width: 100%; max-width: 410px; } .logo { display: flex; align-items: center; justify-content: center; gap: .65rem; font-family: var(--fuente-titulo); font-weight: 400; font-size: 1.9rem; color: var(--texto); text-align: center; letter-spacing: .02em; } .sub { text-align: center; color: var(--suave); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin: .2rem 0 1.6rem; } label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .4rem; color: var(--texto); letter-spacing: .005em; } /* ========================================================================= 4. CAMPOS DE FORMULARIO ------------------------------------------------------------------------- */ .inp { width: 100%; padding: .66rem .8rem; margin-bottom: 1rem; line-height: 1.4; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--r-md); box-shadow: var(--sh-xs); transition: border-color var(--ms-1) var(--ease), box-shadow var(--ms-1) var(--ease), background-color var(--ms-1) var(--ease); } .inp::placeholder { color: var(--tenue); } /* El anillo es sombra, no outline: aparece sin empujar nada de sitio. */ .inp:focus, .inp:focus-visible { outline: none; border-color: var(--ring); box-shadow: var(--ring-sombra); } .inp:hover:not(:focus):not(:disabled) { border-color: var(--borde-fuerte); } .inp:disabled, .inp[readonly] { background: var(--gris); color: var(--suave); cursor: not-allowed; box-shadow: none; } .inp[aria-invalid="true"], .inp.error { border-color: var(--rojo); } .inp[aria-invalid="true"]:focus, .inp.error:focus { box-shadow: var(--ring-peligro); } /* Fecha y hora encajan en su hueco como los demás campos. */ input[type="date"].inp, input[type="time"].inp { min-width: 0; max-width: 100%; display: block; } /* En el iPhone miden lo que su texto y no el 100 %, así que se salían del ancho. Sin el aspecto nativo sí encajan; el valor va a la izquierda como en el resto, y con alto mínimo porque vacíos se aplastan. Solo iOS (-webkit-touch-callout): en los demás el aspecto nativo ya encaja. */ @supports (-webkit-touch-callout: none) { input[type="date"].inp, input[type="time"].inp { -webkit-appearance: none; appearance: none; min-height: calc(1.2em + 1.4rem + 2px); } input[type="date"].inp::-webkit-date-and-time-value, input[type="time"].inp::-webkit-date-and-time-value { text-align: left; } } select.inp { appearance: none; -webkit-appearance: none; padding-right: 2.1rem; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; } /* Texto de ayuda y de error bajo un campo (patrón "Field" de coss-com-ui): la explicación vive junto al campo, no en un tostado que se va solo. */ .field-hint { font-size: .78rem; color: var(--suave); margin: -.75rem 0 1rem; } .field-error { font-size: .78rem; color: var(--rojo); font-weight: 600; margin: -.75rem 0 1rem; display: flex; align-items: center; gap: .3rem; } /* Grupo de campo con icono o botón pegado dentro del recuadro ("Input Group"): el icono va dentro del campo, no al lado. */ .inp-grupo { position: relative; display: block; } .inp-grupo .inp { margin-bottom: 1rem; } .inp-grupo > .ig-ico { position: absolute; left: .75rem; top: .72rem; width: 18px; height: 18px; color: var(--tenue); pointer-events: none; z-index: 2; /* el campo enfocado sube a z-index 1 (anillo global) y lo tapaba */ } .inp-grupo > .ig-ico ~ .inp { padding-left: 2.35rem; } .inp-grupo > .ig-btn { position: absolute; right: .3rem; top: .3rem; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: none; border: none; border-radius: var(--r-sm); color: var(--suave); cursor: pointer; } .inp-grupo > .ig-btn:hover { background: var(--acento); color: var(--texto); } .inp-grupo:focus-within > .ig-ico { color: var(--marca); } /* Campo con sugerencias ("Combobox"): la lista flota bajo el campo, sin empujar el resto del formulario mientras se escribe. El margen pasa del campo al contenedor para que la lista salga pegada al borde. */ .combo { position: relative; margin-bottom: 1rem; } .combo > .inp { margin-bottom: 0; } .combo-lista { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; max-height: min(17rem, 45vh); overflow-y: auto; overscroll-behavior: contain; padding: .3rem; background: var(--elevado); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sh-lg); animation: despliega var(--ms-2) var(--ease-enfasis); } @keyframes despliega { from { opacity: 0; transform: translateY(-4px) scale(.99); } to { opacity: 1; transform: none; } } .combo-op { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .65rem; border-radius: var(--r-sm); cursor: pointer; } .combo-op[aria-selected="true"] { background: var(--marca-claro); color: var(--marca); } @media (hover: hover) { .combo-op:hover { background: var(--acento); } } .combo-nombre { font-weight: 600; font-size: .9rem; } .combo-meta { font-size: .78rem; color: var(--suave); } .combo-meta:empty { display: none; } /* Atajo bajo un campo de fecha ("+10 hábiles") y la explicación de qué ha calculado, para que nadie tenga que fiarse de un número a ciegas. */ .atajo-plazo { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; margin: -.5rem 0 1rem; } .atajo-plazo .field-hint { margin: 0; } .atajo-plazo .field-hint:empty { display: none; } /* Casillas e interruptores nativos, teñidos de marca en vez de azul sistema, y con el tamaño mínimo que un dedo acierta. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--marca); width: 1.05rem; height: 1.05rem; cursor: pointer; } /* ========================================================================= 5. BOTONES ------------------------------------------------------------------------- Familia con las mismas medidas y estados para todas las variantes, como en reui.io: relleno (primario), contorno (secundario), fantasma, y peligro. El relleno lleva un brillo interior de 1px arriba —el truco de coss-com-ui para que un botón sólido tenga volumen sin dibujarle un degradado visible— y se hunde 1px al pulsarlo, que es la única confirmación táctil que hay. ========================================================================= */ .btn, .btn-sec, .btn-peligro, .btn-fantasma { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: var(--r-md); font-weight: 600; font-size: .92rem; line-height: 1.2; letter-spacing: .005em; padding: .68rem 1.05rem; border: 1px solid transparent; white-space: nowrap; text-decoration: none; cursor: pointer; position: relative; transition: background-color var(--ms-1) var(--ease), border-color var(--ms-1) var(--ease), box-shadow var(--ms-1) var(--ease), transform var(--ms-1) var(--ease), color var(--ms-1) var(--ease); } .btn svg, .btn-sec svg, .btn-peligro svg, .btn-fantasma svg { width: 1.05em; height: 1.05em; flex-shrink: 0; } /* Primario: azul Adeslas con un brillo de arriba abajo, el borde un punto más oscuro y la sombra pegada. Es el único botón con color de la pantalla; si hay dos, uno sobra. */ .btn { background-color: var(--marca-solida); background-image: var(--relleno-brillo); color: var(--sobre-marca); border-color: var(--marca-solida-hover); box-shadow: var(--sh-brillo), var(--sh-xs); } .btn:hover:not(:disabled) { background-color: var(--marca-solida-hover); box-shadow: var(--sh-brillo), var(--sh-sm); } /* Secundario: papel con borde, letra de tinta. Neutro a propósito: el color se reserva para lo principal y para los estados. */ .btn-sec { background: var(--superficie); color: var(--texto); border-color: var(--borde); box-shadow: var(--sh-xs); padding: .56rem .9rem; } .btn-sec:hover:not(:disabled) { background: var(--gris); border-color: var(--borde-fuerte); } .btn-sec svg { color: var(--suave); } .btn-peligro { background-color: var(--peligro-solido); background-image: var(--relleno-brillo); color: var(--sobre-peligro); box-shadow: var(--sh-brillo), var(--sh-xs); } .btn-peligro:hover:not(:disabled) { filter: brightness(1.08); } .btn-peligro:focus-visible { box-shadow: var(--ring-peligro); } .btn-fantasma { background: none; color: var(--texto); padding: .56rem .9rem; } /* .btn.ghost: botón de poco peso, que se pinta como el secundario. */ .btn.ghost { background: var(--superficie); background-image: none; color: var(--texto); border-color: var(--borde); box-shadow: var(--sh-xs); } .btn.ghost:hover:not(:disabled) { background: var(--gris); border-color: var(--borde-fuerte); box-shadow: var(--sh-xs); } .btn-fantasma:hover:not(:disabled) { background: var(--acento); } .btn:disabled, .btn-sec:disabled, .btn-peligro:disabled, .btn-fantasma:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; } .btn-sm { padding: .4rem .7rem; font-size: .84rem; border-radius: var(--r-sm); gap: .35rem; } .btn-lg { padding: .86rem 1.3rem; font-size: .98rem; border-radius: var(--r-lg); } .btn-block { width: 100%; } /* Botón cuadrado de solo icono: sin esto el icono queda descentrado por el relleno horizontal heredado. */ .btn-ico { padding: 0; width: 2.4rem; height: 2.4rem; } .btn-ico.btn-sm { width: 2rem; height: 2rem; } /* Estado "cargando": el botón se bloquea, mantiene su ancho (para que la fila no dé un salto) y cambia su contenido por un girador. Lo activa app.js con cargando(btn, true/false). */ .btn.cargando, .btn-sec.cargando, .btn-peligro.cargando { color: transparent !important; pointer-events: none; } .btn.cargando::after, .btn-sec.cargando::after, .btn-peligro.cargando::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1.05em; height: 1.05em; margin: -.525em 0 0 -.525em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--sobre-marca); animation: girar .6s linear infinite; } .btn-sec.cargando::after { color: var(--marca); } @keyframes girar { to { transform: rotate(360deg); } } /* Girador suelto, para cargas dentro de un panel. */ .spinner { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.15em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; opacity: .7; animation: girar .6s linear infinite; } /* ========================================================================= 6. AVISOS EN LÍNEA ------------------------------------------------------------------------- */ .msg { font-size: .9rem; padding: .7rem .85rem; border-radius: var(--r-md); margin-bottom: 1rem; display: none; border: 1px solid transparent; } .msg.error { background: var(--rojo-bg); color: var(--rojo); border-color: var(--rojo-borde); display: block; } .msg.ok { background: var(--verde-bg); color: var(--verde); border-color: var(--verde-borde); display: block; } .msg.info { background: var(--azul-bg); color: var(--azul); border-color: var(--azul-borde); display: block; } .msg.aviso { background: var(--amarillo-bg); color: var(--amarillo); border-color: var(--amarillo-borde); display: block; } /* ========================================================================= ARMAZÓN DE LA APP ------------------------------------------------------------------------- Escritorio: el menú lateral va sobre el lienzo, a la izquierda y fijo, y cada sección se pinta en una hoja de papel que flota con un margen de medio rem y las esquinas redondeadas. La hoja no tiene desplazamiento propio (lo tiene la ventana, como siempre: el chat, las tablas y Mi día cuentan con ello): el marco es una capa fija por encima, con un hueco redondeado del tamaño de la hoja, y lo de fuera lo tapa el lienzo. El contenido pasa por debajo de las esquinas, como en una ventana. Móvil: no hay menú lateral ni marco. Cabecera arriba, barra inferior con lo frecuente y la hoja «Más» con todo lo demás. ========================================================================= */ #app { display: none; min-height: 100vh; } /* --- Cabecera ---------------------------------------------------------- En escritorio es la barra de la hoja: dónde estás (sección y apartado) y quién eres. En el móvil, el sello y los atajos. Vidrio esmerilado: el contenido se intuye al pasar por debajo, que es lo que dice que la barra está encima y no es parte de la página. */ header.top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: .75rem; min-height: var(--alto-barra); padding: max(.55rem, env(safe-area-inset-top)) var(--esp-m) .55rem; background: var(--vidrio); border-bottom: 1px solid var(--borde-suave); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); } header.top .brand { display: flex; align-items: center; gap: .6rem; min-width: 0; text-decoration: none; color: inherit; } header.top .brand .sello { width: 1.9rem; height: 1.9rem; } header.top .brand .marca-txt small { display: none; } .top-ruta { display: flex; align-items: center; gap: .45rem; min-width: 0; flex: 1; font-size: .9rem; color: var(--tenue); white-space: nowrap; } .top-ruta #top-grupo:empty, .top-ruta #top-grupo:empty + .top-barra { display: none; } .top-barra { color: var(--borde-fuerte); font-weight: 300; } #top-titulo { color: var(--texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; } header.top .me { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; margin-left: auto; font-size: .85rem; } .top-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--r-md); border: 1px solid transparent; background: none; color: var(--suave); transition: background-color var(--ms-1) var(--ease), color var(--ms-1) var(--ease), border-color var(--ms-1) var(--ease); } .top-ico:hover { background: var(--acento); color: var(--texto); } .top-ico svg { width: 1.15rem; height: 1.15rem; } .top-yo { display: inline-flex; align-items: center; gap: .55rem; padding: .2rem .55rem .2rem .2rem; border: 1px solid transparent; border-radius: var(--r-full); background: none; text-decoration: none; color: inherit; transition: background-color var(--ms-1) var(--ease), border-color var(--ms-1) var(--ease); } .top-yo:hover { background: var(--acento); } .top-yo .avatar { width: 30px; height: 30px; font-size: .72rem; } .top-yo-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } #me-nombre { font-weight: 600; color: var(--texto); font-size: .85rem; white-space: nowrap; } header.top .rol { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); } .top-sep { width: 1px; height: 1.4rem; background: var(--borde); margin: 0 .25rem; } #logout { gap: .4rem; } #logout svg { width: 1rem; height: 1rem; } /* --- Menú lateral ------------------------------------------------------ */ .side { display: none; } .side-marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; padding: .25rem .5rem; border-radius: var(--r-md); min-height: var(--alto-barra); } .side-marca:hover .sello .s-raya { transform: scaleX(1.18); } .sello .s-raya { transform-origin: 50% 50%; transform-box: fill-box; transition: transform var(--ms-3) var(--ease-enfasis); } .side-nav { display: flex; flex-direction: column; gap: 1px; padding: .5rem 0 0; flex: 1 0 auto; } .side-nav a { display: flex; align-items: center; gap: .65rem; min-height: 2.15rem; padding: .38rem .6rem; border-radius: var(--r-sm); border: 1px solid transparent; color: var(--suave); text-decoration: none; font-weight: 500; font-size: .9rem; line-height: 1.25; transition: background-color var(--ms-1) var(--ease), color var(--ms-1) var(--ease), border-color var(--ms-1) var(--ease), box-shadow var(--ms-1) var(--ease); } .nav-ico { display: inline-flex; flex: none; color: var(--tenue); transition: color var(--ms-1) var(--ease); } .nav-ico .ico { width: 1.1rem; height: 1.1rem; vertical-align: 0; } .nav-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-nav a:hover { background: var(--acento); color: var(--texto); } .side-nav a:hover .nav-ico { color: var(--suave); } /* Lo activo es una ficha de papel sobre el lienzo, como la hoja de al lado: se ve dónde estás sin un bloque de color que grite. */ .side-nav a.active { background: var(--superficie); color: var(--texto); font-weight: 600; border-color: var(--borde-suave); box-shadow: var(--sh-xs); } .side-nav a.active .nav-ico { color: var(--marca); } .side-nav .nav-sep { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin: 1.05rem 0 .2rem; padding: .3rem .6rem; border-radius: var(--r-sm); font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tenue); cursor: pointer; user-select: none; transition: color var(--ms-1) var(--ease), background-color var(--ms-1) var(--ease); } .side-nav .nav-sep:hover { color: var(--texto); background: var(--acento); } .side-nav .nav-caret { display: inline-flex; opacity: .7; transition: transform var(--ms-2) var(--ease); } .side-nav .nav-caret .ico { width: .9rem; height: .9rem; } .side-nav .nav-sep.collapsed .nav-caret { transform: rotate(-90deg); } .side-nav .nav-group { display: flex; flex-direction: column; gap: 1px; } .side-nav .nav-group.collapsed { display: none; } .side-nav .nav-spacer { height: .9rem; } .side-nav .kbd { margin-left: auto; } /* Contador: rojo porque es lo único del menú que pide hacer algo ya. */ .badge { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 1.3rem; height: 1.3rem; padding: 0 .38rem; margin-left: auto; background: var(--peligro-solido); color: var(--sobre-peligro); border-radius: var(--r-full); font-size: .7rem; font-weight: 600; line-height: 1; letter-spacing: 0; } main { flex: 1; min-width: 0; width: 100%; padding: var(--esp-m) clamp(1.25rem, 2.6vw, 2.75rem) var(--esp-l); } /* fluido: usa todo el ancho disponible. min-width:0 confina el scroll de tablas anchas al panel, no a la página */ .layout { display: flex; min-height: calc(100vh - var(--alto-barra)); } /* Al cambiar de sección, lo nuevo sube un poco al aparecer: se nota que ha cambiado sin hacer esperar a nadie (app.js pone .entra 240 ms). */ #main.entra > * { animation: aparece var(--ms-4) var(--ease-enfasis) both; } #main.entra > *:nth-child(2) { animation-delay: 30ms; } #main.entra > *:nth-child(3) { animation-delay: 60ms; } #main.entra > *:nth-child(n+4) { animation-delay: 90ms; } @keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* El chat mide su alto al pintarse (--chat-arriba): sin desplazamiento, solo fundido, para que la medida no salga 6px corta. */ #main.entra > .chat { animation-name: funde; } @keyframes funde { from { opacity: 0; } to { opacity: 1; } } /* En una pantalla de portátil pequeño el menú cede un poco de ancho. */ @media (min-width: 821px) and (max-width: 1180px) { :root { --ancho-menu: 14.5rem; } } @media (min-width: 821px) { #app { padding: var(--margen-hoja) var(--margen-hoja) 0 var(--ancho-menu); background: var(--fondo); } html { background: var(--lienzo); } .side { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; z-index: 75; width: var(--ancho-menu); padding: var(--margen-hoja) .75rem 1rem; background: var(--lienzo); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--scroll-pulgar) transparent; } /* La hoja: el marco tapa con el lienzo todo lo que cae fuera de un rectángulo redondeado. Capa decorativa, no recoge clics. */ #app::after { content: ''; position: fixed; z-index: 70; pointer-events: none; top: var(--margen-hoja); right: var(--margen-hoja); bottom: var(--margen-hoja); left: var(--ancho-menu); border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--borde-suave), 0 0 0 100vmax var(--lienzo); } header.top { top: var(--margen-hoja); padding: 0 clamp(1.25rem, 2.6vw, 2.75rem); } header.top .brand { display: none; } #top-buscar { display: none; } } /* En el móvil la cabecera es la cubierta verde, como la franja de la entrada: la app del iPhone pinta la barra de estado en blanco encima (black-translucent), así que debajo tiene que haber algo oscuro. */ @media (max-width: 820px) { header.top { padding-left: 1rem; padding-right: .5rem; gap: .5rem; background: var(--cubierta); color: var(--sobre-cubierta); border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } header.top::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); background-size: 180px; opacity: .07; mix-blend-mode: overlay; } header.top .brand .sello .s-fondo { fill: var(--sobre-cubierta-acento); } header.top .marca-txt b { color: var(--sobre-cubierta); } header.top .top-ico, header.top #logout { color: var(--sobre-cubierta-suave); } header.top .top-ico:hover, header.top #logout:hover { background: var(--sobre-cubierta-acento); color: var(--sobre-cubierta); } header.top .top-yo .avatar { box-shadow: 0 0 0 2px var(--sobre-cubierta-acento); } .top-ruta { display: none; } .top-yo-txt, .top-sep, #logout .logout-txt { display: none; } .top-yo { padding: .15rem; } #logout { width: 2.25rem; height: 2.25rem; padding: 0; border-color: transparent; background: none; box-shadow: none; color: var(--suave); } } /* ---------- CABECERA DE CADA SECCIÓN ---------- El título en serif es la voz de la casa: una sola palabra grande ("Tareas", "Nóminas") orienta más que cualquier icono. La entradilla, en gris y con medida de lectura. */ h2.title { font-family: var(--fuente-titulo); font-weight: 400; font-synthesis: none; font-size: var(--txt-4); line-height: 1.02; letter-spacing: -.014em; color: var(--texto); margin-bottom: .4rem; } p.lead { color: var(--suave); margin-bottom: 1.5rem; font-size: .95rem; line-height: 1.55; } .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: var(--esp-m); } .page-head .title { margin-bottom: .35rem; } .page-head > div:first-child { min-width: 0; } /* ---------- COMPONENTES ---------- */ .panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-xl); padding: clamp(1rem, .9rem + .45vw, 1.35rem); margin-bottom: var(--esp-s); box-shadow: var(--sh-xs); } /* Las tablas tienen su propio recuadro con altura limitada → la barra de scroll horizontal queda SIEMPRE visible abajo (antes quedaba al final de la tabla, fuera de pantalla) y la cabecera se mantiene fija arriba. */ .panel:has(table.tablareg) { max-height: 72vh; overflow: auto; } /* Barra de desplazamiento SIEMPRE visible (en Mac está oculta por defecto). */ .panel { scrollbar-width: thin; scrollbar-color: var(--scroll-pulgar) var(--scroll-fondo); } .panel::-webkit-scrollbar { height: 14px; width: 12px; -webkit-appearance: none; } .panel::-webkit-scrollbar-track { background: var(--scroll-fondo); } .panel::-webkit-scrollbar-thumb { background: var(--scroll-pulgar); border-radius: var(--r-full); border: 3px solid var(--scroll-fondo); } .panel::-webkit-scrollbar-thumb:hover { background: var(--marca-solida); } .panel::-webkit-scrollbar-corner { background: var(--scroll-fondo); } .row { display: flex; gap: .85rem; flex-wrap: wrap; } .row > * { flex: 1; min-width: 160px; } .field { margin-bottom: 1rem; } textarea.inp { resize: vertical; min-height: 84px; line-height: 1.5; } .toolbar { display: flex; gap: .65rem; flex-wrap: wrap; align-items: end; margin-bottom: 1.25rem; } .toolbar > button { min-height: calc(2.65rem + 2px); } /* misma altura que los .inp para alinear "Limpiar" */ .toolbar label { color: var(--suave); font-weight: 500; font-size: .78rem; } /* En el móvil los filtros van de dos en dos: en una columna, una hoja con seis filtros ocupaba la pantalla entera antes de la primera fila. Lo que no es un campo (botones, avisos, la búsqueda) va a lo ancho. */ @media (max-width: 600px) { .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: .6rem .55rem; } .toolbar > * { min-width: 0 !important; width: auto; flex: none; } .toolbar > :not(.field), .toolbar > .field:has(input[type="search"]), .toolbar > .field:has(input:not([type])), .toolbar > .field:has(input[type="text"]) { grid-column: 1 / -1; } .toolbar .field { min-width: 0; width: 100%; } .toolbar > button { width: 100%; } .row { gap: .6rem; } .row > * { min-width: 0; flex: 1 1 100%; } .stats { grid-template-columns: repeat(2, 1fr); gap: .6rem; } .modal { padding: 1.2rem; } .page-head { gap: .75rem; align-items: stretch; } /* Los botones de la cabecera, uno debajo de otro y todos del mismo ancho. */ .page-head > .fila { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; } .page-head .btn, .page-head > .fila > .btn-sec { width: 100%; justify-content: center; } h2.title { font-size: 2.15rem; } } .toolbar .field, .toolbar .inp { margin-bottom: 0; } .item { border: 1px solid var(--borde); border-radius: var(--r-xl); padding: 1rem 1.1rem; margin-bottom: .75rem; background: var(--superficie); box-shadow: var(--sh-xs); transition: box-shadow var(--ms-2) var(--ease), border-color var(--ms-2) var(--ease), transform var(--ms-2) var(--ease); } .item:hover { box-shadow: var(--sh-md); border-color: var(--borde-fuerte); } .item.leido { opacity: .6; } .item .head { display: flex; justify-content: space-between; align-items: start; gap: .6rem; } .item .asunto { font-weight: 600; } .item .meta { font-size: .8rem; color: var(--suave); margin-top: .15rem; } .item .cuerpo { margin: .6rem 0; white-space: pre-wrap; } .item .acciones { display: flex; gap: .5rem; flex-wrap: wrap; } .item .tags { display: flex; gap: .35rem; flex-wrap: wrap; } .item.anuncio.fijado { border-color: rgba(var(--oro-rgb), .45); background: var(--oro-bg); box-shadow: inset 3px 0 0 var(--oro), var(--sh-xs); } .hilo { margin-top: .7rem; border-top: 1px solid var(--borde); padding-top: .55rem; } .hilo > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--marca); list-style: none; } .hilo > summary::-webkit-details-marker { display: none; } /* Flechas y marcas dibujadas con los mismos trazos que ico(): el SVG hace de máscara y el color es el del texto (currentColor). Nada de símbolos. */ :root { --ico-derecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); --ico-abajo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --ico-exclama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10M12 20h.01'/%3E%3C/svg%3E"); --ico-punto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12h.01'/%3E%3C/svg%3E"); --ico-hecho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .hilo > summary::before { content: ''; display: inline-block; width: .75em; height: .75em; margin-right: .4rem; vertical-align: -.05em; background: currentColor; -webkit-mask: var(--ico-derecha) center / contain no-repeat; mask: var(--ico-derecha) center / contain no-repeat; transition: transform var(--ms-1) var(--ease); } .hilo[open] > summary::before { transform: rotate(90deg); } .hilo-body { margin-top: .7rem; } .resp-input { width: 100%; margin-bottom: .4rem; } /* Avatares de iniciales: tinte de su tono y la inicial en el mismo tono, más oscuro (data-tono lo pone avatar() en app.js). Sin tono, el verde de la casa. */ .avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--marca-solida); color: var(--sobre-marca); font-weight: 600; font-size: .82rem; letter-spacing: .02em; line-height: 1; box-shadow: inset 0 0 0 1px var(--borde-suave); } .avatar[data-tono="1"] { background: var(--av-1-bg); color: var(--av-1); } .avatar[data-tono="2"] { background: var(--av-2-bg); color: var(--av-2); } .avatar[data-tono="3"] { background: var(--av-3-bg); color: var(--av-3); } .avatar[data-tono="4"] { background: var(--av-4-bg); color: var(--av-4); } .avatar[data-tono="5"] { background: var(--av-5-bg); color: var(--av-5); } .avatar[data-tono="6"] { background: var(--av-6-bg); color: var(--av-6); } .avatar.sm { width: 26px; height: 26px; font-size: .64rem; } .rec-from { display: flex; align-items: center; gap: .7rem; } .rec-nombre { font-weight: 600; font-size: .95rem; line-height: 1.15; } .u-cell { display: flex; align-items: center; gap: .6rem; } /* Etiqueta: versalitas pequeñas con aire. La prioridad lleva además su punto (forma, no solo color). */ .tag { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; font-size: .66rem; font-weight: 600; letter-spacing: .07em; line-height: 1.5; padding: .12rem .5rem; border-radius: var(--r-full); text-transform: uppercase; background: var(--neutro-bg); color: var(--neutro); white-space: nowrap; } .tag.urgente { background: var(--rojo-bg); color: var(--rojo); } .tag.alta { background: var(--rojo-bg); color: var(--rojo); } .tag.media { background: var(--amarillo-bg); color: var(--amarillo); } .tag.baja { background: var(--verde-bg); color: var(--verde); } .tag.resuelto { background: var(--verde-bg); color: var(--verde); } .tag.dep { background: var(--marca-claro); color: var(--marca); } .tag.alta::before, .tag.media::before, .tag.baja::before, .tag.urgente::before { content: ''; width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; flex: none; } /* ---------- KANBAN ---------- */ .kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; align-items: start; } /* Controles de Tareas exclusivos del móvil (los muestra la media query). */ .tareas-f-toggle, .tabs-est { display: none; } /* Columnas hundidas en la hoja y tarjetas de papel encima: el tablero se lee como un corcho con fichas. La prioridad es un carril en el borde izquierdo que sigue la curva de la esquina, y además la etiqueta. */ .col { background: var(--acento); border: 1px solid var(--borde-suave); border-radius: var(--r-xl); padding: .6rem; } .col-head { display: flex; align-items: center; justify-content: space-between; margin: .15rem 0 .7rem; padding: 0 .3rem; } .col-tit { display: flex; align-items: center; gap: .5rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--suave); font-weight: 600; } .col-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 3px var(--superficie); } .col-dot.pendiente { background: var(--tenue); } .col-dot.en_curso { background: var(--azul); } .col-dot.completada { background: var(--verde); } .col-count { background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--r-full); font-size: .7rem; font-weight: 600; padding: .05rem .5rem; color: var(--suave); } .col.drop { background: var(--marca-claro); outline: 2px dashed rgba(var(--marca-rgb), .55); outline-offset: -5px; } .col-body { min-height: 140px; } .task { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); padding: .8rem .85rem .75rem 1rem; margin-bottom: .55rem; box-shadow: var(--sh-xs); cursor: grab; transition: box-shadow var(--ms-2) var(--ease), transform var(--ms-2) var(--ease), border-color var(--ms-2) var(--ease); } .task:hover { box-shadow: var(--sh-md); border-color: var(--borde-fuerte); transform: translateY(-1px); } .task.dragging { opacity: .45; transform: rotate(-1deg); } .task.prio-alta { box-shadow: inset 3px 0 0 var(--rojo), var(--sh-xs); } .task.prio-media { box-shadow: inset 3px 0 0 var(--amarillo), var(--sh-xs); } .task.prio-baja { box-shadow: inset 3px 0 0 var(--verde), var(--sh-xs); } .task.prio-alta:hover { box-shadow: inset 3px 0 0 var(--rojo), var(--sh-md); } .task.prio-media:hover { box-shadow: inset 3px 0 0 var(--amarillo), var(--sh-md); } .task.prio-baja:hover { box-shadow: inset 3px 0 0 var(--verde), var(--sh-md); } .task .t-top { display: flex; justify-content: space-between; align-items: start; gap: .6rem; } .task .t-tit { font-weight: 600; font-size: .93rem; line-height: 1.3; text-wrap: pretty; } .task .t-meta { font-size: .8rem; color: var(--suave); margin-top: .35rem; line-height: 1.45; } .task .t-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; } .task .estado-sel { min-width: 0; } .task .t-foot + .t-foot { padding-top: .6rem; border-top: 1px solid var(--borde-suave); } .avatars { display: flex; } .avatars .avatar { width: 26px; height: 26px; font-size: .62rem; box-shadow: 0 0 0 2px var(--superficie); margin-left: -7px; } .avatars .avatar:first-child { margin-left: 0; } .due { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--suave); white-space: nowrap; } .due .ico { opacity: .8; } .due.overdue { color: var(--rojo); font-weight: 600; } .due.today { color: var(--amarillo); font-weight: 600; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--r-sm); padding: .25rem .45rem; min-height: 1.9rem; font-size: .82rem; cursor: pointer; color: var(--suave); transition: background-color var(--ms-1) var(--ease), color var(--ms-1) var(--ease), border-color var(--ms-1) var(--ease), transform var(--ms-1) var(--ease); } .icon-btn:hover { background: var(--gris); color: var(--texto); border-color: var(--borde); } .icon-btn[data-borrar]:hover, .icon-btn[title^="Borrar"]:hover, .icon-btn[title^="Eliminar"]:hover { color: var(--rojo); background: var(--rojo-bg); border-color: var(--rojo-borde); } .estado-sel { font-size: .76rem; font-weight: 500; padding: .28rem .5rem; border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); color: var(--texto); cursor: pointer; max-width: 220px; } .inline-sel { font-size: .78rem; padding: .26rem 1.5rem .26rem .5rem; border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); color: var(--texto); cursor: pointer; max-width: 200px; min-width: 60px; width: 100%; } .inline-sel:hover { border-color: rgba(var(--marca-rgb), .5); } /* Celda "pulsa para editar" (Organismo / Asignado): parece una casilla desplegable (borde + flecha), pero es ligera; el