/* DICOVA Licitaciones — hoja de estilos propia (sin frameworks). Tokens en :root; tema oscuro por preferencia del sistema o por data-theme en . Semáforo accesible: siempre color + icono + texto (nunca solo color). */ :root { --fondo: #f6f7f9; --superficie: #ffffff; --superficie-2: #f0f2f5; --borde: #dde1e7; --texto: #1c2430; --texto-suave: #556070; --texto-tenue: #7a8595; --primario: #2e3192; --primario-texto: #ffffff; --primario-suave: #e8e9f7; --foco: #f2b01e; --cumple: #16794a; --cumple-fondo: #e3f4ea; --no-cumple: #b42318; --no-cumple-fondo: #fdecea; --falta: #8a5a00; --falta-fondo: #fff4d6; --info: #1f5fbf; --info-fondo: #e6eefb; --radio: 10px; --radio-sm: 6px; --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); --ancho-lateral: 232px; --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fondo: #0f141b; --superficie: #161d27; --superficie-2: #1d2632; --borde: #2a3544; --texto: #e6ebf2; --texto-suave: #aab4c3; --texto-tenue: #7f8a9b; --primario: #4cc3f5; --primario-texto: #0b1220; --primario-suave: #16293f; --cumple: #5fd49a; --cumple-fondo: #11301f; --no-cumple: #ff8a80; --no-cumple-fondo: #3a1614; --falta: #ffc857; --falta-fondo: #3a2c0c; --info: #6ea3f5; --info-fondo: #1b2a42; --sombra: 0 1px 2px rgba(0, 0, 0, .4); color-scheme: dark; } } :root[data-theme="dark"] { --fondo: #0f141b; --superficie: #161d27; --superficie-2: #1d2632; --borde: #2a3544; --texto: #e6ebf2; --texto-suave: #aab4c3; --texto-tenue: #7f8a9b; --primario: #4cc3f5; --primario-texto: #0b1220; --primario-suave: #16293f; --cumple: #5fd49a; --cumple-fondo: #11301f; --no-cumple: #ff8a80; --no-cumple-fondo: #3a1614; --falta: #ffc857; --falta-fondo: #3a2c0c; --info: #6ea3f5; --info-fondo: #1b2a42; --sombra: 0 1px 2px rgba(0, 0, 0, .4); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { font-size: 15px; } body { margin: 0; font-family: var(--fuente); background: var(--fondo); color: var(--texto); line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: var(--primario); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; } h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; } h1 { font-size: 1.45rem; } h2 { font-size: 1.1rem; } h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); } small, .tenue { color: var(--texto-tenue); } .suave { color: var(--texto-suave); } .mono { font-family: var(--fuente-mono); font-size: .9em; } .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } [x-cloak] { display: none !important; } /* ── Estructura ─────────────────────────────────────────────────────────────── */ .saltar { position: absolute; left: -999px; top: 0; background: var(--primario); color: var(--primario-texto); padding: .5rem 1rem; z-index: 50; } .saltar:focus { left: 1rem; } .marco { display: grid; grid-template-columns: var(--ancho-lateral) 1fr; min-height: 100vh; } .lateral { background: var(--superficie); border-right: 1px solid var(--borde); padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: .25rem; } .marca { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem 1rem; font-weight: 700; color: var(--texto); } .marca img { width: 30px; height: 30px; object-fit: contain; } .marca-ingreso { flex-direction: column; gap: .35rem; padding-bottom: 1.25rem; } .marca-ingreso img { width: 170px; height: auto; max-width: 70%; } .marca-ingreso span { font-weight: 500; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); } .marca span small { display: block; font-weight: 400; font-size: .75rem; } .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .menu a { display: flex; align-items: center; gap: .65rem; padding: .55rem .65rem; border-radius: var(--radio-sm); color: var(--texto-suave); font-weight: 500; } .menu a:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; } .menu a[aria-current="page"] { background: var(--primario-suave); color: var(--primario); } .menu svg { width: 18px; height: 18px; flex: none; } .lateral .pie-lateral { margin-top: auto; font-size: .8rem; color: var(--texto-tenue); padding: .5rem; } .contenido { display: flex; flex-direction: column; min-width: 0; } .barra-superior { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.5rem; background: var(--superficie); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 10; } .buscar { flex: 1; max-width: 560px; } .buscar input { width: 100%; } .usuario-menu { margin-left: auto; display: flex; align-items: center; gap: .75rem; } .frescura { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center; padding: .45rem 1.5rem; font-size: .83rem; color: var(--texto-suave); background: var(--superficie-2); border-bottom: 1px solid var(--borde); } .frescura .atrasada { color: var(--no-cumple); font-weight: 600; } main { padding: 1.25rem 1.5rem 2rem; max-width: 1400px; width: 100%; } .pie { padding: 1rem 1.5rem 2rem; font-size: .8rem; color: var(--texto-tenue); border-top: 1px solid var(--borde); margin-top: auto; } /* ── Controles ──────────────────────────────────────────────────────────────── */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea { font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: .5rem .7rem; } input:focus, select:focus, textarea:focus { border-color: var(--primario); outline: none; box-shadow: 0 0 0 3px var(--primario-suave); } .codigo-totp { font-family: var(--fuente-mono); font-size: 1.6rem; letter-spacing: .4em; text-align: center; width: 100%; } .boton, button { font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; border-radius: var(--radio-sm); padding: .5rem .9rem; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); } .boton:hover, button:hover { background: var(--superficie-2); text-decoration: none; } .boton.primario, button.primario { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); } .boton.primario:hover, button.primario:hover { filter: brightness(1.07); } .boton.chico, button.chico { padding: .25rem .55rem; font-size: .85rem; } .boton.fantasma, button.fantasma { background: transparent; border-color: transparent; } kbd { font-family: var(--fuente-mono); font-size: .75rem; padding: 0 .35rem; border-radius: 4px; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto-suave); } .campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; } .campo label { font-weight: 600; font-size: .9rem; } .pestanas { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; padding: 0; list-style: none; } .pestanas a { padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--borde); color: var(--texto-suave); font-size: .88rem; } .pestanas a[aria-current="page"] { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); } /* ── Tarjetas y rejillas ────────────────────────────────────────────────────── */ .tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1rem 1.1rem; } .tarjeta > h2, .tarjeta > h3 { margin-bottom: .75rem; } .rejilla { display: grid; gap: 1rem; } .rejilla.dos { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } .indicadores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; } .indicador { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1rem; } .indicador .etiqueta { font-size: .8rem; color: var(--texto-suave); font-weight: 600; } .indicador .valor { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; } .indicador .nota { font-size: .8rem; color: var(--texto-tenue); } .encabezado { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } /* Siguiente acción: una sola acción destacada por pantalla (§6.3). */ .siguiente { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--primario-suave); border: 1px solid var(--primario); border-left-width: 6px; border-radius: var(--radio); padding: .9rem 1.1rem; margin-bottom: 1rem; } .siguiente .rotulo { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primario); } .siguiente .titulo { font-size: 1.1rem; font-weight: 700; } .siguiente .cuerpo { flex: 1; min-width: 240px; } .siguiente.tranquilo { background: var(--cumple-fondo); border-color: var(--cumple); } .siguiente.tranquilo .rotulo { color: var(--cumple); } /* ── Tablas y listas ────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-size: .92rem; } th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); font-weight: 600; } th, td { padding: .5rem .55rem; border-bottom: 1px solid var(--borde); vertical-align: top; } tbody th { text-transform: none; letter-spacing: normal; font-size: .92rem; color: var(--texto); } tbody tr:hover { background: var(--superficie-2); } tr.seleccionada { outline: 2px solid var(--primario); outline-offset: -2px; background: var(--primario-suave); } .lista { list-style: none; margin: 0; padding: 0; } .lista li { padding: .55rem 0; border-bottom: 1px solid var(--borde); display: flex; gap: .6rem; align-items: flex-start; } .lista li:last-child { border-bottom: 0; } .lista .cuando { margin-left: auto; white-space: nowrap; font-size: .85rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; } .razones { margin: .25rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--texto-suave); } .objeto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Semáforo y etiquetas (siempre icono + texto) ───────────────────────────── */ .estado { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .85rem; padding: .15rem .55rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; } .estado .icono { font-weight: 900; } .estado.cumple { color: var(--cumple); background: var(--cumple-fondo); } .estado.no-cumple { color: var(--no-cumple); background: var(--no-cumple-fondo); } .estado.falta { color: var(--falta); background: var(--falta-fondo); } .estado.info { color: var(--info); background: var(--info-fondo); } .chip { display: inline-block; font-size: .78rem; padding: .05rem .5rem; border-radius: 999px; background: var(--superficie-2); color: var(--texto-suave); border: 1px solid var(--borde); white-space: nowrap; } .chip.alerta { color: var(--no-cumple); border-color: currentColor; background: var(--no-cumple-fondo); } .chip.atencion { color: var(--falta); border-color: currentColor; background: var(--falta-fondo); } .chip.ok { color: var(--cumple); border-color: currentColor; background: var(--cumple-fondo); } .puntaje { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; border-radius: 8px; font-weight: 800; background: var(--superficie-2); } .puntaje.alto { background: var(--cumple-fondo); color: var(--cumple); } .puntaje.medio { background: var(--falta-fondo); color: var(--falta); } .urgencia { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--falta); margin-top: .35rem; flex: none; } .urgencia.hoy { background: var(--no-cumple); } .barra { height: .55rem; border-radius: 999px; background: var(--superficie-2); overflow: hidden; } .barra > span { display: block; height: 100%; background: var(--primario); } /* ── Estados vacíos y avisos ────────────────────────────────────────────────── */ .vacio { text-align: center; padding: 1.5rem 1rem; color: var(--texto-suave); } .vacio .icono-vacio { font-size: 1.8rem; display: block; margin-bottom: .35rem; } .vacio p { margin: .25rem auto; max-width: 46ch; } .aviso { border-radius: var(--radio-sm); padding: .7rem .9rem; margin-bottom: 1rem; border: 1px solid; } .aviso.error { color: var(--no-cumple); background: var(--no-cumple-fondo); } .aviso.advertencia { color: var(--falta); background: var(--falta-fondo); } .aviso.info { color: var(--info); background: var(--info-fondo); } .confidencial { font-weight: 800; letter-spacing: .06em; color: var(--no-cumple); font-size: .8rem; } .deslinde { font-size: .8rem; color: var(--texto-tenue); } /* ── Ingreso ─────────────────────────────────────────────────────────────────── */ main.pantalla-ingreso, .pantalla-ingreso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; max-width: none; } .caja-ingreso { width: 100%; max-width: 420px; } .caja-ingreso .marca { justify-content: center; font-size: 1.15rem; } .qr { display: grid; place-items: center; background: #fff; border-radius: var(--radio-sm); padding: .75rem; margin: .75rem auto; width: fit-content; } .qr svg, .qr img { width: 200px; height: 200px; display: block; } .secreto { font-family: var(--fuente-mono); font-size: 1rem; word-spacing: .3rem; background: var(--superficie-2); padding: .5rem .7rem; border-radius: var(--radio-sm); text-align: center; } .pasos { padding-left: 1.2rem; } .pasos li { margin-bottom: .35rem; } /* ── Urgencia (semáforo), campana, kanban y decisiones ──────────────────────── */ .urgencia.vencido { background: var(--texto-tenue); } .urgencia.pronto { background: var(--falta); } .urgencia.semana { background: var(--info); } .urgencia.tranquilo { background: var(--cumple); } .campana { position: relative; display: inline-flex; align-items: center; text-decoration: none; font-size: 1.1rem; padding: .2rem .35rem; } .insignia { position: absolute; top: -.25rem; right: -.35rem; min-width: 1.1rem; height: 1.1rem; border-radius: 999px; background: var(--no-cumple); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; padding: 0 .25rem; } .kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; } .kanban .columna { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: .6rem; display: flex; flex-direction: column; gap: .5rem; min-height: 8rem; } .kanban .columna h3 { margin: 0 0 .25rem; font-size: .95rem; display: flex; justify-content: space-between; align-items: center; } .tarjeta-kanban { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: .55rem .6rem; box-shadow: var(--sombra); } .lista-decisiones { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .tarjeta.decision .rotulo { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); } .tarjeta.decision h3 { margin: .2rem 0; } .conviene { background: var(--superficie-2); border-radius: var(--radio-sm); padding: .5rem .6rem; margin: .5rem 0; } .botones-decision { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; } .botones-decision input { flex: 1 1 100%; } .botones-decision button { flex: 1 1 auto; min-height: 2.75rem; } .tarjeta.alerta { border-color: var(--no-cumple); background: var(--no-cumple-fondo); } .filtros { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .6rem; } .filtros .chip[aria-current="true"] { background: var(--primario-suave); color: var(--primario); border-color: currentColor; } /* ── Adaptación a pantallas pequeñas (vista del gerente en móvil, §6.1) ─────── */ @media (max-width: 1100px) { .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rejilla.dos, .rejilla.tres { grid-template-columns: 1fr; } } @media (max-width: 760px) { .marco { grid-template-columns: 1fr; } .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--borde); } .lateral .pie-lateral, .marca span small { display: none; } .menu { flex-direction: row; flex-wrap: wrap; } .menu a span { font-size: .85rem; } .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } main, .barra-superior, .frescura { padding-left: 1rem; padding-right: 1rem; } .ocultar-movil { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media print { .lateral, .barra-superior, .frescura, button, .boton { display: none !important; } .marco { display: block; } } /* Radar con vista previa (§6.2): la ficha corta queda al lado de la lista; en pantallas angostas, debajo. */ .radar-con-previa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 1rem; align-items: start; } .panel-previa { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; } .vista-previa .rotulo { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primario); } .datos-previa { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: .5rem 0; font-size: .9rem; } .datos-previa dt { color: var(--texto-suave); } .datos-previa dd { margin: 0; } @media (max-width: 900px) { .radar-con-previa { grid-template-columns: 1fr; } .panel-previa { position: static; max-height: none; } }