/* ==========================================================================
Orquen UI · plantilla base para las herramientas de cada cliente
Tokens, base y componentes. Las reglas de uso están en GUIA.md.
Sin texto explicativo ni atajos de teclado: ver GUIA.md, sección 2.
Fuentes oficiales de Orquen: Sora (SOLO títulos: h1, h2, h3; 400-500),
Inter (todo lo demás: texto, botones, rótulos, etiquetas, estados y cifras; 400 y 500)
y JetBrains Mono (solo datos; 400).
Fuentes (en el de cada página):
========================================================================== */
/* ---------------------------------------------------------------- tokens */
:root {
color-scheme: light;
/* El crema es solo el lienzo. Sobre blanco, los grises son neutros: el crema sobre blanco se ve amarillo. */
--lienzo: #faf3eb;
--hoja: #ffffff;
--hoja-2: #f8f7f7;
--hoja-3: #efeded;
--realce: rgba(26, 21, 23, .045); /* hover sobre cualquier fondo, también el crema */
--linea: rgba(26, 21, 23, .09);
--linea-2: rgba(26, 21, 23, .17);
--tinta: #1a1517;
--tinta-2: #4a3f44;
--tinta-3: #756970;
--sobre-acento: #ffffff;
--ciruela: #6d1c42;
--ciruela-2: #54142f;
--ciruela-lavado: #f6eaef;
--ciruela-halo: rgba(109, 28, 66, .18);
--ok: #2d6a4c; --ok-lavado: #e6f1ea;
--espera: #955a0b; --espera-lavado: #fcf0dc;
--error: #a3261c; --error-lavado: #fbe6e2;
--sombra-1: 0 1px 0 rgba(26, 21, 23, .03), 0 1px 3px rgba(26, 21, 23, .07);
--sombra-2: 0 1px 2px rgba(26, 21, 23, .04), 0 18px 40px -20px rgba(26, 21, 23, .22);
--f-display: "Sora", ui-sans-serif, system-ui, sans-serif;
--f-texto: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
--f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--r-1: 7px;
--r-2: 10px;
--r-3: 14px;
--e-sale: cubic-bezier(.16, 1, .3, 1);
--e-suave: cubic-bezier(.4, 0, .2, 1);
--t-1: 120ms;
--t-2: 220ms;
--t-3: 520ms;
}
/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--lienzo);
color: var(--tinta);
font: 400 14px/1.5 var(--f-texto);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ciruela); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--ciruela-halo); }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-weight: 400; font-size: .92em; letter-spacing: -.01em; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* -------------------------------------------------------------- barra app */
.barra {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; gap: 28px;
height: 56px; padding: 0 24px;
background: color-mix(in srgb, var(--lienzo) 82%, transparent);
backdrop-filter: saturate(1.5) blur(14px);
-webkit-backdrop-filter: saturate(1.5) blur(14px);
border-bottom: 1px solid var(--linea);
}
.barra-marca { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.barra-cliente { font: 500 13px/1 var(--f-texto); letter-spacing: .14em; }
.barra-powered { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--linea-2); font-size: 11.5px; color: var(--tinta-3); }
.barra-powered img { display: block; height: 15px; width: auto; }
.barra-nav { display: flex; gap: 2px; }
.barra-nav a {
display: inline-flex; align-items: center; height: 32px; padding: 0 11px;
border-radius: var(--r-1); color: var(--tinta-3); font-weight: 500; text-decoration: none;
transition: color var(--t-1), background var(--t-1);
}
.barra-nav a:hover { color: var(--tinta); }
.barra-nav a[aria-current="page"] { color: var(--tinta); background: var(--hoja-3); }
.barra-fin { margin-left: auto; display: flex; align-items: center; gap: 16px; color: var(--tinta-3); font-size: 13px; white-space: nowrap; }
/* --------------------------------------------------------------- botones */
.boton {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 36px; padding: 0 14px;
border: 1px solid var(--linea-2); border-radius: var(--r-2);
background: var(--hoja); color: var(--tinta);
font-family: var(--f-texto); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none;
box-shadow: var(--sombra-1);
transition: background var(--t-1), border-color var(--t-1), transform var(--t-1), box-shadow var(--t-1);
}
.boton:hover { background: var(--hoja-2); border-color: color-mix(in srgb, var(--tinta) 26%, transparent); }
.boton:active { transform: translateY(1px); box-shadow: none; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }
.boton-primario {
background: var(--ciruela); border-color: var(--ciruela); color: var(--sobre-acento);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(84, 20, 47, .28);
}
.boton-primario:hover { background: var(--ciruela-2); border-color: var(--ciruela-2); }
.boton-quieto { background: transparent; border-color: transparent; box-shadow: none; color: var(--tinta-2); }
.boton-quieto:hover { background: var(--realce); border-color: transparent; color: var(--tinta); }
.boton-chico { height: 30px; padding: 0 10px; font-size: 13px; border-radius: var(--r-1); }
.boton-icono { width: 32px; height: 32px; padding: 0; }
/* ------------------------------------------------- estados, tipos y chips */
.estado {
display: inline-flex; align-items: center; gap: 7px;
height: 24px; padding: 0 10px 0 9px; border-radius: 999px;
background: var(--hoja-3); color: var(--tinta-2);
font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado[data-estado="en_curso"] { color: var(--ciruela); background: var(--ciruela-lavado); }
.estado[data-estado="en_curso"]::before { animation: latido 1.6s var(--e-suave) infinite; }
.estado[data-estado="listo"] { color: var(--ok); background: var(--ok-lavado); }
.estado[data-estado="espera"] { color: var(--espera); background: var(--espera-lavado); }
.estado[data-estado="error"] { color: var(--error); background: var(--error-lavado); }
.estado[data-estado="pendiente"] { color: var(--tinta-3); }
.tipo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--tinta-2); }
.tipo .ico { width: 14px; height: 14px; }
.tipo[data-tipo="modelo"] { color: var(--ciruela); }
.chip {
display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
border: 1px solid var(--linea); border-radius: 999px;
font-size: 12.5px; color: var(--tinta-2); white-space: nowrap;
}
.chip.mono { font-size: 11.5px; }
.sev {
display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px;
font: 500 10.5px/1 var(--f-texto); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.sev[data-sev="critico"] { color: var(--error); background: var(--error-lavado); }
.sev[data-sev="revisar"] { color: var(--espera); background: var(--espera-lavado); }
.sev[data-sev="info"] { color: var(--tinta-3); background: var(--hoja-3); }
/* ------------------------------------------------------------ página */
.pagina { max-width: 1320px; margin: 0 auto; padding: 32px 24px 72px; }
.cabecera {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: start;
padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--linea);
}
.cabecera h1 { font: 500 30px/1.12 var(--f-display); letter-spacing: -.025em; text-wrap: balance; }
/* Solo datos bajo el título (cliente, medidas), nunca una explicación de la pantalla. */
.cabecera-datos { margin-top: 8px; color: var(--tinta-2); font-size: 15px; }
.cabecera-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--tinta-3); font-size: 13px; }
.cabecera-meta b { color: var(--tinta-2); font-weight: 500; }
.cabecera-meta b.mono { font-weight: 400; }
.cabecera-accion { display: flex; align-items: center; gap: 12px; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 12px; font-size: 13px; color: var(--tinta-3); }
.migas a { color: var(--tinta-3); text-decoration: none; border-radius: 4px; transition: color var(--t-1); }
.migas a:hover { color: var(--tinta); }
.migas .ico { width: 14px; height: 14px; }
.migas [aria-current] { color: var(--tinta-2); }
.aviso-edicion {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
margin-bottom: 20px; padding: 10px 12px 10px 16px; border: 1px solid var(--linea-2); border-radius: var(--r-2); background: var(--hoja);
font-size: 14px; color: var(--tinta-2);
}
.aviso-edicion b { color: var(--tinta); font-weight: 500; }
/* ----------------------------------------------- el riel (proceso en vivo) */
.espacio { display: grid; grid-template-columns: 392px minmax(0, 1fr); gap: 32px; align-items: start; }
.riel-caja { min-width: 0; }
/* El panel acompaña el scroll: el riel puede crecer (versiones) y el detalle sigue a la vista. */
.columna { position: sticky; top: 76px; min-width: 0; }
.columna > .panel { display: flex; flex-direction: column; max-height: calc(100vh - 96px); }
.columna > .panel > .panel-cuerpo { overflow-y: auto; overscroll-behavior: contain; }
.riel-cab { display: flex; align-items: center; justify-content: space-between; height: 32px; margin: 0 0 6px 6px; }
.rotulo { font: 500 11px/1.2 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.riel { list-style: none; margin: 0; padding: 0; }
.paso { position: relative; --llenado: 0; --p: 0; }
/* La línea del proceso: debajo de cada marca baja un tramo hasta la siguiente.
::before es el tramo por recorrer (punteado), ::after lo recorrido (ciruela). */
.paso::before, .paso::after {
content: ""; position: absolute; left: 19px; top: 34px; bottom: -14px; width: 2px; border-radius: 2px; pointer-events: none;
}
.paso::before { background: linear-gradient(var(--linea-2) 55%, transparent 0) 0 0 / 2px 6px repeat-y; }
.paso::after {
background: var(--ciruela);
transform-origin: top; transform: scaleY(var(--llenado));
transition: transform var(--t-3) var(--e-sale);
}
.paso:last-child::before, .paso:last-child::after { display: none; }
.paso-boton {
position: relative; z-index: 1;
display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; align-items: start;
width: 100%; padding: 11px 12px 11px 6px;
border: 0; border-radius: var(--r-2); background: transparent; text-align: left; cursor: pointer;
transition: background var(--t-1), box-shadow var(--t-1);
}
.paso-boton:hover { background: var(--realce); }
.paso.es-elegido > .paso-boton { background: var(--hoja); box-shadow: var(--sombra-1); }
.paso-marca { display: grid; place-items: center; width: 28px; height: 22px; }
.marca {
position: relative; display: grid; place-items: center;
width: 14px; height: 14px; border-radius: 50%;
border: 1.5px solid var(--linea-2); background: var(--lienzo);
transition: background var(--t-2), border-color var(--t-2), width var(--t-2), height var(--t-2), border-radius var(--t-2), box-shadow var(--t-2);
}
.marca .ico { width: 10px; height: 10px; stroke: var(--sobre-acento); stroke-width: 2.4; stroke-dasharray: 16; stroke-dashoffset: 16; }
/* El check y el punto (o el «!») van en la misma celda, al centro. Si no, el punto cae bajo el check, que ocupa lugar aunque no se vea. */
.marca > *, .marca::after { grid-area: 1 / 1; }
.paso[data-estado="en_curso"] .marca { border-color: var(--ciruela); background: var(--hoja); box-shadow: 0 0 0 4px var(--ciruela-halo); }
.paso[data-estado="en_curso"] .marca::after {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ciruela);
animation: latido 1.6s var(--e-suave) infinite;
}
.paso[data-estado="listo"] .marca { border-color: var(--ciruela); background: var(--ciruela); }
.paso[data-estado="listo"] .marca .ico { stroke-dashoffset: 0; transition: stroke-dashoffset 280ms 120ms var(--e-sale); }
/* La aprobación humana corta la línea: la marca pasa a ser una barra. */
.paso[data-estado="espera"] .marca {
width: 18px; height: 5px; border-radius: 3px; border: 0; background: var(--espera);
box-shadow: 0 0 0 5px var(--espera-lavado);
}
.paso[data-estado="error"] .marca { border-color: var(--error); background: var(--error); }
.paso[data-estado="error"] .marca::after { content: "!"; font: 700 10px/1 var(--f-texto); color: var(--sobre-acento); }
.paso-cuerpo { min-width: 0; }
.paso-nombre { display: flex; align-items: center; gap: 8px; min-height: 22px; font-weight: 500; }
.paso-n { font: 400 11.5px/1 var(--f-mono); color: var(--tinta-3); min-width: 14px; }
.paso-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paso-tipo { width: 13px; height: 13px; color: var(--tinta-3); }
.paso[data-tipo="modelo"] .paso-tipo { color: var(--ciruela); }
.paso-resumen {
display: block; margin-top: 2px; padding-left: 22px;
color: var(--tinta-3); font-size: 13px; line-height: 1.45;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.paso-resumen:empty { display: none; }
.paso[data-estado="pendiente"] .paso-titulo { color: var(--tinta-3); }
.paso[data-estado="listo"] .paso-resumen { color: var(--tinta-2); }
.paso[data-estado="en_curso"] .paso-titulo {
background: linear-gradient(100deg, var(--tinta) 30%, color-mix(in srgb, var(--tinta) 35%, transparent) 50%, var(--tinta) 70%) 0 0 / 260% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: brillo 2.4s linear infinite;
}
.paso-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-height: 22px; font-size: 12px; color: var(--tinta-3); line-height: 22px; white-space: nowrap; }
.paso-meta { font: 400 11.5px/1.45 var(--f-mono); }
.paso[data-estado="en_curso"] .paso-estado { color: var(--ciruela); font-weight: 500; }
.paso[data-estado="espera"] .paso-estado { color: var(--espera); font-weight: 500; }
.paso[data-estado="error"] .paso-estado { color: var(--error); font-weight: 500; }
.paso-progreso {
grid-column: 2 / -1; height: 2px; margin: 10px 0 2px 22px; border-radius: 2px;
background: var(--linea); overflow: hidden; opacity: 0; transition: opacity var(--t-2);
}
.paso-progreso i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--ciruela); border-radius: inherit; transition: width 280ms var(--e-sale); }
.paso[data-estado="en_curso"] .paso-progreso { opacity: 1; }
.paso.es-indeterminado .paso-progreso i { width: 32%; animation: vaiven 1.1s var(--e-suave) infinite alternate; }
/* Corte de versión: cuando la persona pide cambios, el proceso sigue abajo. */
.riel-corte { position: relative; padding: 14px 12px 10px 40px; }
.riel-corte::before { content: ""; position: absolute; left: 19px; top: -14px; bottom: -14px; width: 2px; background: var(--ciruela); border-radius: 2px; }
.riel-corte p { font-size: 12.5px; color: var(--tinta-3); }
.riel-corte b { display: block; font: 500 11px/1.4 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 2px; }
/* ------------------------------------------------------------ panel */
.panel {
background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r-3);
box-shadow: var(--sombra-2); min-height: 560px; overflow: hidden;
}
.panel-cabeza { padding: 22px 28px 18px; border-bottom: 1px solid var(--linea); }
.panel-paso { font: 400 11.5px/1 var(--f-mono); color: var(--tinta-3); }
.panel-cabeza h2 { margin: 8px 0 12px; font: 500 21px/1.25 var(--f-display); letter-spacing: -.015em; }
.panel-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.panel-cuerpo { padding: 4px 28px 28px; }
.panel-cuerpo > * { animation: entra var(--t-2) var(--e-sale); }
.bloque { padding-top: 22px; }
.bloque + .bloque { margin-top: 22px; border-top: 1px solid var(--linea); }
.bloque-titulo { margin-bottom: 12px; }
.tabla-caja { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th {
padding: 0 16px 9px 0; border-bottom: 1px solid var(--linea-2);
font-size: 12px; font-weight: 500; color: var(--tinta-3); text-align: left; white-space: nowrap;
}
.tabla td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; }
.tabla th:last-child, .tabla td:last-child { padding-right: 0; }
.tabla .mono { color: var(--tinta-2); }
.tabla tr.es-destacada td { background: var(--ciruela-lavado); }
.tabla tr.es-destacada td:first-child { box-shadow: inset 2px 0 0 var(--ciruela); padding-left: 10px; }
.tabla.es-elegible tbody tr { cursor: pointer; transition: background var(--t-1); }
.tabla.es-elegible tbody tr:hover td { background: var(--realce); }
.tabla.es-elegible tbody tr.es-destacada:hover td { background: var(--ciruela-lavado); }
/* Segunda línea dentro de una celda: código, proveedor, lo que había antes. */
.tabla .tabla-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--tinta-3); }
/* Tabla para corregir líneas a mano: columnas fijas (iguales en todas las secciones) y todo al centro de la fila. */
.tabla.es-editable { table-layout: fixed; min-width: 640px; } /* en celular se desplaza dentro de .tabla-caja */
.tabla.es-editable td { vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }
.tabla.es-editable .entrada { height: 32px; }
.tabla.es-editable .num .entrada { text-align: right; }
.tabla.es-editable .acciones { text-align: right; white-space: nowrap; }
.tabla.es-editable tbody tr:hover .fila-accion, .tabla.es-editable tbody tr:focus-within .fila-accion { opacity: 1; }
.tabla tr.es-quitada td { color: var(--tinta-3); }
.tabla tr.es-quitada td:not(.acciones) > * { opacity: .55; }
.tabla tr.es-quitada .tabla-nombre { text-decoration: line-through; }
.enlaces { display: flex; flex-wrap: wrap; gap: 10px; }
.marca-texto { display: inline-flex; margin-left: 8px; padding: 1px 7px; border-radius: 5px; font: 500 10.5px/1.5 var(--f-texto); color: var(--ciruela); background: var(--hoja); border: 1px solid var(--ciruela-halo); vertical-align: 1px; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px 28px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--tinta-3); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.fuente { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--tinta-3); }
.fuente .ico { width: 14px; height: 14px; margin-top: 2px; }
.avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.aviso { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.aviso:last-child { border-bottom: 0; }
.aviso b { display: block; font-weight: 500; }
.aviso p { margin-top: 3px; color: var(--tinta-2); font-size: 13px; max-width: 72ch; }
.log {
margin: 0; padding: 10px 14px; max-height: 232px; overflow: auto;
border: 1px solid var(--linea); border-radius: var(--r-2); background: var(--hoja-2);
font: 400 12.5px/1.65 var(--f-mono); color: var(--tinta-2); list-style: none;
}
.log li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; animation: entra 200ms var(--e-sale); }
.log time { color: var(--tinta-3); }
.razon { border: 1px solid var(--linea); border-radius: var(--r-2); background: var(--hoja-2); }
.razon summary {
display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; list-style: none;
font-weight: 500; color: var(--tinta-2);
}
.razon summary::-webkit-details-marker { display: none; }
.razon summary .ico { width: 14px; height: 14px; transition: transform var(--t-2) var(--e-sale); }
.razon[open] summary .ico { transform: rotate(90deg); }
.razon-texto { padding: 2px 16px 16px 36px; color: var(--tinta-2); max-width: 76ch; }
.razon-texto p + p { margin-top: 10px; }
.razon-texto strong { color: var(--tinta); font-weight: 500; }
.razon-texto.es-escribiendo::after { content: ""; display: inline-block; width: 7px; height: 14px; margin-left: 3px; vertical-align: -2px; background: var(--ciruela); animation: cursor 1s steps(1) infinite; }
/* ------------------------------------------------------------ aprobación */
.aprobacion { margin-top: 22px; padding: 22px; border: 1px solid var(--linea-2); border-radius: var(--r-3); background: var(--hoja-2); }
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; }
.cifras dt { font-size: 12px; color: var(--tinta-3); }
.cifras dd { margin: 4px 0 0; font: 500 22px/1.15 var(--f-texto); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifras dd small { font: 500 12px var(--f-texto); letter-spacing: 0; color: var(--tinta-3); margin-left: 3px; }
.aprobacion-nota { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--tinta-2); }
.aprobacion-nota .ico { color: var(--tinta-3); }
.aprobacion-nota button { padding: 0; border: 0; background: none; color: var(--tinta); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linea-2); cursor: pointer; }
.aprobacion-acciones { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); }
.aprobacion-acciones .campo { flex: 1 1 220px; }
/* Quien firma, cuando es siempre la misma persona: es un dato, no se pregunta. */
.aprobacion-firma { flex: 1 1 auto; align-self: center; margin-right: 8px; font-size: 13px; color: var(--tinta-3); }
.aprobacion-firma b { color: var(--tinta); font-weight: 500; }
.aprobacion-cambios { margin-top: 14px; display: grid; gap: 10px; }
/* Documento: la vista previa del archivo que se emite (un PDF), con su descarga. */
.documento-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 14px; }
.documento-cab .bloque-titulo { margin: 0 auto 0 0; }
.documento-hojas { display: grid; justify-items: center; gap: 16px; padding: 20px; border-radius: var(--r-2); background: var(--hoja-3); }
.documento-hoja { display: block; width: 100%; max-width: 680px; height: auto; background: var(--hoja); box-shadow: var(--sombra-1), 0 6px 18px -8px rgba(26, 21, 23, .18); }
.documento-hoja.es-vacia { aspect-ratio: 612 / 792; }
.aprobada { display: flex; align-items: center; gap: 10px; color: var(--ok); font-weight: 500; }
.aprobada .ico { width: 18px; height: 18px; }
.aprobada span { color: var(--tinta-2); font-weight: 400; }
/* ------------------------------------------------------------ formularios */
.campo { display: grid; gap: 6px; }
.campo > span, .campo > label { font-size: 12.5px; font-weight: 500; color: var(--tinta-2); }
.entrada {
width: 100%; height: 38px; padding: 0 12px;
border: 1px solid var(--linea-2); border-radius: var(--r-1); background: var(--hoja);
transition: border-color var(--t-1), box-shadow var(--t-1);
}
textarea.entrada { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.entrada:hover { border-color: color-mix(in srgb, var(--tinta) 30%, transparent); }
.entrada:focus { outline: none; border-color: var(--ciruela); box-shadow: 0 0 0 3px var(--ciruela-halo); }
.entrada[aria-invalid="true"] { border-color: var(--error); }
.campo-error { font-size: 12.5px; color: var(--error); }
.unidad { position: relative; }
.unidad .entrada { padding-right: 38px; font-variant-numeric: tabular-nums; }
.unidad i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12.5px; color: var(--tinta-3); pointer-events: none; }
.segmento { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-2); background: var(--hoja-3); }
.segmento button {
height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
color: var(--tinta-2); font-weight: 500; cursor: pointer; transition: background var(--t-1), color var(--t-1), box-shadow var(--t-1);
}
.segmento button[aria-pressed="true"] { background: var(--hoja); color: var(--tinta); box-shadow: var(--sombra-1); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span {
display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
border: 1px solid var(--linea-2); border-radius: 999px; background: var(--hoja); color: var(--tinta-2);
font-weight: 500; transition: all var(--t-1);
}
.opcion span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--linea-2); transition: all var(--t-1); }
.opcion input:checked + span { border-color: var(--ciruela); color: var(--tinta); background: var(--ciruela-lavado); }
.opcion input:checked + span::before { border-color: var(--ciruela); background: var(--ciruela) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.opcion input:focus-visible + span { outline: 2px solid var(--ciruela); outline-offset: 2px; }
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.seccion { padding: 22px 24px 24px; background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r-3); box-shadow: var(--sombra-1); }
.seccion + .seccion { margin-top: 16px; }
.seccion h2 { display: flex; align-items: baseline; gap: 10px; font: 500 15.5px/1.3 var(--f-display); letter-spacing: -.01em; margin-bottom: 18px; }
.seccion h2 .paso-n { font-size: 11.5px; }
/* Una cifra al final del título de la sección (por ejemplo, su subtotal). */
.seccion-dato { margin-left: auto; font: 400 13.5px/1 var(--f-texto); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calculo { position: sticky; top: 80px; }
.calculo .seccion { padding: 20px 22px; }
.calculo dl { display: grid; gap: 14px; margin: 0; }
.calculo dt { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--tinta-3); }
.calculo dt .mono { font-size: 11px; }
.calculo dd { margin: 2px 0 0; font: 500 20px/1.2 var(--f-texto); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calculo dd small { font: 500 12px var(--f-texto); color: var(--tinta-3); margin-left: 3px; letter-spacing: 0; }
.calculo .boton { width: 100%; height: 42px; margin-top: 18px; }
/* ------------------------------------------------------------ historial */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.buscar { position: relative; flex: 0 1 300px; }
.buscar .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); }
.buscar .entrada { padding-left: 34px; height: 36px; }
.lista { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r-3); box-shadow: var(--sombra-1); overflow: hidden; }
.lista .tabla th { padding: 14px 16px 11px; background: var(--hoja-2); }
.lista .tabla td { padding: 14px 16px; vertical-align: middle; }
.lista .tabla th:first-child, .lista .tabla td:first-child { padding-left: 20px; }
.lista .tabla th:last-child, .lista .tabla td:last-child { padding-right: 20px; }
.lista tbody tr { transition: background var(--t-1); }
.lista tbody tr[data-abre] { cursor: pointer; }
.lista tbody tr[data-abre]:hover { background: var(--hoja-2); }
.lista .proyecto b { display: block; font-weight: 500; }
.lista .proyecto span { font-size: 12.5px; color: var(--tinta-3); }
.lista-vacia { padding: 40px 20px; text-align: center; color: var(--tinta-3); }
/* Acciones por fila: al final, visibles al pasar el mouse o con foco; siempre en pantallas táctiles. */
.lista .acciones { width: 1%; white-space: nowrap; text-align: right; }
.fila-accion {
display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
border: 0; border-radius: var(--r-1); background: transparent; color: var(--tinta-3); cursor: pointer;
opacity: 0; transition: opacity var(--t-1), background var(--t-1), color var(--t-1);
}
.lista tbody tr:hover .fila-accion, .lista tbody tr:focus-within .fila-accion, .fila-accion:focus-visible { opacity: 1; }
.fila-accion:hover { background: var(--error-lavado); color: var(--error); }
.fila-accion[disabled] { cursor: not-allowed; }
.fila-accion[disabled]:hover { background: transparent; color: var(--tinta-3); }
@media (hover: none) { .fila-accion { opacity: 1; } }
.lista tbody tr.es-saliendo { opacity: 0; transition: opacity var(--t-2); }
/* Aviso flotante: confirma algo que ya pasó y ofrece deshacerlo. Nunca pregunta antes. */
.aviso-flotante {
position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translate(-50%, 12px);
display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px);
padding: 10px 10px 10px 16px; border-radius: var(--r-2);
background: var(--tinta); color: var(--lienzo); box-shadow: var(--sombra-2);
font-size: 14px; opacity: 0; pointer-events: none;
transition: opacity var(--t-2) var(--e-sale), transform var(--t-2) var(--e-sale);
}
.aviso-flotante.es-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.aviso-flotante span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso-flotante button {
flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-1);
background: rgba(250, 243, 235, .12); color: var(--lienzo); font: 500 13px/1 var(--f-texto); cursor: pointer;
}
.aviso-flotante button:hover { background: rgba(250, 243, 235, .2); }
/* ------------------------------------------------------------ movimiento */
@keyframes latido { 0%, 100% { transform: scale(.72); opacity: .75; } 50% { transform: scale(1); opacity: 1; } }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: -160% 0; } }
@keyframes vaiven { from { transform: translateX(-40%); } to { transform: translateX(250%); } }
@keyframes entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
.paso[data-estado="en_curso"] .paso-titulo { background: none; color: var(--tinta); }
}
/* ------------------------------------------------------------ angosto */
@media (max-width: 1080px) {
.espacio { grid-template-columns: 340px minmax(0, 1fr); gap: 24px; }
.cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.barra { gap: 14px; padding: 0 16px; }
.barra-fin .fecha { display: none; }
.pagina { padding: 24px 16px 56px; }
.cabecera { grid-template-columns: minmax(0, 1fr); }
.cabecera h1 { font-size: 25px; }
.espacio { grid-template-columns: minmax(0, 1fr); }
.columna { position: static; }
.riel .panel { position: relative; z-index: 2; margin: 4px 0 14px 34px; min-height: 0; }
.riel .panel-cabeza { padding: 18px 18px 16px; }
.riel .panel-cuerpo { padding: 2px 18px 20px; }
.ficha { grid-template-columns: minmax(0, 1fr); }
.calculo { position: static; }
}
@media (max-width: 560px) {
.barra { gap: 10px; padding: 0 12px; }
.barra-powered span, .solo-ancho, .barra-fin .uf { display: none; }
.rejilla, .rejilla-3 { grid-template-columns: minmax(0, 1fr); }
.riel .panel { margin-left: 0; }
.aviso { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.cifras dd { font-size: 19px; }
.lista .col-opcional { display: none; }
.aprobacion-acciones .boton, .aprobacion-firma { flex: 1 1 100%; }
.documento-cab .bloque-titulo { flex-basis: 100%; }
.documento-cab .boton { flex: 1 1 100%; }
.documento-hojas { padding: 10px; gap: 10px; }
}