/* Prospección LinkedIn · hoja de estilo Sin dependencias externas: la Mac Mini puede quedarse sin red y la interfaz tiene que seguir viéndose igual. Colores de la marca Neurya. Los tres azules son de marca; los grises y los estados se derivaron de ellos y TODOS los pares se verificaron contra WCAG AA (4.5:1). Dos avisos que salieron de medirlos: · El Gris Azulado #adacbb está documentado como "texto secundario" pero da 2.24:1 sobre blanco. Aquí se usa solo como borde, nunca como texto. · El Azul Medio #4b78ba da 4.47:1, justo por debajo del mínimo. Sirve de fondo de botón o de badge, no de texto. Como texto va el Azul Oscuro. */ :root { --papel: #f3f6fa; /* fondo de página, azulado como el sitio */ --superficie: #ffffff; --tinta: #13182a; /* Azul Profundo · texto principal de marca */ --tinta-2: #3f4a5f; --tinta-3: #5b6678; /* 5.36:1 sobre --papel */ --linea: #dcdfe8; /* derivado del Gris Claro #e2e1e7 */ --acento: #215382; /* Azul Oscuro · primario de marca, 8.00:1 */ --acento-fondo: #4b78ba; /* Azul Medio · SOLO como fondo */ --ok: #1c6b46; --ok-fondo: #e2f4ea; --alerta: #7d5310; --alerta-fondo: #faeed6; --mal: #a3271d; --mal-fondo: #fae3e0; --gris-fondo: #e7ebf2; /* Par del botón primario. Va aparte de --acento porque en oscuro NO puede ser el mismo: el acento se aclara para poder leerse como texto, y texto blanco sobre un azul claro da 2.15:1. */ --boton-fondo: #215382; --boton-tinta: #ffffff; /* 8.00:1 */ /* Fondos SÓLIDOS: los que llevan texto blanco encima pase lo que pase. No se aclaran en modo oscuro como los demás — si lo hicieran, el blanco dejaría de leerse. Es la diferencia entre un color que se usa como TEXTO (se aclara) y uno que se usa como FONDO de una pastilla (se queda oscuro). */ --ok-solido: #1c6b46; /* 6.48:1 con blanco */ --alerta-solido: #8a5a10; /* 5.91:1 con blanco */ /* Escala de radios. Había ocho valores distintos —3, 4, 5, 6, 7, 8, 10 y 999— repartidos sin criterio. No se notaba de uno en uno; junto, se lee como descuido. Tres pasos y la píldora: pequeño para lo que se etiqueta, medio para las superficies, grande para los contenedores. */ --radio-sm: 4px; /* etiquetas, celdas, barras */ --radio-md: 8px; /* tarjetas, tablas, avisos, botones */ --radio-lg: 12px; /* contenedores grandes */ --radio-pill: 999px; } @media (prefers-color-scheme: dark) { :root { /* En oscuro los azules de marca se aclaran para poder leerse: el #215382 se pierde contra el fondo. Es la misma regla que sigue el Hub. */ --papel: #13182a; /* Azul Profundo · el fondo oscuro de marca */ --superficie: #1b2236; --tinta: #d3dce9; --tinta-2: #a6b3c8; --tinta-3: #8794a9; --linea: #2c3550; --acento: #8fb3e6; /* versión clara del primario */ --acento-fondo: #4b78ba; --ok: #7ee0a8; /* verde de éxito de neurya.com */ --ok-fondo: #17301f; --alerta: #e0bd6e; --alerta-fondo: #2e2716; --mal: #e8938a; --mal-fondo: #33201d; --gris-fondo: #242c42; /* Fondo claro con el Azul Profundo encima: 8.19:1. Invertir el par es lo que exige el modo oscuro; mantener blanco encima daría 2.15:1. */ --boton-fondo: #8fb3e6; --boton-tinta: #13182a; } } * { box-sizing: border-box; } /* Foco visible en TODO lo que se puede enfocar, no componente por componente. Antes estaba repetido en cinco reglas y faltaba en enlaces y botones: quien navega con teclado se perdía en la tabla de cuentas. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--radio-sm); } /* Respuesta al puntero en 150 ms. Sin esto nada acusa recibo de un hover y la interfaz se siente muerta; por encima de 300 ms se siente lenta. */ a, button, .boton, .chip, .tabla tbody tr { transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease; } /* Quien pidió menos movimiento no lo pide por gusto: mareo, vértigo, migraña. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--papel); color: var(--tinta); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } .contenedor { max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* ---------- barra superior ---------- */ .barra { background: var(--superficie); border-bottom: 1px solid var(--linea); } .barra-int { display: flex; align-items: center; gap: 32px; height: 58px; } .marca { font-weight: 700; letter-spacing: -0.02em; text-decoration: none; color: var(--tinta); } .marca span { color: var(--acento); } .marca-grande { font-size: 22px; margin: 0 0 24px; display: block; } .barra nav { display: flex; gap: 20px; flex: 1; } .barra nav a { color: var(--tinta-2); text-decoration: none; font-size: 14px; padding: 4px 0; border-bottom: 2px solid transparent; } .barra nav a.activo { color: var(--tinta); border-bottom-color: var(--acento); } .sesion { display: flex; align-items: center; gap: 12px; font-size: 13px; } .quien { font-weight: 600; } .rol { color: var(--tinta-3); text-transform: capitalize; } .salir { color: var(--tinta-3); text-decoration: none; } .salir:hover { color: var(--tinta); } /* ---------- entrar ---------- */ .entrar { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .entrar .tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-lg); padding: 36px; width: 100%; max-width: 380px; } .entrar label { display: block; font-size: 13px; font-weight: 600; color: var(--tinta-2); margin: 16px 0 6px; } .entrar input { width: 100%; padding: 10px 12px; font-size: 15px; border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--papel); color: var(--tinta); } .entrar input:focus { outline: 2px solid var(--acento); outline-offset: 1px; } /* La pantalla de entrar nunca había tenido un enlace, así que salían con el azul por defecto del navegador — ilegible sobre el fondo oscuro. Apareció al añadir «Entrar con otra cuenta» en el paso del código. */ .entrar a { color: var(--acento); } .entrar a:hover { text-decoration: none; } .entrar button { width: 100%; margin-top: 24px; padding: 11px; background: var(--boton-fondo); color: var(--boton-tinta); border: 0; border-radius: var(--radio-md); font-size: 15px; font-weight: 600; cursor: pointer; } .entrar button:hover { filter: brightness(1.08); } /* ---------- cabecera ---------- */ .cabecera { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin: 36px 0 22px; } h1 { font-size: 26px; letter-spacing: -0.025em; margin: 0 0 3px; font-weight: 700; } h2 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); margin: 36px 0 12px; font-weight: 600; } .sub { color: var(--tinta-3); margin: 0; font-size: 14px; } .miga { font-size: 13px; color: var(--tinta-3); margin: 0 0 6px; } .miga a { color: var(--tinta-3); } /* `align-items: center` no es cosmético: sin él los flex hijos se estiran a la altura del más alto. Con un botón de 44 px en la fila, cada chip se estiraba a 44 px con el texto pegado arriba — que es exactamente por qué la cabecera se veía desalineada. */ .indicadores { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ---------- chips de estado ---------- */ /* Un chip informa; no se pulsa. Por eso lleva punto de color y borde suave en vez de fondo saturado: antes "Ventana cerrada" parecía un botón, y un botón que no hace nada al pulsarlo es de lo que más desconcierta. */ .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 10px 5px 8px; border-radius: var(--radio-pill); white-space: nowrap; border: 1px solid transparent; } .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .chip.mini { font-size: 11px; padding: 3px 8px 3px 6px; } .chip.mini::before { width: 5px; height: 5px; } .chip-ok { background: var(--ok-fondo); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 22%, transparent); } .chip-alerta { background: var(--alerta-fondo); color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 22%, transparent); } .chip-mal { background: var(--mal-fondo); color: var(--mal); border-color: color-mix(in srgb, var(--mal) 22%, transparent); } .chip-gris { background: var(--gris-fondo); color: var(--tinta-3); border-color: var(--linea); } /* ---------- avisos ---------- */ .aviso { padding: 14px 18px; border-radius: var(--radio-md); margin: 0 0 20px; border: 1px solid var(--linea); background: var(--superficie); border-left: 3px solid var(--tinta-3); font-size: 14px; } .aviso ul { margin: 8px 0 0; padding-left: 20px; } .aviso li { margin-bottom: 4px; } .aviso-alerta { border-left-color: var(--alerta); background: var(--alerta-fondo); color: var(--alerta); } .aviso-alerta a { color: inherit; } .aviso-error { border-left-color: var(--mal); background: var(--mal-fondo); color: var(--mal); } .aviso-ok { border-left-color: var(--ok); background: var(--ok-fondo); color: var(--ok); } .aviso-ok a, .aviso-error a { color: inherit; } /* ---------- tabla ---------- */ /* La tabla va dentro de un contenedor que se desplaza solo: en un teléfono no cabe, y lo que NUNCA debe pasar es que la página entera se desplace en horizontal. El scroll se queda dentro de la tabla. */ .tabla-marco { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--superficie); -webkit-overflow-scrolling: touch; } .tabla { width: 100%; border-collapse: collapse; background: var(--superficie); /* Con ocho columnas, 640 hacía que se comprimieran en vez de desplazarse: los nombres partían en dos líneas y la fila crecía al doble. Mejor que empuje el scroll horizontal del `.tabla-marco`, que ya tiene su indicio. */ font-size: 14px; min-width: 1020px; } .tabla tbody tr:hover { background: var(--papel); } /* Cifras alineadas: con tipografía tabular las columnas de números no bailan al cambiar de valor. */ .numero, .tabla .der { font-variant-numeric: tabular-nums; } .tabla th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); padding: 11px 16px; border-bottom: 1px solid var(--linea); background: var(--papel); } .tabla td { padding: 13px 16px; border-bottom: 1px solid var(--linea); vertical-align: top; } /* `nowrap` SOLO en las tablas densas de valores cortos —Operación tiene siete columnas de fechas, cifras y chips, y sin esto los nombres partían en dos líneas y la fila crecía al doble. Puesto en `.tabla td` a secas rompía la biblioteca de copy: ahí las celdas llevan prosa, y una línea de 110 caracteres sin cortar empuja la tabla al scroll horizontal y deja el texto tapado. Cada tabla dice si es compacta. */ .tabla.compacta td { white-space: nowrap; } .tabla.compacta td .celda-titulo, .tabla.compacta td .celda-titulo * { white-space: normal; } .tabla tbody tr:last-child td { border-bottom: 0; } .tabla .der { text-align: right; } .tabla a { color: var(--tinta); } .fuerte { font-weight: 600; display: block; } /* `display: block` en un `` lo saca de la fila: la celda deja de ser celda y su borde inferior queda medio renglón por debajo del de las demás. Se veía en las CINCO tablas de la app como una línea partida a media altura, y se leía como suciedad de render, no como un fallo de CSS. El `block` es para el `` que va apilado sobre otro dentro de una celda; en la celda misma no pinta nada. */ .tabla td.fuerte { display: table-cell; } .tenue { color: var(--tinta-3); font-size: 13px; } .numero { font-weight: 600; font-variant-numeric: tabular-nums; } .error-corto { display: block; margin-top: 2px; } .barra-cupo { width: 90px; height: 4px; background: var(--gris-fondo); border-radius: var(--radio-sm); margin: 5px 0 0 auto; overflow: hidden; } .barra-cupo-int { height: 100%; background: var(--acento); } /* ---------- rejilla de datos ---------- */ .rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 8px; } .tarjeta-dato { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; } .etiqueta { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); } .valor { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } .valor.grande { font-size: 26px; letter-spacing: -0.02em; } /* ---------- vacío ---------- */ .vacio { background: var(--superficie); border: 1px dashed var(--linea); border-radius: var(--radio-md); padding: 40px 24px; text-align: center; color: var(--tinta-2); } .vacio p { margin: 0 0 6px; } code { background: var(--gris-fondo); padding: 2px 6px; border-radius: var(--radio-sm); font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---------- formularios ---------- */ .formulario { max-width: 620px; } .formulario fieldset { border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--superficie); padding: 20px 22px; margin: 0 0 18px; } .formulario legend { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); padding: 0 8px; } .formulario label { display: block; font-size: 13px; font-weight: 600; color: var(--tinta-2); margin: 16px 0 6px; } .formulario fieldset > label:first-of-type { margin-top: 4px; } .formulario input, .formulario select { width: 100%; padding: 9px 11px; font-size: 14px; border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--papel); color: var(--tinta); } .formulario input:disabled { color: var(--tinta-3); } .formulario input:focus, .formulario select:focus { outline: 2px solid var(--acento); outline-offset: 1px; } .ayuda { font-size: 12.5px; color: var(--tinta-3); margin: 6px 0 0; line-height: 1.45; } .acciones { display: flex; align-items: center; gap: 14px; } /* Tres niveles, y solo uno por pantalla puede ser el primario. Todos comparten la misma caja para que alineen entre sí y con los chips. */ .boton, .boton-tenue, .boton-peligro, .formulario button, .tarjeta-accion button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 16px; border-radius: var(--radio-md); border: 1px solid transparent; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; } /* Primario: la acción que la pantalla quiere que hagas. */ .boton, .formulario button, .tarjeta-accion button { background: var(--boton-fondo); color: var(--boton-tinta); box-shadow: 0 1px 2px rgb(0 0 0 / .10); } .boton:hover, .formulario button:hover, .tarjeta-accion button:hover { filter: brightness(1.07); box-shadow: 0 2px 6px rgb(0 0 0 / .16); } .boton:active, .formulario button:active { filter: brightness(.96); box-shadow: none; } /* Secundario: disponible, pero no es lo que vienes a hacer. NO se combina con .boton — juntas se pisan el color y el texto desaparece. */ .boton-tenue { background: var(--superficie); color: var(--tinta-2); border-color: var(--linea); } .boton-tenue:hover { border-color: var(--tinta-3); color: var(--tinta); } /* Destructivo: separado del resto y con el color semántico del peligro. */ .boton-peligro { background: transparent; color: var(--mal); border-color: var(--mal); } .boton-peligro:hover { background: var(--mal-fondo); } .boton[disabled], .formulario button[disabled] { opacity: .45; cursor: not-allowed; filter: none; box-shadow: none; } /* ---------- tarjeta de acción ---------- */ .tarjeta-accion { background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--acento); border-radius: var(--radio-md); padding: 18px 22px; margin: 0 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .tarjeta-accion h3 { margin: 0 0 4px; font-size: 15px; } .tarjeta-accion p { margin: 0; max-width: 52ch; font-size: 13px; } .linea { display: flex; gap: 8px; align-items: center; } .linea input { padding: 9px 11px; font-size: 14px; border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--papel); color: var(--tinta); width: 220px; } .linea input:focus { outline: 2px solid var(--acento); outline-offset: 1px; } h3 { font-size: 15px; margin: 0 0 6px; } /* ---------- zona de riesgo ---------- */ .peligro { max-width: 620px; margin: 32px 0 0; background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--mal); border-radius: var(--radio-md); padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .peligro h3 { margin: 0 0 4px; font-size: 15px; } .peligro p { margin: 0; max-width: 46ch; font-size: 13px; } .boton-peligro:hover { background: var(--mal-fondo); } /* ---------- campo de contraseña con ojo ---------- */ .campo-contrasena { position: relative; display: block; } .campo-contrasena input { width: 100%; padding-right: 42px !important; } /* En la caja de conectar el campo va en línea, no a lo ancho. */ .linea .campo-contrasena { width: 220px; } .linea .campo-contrasena input { width: 100%; } .ojo { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: var(--radio-sm); color: var(--tinta-3); cursor: pointer; } .ojo:hover { color: var(--tinta); background: var(--gris-fondo); } .ojo:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; } /* El botón del formulario de entrar ocupa todo el ancho; el ojo no debe heredar ese estilo. */ .entrar .ojo { width: 32px; margin-top: 0; background: transparent; } .entrar .ojo:hover { background: var(--gris-fondo); } /* El ojo no debe heredar el estilo de botón principal cuando vive dentro de una tarjeta de acción o un formulario. */ .tarjeta-accion .ojo, .formulario .ojo, .entrar .ojo { background: transparent; color: var(--tinta-3); width: 32px; height: 32px; padding: 0; margin: 0; font-weight: 400; } .tarjeta-accion .ojo:hover, .formulario .ojo:hover, .entrar .ojo:hover { background: var(--gris-fondo); color: var(--tinta); filter: none; } .conectar-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .casilla { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tinta-3); cursor: pointer; } .casilla input { width: auto; margin: 0; accent-color: var(--acento); } /* ---------- biblioteca de copy ---------- */ .dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; } @media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } } .dos-columnas h2:first-child { margin-top: 0; } .dos-columnas .formulario { max-width: none; } textarea { width: 100%; padding: 11px 13px; font-size: 14px; line-height: 1.6; border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--papel); color: var(--tinta); resize: vertical; } textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; } textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .tarjeta-version { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 16px 18px; margin-bottom: 16px; } .tarjeta-version.borrador { border-left: 3px solid var(--alerta); } .tarjeta-version.vigente { border-left: 3px solid var(--ok); } .version-cab { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .version-cab .tenue { display: block; } .boton-ok { padding: 7px 15px; border: 0; border-radius: var(--radio-md); background: var(--ok-solido); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; } .boton-ok:hover { filter: brightness(1.1); } .previa-bloque { margin-bottom: 12px; } .previa-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .previa-texto { background: var(--papel); border-radius: var(--radio-md); padding: 12px 14px; white-space: pre-wrap; font-size: 14px; line-height: 1.6; } .excede { color: var(--mal); font-weight: 600; font-size: 13px; } .progreso { height: 5px; background: var(--gris-fondo); border-radius: var(--radio-sm); overflow: hidden; margin: 8px 0; } .progreso.fina { height: 3px; } .progreso-int { height: 100%; background: var(--acento); } .progreso-int.listo { background: var(--ok); } .progreso-int.casi { background: var(--alerta); } .progreso-int.mal { background: var(--mal); } .aviso-linea { font-size: 12.5px; margin: 6px 0 0; } .aviso-linea.ok { color: var(--tinta-3); } .aviso-linea.mal { color: var(--mal); font-weight: 600; } .card-progreso { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 16px 18px; margin-bottom: 8px; } .card-progreso .d-flex { display: flex; justify-content: space-between; align-items: baseline; } .card-progreso p { margin: 6px 0 0; font-size: 12.5px; } .recorte { display: inline-block; max-width: 100%; } .recorte.fst { font-style: italic; color: var(--tinta-3); } .estrella { color: var(--alerta); font-size: 13px; } /* ---------- aviso de respuestas en el menú ---------- */ .punto { display: inline-block; min-width: 1.15rem; padding: 0 .3rem; border-radius: var(--radio-pill); background: var(--alerta-solido); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.15rem; text-align: center; vertical-align: text-top; } /* ========================================================================== Pantallas chicas ========================================================================== Dayra va a entrar desde el teléfono en cuanto exista el subdominio. Los cortes siguen los anchos reales de dispositivo: 640 (teléfono grande), 768 (tableta vertical). No se ocultan columnas — la tabla se desplaza dentro de su marco, y así no se pierde información por ir en móvil. */ @media (max-width: 768px) { .contenedor { padding: 0 16px; } /* La barra pasa a dos filas: marca y sesión arriba, navegación abajo. */ .barra-int { height: auto; flex-wrap: wrap; gap: 12px; padding: 12px 0; } .barra-int nav { order: 3; /* `flex: none` no es opcional: `.barra nav` trae `flex: 1`, que fija flex-basis en 0 y gana sobre `width`. Sin esto la navegación se encoge en vez de bajar a su propia línea, y los cuatro enlaces se apretujan contra el nombre de quien entró. */ flex: none; width: 100%; display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--linea); padding-top: 4px; } .barra-int nav a { /* 44px de alto: es el mínimo para acertar con el pulgar. */ padding: 12px 14px; white-space: nowrap; min-height: 44px; display: flex; align-items: center; } .sesion { margin-left: auto; } /* La cabecera apila el título y sus acciones. */ .cabecera { flex-direction: column; align-items: flex-start; gap: 12px; } .indicadores { flex-wrap: wrap; } h1 { font-size: 22px; } /* Botones y campos a lo ancho, para no tener que apuntar. */ .acciones { flex-direction: column; align-items: stretch; } .acciones .boton, .acciones .boton-tenue, .acciones .boton-peligro, .acciones form, .acciones form button, .acciones > button { width: 100%; } .formulario input, .formulario select, .linea input { width: 100%; } .rejilla { grid-template-columns: 1fr; } } @media (max-width: 640px) { /* Las tarjetas de respuesta ocupan el ancho completo. */ .tarjeta-version { padding: 14px; } .previa-texto { font-size: 14px; } } /* Todo lo que se toca tiene 44px de alto como mínimo. Un chip informativo no cuenta: no se toca. */ /* 44 px es el mínimo para acertar con el pulgar. En escritorio 38 basta y se ve mejor; en táctil se sube. */ @media (pointer: coarse) { /* La lista incluye los submits del formulario y de las tarjetas: "Entrar", "Guardar cambios" y "Conectar" son los tres más importantes de la plataforma y se quedaban en los 38 px de la caja compartida. */ .boton, .boton-tenue, .boton-peligro, .barra-int nav a, .formulario button, .tarjeta-accion button, .entrar button { min-height: 44px; } } /* ========================================================================== Resumen de cabecera ========================================================================== Un tablero sin cifras que resuman no es un tablero: es una lista. Estas cuatro dicen, de un vistazo, si la semana va bien o no — que es la pregunta con la que Dayra abre esta pantalla. */ .resumen-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio-lg); overflow: hidden; margin-bottom: 24px; } .resumen-dato { background: var(--superficie); padding: 16px 18px; } .resumen-dato .etiqueta { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 6px; } .resumen-dato .valor { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tinta); } .resumen-dato .pie { font-size: 12px; color: var(--tinta-3); } .resumen-dato .valor.atencion { color: var(--alerta); } .resumen-dato .valor.apagado { color: var(--tinta-3); } /* La tabla, con la jerarquía que le faltaba: el nombre manda, el correo acompaña, y las filas respiran. */ .tabla td { padding: 15px 16px; } .celda-titulo { display: flex; flex-direction: column; gap: 3px; } .celda-titulo a { font-weight: 600; text-decoration: none; } .celda-titulo a:hover { color: var(--acento); text-decoration: underline; } .celda-titulo .tenue { font-size: 12.5px; } .barra-cupo { width: 100%; max-width: 120px; height: 5px; background: var(--gris-fondo); border-radius: var(--radio-sm); margin: 7px 0 0 auto; overflow: hidden; } .barra-cupo-int { height: 100%; background: var(--acento); border-radius: var(--radio-sm); } .barra-cupo-int.lleno { background: var(--alerta); } /* Estado vacío: una pantalla en blanco no dice qué hacer. */ .vacio { text-align: center; padding: 56px 24px; background: var(--superficie); border: 1px dashed var(--linea); border-radius: var(--radio-lg); } .vacio p { margin: 0 0 8px; } .vacio .ayuda { max-width: 46ch; margin: 0 auto 20px; } /* ---------- panel "qué sigue" ---------- La pantalla decía en qué estado están las cuentas pero no qué va a pasar después, que es la segunda pregunta de cualquiera que la abre. También cierra la página: sin esto el contenido terminaba a un tercio y el resto era vacío. */ .proximo { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; margin-top: 24px; padding: 20px 22px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-lg); } .proximo .etiqueta { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); } .proximo-titulo { margin: 6px 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; } .proximo .ayuda { margin: 0; max-width: 62ch; } .proximo-cifras { display: flex; gap: 32px; } .proximo-cifras .valor { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .proximo-cifras .etiqueta { margin-top: 2px; } @media (max-width: 768px) { .proximo { flex-direction: column; align-items: flex-start; gap: 18px; } .proximo-cifras { gap: 28px; } } /* Etiqueta de versión. No es un chip de estado: un "v1" no informa de salud, y ponerle el punto de color lo hacía parecer una alerta más. */ .etiqueta-version { display: inline-block; padding: 2px 7px; border-radius: var(--radio-sm); background: var(--gris-fondo); color: var(--tinta-3); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } /* "Editar" era texto suelto al final de la fila y no parecía pulsable. */ .tabla .accion-fila { font-size: 13px; font-weight: 600; color: var(--acento); text-decoration: none; padding: 6px 10px; border-radius: var(--radio-md); } .tabla .accion-fila:hover { background: var(--gris-fondo); color: var(--acento); } /* ---------- biblioteca de copy ---------- */ .cabecera-lista { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 36px 0 12px; } .cabecera-lista h2 { margin: 0; } .filtros { display: flex; gap: 8px; flex-wrap: wrap; } .filtros input, .filtros select { height: 36px; padding: 0 11px; font-size: 13px; border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--superficie); color: var(--tinta); } .filtros input { width: 220px; } .filtros input::placeholder { color: var(--tinta-3); } .tabla .centro { text-align: center; } .matriz .celda-llena { font-weight: 600; font-variant-numeric: tabular-nums; } .celda-hueco { display: inline-block; padding: 2px 9px; border-radius: var(--radio-sm); background: var(--alerta-fondo); color: var(--alerta); font-size: 12px; font-weight: 600; } .sin-resultados { margin: 16px 0 0; text-align: center; } /* Etiqueta que solo leen los lectores de pantalla. Los selectores se entienden por su contenido, pero sin etiqueta un lector de pantalla anuncia "combo box" y ya. */ .visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* El contenido llegaba al borde inferior y la última fila quedaba cortada. El selector es `main.contenedor` y no `main` a propósito: `.contenedor` usa `padding: 0 24px`, un atajo que pone el padding-bottom en 0, y con más especificidad. La regla suelta sobre `main` no hacía absolutamente nada. */ main.contenedor { padding-bottom: 96px; } /* ========================================================================== Ajustes finales de pantalla chica ========================================================================== Van al FINAL del archivo a propósito. Las reglas de componentes se escribieron después del bloque responsive de arriba, y a igual especificidad gana la última: un `@media` colocado antes no anula nada. */ @media (max-width: 768px) { /* Dos columnas, no tres: con `auto-fit` cabían tres y la cuarta quedaba sola ocupando media pantalla en blanco. */ .resumen-fila { grid-template-columns: repeat(2, 1fr); } .resumen-dato { padding: 14px 16px; } .resumen-dato .valor { font-size: 22px; } /* Los filtros de la biblioteca a lo ancho: en un teléfono un campo de 220 px al lado de dos desplegables no cabe. */ .cabecera-lista { align-items: stretch; } .filtros { flex-direction: column; } .filtros input, .filtros select { width: 100%; height: 44px; } .proximo-cifras { width: 100%; justify-content: space-between; } } @media (max-width: 420px) { .resumen-fila { grid-template-columns: 1fr; } h1 { font-size: 20px; } .cabecera { margin-top: 24px; } } /* Rejillas con número de columnas fijo. `auto-fit` decide según el ancho, y con 6 u 8 tarjetas dejaba una sola al final de la fila — el hueco se lee como que falta algo. Con columnas que dividen el total, las filas cierran. */ .rejilla-3 { grid-template-columns: repeat(3, 1fr); } /* 6 tarjetas → 2 filas */ .rejilla-4 { grid-template-columns: repeat(4, 1fr); } /* 8 tarjetas → 2 filas */ /* La acción de reconectar, cuando la sesión ya está sana. */ .tarjeta-accion-tenue { border-left-color: var(--linea); background: transparent; } .tarjeta-accion-tenue h3 { color: var(--tinta-2); } @media (max-width: 900px) { .rejilla-4 { grid-template-columns: repeat(2, 1fr); } .rejilla-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; } } /* ---------- autocompletado del navegador ---------- Chrome pinta los campos autocompletados con SU propio fondo claro y texto oscuro, ignorando el tema. En modo oscuro el resultado son dos rectángulos blancos en la pantalla de entrar — la primera que alguien ve, y parece rota. `background-color` no sirve: Chrome lo ignora en `:-webkit-autofill`. La vía que sí funciona es una sombra interior gruesa que tapa su fondo, más `-webkit-text-fill-color` para el texto. La transición larga es el otro truco conocido: retrasa el repintado de Chrome lo suficiente como para que no se vea el destello amarillo al cargar. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--papel) inset !important; box-shadow: 0 0 0 1000px var(--papel) inset !important; -webkit-text-fill-color: var(--tinta) !important; caret-color: var(--tinta); transition: background-color 100000s ease-in-out 0s; } /* ========================================================================== Pantalla de métricas ========================================================================== */ /* Estado vacío por sección. Casi todo aquí sale en blanco hasta que haya volumen, y una sección vacía sin explicación se lee como "roto". */ .sin-datos { padding: 26px 24px; margin: 0 0 8px; background: var(--superficie); border: 1px dashed var(--linea); border-radius: var(--radio-md); } .sin-datos p { margin: 0; } .sin-datos .ayuda { margin-top: 5px; max-width: 62ch; } /* El embudo: una fila por paso, apiladas. Con tres tarjetas del mismo ancho la caída de 520 a 26 no se veía — había que restarla mentalmente, y un embudo que exige aritmética no es un embudo. */ .embudo { display: grid; gap: 8px; margin-bottom: 12px; } .paso { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto minmax(150px, auto); align-items: center; gap: 0 18px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 14px 18px; } .paso .etiqueta { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); } .paso-cifra { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-align: right; min-width: 3ch; } .paso-pie { margin: 0; font-size: 13px; color: var(--tinta-3); } /* La barra del embudo. Más alta que la de proporción normal (6px) a propósito: aquí es el dato principal de la fila, no una nota al pie del número. */ .pista { display: block; height: 16px; border-radius: var(--radio-sm); background: var(--gris-fondo); overflow: hidden; } .pista i { display: block; height: 100%; background: var(--acento); border-radius: var(--radio-sm); transform: scaleX(0); transform-origin: left; animation: crecer-barra .6s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(var(--i) * 90ms); } /* La base va apagada: es la referencia contra la que se leen las otras dos, no un tercer resultado que compita con ellas. */ .pista i.base { background: var(--acento-fondo); opacity: .5; } /* En estrecho la fila se parte en dos: etiqueta y cifra arriba, barra y tasa debajo. Cuatro columnas en 400px dejan la barra en veinte píxeles. */ @media (max-width: 720px) { .paso { grid-template-columns: 1fr auto; gap: 8px 14px; } .paso .etiqueta { grid-column: 1; } .paso-cifra { grid-column: 2; grid-row: 1; font-size: 21px; } .pista { grid-column: 1 / -1; grid-row: 2; } .paso-pie { grid-column: 1 / -1; grid-row: 3; } } .sobre-meta { color: var(--ok); font-weight: 600; } .bajo-meta { color: var(--alerta); font-weight: 600; } /* Barra de proporción. Con `aria-hidden` porque la cifra ya está al lado en texto: repetirla en el lector de pantalla solo estorba. */ .barra-dato { height: 6px; margin-top: 10px; border-radius: var(--radio-sm); background: var(--gris-fondo); overflow: hidden; } .barra-dato-int { height: 100%; background: var(--acento); border-radius: var(--radio-sm); } .barra-dato-int.tono-alerta { background: var(--alerta); } .nota-embudo { margin: 0 0 8px; font-size: 14px; color: var(--tinta-3); max-width: 76ch; line-height: 1.6; } .nota-embudo strong { color: var(--tinta-2); } .motivos { display: grid; gap: 12px; margin-top: 16px; } .motivo { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 13px 16px; } .motivo-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; gap: 16px; } /* La frase que va bajo cada `h2` y explica qué decide esa sección. Se usaba en seis sitios de la pantalla de métricas y NO estaba definida: salía como párrafo de cuerpo, a todo el ancho y del mismo peso que los datos. Justo lo que hacía la pantalla ilegible — todo pesaba igual. La encontró la prueba de clases, no una revisión a ojo. */ .bajada { margin: 0 0 14px; max-width: 76ch; font-size: 14px; line-height: 1.6; color: var(--tinta-3); } .bajada strong { color: var(--tinta-2); font-weight: 600; } .tarjeta-dato .valor.atencion { color: var(--alerta); } p.nota { margin-top: 12px; max-width: 76ch; } /* ---------- vista de demostración (temporal) ---------- Se quita junto con prospector/web/demo.py cuando haya datos reales. El aviso usa el color de alerta a propósito: una pantalla de demo que parece real acaba en la captura que alguien le enseña a un cliente. */ .cinta-demo { margin: 20px 0 0; padding: 13px 18px; background: var(--alerta-fondo); color: var(--alerta); border: 1px solid var(--alerta); border-radius: var(--radio-md); font-size: 14px; line-height: 1.55; } .cinta-demo.pie { margin: 40px 0 0; } .cinta-demo strong { font-weight: 700; } .cinta-demo a { color: var(--alerta); font-weight: 600; } .sello-demo { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 4px 10px; border-radius: var(--radio-pill); background: var(--alerta-fondo); color: var(--alerta); border: 1px solid var(--alerta); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .barra nav a.nav-demo { color: var(--alerta); } .barra nav a.nav-demo.activo { border-bottom-color: var(--alerta); } /* El hueco que la pantalla declara en vez de esconder. Va apagado a propósito: no es un dato, es la ausencia de uno. Pintarlo como cifra normal invitaría a leerlo como cero. */ .hueco-reuniones { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin: 16px 0 8px; padding: 16px 18px; background: var(--superficie); border: 1px dashed var(--linea); border-radius: var(--radio-md); } .hueco-reuniones .etiqueta { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); } .hueco-reuniones .valor { display: block; margin-top: 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; } .hueco-reuniones .ayuda { margin: 0; max-width: 62ch; flex: 1 1 340px; } .hueco-reuniones strong { color: var(--tinta-2); } .paso-enlace { display: inline-block; margin: 2px 0 10px; font-size: 13px; font-weight: 600; color: var(--acento); text-decoration: none; } .paso-enlace:hover { text-decoration: underline; } /* Un contenedor con overflow no es alcanzable por teclado sin tabindex: quien navega sin ratón no podía desplazar ninguna tabla. El foco se marca con la misma regla global que todo lo demás. */ .tabla-marco:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* Indicio de que la tabla se desplaza. Sin él, en móvil se ve una columna cortada y nada dice que se puede deslizar. */ .tabla-marco { background: linear-gradient(to right, var(--superficie) 30%, transparent), linear-gradient(to left, var(--superficie) 30%, transparent) 100% 0, linear-gradient(to right, rgb(0 0 0 / .12), transparent 12px), linear-gradient(to left, rgb(0 0 0 / .12), transparent 12px) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } /* ---------- tendencia contra el periodo anterior ---------- */ .tendencia { margin: 16px 0 8px; padding: 16px 18px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-md); } .tendencia > .etiqueta { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 12px; } .tendencia-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; } .tendencia-titulo { display: block; font-size: 12px; color: var(--tinta-3); margin-bottom: 3px; } .tendencia-valor { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .tendencia .ayuda { display: block; margin-top: 2px; font-size: 12px; } .tendencia .nota { margin: 14px 0 0; } /* La flecha acompaña al color, no lo sustituye: quien no distingue verde de rojo necesita la forma para leer la dirección. */ .delta { font-size: 13px; font-weight: 600; color: var(--tinta-3); font-variant-numeric: tabular-nums; } .delta.sube { color: var(--ok); } .delta.baja { color: var(--mal); } /* ---------- ordenar tablas ---------- */ .th-orden { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; } .th-orden:hover { color: var(--tinta); } .der .th-orden { flex-direction: row-reverse; } .flecha { width: 8px; opacity: .35; } .flecha::before { content: "↕"; } [aria-sort="ascending"] .flecha { opacity: 1; } [aria-sort="ascending"] .flecha::before { content: "↑"; } [aria-sort="descending"] .flecha { opacity: 1; } [aria-sort="descending"] .flecha::before { content: "↓"; } th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--tinta); } /* Mejor y peor de la tabla de industrias. La franja lateral acompaña al chip: el color solo no basta, y con la tabla ordenada por otra columna la fila destacada deja de estar arriba. */ .fila-mejor td:first-child { box-shadow: inset 3px 0 0 var(--ok); } .fila-peor td:first-child { box-shadow: inset 3px 0 0 var(--alerta); } /* ---------- el pulso: actividad día a día ---------- Un gráfico de barras a mano, sin librería: la Mac Mini puede quedarse sin red y una pantalla de métricas que depende de un CDN no es una pantalla de métricas. Son divs con altura en porcentaje; el navegador hace el resto. */ .pulso { margin: 16px 0 8px; padding: 18px 20px 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-md); } .pulso-cab { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 16px; } .pulso-cab .ayuda { font-variant-numeric: tabular-nums; } .leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--tinta-2); } .leyenda li { display: flex; align-items: center; gap: 7px; } /* El cuadrito de color no es decoración: es lo único que dice cuál de las dos series es cuál, y el gráfico va sin etiquetas para que quepan treinta días. Se llamó `.marca` durante diez minutos y rompió la barra superior: ahí `.marca` es el logotipo de Neurya, y un `width: 11px` lo dejó encima de "Operación". Es exactamente la colisión de cascada que DESIGN.md advierte — y por eso ahora hay una prueba que la vigila. */ .tinte { width: 11px; height: 11px; border-radius: 3px; flex: none; } .tinte-inv { background: var(--acento); } .tinte-ace { background: var(--ok); } /* Rejilla de dos columnas: el eje de valores a la izquierda, el lienzo al lado. La segunda fila deja la primera columna vacía para que el eje de fechas empiece exactamente donde empiezan las barras. */ .grafico { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; } .grafico-eje-y { display: flex; flex-direction: column; justify-content: space-between; height: 176px; padding: 0; font-size: 11px; color: var(--tinta-3); font-variant-numeric: tabular-nums; text-align: right; } /* Las cifras se alinean con su línea, no encima de ella: la de arriba baja media línea, la de abajo sube media. */ .grafico-eje-y span:first-child { transform: translateY(-0.4em); } .grafico-eje-y span:last-child { transform: translateY(0.4em); } .columnas { display: flex; align-items: flex-end; gap: 3px; height: 176px; margin: 0; padding: 0; list-style: none; /* Las líneas de referencia van de fondo, no de elementos: tres divs más por gráfico que no aportan nada al árbol. */ background: linear-gradient(var(--linea), var(--linea)) 0 0 / 100% 1px, linear-gradient(var(--linea), var(--linea)) 0 50% / 100% 1px, linear-gradient(var(--linea), var(--linea)) 0 100% / 100% 1px; background-repeat: no-repeat; } .col-dia { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; gap: 2px; position: relative; } /* El fin de semana se marca en el fondo. Sin esto, dos columnas vacías cada cinco parecen una avería periódica en vez de un sábado. */ .col-dia.es-finde::before { content: ""; position: absolute; inset: 0; background: var(--gris-fondo); opacity: .5; border-radius: 3px; } .col { flex: 1 1 0; min-width: 0; height: var(--h); border-radius: 2px 2px 0 0; position: relative; transform: scaleY(0); transform-origin: bottom; /* `forwards` importa: con `prefers-reduced-motion` la regla global recorta la duración a .01ms, y sin el estado final retenido las barras se quedarían en scaleY(0) — el gráfico entero desaparecería. */ animation: crecer-col .5s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(var(--i) * 16ms); } .col-inv { background: var(--acento); } .col-ace { background: var(--ok); } @keyframes crecer-col { to { transform: scaleY(1); } } /* El globo con las cifras del día. El gráfico va `aria-hidden` y esto es solo para ratón: quien no puede apuntar tiene la frase de debajo, que dice lo mismo sin obligar a interpretar sesenta columnas. */ .globo { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 7px 11px; border-radius: var(--radio-sm); background: var(--tinta); color: var(--papel); font-size: 12px; line-height: 1.45; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 5; } .globo strong { display: block; font-weight: 700; } .col-dia:hover .globo { opacity: 1; } /* Los extremos se anclan a su lado en vez de centrarse: centrado, el globo del primer día se sale de la tarjeta. */ .col-dia:first-child .globo { left: 0; transform: none; } .col-dia:last-child .globo { left: auto; right: 0; transform: none; } .col-dia:hover::after { content: ""; position: absolute; inset: -2px; border: 1px solid var(--acento); border-radius: 3px; pointer-events: none; } .grafico-eje-x { grid-column: 2; display: flex; gap: 3px; margin: 7px 0 0; padding: 0; list-style: none; font-size: 11px; color: var(--tinta-3); font-variant-numeric: tabular-nums; } .grafico-eje-x li { flex: 1 1 0; min-width: 0; white-space: nowrap; } /* En pantalla estrecha treinta columnas de 3px no se distinguen y el eje se pisa. Se estrecha el lienzo y se deja que el eje muestre solo los extremos. */ @media (max-width: 640px) { .columnas, .grafico-eje-y { height: 140px; } .columnas { gap: 2px; } .col-dia { gap: 1px; } .grafico-eje-x { font-size: 10px; } } /* ---------- entrada de las tarjetas ---------- Escalonada, no simultánea: el orden en que aparecen es el orden en que hay que leerlas. Con `prefers-reduced-motion` la regla global las deja quietas en su estado final. */ @keyframes asomar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .embudo .paso { opacity: 0; animation: asomar .38s ease-out forwards; animation-delay: calc(var(--i) * 70ms); } /* La barra de proporción crece desde su lado, no aparece hecha. Es `scaleX` y no `width` a propósito: el ancho se recalcula en cada fotograma y con seis barras en pantalla se nota. */ .barra-dato-int { transform: scaleX(0); transform-origin: left; animation: crecer-barra .55s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes crecer-barra { to { transform: scaleX(1); } } /* ---------- barra dentro de una celda ---------- Las dos tablas de tasas eran columnas de dígitos: comparar seis giros exigía leerlos uno a uno. La barra hace la comparación de un vistazo y el número sigue ahí para quien necesita el dato exacto. */ /* `inline-flex`, no `flex`: el chip de poca muestra va detrás en la misma celda, y un contenedor de bloque lo tiraba a la línea siguiente. */ .celda-tasa { display: inline-flex; align-items: center; gap: 9px; vertical-align: middle; } .barra-celda { flex: none; width: 54px; height: 6px; border-radius: var(--radio-sm); background: var(--gris-fondo); overflow: hidden; } .barra-celda i { display: block; height: 100%; background: var(--acento-fondo); border-radius: var(--radio-sm); transform: scaleX(0); transform-origin: left; animation: crecer-barra .55s cubic-bezier(.22,.61,.36,1) forwards; } /* Sin muestra suficiente la barra se apaga: enseñarla del mismo color que una con doscientos casos invita a compararlas, que es justo lo que el chip de "poca muestra" existe para evitar. */ .barra-celda.floja i { background: var(--linea); } @media (max-width: 640px) { .barra-celda { width: 34px; } } /* ---------- formulario del ritmo ---------- Es la pantalla donde alguien cambia números que pueden tirar una cuenta de LinkedIn. Cada campo lleva debajo qué hace y de dónde sale su valor: sin eso, "200" no distingue entre el número de la estrategia y algo que alguien tecleó el martes. */ .ritmo { display: grid; gap: 14px; margin: 4px 0 8px; } .bloque-ritmo { border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--superficie); padding: 6px 20px 18px; margin: 0; } .bloque-ritmo legend { padding: 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); } .pista-bloque { margin: 4px 0 14px; font-size: 13px; color: var(--tinta-3); max-width: 76ch; line-height: 1.55; } .pista-bloque strong { color: var(--tinta-2); } .rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 22px; } .campo-ritmo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .campo-ritmo-fila { display: flex; align-items: center; gap: 8px; } .campo-ritmo input { width: 100%; min-width: 0; } /* La unidad va fuera del campo. Dentro del `placeholder` desaparece en cuanto se escribe, que es justo cuando hace falta saber si son días o semanas. */ .sufijo { font-size: 13px; color: var(--tinta-3); white-space: nowrap; } .pista-campo { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--tinta-3); } /* Los días como casillas grandes: siete `