/* ═══════════════════════════════════════════════════════════════════════════ INSTRUMENTO MAC · sistema de dos registros Junta de Liderazgo · Hospital MAC Perisur Un solo tema, claro. La gravedad no viene de un fondo negro: viene de la CABEZA oscura de instrumento sobre un cuerpo claro. Ahí, y solo ahí, el turquesa y el lima de la marca alcanzan contraste de texto (6.47:1 y 7.66:1 sobre #0b2429, contra 2.50:1 y 2.11:1 sobre blanco). La densidad se fija con (7 am, celular) o (8 am, proyección a 3 m). Once tokens cambian en PARES EXPLÍCITOS, nunca con un multiplicador. Ningún componente conoce la densidad. Todos los ratios están medidos contra la PEOR superficie donde el token puede aparecer, no contra blanco. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ---------- FAMILIA · una sola sans del sistema, incluida la cifra grande. Pesos permitidos: 500 · 600 · 700. Nada de 550/620/650: con Segoe UI no variable colapsan al mismo peso renderizado y la jerarquía no llega. */ --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ---------- SUPERFICIES ------------------------------------------------- REGLA DURA: ninguna gráfica se dibuja sobre --lienzo ni sobre --sup-2. Siempre sobre --sup (#ffffff), que es la superficie con la que se validó all-pairs la paleta de series. */ --lienzo: #eef3f3; --sup: #ffffff; --sup-2: #e7eeee; --sup-3: #f3f8f8; /* ---------- LÍNEAS ------------------------------------------------------ */ --borde: #dce6e6; /* hairline decorativo · 1.27:1 vs #fff */ --borde-fuerte: #bfd1d1; /* cierre de bloque · 1.58:1 vs #fff */ --borde-control: #6e888c; /* límite de input · WCAG 1.4.11 exige 3:1: 3.77 /#fff · 3.37 /lienzo · 3.21 /sup-2 */ --g-rejilla: #e4edec; /* rejilla de gráfica · 1.22:1 vs #fff */ --sombra-arrastre: rgba(11, 36, 41, .16); /* ---------- CABEZA DE INSTRUMENTO · única superficie oscura ------------- */ --cabeza: #0b2429; --cabeza-2: #12333a; --cabeza-linea: #1d454d; --cabeza-tinta: #e8f1f1; /* 14.08:1 sobre --cabeza */ --cabeza-tinta-2: #9db6b8; /* 7.56:1 sobre --cabeza */ --cabeza-critico: #f0566e; /* 5.22:1 sobre --cabeza — el #c0273c da 2.85 ahí */ /* ---------- TINTA · medida sobre #fff / --lienzo / --sup-2 -------------- */ --tinta: #0b2429; /* 16.18 · 14.44 · 13.75 — cifras, títulos, el dato de hoy */ --tinta-2: #3d5c63; /* 7.22 · 6.44 · 6.14 — cuerpo, celdas */ --tinta-3: #4e6b70; /* 5.73 · 5.12 · 4.88 — piso AA: rótulos, ejes, micro */ --tinta-4: #7e9599; /* 3.16 vs #fff — SOLO grafismo sobre --sup: guiones, sufijos, flecha neutra. Nunca un dato. */ --foco: #00706c; /* 5.64 vs #fff — anillo de foco. El #00b7b0 da 2.50. */ /* ---------- MARCA ------------------------------------------------------- */ --teal: #00b7b0; /* 2.50 /#fff → marca pequeña · 6.47 /cabeza → texto */ --lima: #96c121; /* 2.11 /#fff → marca pequeña · 7.66 /cabeza → texto */ --teal-tinta: #00706c; /* 5.64 — el turquesa cuando tiene que ser texto */ /* Rampa de AVANCE: el degradado del isotipo con un trabajo semántico. Turquesa = empezado, lima = completo. Vive SOLO en el medidor de captura, la barra de progreso del formulario y la franja de la cabeza. Jamás en el semáforo, y jamás como único portador del dato: toda instancia lleva su cifra tabular al lado. */ --avance: linear-gradient(90deg, #00b7b0 0%, #5bbf72 62%, #96c121 100%); /* ---------- SERIES VALIDADAS · máximo 3, no se tocan -------------------- Verificadas all-pairs con el validador sobre superficie #ffffff: peor par CVD ΔE 16.4 · peor par visión normal ΔE 21.2. */ --s1: #00b7b0; --s2: #2a6fb0; --s3: #e0862c; /* ---------- ESTADO · reservado, jamás como serie ------------------------ El TEXTO de la pastilla va en --tinta (≥13.5:1 sobre cualquier tinte), nunca en el color de estado, que sobre su propio tinte cae a 3.78–4.19:1. */ --bien: #12873a; --bien-f: #e8f4ea; /* 4.61:1 vs #fff */ --alerta: #b06a00; --alerta-f: #f8f0e2; /* 4.28:1 vs #fff */ --critico: #c0273c; --critico-f: #fbeaec; /* 5.84:1 vs #fff */ --nulo: #4e6b70; --nulo-f: #e7eeee; /* 5.73:1 vs #fff */ /* ---------- FORMA ------------------------------------------------------- */ --r-bloque: 10px; --r-control: 7px; --r-modal: 12px; --r-chip: 999px; /* ---------- ELEVACIÓN · un solo nivel, teñida con la tinta, nunca gris -- */ --elev-1: 0 1px 0 rgba(11, 36, 41, .03), 0 6px 18px -10px rgba(11, 36, 41, .20); --elev-2: 0 24px 64px -18px rgba(11, 36, 41, .34); /* ---------- ESPACIADO --------------------------------------------------- */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; /* ═══════ DENSIDAD · registro "pulgar" (7 am, celular y escritorio) ═══════ */ --t-cifra-riel: 56px; --t-cifra-kpi: 34px; --t-exc-nombre: 15px; --t-exc-cifra: 22px; --t-tabla: 13px; --t-th: 10.5px; --t-rotulo: 11px; --t-cuerpo: 14px; --fila: 34px; --celda: 7px 12px; --h-cabeza: 56px; --h-riel: 116px; --h-riel-min: 60px; --pad-tarjeta: 16px; /* ---------- GEOMETRÍA DE GRÁFICA · escala con la densidad --------------- Sin esto la tipografía crece en modo sala y las marcas adelgazan, que es adelgazar exactamente lo que hay que leer de lejos. */ --g-trazo: 1.8px; --g-chispa: 1.6px; --g-meta: 1.5px; --g-punto: 3px; --g-eje-txt: 11px; /* ---------- PILA PEGAJOSA · derivada, sin números mágicos --------------- */ --y-regleta: var(--h-cabeza); --y-riel: calc(var(--h-cabeza) + 40px); --y-thead: calc(var(--h-cabeza) + 40px + var(--h-riel-min)); /* Los tres son valores de arranque: comun.js los sobreescribe con medidas REALES. La fila de la cabeza envuelve cuando la ventana es angosta y la regleta envuelve cuando hay muchas pestañas; con aritmética de tokens cada capa de la pila quedaba montada sobre la anterior. */ color-scheme: light; } /* ═══════════ DENSIDAD · registro "sala" (8 am, proyección a 3 m) ═══════════ Aritmética declarada: pantalla de 2.4 m a 1920 px lógicos = 1.25 mm/px, y la altura de dígito de un sans es ~0.72 em (no el font-size). cifra de riel 76px → 68 mm · umbral cómodo a 3 m = D/200 = 15 mm ✓ cifra de excepción 34px → 30 mm ✓ nombre de excepción 22px→ 20 mm ✓ tabla 16px → 14.4 mm ← justo EN el umbral, no por encima. De ahí el contrato honesto: el riel y las excepciones son para la sala; la tabla densa es para quien conduce a 1.5 m y para el papel. */ :root[data-densidad="sala"] { --t-cifra-riel: 76px; --t-cifra-kpi: 44px; --t-exc-nombre: 22px; --t-exc-cifra: 34px; --t-tabla: 16px; --t-th: 14px; /* los rótulos también escalan: subir la cifra y dejar el encabezado en 10.5px es enseñarle a la sala seis números gigantes sin decirle qué son. */ --t-rotulo: 15px; --t-cuerpo: 16px; --fila: 44px; --celda: 11px 14px; --h-cabeza: 64px; --h-riel: 148px; --h-riel-min: 72px; --pad-tarjeta: 20px; --g-trazo: 3px; --g-chispa: 2.4px; --g-meta: 2.5px; --g-punto: 5px; --g-eje-txt: 14px; --y-riel: calc(var(--h-cabeza) + 46px); --y-thead: calc(var(--h-cabeza) + 46px + var(--h-riel-min)); } /* En laptops de 13" el riel arranca compacto: sin esto se come 148px de alto útil y el primer pantallazo de la junta no cabe. */ @media (max-height: 760px) { :root { --h-riel: var(--h-riel-min); } } /* ═══════════════════════════ 0 · BASE ═══════════════════════════ */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--sans); font-size: var(--t-cuerpo); font-weight: 500; /* nunca 400: en proyección el texto fino se adelgaza */ line-height: 1.5; background: var(--lienzo); color: var(--tinta); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.015em; } h1 { font-size: 20px; } h2 { font-size: 16px; } h3 { font-size: 14px; } p { margin: 0 0 .8em; } a { color: var(--teal-tinta); } .contenedor { max-width: 1560px; margin: 0 auto; padding: 16px 20px 96px; } /* Utilidades tipográficas del sistema */ .rotulo { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .10em; text-transform: uppercase; line-height: 1.2; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-densidad="sala"] .rotulo { letter-spacing: .06em; } .micro, .mini { font-size: 11.5px; font-weight: 500; line-height: 1.35; } .silencio { color: var(--tinta-3); } .crece { flex: 1; min-width: 0; } .centro { text-align: center; } .derecha { text-align: right; } .num { text-align: right; font-variant-numeric: tabular-nums lining-nums; } .fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rejilla { display: grid; gap: 12px; } .rejilla.k2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .rejilla.k3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .rejilla.k4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* Foco: 5.64:1 sobre blanco. Nunca box-shadow difuso, que se lee como elevación. */ :where(a, button, input, select, textarea, [tabindex], tr[role="button"], summary):focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; } .cabeza :focus-visible { outline-color: var(--teal); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---------- Botones · objetivo táctil real de 44px ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-control); background: var(--sup-2); color: var(--tinta); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .01em; cursor: pointer; text-decoration: none; transition: background .14s ease, border-color .14s ease; } .btn:hover { background: var(--sup-3); border-color: var(--borde-fuerte); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn.primario { background: var(--teal-tinta); color: #fff; border-color: var(--teal-tinta); } .btn.primario:hover { background: #00615e; } .btn.contorno { background: transparent; border-color: var(--borde-control); } .btn.verde { background: var(--bien); color: #fff; border-color: var(--bien); } .btn.verde:hover { background: #0e6e2f; } .btn.peligro { background: var(--critico-f); color: var(--critico); border-color: var(--critico); } .btn.chico { min-height: 32px; padding: 0 11px; font-size: 12px; } .btn.bloque { width: 100%; } kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border: 1px solid var(--borde-fuerte); border-bottom-width: 2px; border-radius: var(--r-control); background: var(--sup-2); color: var(--tinta-2); font: inherit; font-size: 10.5px; font-weight: 700; } /* ---------- Controles genéricos ---------- */ label.campo { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); } input, select, textarea { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid var(--borde-control); border-radius: var(--r-control); background: var(--sup); color: var(--tinta); font: inherit; font-size: 14px; font-weight: 500; } textarea { min-height: 72px; padding: 10px 11px; resize: vertical; line-height: 1.45; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 183, 176, .20); } input[readonly] { background: var(--sup-2); color: var(--tinta-3); border-color: transparent; } .interruptor { display: flex; gap: 0; } .interruptor button { flex: 1; min-height: 44px; padding: 0 12px; border: 1px solid var(--borde-control); background: var(--sup); color: var(--tinta-3); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .interruptor button:first-child { border-radius: var(--r-control) 0 0 var(--r-control); } .interruptor button:last-child { border-radius: 0 var(--r-control) var(--r-control) 0; border-left: 0; } .interruptor button.on { background: var(--cabeza); border-color: var(--cabeza); color: var(--cabeza-tinta); } /* ═══════════════════ 1 · CABEZA DE INSTRUMENTO ═══════════════════ */ .cabeza { position: sticky; top: 0; z-index: 60; background: var(--cabeza); color: var(--cabeza-tinta); border-top: 3px solid transparent; border-image: var(--avance) 1; } .cabeza-fila { /* MÍNIMO, no alto: la fila envuelve (más abajo) y un `height` fijo dejaba el segundo renglón fuera del alto reservado, donde la regleta lo tapaba. Con border-box el mínimo ya incluye el relleno: un renglón mide exactamente --h-cabeza y dos crecen a lo que necesiten. */ min-height: var(--h-cabeza); display: flex; align-items: center; align-content: center; gap: 14px; padding: 6px 20px; border-bottom: 1px solid var(--cabeza-linea); } .cabeza-fila img { height: 26px; width: auto; display: block; flex: none; } .marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; } .marca-txt strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; } .marca-txt span { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cabeza-tinta-2); } /* Navegación entre pantallas: segmentos, no pastillas flotantes */ /* min-width:0 es lo que permite que se encoja dentro del flex de la cabeza; sin él la nav se niega a menguar y empuja el resto fuera de la pantalla. */ .nav-app { display: flex; align-items: stretch; margin-left: 8px; min-width: 0; } .nav-app a { display: flex; align-items: center; height: 32px; padding: 0 13px; border-radius: var(--r-control); text-decoration: none; color: var(--cabeza-tinta-2); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .nav-app a:hover { background: var(--cabeza-2); color: var(--cabeza-tinta); } .nav-app a[aria-current="page"] { background: var(--cabeza-2); color: var(--cabeza-tinta); box-shadow: inset 0 -2px 0 var(--teal); } .usuario-chip { display: flex; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid var(--cabeza-linea); } .paso-bloque { display: flex; align-items: center; gap: 8px; } /* Telemetría derecha: fecha, captura, modo sala, usuario. Nunca se oculta: la fecha de corte y el cumplimiento son lo primero que pregunta el comité. */ .telemetria { margin-left: auto; display: flex; align-items: center; gap: 0; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cabeza-tinta-2); } .telemetria > * { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-left: 1px solid var(--cabeza-linea); white-space: nowrap; } .cabeza-fila { flex-wrap: wrap; row-gap: 6px; } .telemetria b { color: var(--cabeza-tinta); font-weight: 700; } .paso-fecha { width: 32px; height: 32px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--cabeza-linea); border-radius: var(--r-control); background: transparent; color: var(--cabeza-tinta); cursor: pointer; font-size: 13px; } .paso-fecha:hover { background: var(--cabeza-2); } .sala-btn { min-height: 32px; padding: 0 11px; border-radius: var(--r-control); border: 1px solid var(--cabeza-linea); background: transparent; color: var(--cabeza-tinta-2); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; } .sala-btn:hover { background: var(--cabeza-2); color: var(--cabeza-tinta); } .sala-btn[aria-pressed="true"] { background: var(--teal-tinta); border-color: var(--teal-tinta); color: #fff; } .avatar { width: 28px; height: 28px; flex: none; border-radius: var(--r-control); background: var(--avance); color: #08191c; display: grid; place-items: center; font-size: 11px; font-weight: 700; } /* Regleta: pestañas segmentadas que se vuelven lengüeta de archivo */ .regleta { position: sticky; top: var(--y-regleta); z-index: 59; display: flex; align-items: stretch; flex-wrap: wrap; min-height: 40px; background: var(--cabeza-2); border-bottom: 1px solid var(--cabeza-linea); } .regleta button { position: relative; min-height: 40px; padding: 0 15px; cursor: pointer; border: 0; border-left: 1px solid var(--cabeza-linea); background: transparent; color: var(--cabeza-tinta-2); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } /* Sin pestañas no hay regleta: una franja oscura vacía parece un error. */ .regleta:empty { display: none; } .regleta button:first-child { border-left: 0; } .regleta button:hover { color: var(--cabeza-tinta); background: #173d45; } .regleta button[aria-selected="true"] { background: var(--lienzo); color: var(--tinta); } .regleta button[aria-selected="true"]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--avance); } .regleta sup { margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--cabeza-critico); vertical-align: top; } :root[data-densidad="sala"] .regleta button { font-size: 14px; min-height: 46px; } /* ═══════════════════ 2 · RIEL DE CONSTANTES ═══════════════════ */ .riel { position: sticky; top: var(--y-riel); z-index: 50; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); /* Alto por contenido con piso: un alto fijo recorta el rótulo en cuanto la cifra crece en modo sala, y el recorte es silencioso. */ min-height: var(--h-riel); background: var(--sup); border-top: 1px solid var(--borde-fuerte); border-bottom: 1px solid var(--borde-fuerte); margin: 0 -20px 16px; } .canal { position: relative; min-width: 0; overflow: hidden; cursor: pointer; padding: 12px 16px 0; border: 0; border-left: 1px solid var(--borde); background: none; text-align: left; font: inherit; color: inherit; display: grid; grid-template-rows: auto auto auto 1fr; gap: 2px; --edo: var(--nulo); } .canal:first-child { border-left: 0; } .canal:hover { background: var(--sup-3); } .canal[data-edo="bien"] { --edo: var(--bien); } .canal[data-edo="alerta"] { --edo: var(--alerta); } .canal[data-edo="critico"] { --edo: var(--critico); } .canal::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--edo); } .canal .cifra { margin-top: 2px; font-size: var(--t-cifra-riel); font-weight: 700; line-height: .92; letter-spacing: -.035em; color: var(--tinta); white-space: nowrap; font-variant-numeric: lining-nums; /* proporcional: no se apila con nada */ transition: font-size .16s ease; } .canal .cifra u { font-size: .34em; font-weight: 600; letter-spacing: 0; text-decoration: none; color: var(--tinta-3); margin-left: .16em; vertical-align: .34em; } /* El rótulo y el pie llevan overflow:hidden para el ellipsis, y eso vuelve su tamaño mínimo automático cero: sin un piso explícito la rejilla del canal los aplasta hasta hacerlos ilegibles en lugar de crecer. */ .canal .rotulo { min-height: 1.25em; } .canal .pie { display: flex; align-items: center; gap: 10px; min-height: 1.4em; font-size: 12px; font-weight: 600; color: var(--tinta-3); margin-bottom: 4px; overflow: hidden; white-space: nowrap; } /* La chispa toca los separadores: es señal, no un adorno dentro de una caja */ .canal .grafica.chispa { align-self: end; display: block; width: calc(100% + 32px); margin-left: -16px; height: 34px; transition: height .16s ease; } .riel.compacta { min-height: var(--h-riel-min); } .riel.compacta .canal { padding-top: 8px; } .riel.compacta .cifra { font-size: calc(var(--t-cifra-riel) * .52); } .riel.compacta .grafica.chispa { height: 18px; } .riel.compacta .pie { display: none; } /* ═══════════════ 3 · TABLERO DE EXCEPCIONES ═══════════════ */ .excepciones { background: var(--sup); border: 1px solid var(--borde-fuerte); border-radius: var(--r-bloque); overflow: hidden; margin-bottom: 24px; } .exc { --edo: var(--nulo); position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; min-height: 48px; padding: 8px 16px 8px 19px; border: 0; border-bottom: 1px solid var(--borde); background: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; } .exc:last-child { border-bottom: 0; } .exc[data-edo="alerta"] { --edo: var(--alerta); } .exc[data-edo="critico"] { --edo: var(--critico); } .exc::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--edo); } .exc:hover { background: var(--sup-3); } .exc .glifo { width: 12px; height: 12px; flex: none; } .exc .nombre { font-size: var(--t-exc-nombre); font-weight: 600; line-height: 1.2; color: var(--tinta); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .exc .duenio { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .exc .valor { text-align: right; white-space: nowrap; } .exc .valor b { display: block; font-size: var(--t-exc-cifra); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; } .exc .valor span { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; } .exc .btn { min-height: 32px; padding: 0 12px; font-size: 12px; } :root[data-densidad="sala"] .exc { min-height: 68px; gap: 20px; padding: 10px 20px 10px 23px; } :root[data-densidad="sala"] .exc .glifo { width: 16px; height: 16px; } :root[data-densidad="sala"] .exc .duenio { font-size: 14px; } /* Antigüedad: distingue el problema nuevo del crónico. 0 días es una novedad; 21 días es una obra o una plaza vacante y no se vuelve a discutir. */ .antiguedad { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-chip); background: var(--sup-2); color: var(--tinta-2); border: 1px solid var(--borde-fuerte); font-size: 11px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .antiguedad[data-nuevo="1"] { background: var(--critico-f); border-color: var(--critico); color: var(--tinta); } /* ═══════════════════ 4 · TARJETA KPI ═══════════════════ */ .rejilla-kpi { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 24px; } :root[data-densidad="sala"] .rejilla-kpi { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .kpi { --edo: var(--nulo); --edo-f: transparent; position: relative; overflow: hidden; cursor: pointer; display: grid; align-content: start; background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r-bloque); box-shadow: var(--elev-1); padding: var(--pad-tarjeta) var(--pad-tarjeta) 10px calc(var(--pad-tarjeta) + 6px); text-align: left; font: inherit; color: inherit; transition: border-color .14s ease, transform .14s ease; } .kpi[data-edo="bien"] { --edo: var(--bien); } .kpi[data-edo="alerta"] { --edo: var(--alerta); --edo-f: var(--alerta-f); } .kpi[data-edo="critico"] { --edo: var(--critico); --edo-f: var(--critico-f); } .kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--edo); } .kpi::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--edo-f) 0%, transparent 46%); } .kpi > * { position: relative; z-index: 1; } .kpi:hover { border-color: var(--borde-fuerte); transform: translateY(-1px); } .kpi .cifra { margin: 6px 0 4px; font-size: var(--t-cifra-kpi); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: lining-nums; } .kpi .cifra u { font-size: .32em; font-weight: 600; letter-spacing: 0; text-decoration: none; color: var(--tinta-3); margin-left: .18em; vertical-align: .34em; } /* Solo aparece cuando dos áreas comparten el rótulo. Va en minúsculas y sin tracking justo para no competir con el rótulo que tiene encima. */ .kpi .rotulo-area { font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--tinta-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi .pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--tinta-3); } .kpi .grafica.chispa { display: block; height: 34px; width: calc(100% + var(--pad-tarjeta)); margin: 8px calc(var(--pad-tarjeta) * -1) -10px 0; } /* Delta: el glifo lleva el estado, el número siempre va en tinta */ .delta { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--tinta-2); } .delta i { font-style: normal; margin-right: 4px; color: var(--tinta-4); } .delta.bueno i { color: var(--bien); } .delta.malo i { color: var(--critico); } /* ═══════════════════ 5 · TABLA DENSA ═══════════════════ */ .tabla-env { position: relative; overflow: auto; overscroll-behavior: contain; max-height: calc(100dvh - var(--y-thead) - 96px); background: var(--sup); border: 1px solid var(--borde-fuerte); border-radius: var(--r-bloque); } /* Envoltura simple para tablas administrativas, sin scroll interno vertical */ .tabla-envoltura { overflow-x: auto; background: var(--sup); border: 1px solid var(--borde-fuerte); border-radius: var(--r-bloque); } .tabla-ind, .tabla-envoltura table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--t-tabla); line-height: 1.25; } .tabla-ind thead th, .tabla-envoltura thead th { position: sticky; top: 0; z-index: 20; height: 32px; padding: 0 12px; text-align: left; white-space: nowrap; background: var(--sup-2); color: var(--tinta-3); font-size: var(--t-th); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; border-bottom: 1px solid var(--borde-fuerte); } .tabla-ind tbody td, .tabla-envoltura tbody td { height: var(--fila); padding: var(--celda); white-space: nowrap; border-bottom: 1px solid var(--borde); background: var(--sup); color: var(--tinta-2); font-weight: 500; } .tabla-ind tbody tr:last-child td, .tabla-envoltura tbody tr:last-child td { border-bottom: 0; } .tabla-ind tbody tr { cursor: pointer; } .tabla-ind tbody tr:hover td, .tabla-envoltura tbody tr:hover td { background: var(--sup-3); color: var(--tinta); } .tabla-ind th.num, .tabla-ind td.num, .tabla-envoltura th.num, .tabla-envoltura td.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; } /* Columna congelada. La sombra de arrastre es un ::after y no un box-shadow encadenado: así el box-shadow queda libre para la marca de estado. */ .tabla-ind th.nombre, .tabla-ind td.nombre { position: sticky; left: 0; z-index: 10; white-space: normal; min-width: 200px; max-width: 290px; padding-left: 15px; } .tabla-ind thead th.nombre { z-index: 21; background: var(--sup-2); } .tabla-ind tbody tr:hover td.nombre { background: var(--sup-3); } .tabla-ind td.nombre::after { content: ""; position: absolute; top: 0; bottom: 0; right: -14px; width: 14px; pointer-events: none; background: linear-gradient(90deg, var(--sombra-arrastre), transparent); } .tabla-ind td.nombre b { display: block; font-weight: 600; color: var(--tinta); } .tabla-ind td.nombre span { display: block; font-size: 11.5px; font-weight: 500; color: var(--tinta-3); } .tabla-envoltura td.nombre { white-space: normal; min-width: 200px; } /* Estado = marca de 3px en el canto, NUNCA fondo de celda */ .tabla-ind tr[data-edo="bien"] td.nombre { box-shadow: inset 3px 0 0 var(--bien); } .tabla-ind tr[data-edo="alerta"] td.nombre { box-shadow: inset 3px 0 0 var(--alerta); } .tabla-ind tr[data-edo="critico"] td.nombre { box-shadow: inset 3px 0 0 var(--critico); } .tabla-ind td.hoy { color: var(--tinta); font-weight: 700; font-size: calc(var(--t-tabla) + 2px); letter-spacing: -.01em; } .tabla-ind td.traza { width: 112px; padding-right: 14px; } .tabla-ind td.traza .grafica { display: block; width: 96px; height: 24px; } /* Fila de grupo pegajosa, por debajo del thead */ .tabla-ind tr.grupo td { position: sticky; top: 32px; z-index: 19; height: 26px; background: var(--sup-2); color: var(--tinta-3); font-size: var(--t-th); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--borde-fuerte); } :root[data-densidad="sala"] .tabla-ind .solo-denso { display: none; } /* ═══════════ 6 · GLIFO DE FORMA + PASTILLA DE ESTADO ═══════════ Tres canales redundantes: forma + palabra + posición. Sobrevive al daltonismo, al proyector mal calibrado y a la láser en blanco y negro. */ .glifo { width: 12px; height: 12px; flex: none; display: block; } .glifo.bien { fill: var(--bien); } .glifo.alerta { fill: var(--alerta); } .glifo.critico { fill: var(--critico); } .glifo.sin_meta { fill: none; color: var(--tinta-3); } .pastilla { --edo: var(--nulo); --edo-f: var(--nulo-f); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px; border-radius: var(--r-chip); background: var(--edo-f); border: 1px solid var(--edo); color: var(--tinta); /* 13.5:1 a 14.4:1 sobre cualquier tinte */ font-size: 11px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; } .pastilla .glifo { width: 9px; height: 9px; } .pastilla.bien, .pastilla.verde { --edo: var(--bien); --edo-f: var(--bien-f); } .pastilla.alerta, .pastilla.ambar { --edo: var(--alerta); --edo-f: var(--alerta-f); } .pastilla.critico, .pastilla.rojo { --edo: var(--critico); --edo-f: var(--critico-f); } .pastilla.sin_meta { --edo: var(--borde-fuerte); --edo-f: var(--nulo-f); } .pastilla.teal { --edo: var(--teal-tinta); --edo-f: #e2f6f5; } :root[data-densidad="sala"] .pastilla { height: 26px; font-size: 13px; padding: 0 11px 0 9px; } :root[data-densidad="sala"] .pastilla .glifo { width: 11px; height: 11px; } /* ═══════════════════ 7 · CAMPO DE CAPTURA ═══════════════════ Aquí la densidad se invierte a propósito: se conserva el rigor de alineación y se abandona la compresión. La caja ES el control. */ .campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .campo-caja { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 68px; padding: 9px 14px 11px; background: var(--sup); border: 1px solid var(--borde-control); /* 3.77:1 — vacío */ border-radius: var(--r-control); transition: border-color .14s ease, box-shadow .14s ease; } .campo-caja label { display: block; cursor: pointer; margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .campo-linea { display: flex; align-items: baseline; gap: 6px; } .campo-caja input, .campo-caja select { flex: 1; min-width: 0; width: 100%; height: 32px; min-height: 32px; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; text-align: right; color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; } .campo-caja select { text-align: left; font-size: 15px; } .campo-caja input:focus, .campo-caja select:focus { outline: none; box-shadow: none; } .campo-caja input::placeholder { color: var(--tinta-4); font-weight: 500; } .campo-caja input::-webkit-outer-spin-button, .campo-caja input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .campo-caja input[type=number] { -moz-appearance: textfield; } .campo-sufijo { font-size: 13px; font-weight: 600; color: var(--tinta-3); white-space: nowrap; } .campo-pistas { font-size: 11.5px; font-weight: 500; color: var(--tinta-3); font-variant-numeric: tabular-nums; } .campo-caja[data-lleno="1"] { border-color: var(--borde-fuerte); box-shadow: inset 2px 0 0 var(--teal); } .campo-caja:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 183, 176, .20); } .campo-caja:focus-within label { color: var(--tinta); } .campo-caja[data-calc="1"] { background: var(--sup-2); border-color: transparent; } .campo-caja[data-calc="1"] label::after { content: " · calculado"; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-tinta); } .campo-caja[data-calc="1"].recalculado { animation: flash 220ms ease; } @keyframes flash { from { background: #e2f6f5; } to { background: var(--sup-2); } } .campo-caja .interruptor { margin-top: 4px; } .campo-caja .interruptor button { min-height: 32px; font-size: 12px; } /* Barra de acción de la captura */ .accion-captura { position: sticky; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 16px; margin: 16px -20px 0; background: var(--sup); border-top: 1px solid var(--borde-fuerte); } .accion-captura .cuenta { font-size: 20px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; } .accion-captura .cuenta small { font-size: .5em; font-weight: 600; color: var(--tinta-3); } .accion-captura .medidor { flex: 1; min-width: 120px; max-width: 320px; } /* ═════════════ 8 · ENCABEZADO DE SECCIÓN + ESTADO VACÍO ═════════════ */ .rubro { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px; min-height: 26px; margin: 28px 0 12px; } .rubro .folio { font-size: var(--t-rotulo); font-weight: 700; color: var(--teal-tinta); font-variant-numeric: tabular-nums; } .rubro .titulo { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--tinta); } .rubro .regla { height: 1px; background: var(--borde); align-self: center; } .rubro .contexto { font-size: 11.5px; font-weight: 600; color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; } /* En /captura el rubro se pega: en el celular siempre se sabe en qué bloque se está escribiendo. No colisiona con el riel porque /captura no lo tiene. */ [data-vista="captura"] .rubro { position: sticky; top: var(--y-riel); z-index: 30; background: var(--lienzo); padding-block: 6px; margin-top: 24px; } .vacio { display: grid; place-items: center; gap: 10px; min-height: 120px; padding: 40px 24px; text-align: center; background: var(--sup); border-top: 1px solid var(--borde-fuerte); border-bottom: 1px solid var(--borde-fuerte); } .vacio .titulo { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); } .vacio p { margin: 0; max-width: 46ch; font-size: 13px; font-weight: 500; color: var(--tinta-3); } .vacio-linea { color: var(--tinta-4); } .cargando { padding: 48px; text-align: center; color: var(--tinta-3); font-size: 13px; } /* Bloque genérico de contenido */ .tarjeta { background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r-bloque); padding: var(--pad-tarjeta); box-shadow: var(--elev-1); } .tarjeta-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--tinta-3); } .tarjeta-titulo .pico { font-size: 1.1rem; } /* Avisos: misma construcción que la pastilla — fondo teñido, borde de estado, texto en tinta. Cero hex literales. */ .aviso { --edo: var(--borde-fuerte); --edo-f: var(--sup-2); padding: 11px 14px; margin-bottom: 14px; border: 1px solid var(--edo); border-left-width: 3px; border-radius: var(--r-control); background: var(--edo-f); color: var(--tinta); font-size: 13px; font-weight: 500; } .aviso.ok { --edo: var(--bien); --edo-f: var(--bien-f); } .aviso.error { --edo: var(--critico); --edo-f: var(--critico-f); } .aviso.info { --edo: var(--teal-tinta); --edo-f: #e2f6f5; } .aviso.alerta { --edo: var(--alerta); --edo-f: var(--alerta-f); } /* Lo que falta entregar hoy: texto a la izquierda, atajos a cada día a la derecha. En teléfono se apila, porque tres botones y una frase no caben en una línea de 390px sin partir palabras. */ .pendientes-captura { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .pendientes-captura .mini { color: var(--tinta-2); font-weight: 500; margin-top: 2px; } @media (max-width: 560px) { .pendientes-captura { align-items: stretch; flex-direction: column; gap: 10px; } } /* ═══════════ 9 · CAJÓN DE DETALLE · MODAL · ACUERDO ═══════════ */ .velo { position: fixed; inset: 0; z-index: 100; background: rgba(11, 36, 41, .42); } .cajon { position: fixed; z-index: 101; top: var(--y-thead); right: 0; bottom: 0; width: min(560px, 100vw); display: grid; grid-template-rows: auto 1fr auto; background: var(--sup); border-left: 1px solid var(--borde-fuerte); box-shadow: var(--elev-2); animation: entra-cajon 160ms cubic-bezier(.2, .8, .3, 1); } @keyframes entra-cajon { from { transform: translateX(16px); opacity: 0; } } .cajon-cab { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 18px; background: var(--sup); border-bottom: 1px solid var(--borde); } .cajon-cuerpo { overflow: auto; padding: 18px; overscroll-behavior: contain; } .cajon-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; background: var(--sup); border-top: 1px solid var(--borde); } .modal { position: fixed; z-index: 101; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(680px, calc(100vw - 32px)); max-height: 88dvh; overflow: auto; background: var(--sup); border: 1px solid var(--borde-fuerte); border-radius: var(--r-modal); box-shadow: var(--elev-2); padding: 20px; } .modal.ancho { width: min(1000px, calc(100vw - 32px)); } /* ═══════ 10 · GRÁFICAS · el CSS que graficas.js espera ═══════ */ .grafica { width: 100%; display: block; } .grafica-caja { position: relative; width: 100%; } /* Series validadas. El texto NUNCA toma el color de la serie. */ .serie-1 { color: var(--s1); } .serie-2 { color: var(--s2); } .serie-3 { color: var(--s3); } .g-trazo { fill: none; stroke: currentColor; stroke-width: var(--g-trazo); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .g-area { stroke: none; fill: currentColor; opacity: .08; } .g-proyeccion { stroke: currentColor; stroke-width: var(--g-meta); stroke-dasharray: 4 4; opacity: .55; fill: none; vector-effect: non-scaling-stroke; } .g-punto { fill: var(--sup); stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; } .g-punto-proyectado { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .7; vector-effect: non-scaling-stroke; } .g-valor-directo { fill: var(--tinta); font-size: calc(var(--g-eje-txt) + 2px); font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--sans); } /* Rejilla y ejes: hairline SÓLIDO, nunca punteado. */ .g-rejilla { stroke: var(--g-rejilla); stroke-width: 1; shape-rendering: crispEdges; } .g-eje { stroke: var(--borde-fuerte); stroke-width: 1; shape-rendering: crispEdges; } .g-eje-txt { fill: var(--tinta-3); font-size: var(--g-eje-txt); font-weight: 600; font-family: var(--sans); font-variant-numeric: tabular-nums; } /* Meta: es una REFERENCIA, va en tinta. El lima significa avance, no meta. */ .g-meta-linea { stroke: var(--tinta-3); stroke-width: var(--g-meta); stroke-dasharray: 5 5; opacity: .75; vector-effect: non-scaling-stroke; } .g-meta-txt { fill: var(--tinta-3); font-size: var(--g-eje-txt); font-weight: 700; font-family: var(--sans); font-variant-numeric: tabular-nums; } /* Capa de puntería */ .g-mira { stroke: var(--borde-control); stroke-width: 1; pointer-events: none; vector-effect: non-scaling-stroke; } .g-foco { fill: currentColor; stroke: var(--sup); stroke-width: 2; pointer-events: none; vector-effect: non-scaling-stroke; } .g-zona { cursor: crosshair; } .g-zona:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; } /* Chispa: el contexto retrocede, el tramo reciente toma el acento. La punta es un segmento de longitud cero con linecap round: inmune al escalado anisotrópico, a diferencia de un , que se vuelve elipse. */ .chispa .g-chispa-contexto { fill: none; stroke: var(--borde-fuerte); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; } .chispa .g-chispa-actual { fill: none; stroke: var(--s1); stroke-width: var(--g-chispa); stroke-linecap: round; vector-effect: non-scaling-stroke; } .chispa .g-chispa-punta { stroke: var(--s1); stroke-width: calc(var(--g-punto) + 2px); stroke-linecap: round; vector-effect: non-scaling-stroke; } /* Tooltip: position FIXED — graficas.js posiciona con clientX/clientY */ .globo { position: fixed; z-index: 120; pointer-events: none; min-width: 120px; padding: 9px 11px; background: var(--cabeza); color: var(--cabeza-tinta); border-radius: var(--r-control); box-shadow: var(--elev-2); font-family: var(--sans); font-size: 12px; opacity: 0; transition: opacity .09s ease; } .globo.ver { opacity: 1; } .globo-titulo { font-size: 11px; font-weight: 600; color: var(--cabeza-tinta-2); margin-bottom: 4px; font-variant-numeric: tabular-nums; } .globo-fila { display: flex; align-items: center; gap: 7px; line-height: 1.5; } .globo-fila strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .globo-fila span { color: var(--cabeza-tinta-2); } .globo-llave { width: 10px; height: 3px; border-radius: 2px; flex: none; background: currentColor; } .globo-llave.serie-1 { background: var(--s1); } .globo-llave.serie-2 { background: var(--s2); } .globo-llave.serie-3 { background: var(--s3); } .globo-llave.llave-meta { background: var(--cabeza-tinta-2); } /* Barras horizontales: una sola serie, un solo color. El largo ya codifica la magnitud; teñir cada barra gastaría el canal de color en información repetida. */ .barras { display: grid; gap: 6px; } .barras-fila { display: grid; grid-template-columns: minmax(140px, 1.1fr) 3fr 76px; align-items: center; gap: 12px; min-height: 28px; } .barras-etiqueta { font-size: 12px; font-weight: 500; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barras-pista { position: relative; display: block; height: 18px; border-bottom: 1px solid var(--g-rejilla); } .barras-marca { display: block; height: 6px; background: var(--s1); position: absolute; bottom: 0; left: 0; border-radius: 0 3px 3px 0; } .barras-marca.serie-2 { background: var(--s2); } .barras-marca.serie-3 { background: var(--s3); } .barras-valor { font-size: 13px; font-weight: 700; text-align: right; color: var(--tinta); font-variant-numeric: tabular-nums; } /* Medidor: aquí vive el degradado de marca. Turquesa = empezado, lima = completo. Nunca es el único portador del dato: siempre lleva su cifra tabular al lado. */ .medidor { display: grid; gap: 6px; } .medidor-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .medidor-etiqueta { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--tinta-3); } .medidor-cifra { font-size: 20px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .medidor-pista { position: relative; width: 100%; background: var(--sup-2); border-radius: var(--r-chip); overflow: hidden; } .medidor-relleno { display: block; height: 100%; background: var(--avance); transition: width .5s cubic-bezier(.2, .8, .3, 1); } .medidor.estado-bien .medidor-relleno { background: var(--bien); } .medidor.estado-alerta .medidor-relleno { background: var(--alerta); } .medidor.estado-critico .medidor-relleno { background: var(--critico); } .medidor-detalle { font-size: 11.5px; font-weight: 500; color: var(--tinta-3); } /* Gemelo accesible de toda gráfica */ .tabla-gemela { margin-top: 12px; } .tabla-gemela summary { cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--tinta-3); } .tabla-gemela .tabla-envoltura { margin-top: 8px; max-height: 280px; overflow: auto; } /* Barra de progreso del formulario: el otro lugar del degradado */ .progreso { height: 6px; background: var(--sup-2); border-radius: var(--r-chip); overflow: hidden; } .progreso i { display: block; height: 100%; background: var(--avance); transition: width .3s; } /* ═══════════════════ Ingreso ═══════════════════ */ .login-fondo { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--lienzo); } .login-caja { width: 100%; max-width: 400px; background: var(--sup); border: 1px solid var(--borde-fuerte); border-radius: var(--r-bloque); padding: 34px 30px; box-shadow: var(--elev-1); } .login-caja img { height: 46px; display: block; margin: 0 auto 16px; } /* ═══════════════════ Markdown del análisis IA ═══════════════════ */ .md { font-size: 14px; line-height: 1.6; color: var(--tinta-2); } .md h1, .md h2 { font-size: var(--t-rotulo); letter-spacing: .10em; text-transform: uppercase; color: var(--tinta-3); margin: 1.4em 0 .5em; } .md h3 { font-size: 14px; margin: 1.1em 0 .4em; color: var(--tinta); } .md ul { padding-left: 1.15em; margin: .4em 0 .9em; } .md li { margin-bottom: .35em; } .md strong { color: var(--tinta); font-weight: 700; } .md hr { border: 0; border-top: 1px solid var(--borde); margin: 1.4em 0; } /* ═══════════════════ Aviso flotante de guardado ═══════════════════ */ .guardado { position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%); background: var(--cabeza); color: var(--cabeza-tinta); padding: 10px 18px; border-radius: var(--r-control); font-size: 13px; font-weight: 600; box-shadow: var(--elev-2); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 130; } .guardado.ver { opacity: 1; } /* ═══════════════════════ RESPONSIVE ═══════════════════════ El ancho y la densidad son ORTOGONALES: data-densidad="sala" se activa a cualquier ancho, porque Dirección a veces proyecta desde una laptop de 1366 y a veces desde un mini-PC a 1920. */ @media (max-width: 1279px) { .riel { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 0; } .riel.compacta { min-height: 0; } } @media (max-width: 1100px) { /* Con cinco entradas la nav ya no cabe en una tableta en vertical. Se desplaza igual que la regleta en vez de recortar la última, que quedaba partida y sin forma de alcanzarla: un enlace a medias no es un enlace. */ .nav-app { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .nav-app::-webkit-scrollbar { display: none; } .nav-app a { scroll-snap-align: start; flex: none; } } @media (max-width: 900px) { .regleta { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .regleta::-webkit-scrollbar { display: none; } .regleta button { scroll-snap-align: center; } .campos { grid-template-columns: 1fr 1fr; } .marca-txt span { display: none; } } @media (max-width: 820px) { .riel { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; margin: 0 -12px 12px; } .canal { padding: 10px 12px 0 15px; } .canal::before { inset: 0 auto 0 0; height: auto; width: 3px; } .canal .cifra { font-size: 32px; } .canal .grafica.chispa { height: 24px; width: calc(100% + 27px); margin-left: -15px; } } @media (max-width: 760px) { .tabla-env { max-height: none; } .tabla-ind .solo-denso { display: none; } .tabla-ind th.nombre, .tabla-ind td.nombre { min-width: 150px; } .telemetria .oculta-movil { display: none; } } @media (max-width: 700px) { .contenedor { padding: 12px 12px 96px; } .accion-captura { margin: 16px -12px 0; } .exc { grid-template-columns: 16px minmax(0, 1fr) auto; row-gap: 6px; } .exc .antiguedad, .exc .btn { grid-column: 2 / -1; justify-self: start; } .exc .valor b { font-size: 26px; } .cajon { top: auto; left: 0; height: 88dvh; width: 100vw; border-left: 0; border-top: 1px solid var(--borde-fuerte); border-radius: var(--r-bloque) var(--r-bloque) 0 0; } .barras-fila { grid-template-columns: minmax(90px, 1fr) 2fr 64px; } } /* ≤520px — celular, el escenario de las 7 am. Con inputs de 22px, dos columnas de ~165px son una fábrica de errores de dedo y de nombres truncados. */ @media (max-width: 520px) { .campos { grid-template-columns: 1fr; } } /* ═══════════ Piezas que solo existen en el documento impreso ═══════════ */ .hoja-cab { display: none; } .pie-hoja { display: none; } .solo-impresion { display: none; } .casilla-firma { display: inline-block; width: 34mm; height: 4mm; border-bottom: 1px solid var(--borde-fuerte); } /* ═══════════════════════ IMPRESIÓN ═══════════════════════ /junta se imprime, se firma y se archiva: es un entregable, no una vista degradada. Tres reglas duras: 1. print-color-adjust:exact en los SVG — sin él Chrome descarta los fondos. 2. El estado se imprime por tres canales: forma + palabra + regla de gris. 3. Nada de degradados: --avance cae a gris sólido. */ @media print { :root { --t-tabla: 9pt; --t-th: 7.5pt; --fila: 22px; --pad-tarjeta: 10px; } @page { size: letter; margin: 14mm 12mm; } html, body { background: #fff; color: #000; font-size: 10.5pt; } .contenedor { max-width: none; padding: 0; } .cabeza, .regleta, .riel, .accion-captura, .btn, .no-imprimir, .g-mira, .g-foco, .g-zona, .globo, .tabla-gemela, .guardado { display: none !important; } * { box-shadow: none !important; text-shadow: none !important; } .excepciones, .kpi, .tabla-env, .tabla-envoltura, .vacio, .tarjeta { border-radius: 0; border-color: #8a8a8a; } thead { display: table-header-group; } tr, .kpi, .exc, .rubro, .grafica-caja { break-inside: avoid; } .rubro { break-after: avoid; position: static; } .tabla-env { max-height: none; overflow: visible; } .tabla-ind thead th, .tabla-ind tr.grupo td { position: static; background: #f0f0f0; color: #000; } .tabla-ind td.nombre, .tabla-ind tr.grupo td > span { position: static; } .tabla-ind td.nombre::after, .tabla-ind th.nombre::after { display: none; } .glifo { fill: #000 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .glifo.sin_meta { fill: none !important; color: #000; } .pastilla { background: none !important; border: 1pt solid #000; color: #000; } .exc::before, .kpi::before { background: #333 !important; width: 3pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .exc[data-edo="alerta"]::before { background: #777 !important; } .kpi::after { display: none; } .tabla-ind tr[data-edo="critico"] td.nombre { box-shadow: inset 3pt 0 0 #333 !important; } .tabla-ind tr[data-edo="alerta"] td.nombre { box-shadow: inset 3pt 0 0 #777 !important; } .tabla-ind tr[data-edo="bien"] td.nombre { box-shadow: inset 3pt 0 0 #bbb !important; } .grafica { print-color-adjust: exact; -webkit-print-color-adjust: exact; } .serie-1, .serie-2, .serie-3 { color: #000; } .g-trazo { stroke-width: .8pt; } .g-area { display: none; } .g-rejilla { stroke: #ccc; stroke-width: .4pt; } .g-eje { stroke: #888; stroke-width: .5pt; } .g-meta-linea { stroke: #666; stroke-width: .6pt; stroke-dasharray: 3 3; } .g-eje-txt, .g-meta-txt, .g-valor-directo { fill: #000; } .medidor-relleno { background: #555 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .medidor-pista { border: .4pt solid #999; } .canal .cifra { font-size: 22pt; } .kpi .cifra { font-size: 16pt; } .exc .valor b { font-size: 14pt; } .exc .nombre { font-size: 11pt; } /* El riel se imprime como una fila de celdas, no como barra pegajosa */ .riel { position: static !important; display: grid; grid-template-columns: repeat(6, 1fr); height: auto; margin: 0 0 8mm; border: .5pt solid #8a8a8a; } .canal { border-left: .5pt solid #bbb; } .rejilla-kpi { grid-template-columns: repeat(4, 1fr); gap: 4mm; } /* Encabezado y pie del documento */ .hoja-cab { display: flex; align-items: center; gap: 6mm; margin-bottom: 6mm; padding-bottom: 3mm; border-bottom: 1pt solid #000; } .hoja-cab img { height: 12mm; } .pie-hoja { display: block; margin-top: 8mm; padding-top: 3mm; border-top: .5pt solid #999; font-size: 8pt; } .solo-impresion { display: inline; } .casilla-firma { border-bottom: .5pt solid #000; } .tabla-ind .solo-denso { display: table-cell; } } /* ═══════════════════ 11 · HOJA DE ÁREA ═══════════════════ Una fila por indicador, una columna por ajuste. No es una tabla nueva: es .tabla-ind con dos tokens de densidad reescritos en el ámbito .hoja, el mismo mecanismo que data-densidad, así que el modo sala sigue funcionando solo. */ .hoja { display: block; } /* Una celda cuyo contenido ES un control necesita aire, no interlínea. */ .hoja .tabla-ind { --fila: 40px; --celda: 3px 10px; } :root[data-densidad="sala"] .hoja .tabla-ind { --fila: 52px; --celda: 6px 12px; } .hoja .tabla-env { max-height: calc(100dvh - var(--y-thead) - 168px); } .hoja table.tabla-hoja { table-layout: fixed; min-width: 1180px; } .tabla-hoja th.nombre, .tabla-hoja td.nombre { min-width: 0; max-width: none; padding-left: 22px; } /* ---- La columna del nombre se ancla a la izquierda ----------------------- La hoja mide 1180px y no cabe en una ventana angosta. Sin anclar, desplazarse hasta Fórmula deja una parrilla de casillas sin saber de qué indicador es cada renglón. El z-index sube en tres pisos: celdas normales < nombre < encabezado < esquina, porque el nombre se ancla en X y el encabezado en Y, y donde se cruzan tiene que ganar la esquina. */ .tabla-hoja td.nombre, .tabla-hoja tr.grupo td > span { position: sticky; left: 0; z-index: 10; } .tabla-hoja thead th.nombre { left: 0; z-index: 30; } /* el `top:0` ya viene de .tabla-ind thead th */ .tabla-hoja td.nombre::after { content: ''; position: absolute; top: 0; right: 0; bottom: -1px; width: 1px; background: var(--borde-fuerte); } /* La sombra solo aparece cuando algo pasó por debajo. */ .tabla-env.desplazada .tabla-hoja td.nombre::after, .tabla-env.desplazada .tabla-hoja th.nombre::after { box-shadow: 6px 0 8px -6px rgb(11 36 41 / .28); } .tabla-hoja thead th.nombre::after { content: ''; position: absolute; top: 0; right: 0; bottom: -1px; width: 1px; background: var(--borde-fuerte); } .tabla-hoja tr.grupo td > span { background: inherit; padding-right: 12px; } .tabla-hoja tbody tr { cursor: default; } .tabla-hoja tbody td { vertical-align: middle; } .tabla-hoja td.celda-marca, .tabla-hoja th.celda-marca { padding: 3px 0; text-align: center; } /* Nombre en una línea con ellipsis: sin esto un nombre de 51 caracteres envuelve y la aritmética de 40px por fila deja de ser cierta. */ .tabla-hoja td.nombre b { display: block; font-size: 13px; font-weight: 600; color: var(--tinta); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tabla-hoja td.nombre span { display: block; font-size: 11.5px; font-weight: 500; color: var(--tinta-3); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tabla-hoja td.nombre span.falla { color: var(--critico); font-weight: 700; } /* "Riel", "KPI" y "crítico" son vocabulario de la app, no del hospital: la explicación cuesta 12px de encabezado y ahorra una llamada. */ .tabla-hoja thead th { height: auto; min-height: 32px; padding-block: 5px; vertical-align: bottom; } .tabla-hoja thead th small { display: block; margin-top: 2px; font-size: 9.5px; font-weight: 600; letter-spacing: 0; line-height: 1.15; text-transform: none; color: var(--tinta-3); /* Sin esto la explicación de una columna de 64px se derrama sobre la vecina. */ white-space: normal; overflow-wrap: anywhere; } .tabla-hoja thead th button.jefe-col { border: 0; padding: 0; background: none; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; text-decoration: underline dotted; text-underline-offset: 3px; } .tabla-hoja thead th button.jefe-col small { text-decoration: none; } .celda-ctrl { width: 100%; height: calc(var(--fila) - 10px); min-height: 0; padding: 0 8px; border: 1px solid var(--borde-control); border-radius: var(--r-control); background: var(--sup); color: var(--tinta); font: inherit; font-size: var(--t-tabla); font-weight: 600; } .celda-ctrl:focus { outline: 2px solid var(--foco); outline-offset: -1px; border-color: var(--foco); box-shadow: none; } .celda-ctrl:disabled { background: var(--sup-2); border-color: transparent; color: var(--tinta-3); } select.celda-ctrl { padding-right: 4px; } /* Meta: la caja ES el control, la doctrina de .campo-caja comprimida a la fila. Escribir un número es lo que activa la meta: no hay una casilla aparte. */ .celda-meta { display: flex; align-items: center; gap: 4px; width: 100%; height: calc(var(--fila) - 10px); padding: 0 7px; background: var(--sup); border: 1px solid var(--borde-control); border-radius: var(--r-control); } .celda-meta .signo { flex: none; width: 11px; text-align: center; font-size: 12px; font-weight: 700; color: var(--tinta-3); } .celda-meta input { flex: 1; min-width: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; text-align: right; font: inherit; font-size: 14px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; } .celda-meta input:focus { outline: none; box-shadow: none; } .celda-meta input::-webkit-outer-spin-button, .celda-meta input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .celda-meta input[type=number] { -moz-appearance: textfield; } .celda-meta u { flex: none; font-size: 11px; font-weight: 600; color: var(--tinta-3); text-decoration: none; } .celda-meta:focus-within { outline: 2px solid var(--foco); outline-offset: -1px; } /* Sin valor el borde recede, para que las que sí tienen meta destaquen. */ .celda-meta[data-vacio="1"] { border-color: var(--borde); } .celda-meta[data-neutral="1"] { background: var(--sup-2); border-color: transparent; } /* La casilla ocupa toda la celda: el blanco alrededor también es objetivo. */ .marca-caja { display: grid; place-items: center; margin: 0; width: 100%; height: calc(var(--fila) - 10px); border-radius: var(--r-control); cursor: pointer; } .marca-caja:hover { background: var(--sup-2); } .marca-caja input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--teal-tinta); cursor: pointer; } .marca-caja input:disabled { cursor: not-allowed; opacity: .4; } .marca-caja:focus-within { outline: 2px solid var(--foco); outline-offset: -2px; } .hoja-mas { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--r-control); background: none; color: var(--tinta-3); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; } .hoja-mas:hover { background: var(--sup-2); border-color: var(--borde-fuerte); } /* position:fixed para que el overflow de .tabla-env no lo recorte */ .menu-flotante { position: fixed; z-index: 90; min-width: 224px; padding: 4px; background: var(--sup); border: 1px solid var(--borde-fuerte); border-radius: var(--r-control); box-shadow: var(--elev-2); } .menu-flotante button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 34px; padding: 0 10px; text-align: left; border: 0; border-radius: var(--r-control); background: none; color: var(--tinta); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .menu-flotante button:hover { background: var(--sup-3); } .menu-flotante button.peligro { color: var(--critico); } /* Barra y pie de la hoja */ .hoja-barra { position: sticky; top: var(--y-thead); z-index: 45; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 52px; padding: 8px 20px; margin: 0 -20px 10px; background: var(--lienzo); border-bottom: 1px solid var(--borde); } .hoja-pie { position: sticky; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 56px; padding: 8px 20px; margin: 12px -20px 0; background: var(--sup); border-top: 1px solid var(--borde-fuerte); } .hoja-pie .resumen { font-size: 12px; font-weight: 600; color: var(--tinta-3); font-variant-numeric: tabular-nums; } .paso-mes { display: flex; align-items: center; gap: 6px; } .paso-mes b { min-width: 116px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ═══════════════════ 12 · SUGERIDOR Y ARMADOR DE FÓRMULAS ═══════════════════ */ .combo { position: relative; } .sugeridor { position: absolute; z-index: 95; top: calc(100% + 4px); left: 0; width: min(420px, 96vw); max-height: 320px; overflow: auto; padding: 4px; background: var(--sup); border: 1px solid var(--borde-fuerte); border-radius: var(--r-control); box-shadow: var(--elev-2); } .sugeridor[hidden] { display: none; } .sugeridor .grupo { padding: 6px 8px 3px; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); } .sugeridor .opcion { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; text-align: left; cursor: pointer; border: 0; border-radius: var(--r-control); background: none; color: var(--tinta); font: inherit; font-size: 13px; } .sugeridor .opcion:hover, .sugeridor .opcion[aria-selected="true"] { background: var(--sup-3); } .sugeridor .opcion b { font-weight: 600; } .sugeridor .opcion mark { background: none; color: var(--teal-tinta); font-weight: 700; } .sugeridor .opcion .meta-op { margin-left: auto; font-size: 11px; color: var(--tinta-3); white-space: nowrap; } .sugeridor .opcion:disabled { opacity: .5; cursor: default; } .sugeridor .nada { padding: 14px 10px; font-size: 12.5px; color: var(--tinta-3); } /* El cajón recorta por overflow:auto; sin esto el desplegable se corta. */ .cajon-cuerpo:has(.sugeridor:not([hidden])) { overflow: visible; overflow-x: clip; } .recetas { display: grid; gap: 8px; margin-bottom: 14px; } .receta { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--borde-control); border-radius: var(--r-control); background: var(--sup); color: var(--tinta); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; } .receta:hover { background: var(--sup-3); } .receta[aria-pressed="true"] { border-color: var(--teal-tinta); box-shadow: inset 3px 0 0 var(--teal-tinta); } .receta code { font-size: 11.5px; color: var(--tinta-3); margin-left: auto; } .ranuras { display: grid; gap: 10px; margin-bottom: 14px; } .ranura { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 10px; } .ranura .letra { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-chip); background: var(--sup-2); color: var(--tinta-2); font-size: 11px; font-weight: 700; } .formula-campo { font-variant-numeric: tabular-nums; } .formula-teclado { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; } .formula-teclado button { min-width: 34px; height: 32px; padding: 0 9px; border: 1px solid var(--borde-control); border-radius: var(--r-control); background: var(--sup); color: var(--tinta); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .formula-teclado button:hover { background: var(--sup-3); } .lectura-humana { padding: 11px 13px; border-radius: var(--r-control); background: var(--sup-2); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--tinta); } .lectura-humana .rota { color: var(--critico); font-weight: 700; } .formula-ascii { margin-top: 6px; font-size: 11.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; } .prueba { margin-top: 14px; } .prueba-fila { display: grid; grid-template-columns: 1fr 92px; align-items: center; gap: 10px; margin-bottom: 6px; } .prueba-fila label { font-size: 12.5px; color: var(--tinta-2); } .prueba-fila input { height: 30px; min-height: 0; text-align: right; font-variant-numeric: tabular-nums; } .prueba-resultado { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde-fuerte); } .prueba-resultado b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ═══════════════ 13 · PENDIENTES · EXPEDIENTE ═══════════════ La lista de pendientes NO trae piezas nuevas: reusa .exc, .kpi y .rubro, porque un pendiente vencido es la misma clase de cosa que un indicador en rojo y debe leerse igual. Aquí solo va lo que de verdad no existía: la ficha de datos del expediente y su línea de tiempo. */ /* Ficha: pares rótulo/valor. En dos columnas cuando cabe, apilada cuando no. */ .ficha { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 16px; margin: 0 0 18px; font-size: 13.5px; line-height: 1.45; } .ficha dt { color: var(--tinta-3); font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; } .ficha dd { margin: 0; color: var(--tinta); font-weight: 500; } @media (max-width: 520px) { .ficha { grid-template-columns: 1fr; gap: 2px 0; } .ficha dd { margin-bottom: 10px; } } /* Línea de tiempo del acuerdo: una sola narrativa cronológica donde caben por igual el avance que escribió el jefe, el cambio de estado y el aviso que mandó el sistema. La raya vertical la dibuja el borde del contenedor. */ .hilo { position: relative; margin: 0 0 18px; padding-left: 4px; } .hilo-item { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 0 0 14px; } /* La raya no baja del último punto: si no, cuelga en el vacío. */ .hilo-item:not(:last-child)::before { content: ''; position: absolute; left: 8px; top: 16px; bottom: 0; width: 1px; background: var(--borde); } .hilo-marca { width: 9px; height: 9px; margin: 5px auto 0; border-radius: 50%; background: var(--sup); border: 2px solid var(--tinta-4); } .hilo-item[data-tipo="avance"] .hilo-marca, .hilo-item[data-tipo="comentario"] .hilo-marca { border-color: var(--teal-tinta); } .hilo-item[data-tipo="cierre"] .hilo-marca { border-color: var(--bien); background: var(--bien); } .hilo-item[data-tipo="estado"] .hilo-marca, .hilo-item[data-tipo="prorroga"] .hilo-marca { border-color: var(--alerta); } .hilo-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .hilo-cab b { font-size: 13px; color: var(--tinta); } .hilo-txt { font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); margin-top: 1px; } /* Los eventos que escribe la máquina van en gris: la vista tiene que distinguir de un vistazo lo que dijo una persona de lo que anotó el sistema. */ .hilo-item[data-tipo="sistema"] .hilo-txt { color: var(--tinta-3); font-style: italic; } /* ═══════════════ 14 · OSPI ═══════════════ La mascota. Nunca por debajo de 44px —ahí la ilustración deja de leerse y el área se identifica con .sigla—, y siempre con el nombre del área al lado: el oso acompaña, no sustituye al rótulo. */ .ospi { display: block; flex: none; object-fit: contain; /* Sin fondo ni borde: el PNG ya viene recortado y transparente, y un círculo de color detrás le robaría el aire que necesita para leerse. */ } .ospi-fila { display: flex; align-items: center; gap: 12px; min-width: 0; } /* En una celda de tabla el texto va arriba, no centrado con el oso, cuando hay descripción: si no, un área de tres renglones descuadra la fila. */ td .ospi-fila { align-items: flex-start; } td .ospi-fila .ospi { margin-top: 1px; } td .ospi-fila > .crece { min-width: 0; } /* El Ospi se come 56px de la columna. Sin un ancho mínimo, a la descripción le quedaban 120px y se partía en cinco líneas: la fila pasó de 57 a 111px y la tabla dejó de leerse de un vistazo. */ .tabla-envoltura td.nombre { min-width: 300px; } /* Y la descripción se corta a dos líneas: es contexto, no el dato. El texto completo sigue estando en el title. */ td .ospi-fila .mini { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 760px) { /* En teléfono la columna no puede exigir 300px: la tabla ya se desplaza a lo ancho, y forzarlo empujaría el resto fuera de la pantalla. */ .tabla-envoltura td.nombre { min-width: 210px; } td .ospi-fila .mini { -webkit-line-clamp: 1; } } /* La sigla es lo que va donde el Ospi no cabe: lista densa, selector, celda. */ .sigla { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-control); /* El tinte anterior (--sup-3 sobre fila blanca) desaparecía: la sigla se veía como una mancha clarísima con una letra encima. Con borde y tinta plena se lee, que es su único trabajo. */ background: var(--sup-2); color: var(--tinta); border: 1px solid var(--borde); font-size: 11px; font-weight: 700; letter-spacing: .02em; } /* Selector de Ospi: rejilla de retratos. Cada celda a 72px, que es tamaño de lectura cómoda y además objetivo táctil de sobra. */ .ospi-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 10px 0 4px; } .ospi-op { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; cursor: pointer; background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r-bloque); font: inherit; color: var(--tinta-3); transition: border-color .12s ease, transform .12s ease; } .ospi-op:hover { border-color: var(--borde-fuerte); transform: translateY(-1px); } .ospi-op[aria-pressed="true"] { border-color: var(--teal-tinta); box-shadow: inset 0 0 0 1px var(--teal-tinta); background: var(--sup-2); } .ospi-op span { font-size: 10.5px; font-weight: 600; line-height: 1.25; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* En impresión el oso no aporta y gasta tóner: se va y queda la sigla. */ @media print { .ospi { display: none; } } /* ═══════════════ 15 · DEDO ═══════════════ En puntero fino (ratón) un control de 32px se acierta siempre. Con el dedo no: por debajo de 44x44 empiezan los errores, y esta app se llena a las 7 am en un teléfono. La consulta es por PUNTERO, no por ancho de pantalla: una tableta grande también se toca, y un escritorio angosto no. */ @media (pointer: coarse) { .btn.chico, .sala-btn, .paso-fecha, .regleta button, .nav-app a { min-height: 44px; } .btn.chico, .sala-btn { padding-inline: 14px; } .paso-fecha { width: 44px; height: 44px; } /* Las casillas de la hoja de área: el cuadro sigue viéndose de 18px, pero el área que responde al dedo llega a 44 con el relleno de su celda. */ .celda-marca .marca-caja { min-width: 44px; min-height: 44px; } /* El chip de usuario y el avatar no son botones: no se tocan aparte. */ }