.paso { border: 0; margin: 0; padding: 0; }
.paso + .paso { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
.paso__titulo { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.paso__numero {
font-family: var(--font-mono);
font-size: var(--fs-sm);
color: var(--accent-700);
font-weight: 700;
flex: none;
}
.paso__titulo h2 { margin: 0; font-size: var(--fs-md); letter-spacing: -0.01em; }
.paso__ayuda { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--sp-4); max-width: 46ch; }
.paso__grupo + .paso__grupo { margin-top: var(--sp-5); }
.paso__subtitulo { font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--sp-3); }
.opciones { display: grid; gap: var(--sp-3); }
@media (min-width: 30rem) { .opciones--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 30rem) { .opciones--3 { grid-template-columns: repeat(3, 1fr); } }
.opcion { position: relative; display: block; }
.opcion input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion__caja {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-4);
border: 1.5px solid var(--line);
border-radius: var(--r-2);
background: var(--paper);
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
min-height: 3.5rem;
height: 100%;
}
.opcion__marca {
flex: none;
width: 1.15rem;
height: 1.15rem;
margin-top: 0.15rem;
border-radius: 50%;
border: 2px solid var(--line-2);
display: grid;
place-items: center;
}
.opcion__marca::after {
content: "";
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: var(--accent-700);
transform: scale(0);
transition: transform var(--dur) var(--ease);
}
.opcion__texto { min-width: 0; }
.opcion__nombre { display: block; font-weight: 700; font-size: var(--fs-sm); }
.opcion__detalle { display: block; font-size: var(--fs-xs); color: var(--text-2); margin-top: 0.15rem; line-height: 1.4; }
.opcion input:checked + .opcion__caja { border-color: var(--accent-700); background: var(--accent-050); }
.opcion input:checked + .opcion__caja .opcion__marca { border-color: var(--accent-700); }
.opcion input:checked + .opcion__caja .opcion__marca::after { transform: scale(1); }
.opcion input:focus-visible + .opcion__caja { outline: 3px solid var(--accent-700); outline-offset: 2px; }
.opcion:hover .opcion__caja { border-color: var(--line-2); }
.medidas { display: grid; gap: var(--sp-4); }
@media (min-width: 30rem) { .medidas { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.campo { display: grid; gap: var(--sp-2); min-width: 0; }
.campo[hidden] { display: none; }
.campo > label { font-size: var(--fs-sm); font-weight: 700; }
.campo__control { position: relative; display: flex; align-items: center; }
.campo input[type="number"] {
width: 100%;
padding: 0.85rem 3rem 0.85rem 0.9rem;
border: 1.5px solid var(--line-2);
border-radius: var(--r-1);
background: var(--paper);
font-size: var(--fs-lg);
font-weight: 700;
min-height: 3.25rem;
-moz-appearance: textfield;
}
.campo input[type="number"]::-webkit-outer-spin-button,
.campo input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo input:focus { border-color: var(--accent-700); }
.campo input[aria-invalid="true"] { border-color: #b42318; background: #fff5f4; }
.campo__unidad {
position: absolute;
right: 0.9rem;
font-size: var(--fs-sm);
color: var(--text-2);
font-weight: 600;
pointer-events: none;
}
.campo__error { font-size: var(--fs-xs); color: #b42318; font-weight: 600; min-height: 1em; }
.campo__error:empty { min-height: 0; }
.medidas__area {
padding: 0.85rem 0.9rem;
border-radius: var(--r-1);
background: var(--paper-2);
border: 1.5px solid var(--line);
font-size: var(--fs-sm);
font-weight: 700;
white-space: nowrap;
min-height: 3.25rem;
display: flex;
align-items: center;
gap: 0.35rem;
}
.medidas__area span { font-family: var(--font-mono); }
.atajos-bloque { margin-top: var(--sp-4); }
.atajos__titulo {
margin: 0;
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
}
.atajos__nota { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.paso__ayuda--forma { margin-top: calc(var(--sp-3) * -1); }
.atajos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.atajo {
border: 1px solid var(--line-2);
background: var(--paper);
border-radius: var(--r-full);
padding: 0.45rem 0.85rem;
font-size: var(--fs-xs);
font-weight: 700;
cursor: pointer;
min-height: 2.5rem;
}
.atajo:hover { border-color: var(--accent-700); color: var(--accent-700); }
.atajo[aria-pressed="true"] { background: var(--ink-900); color: var(--text-inv); border-color: var(--ink-900); }
.panel {
border: 1px solid var(--line);
border-radius: var(--r-2);
background: var(--paper);
box-shadow: var(--shadow-2);
overflow: hidden;
}
@media (min-width: 66rem) { .panel { position: sticky; top: 4.75rem; } }
.panel__cabecera { background: var(--ink-900); color: var(--text-inv); padding: var(--sp-5); }
.panel__etiqueta {
font-size: var(--fs-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-inv-2);
margin-bottom: var(--sp-2);
}
.panel__total {
font-size: var(--fs-num);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 1;
color: var(--text-inv);
font-variant-numeric: tabular-nums;
margin: 0;
}
.panel__unitario { font-size: var(--fs-sm); color: var(--text-inv-2); margin: var(--sp-2) 0 0; }
.panel__unitario b { color: var(--neon); font-variant-numeric: tabular-nums; }
.panel__cuerpo { padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.panel__tramo { font-size: var(--fs-xs); color: var(--text-2); margin: 0; }
.panel__letra-pequena { font-size: var(--fs-xs); color: var(--text-2); margin: 0; }
.desglose { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.desglose li {
display: flex;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-2) 0;
border-bottom: 1px dashed var(--paper-3);
margin: 0;
}
.desglose li:last-child { border-bottom: 0; }
.desglose__concepto { color: var(--text-2); min-width: 0; }
.desglose__importe { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.desglose li[data-pendiente="true"] .desglose__importe { color: var(--warn); }
.desglose li[data-total="true"] {
border-top: 1.5px solid var(--line);
border-bottom: 0;
margin-top: var(--sp-2);
padding-top: var(--sp-3);
font-size: var(--fs-md);
}
.desglose li[data-total="true"] .desglose__concepto { color: var(--text); font-weight: 800; }
.desglose li[data-total="true"] .desglose__importe { font-weight: 800; }
.panel__avisos { display: grid; gap: var(--sp-3); }
.panel__avisos:empty { display: none; }
.resumen { scroll-margin-top: 4.5rem; }
.resumen__caja {
border: 1px solid var(--line);
border-radius: var(--r-2);
background: var(--paper);
box-shadow: var(--shadow-2);
overflow: hidden;
}
.resumen__cabecera {
padding: var(--sp-5);
border-bottom: 1px solid var(--line);
background: var(--paper-2);
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
align-items: center;
justify-content: space-between;
}
.resumen__ref { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); }
.resumen__cuerpo { padding: var(--sp-5); display: grid; gap: var(--sp-5); }
@media (min-width: 52rem) { .resumen__cuerpo { grid-template-columns: 1fr 1fr; } }
.datos { margin: 0; font-size: var(--fs-sm); }
.datos div {
display: flex;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-2) 0;
border-bottom: 1px dashed var(--paper-3);
}
.datos dt { color: var(--text-2); }
.datos dd { margin: 0; font-weight: 700; text-align: right; }
.resumen__pie { padding: var(--sp-5); border-top: 1px solid var(--line); background: var(--paper-2); }
.por-confirmar {
display: inline-block;
padding: 0.05em 0.45em;
border-radius: 4px;
background: var(--warn-bg);
color: var(--warn);
font-size: 0.9em;
font-weight: 700;
}
.desglose li[data-destacado="true"] .desglose__importe { color: var(--ok); }
.panel__sin-iva { font-size: var(--fs-sm); color: var(--text-inv-2); margin: var(--sp-1) 0 0; font-variant-numeric: tabular-nums; }
.datos div[data-total="true"] {
border-bottom: 0;
border-top: 1.5px solid var(--line);
margin-top: var(--sp-2);
padding-top: var(--sp-3);
font-size: var(--fs-md);
}
.datos div[data-total="true"] dt { color: var(--text); font-weight: 800; }
.datos div[data-total="true"] dd { font-weight: 800; }
.archivo {
border: 1.5px dashed var(--line-2);
border-radius: var(--r-2);
padding: var(--sp-5);
text-align: center;
background: var(--paper-2);
display: grid;
gap: var(--sp-3);
justify-items: center;
margin-top: var(--sp-4);
}
.archivo[data-activo="true"] { border-color: var(--accent-700); background: var(--accent-050); }
.archivo__nombre { font-weight: 700; font-size: var(--fs-sm); word-break: break-all; margin: 0; }
.archivo__meta { font-size: var(--fs-xs); color: var(--text-2); margin: 0; }
.archivo input[type="file"] { display: none; }
.archivo__boton {
border: 1px solid var(--line-2);
background: var(--paper);
border-radius: var(--r-full);
padding: 0.65rem 1.15rem;
font-size: var(--fs-sm);
font-weight: 700;
cursor: pointer;
min-height: 2.75rem;
display: inline-flex;
align-items: center;
}
.archivo__boton:hover { border-color: var(--accent-700); color: var(--accent-700); }