/* Etapa 2 del rediseño: estilos propios de las pantallas del grupo "fiscal".
   Solo reglas que el sistema de componentes de app.css no cubre. */

/* ---- Detalle del comprobante (maqueta ComprobanteDetalle) ---- */
.fx-volver{display:inline-block; margin-bottom:var(--e2); color:var(--mute); font-size:var(--t-md); text-decoration:none}
.fx-volver:hover{color:var(--ink); text-decoration:underline}
.fx-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e4); flex-wrap:wrap; margin-bottom:var(--e3)}
.fx-cab h1{display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap}
.fx-acciones{display:flex; gap:var(--e2); flex-wrap:wrap}
.fx-grid{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:var(--e4); align-items:start}
.fx-col{min-width:0; display:flex; flex-direction:column; gap:var(--e3)}
.fx-grid .card h3, .card.fx-tarjeta h3{font-size:var(--t-lg); font-weight:600; letter-spacing:-.01em; margin:0 0 var(--e1)}
@media (max-width:760px){
  .fx-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---- Emitir a mano (maqueta EmitirAMano): dos pasos numerados ---- */
.fx-form{max-width:none}
.fx-paso{display:flex; align-items:center; gap:var(--e2); margin:0 0 var(--e3); font-size:var(--t-lg)}
.fx-num{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none;
  border-radius:50%; background:var(--accent); color:var(--bg); font-size:var(--t-sm); font-weight:700}


/* ---- Declaraciones (Etapa 3, maqueta Declaraciones) ---- */
.dc-form, .dc-grafico{margin-bottom:var(--e3)}
.dc-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e3); flex-wrap:wrap; margin-bottom:var(--e2)}
.dc-tit{flex:1; min-width:0}
.dc-tit h2{margin:0; display:flex; align-items:baseline; gap:var(--e2); flex-wrap:wrap}
.dc-num{font-size:var(--t-md); font-weight:600; color:var(--accent)}
.dc-acciones{display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap; margin-top:var(--e3)}
.dc-marca{margin-top:var(--e3); padding-top:var(--e3); border-top:1px solid var(--line)}
.dc-marca-form{display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap}
.dc-marca-form label{margin:0}
.dc-marca-form input{width:auto; flex:1 1 220px; max-width:320px}
.casilla-copiar-todo[data-copiado]{border-color:var(--ok); color:var(--ok)}


/* ---- Comprobantes (QA contra la maqueta Fiscal, 01-oct-2026) ---- */
/* El encabezado: título + contexto a la izquierda, acciones a la derecha. Los
   dos botones miden lo mismo que en la maqueta (44px), también el "Exportar"
   del macro compartido, que de fábrica es chico. */
.fx-acciones{align-items:center}
.fx-acciones .btn, .fx-acciones .exportar summary{min-height:44px; padding:0 22px}
.fx-cab .tc-linea{margin-bottom:var(--e1)}
.fx-alerta{margin-bottom:var(--e3)}

/* Las cinco tarjetas de estado. */
.ct-tarjetas{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--e3); margin-bottom:var(--e3)}
.ct-tarjeta{display:flex; flex-direction:column; align-items:flex-start; gap:var(--e1); min-width:0;
  padding:18px var(--e4); background:var(--bg); border:2px solid transparent; border-radius:var(--r-lg);
  box-shadow:var(--sh-float); color:var(--ink); text-decoration:none}
a.ct-tarjeta:hover{background:var(--soft)}
.ct-tarjeta.on{border-color:var(--accent)}
.ct-n{font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums}
.ct-monto{font-size:var(--t-sm); font-weight:600; font-variant-numeric:tabular-nums}
.ct-tarjeta .hint{margin:0}
.ct-nota{margin:calc(var(--e1) * -1) 0 var(--e3)}

/* La barra de filtros: buscador + tres selects en el mismo renglón. */
.barra .buscador{margin:0 0 var(--e3); flex:1 1 auto}
.barra .buscador input[type="search"]{flex:0 1 340px}
.barra .buscador select{width:auto; min-width:0; max-width:220px; border-radius:var(--r-pill); padding:9px 16px; font-weight:600}
.barra .limpiar{font-size:var(--t-md); text-decoration:none; margin:0 0 var(--e3)}

/* La tabla. En escritorio la fila es una grilla de diez columnas más la flecha;
   en móvil esto no aplica y manda el renglón que envuelve de `.cmp-linea`. */
.ct-cab, .ct-ir, .ct-cons, .ct-prop, .ct-base, .ct-iva{display:none}
.ct-canal.pill{background:none; color:var(--mute); height:auto; padding:0; font-weight:400}
.ct-canal.pill::before{display:none}
.ct-sepm{color:var(--mute)}
.ct-rel{color:var(--mute); font-weight:400}
.ct-rel a{font-weight:600}
.ct-totales{max-width:560px; margin-top:var(--e4); padding:var(--e4) 24px}
.ct-totales h2{margin:0 0 var(--e3); font-size:var(--t-lg); font-weight:600}
.ct-tl{display:flex; justify-content:space-between; padding:7px 0; font-variant-numeric:tabular-nums}
.ct-tl-total{border-top:1px solid var(--line); margin-top:var(--e1); padding-top:var(--e3); font-weight:700; font-size:var(--t-lg)}
.ct-totales .btn-enlace{display:inline-block; margin-top:var(--e2); padding:0; min-height:0; height:auto;
  background:none; border:0; text-decoration:underline; color:var(--accent)}

@media (min-width:900px){
  .ct-cab, .ct-linea{display:grid; align-items:center; column-gap:var(--e2);
    grid-template-columns:96px 150px minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.05fr) 104px 104px 108px 98px 112px 14px}
  .ct-cab{padding:12px var(--e4) 8px; font-size:var(--t-xs); font-weight:600; letter-spacing:.05em;
    text-transform:uppercase; color:var(--mute)}
  .ct-der{text-align:right}
  .ct-linea .cmp-id{display:contents}
  .ct-linea > *, .ct-linea .cmp-id > *, .ct-linea .meta > *{grid-row:1; min-width:0}
  .ct-linea .sep, .ct-linea .ct-sepm{display:none}
  .ct-linea .meta{display:contents}
  .ct-linea .fila-ir{grid-column:1}
  .ct-cons{grid-column:2; display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:var(--t-xs); color:var(--mute); letter-spacing:-.01em}
  .ct-tipo{grid-column:3}
  .ct-huesped{grid-column:4; font-weight:600; line-height:1.3}
  .ct-prop{grid-column:5; display:block}
  .ct-canal{grid-column:6; justify-self:start}
  .ct-canal.pill{background:var(--crema); color:var(--ink); height:24px; padding:0 10px; font-weight:600}
  .ct-linea > .pill{grid-column:7; justify-self:start}
  .ct-base{grid-column:8; display:block}
  .ct-iva{grid-column:9; display:block}
  .ct-base, .ct-iva, .ct-linea .cmp-monto{text-align:right; font-variant-numeric:tabular-nums}
  .ct-linea .cmp-monto{grid-column:10; min-width:0}
  .ct-ir{grid-column:11; display:block; color:var(--mute)}
  .ct-rel{display:block; font-size:var(--t-xs)}
  .ct-linea .cmp-monto ~ .badge{min-width:0}
}
@media (max-width:899px){
  .ct-tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-tarjetas > :last-child{grid-column:1 / -1}
  .barra .buscador{flex:1 1 100%}
  .barra .buscador input[type="search"]{flex:1 1 100%; max-width:none}
}
@media (max-width:899px){
  .barra .buscador select{flex:1 1 30%; max-width:none; padding:9px 12px; text-overflow:ellipsis}
}
/* La etiqueta de enum llega en minúscula ("aceptado"); en la tabla de escritorio
   la maqueta la lee con mayúscula inicial. Es presentación: el texto del HTML no
   cambia. */
.ct-linea > .pill{text-transform:capitalize}
@media (min-width:900px){
  .ct-tipo::first-letter{text-transform:uppercase}
}


/* ---- Declaraciones (QA contra la maqueta, 01-oct-2026) ---- */
.dc-barra{display:flex; align-items:center; justify-content:space-between; gap:var(--e3); flex-wrap:wrap; margin-top:var(--e4)}
.dc-barra .rf-ver{margin-top:0}
.dc-csv{display:flex; gap:var(--e2); flex-wrap:wrap; margin-left:auto}
.dc-estado{display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap; margin:var(--e3) 0}
.dc-rot{margin:var(--e3) 0 var(--e2); font-size:var(--t-xs); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--mute)}

/* Las tarjetas de resumen: una por declaración, con el número de formulario
   grande. La que no aplica va punteada y sin sombra. */
.dc-resumen{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--e3); margin-bottom:var(--e4)}
.dc-tarjeta{display:flex; flex-direction:column; align-items:flex-start; gap:var(--e1); min-width:0;
  padding:16px 18px; background:var(--bg); border:2px solid transparent; border-radius:var(--r-lg);
  box-shadow:var(--sh-float); color:var(--ink); text-decoration:none}
a.dc-tarjeta:hover{border-color:var(--accent)}
.dc-tarjeta.off{background:transparent; box-shadow:none; border:1px dashed var(--line-strong)}
.dc-tarjeta-n{display:flex; align-items:baseline; gap:var(--e2)}
.dc-tarjeta-n b{font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1.1}
.dc-tarjeta-n span{font-size:12px; color:var(--mute)}
.dc-tarjeta-t{font-size:var(--t-sm); font-weight:600; line-height:1.35}
.dc-tarjeta .hint{margin:0}
.dc-tarjeta-m{font-size:var(--t-sm); font-weight:600; font-variant-numeric:tabular-nums}

/* Formularios + columna lateral. */
.dc-lay{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:var(--e4); align-items:start}
.dc-formularios{display:flex; flex-direction:column; gap:var(--e4); min-width:0}
.dc-formularios .dc-form{margin-bottom:0}
.dc-lateral{position:sticky; top:var(--e4); display:flex; flex-direction:column; gap:var(--e3)}
.dc-como h3{margin:0 0 var(--e2); font-size:var(--t-lg); font-weight:600}
.dc-como ol{margin:0 0 var(--e3); padding-left:var(--e4); display:flex; flex-direction:column; gap:var(--e2); font-size:var(--t-sm)}
.dc-pre{margin:var(--e3) 0 0; padding:10px 12px; background:var(--crema); border-radius:var(--r-sm);
  font:var(--t-xs)/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; overflow-wrap:anywhere}

/* La tarjeta del formulario: cabecera con filo, cuerpo con aire de 24px y las
   casillas como filas de tres columnas (rótulo, monto, copiar). */
.dc-form{padding:0 24px 22px}
.dc-form .dc-cab{margin:0 -24px var(--e2); padding:20px 24px 14px; border-bottom:1px solid var(--line)}
.dc-form .dc-tit h2{font-size:var(--t-h2); font-weight:600; line-height:1.3}
.dc-form .casilla{grid-template-columns:minmax(0,1fr) auto 84px; gap:var(--e3); padding:10px 0}
.dc-form .casilla-t{font-weight:500; line-height:1.35}
.dc-form .casilla-monto{font-weight:600; min-width:130px}
.dc-form .casilla-copiar{height:28px; min-height:28px; min-width:84px; padding:0 12px; border-radius:var(--r-pill);
  border-color:var(--line-input); color:var(--ink); background:var(--bg)}
.dc-form .casilla-copiar[data-copiado]{border-color:var(--ok); color:var(--ok); background:var(--ok-bg)}
.dc-form .casilla-clave{margin-top:var(--e3); padding:14px 20px; border:0; background:var(--crema)}
.dc-form .casilla-clave .casilla-t{font-size:15px; font-weight:700}
.dc-form .casilla-clave .casilla-monto{font-size:var(--cifra); font-weight:600}
.dc-form .casilla-clave .casilla-copiar{height:28px; padding:0 12px; background:var(--bg); color:var(--ink);
  border:1px solid var(--line-input); font-size:var(--t-xs)}
.dc-form .casilla-clave .casilla-copiar:hover{filter:none; border-color:var(--accent); color:var(--ink)}
.dc-form .dc-acciones{margin-top:var(--e4)}

@media (max-width:1100px){
  .dc-lay{grid-template-columns:minmax(0,1fr)}
  .dc-lateral{position:static}
  .dc-resumen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .dc-resumen{grid-template-columns:minmax(0,1fr)}
  .dc-form .casilla{grid-template-columns:minmax(0,1fr) auto; row-gap:var(--e1)}
  .dc-form .casilla-t{grid-column:1 / -1}
  .dc-form .casilla-monto{grid-column:1; text-align:left; min-width:0}
  .dc-form .casilla-copiar{grid-column:2}
}

/* Las tarjetas-enlace no llevan el subrayado fino de los enlaces de contenido
   (`main a:not(...)` de app.css, que pesa cinco clases): `:is(a, #_)` sube la
   especificidad de esta regla por encima de esa sin recurrir a `!important`. */
main a.ct-tarjeta:is(a, #_), main a.dc-tarjeta:is(a, #_){text-decoration:none}


/* ---- Emitir a mano (QA contra la maqueta EmitirAMano, 01-oct-2026) ---- */
.fx-migas{margin:0 0 var(--e1); font-size:var(--t-sm); color:var(--mute)}
.fx-migas a{font-weight:600}
.fx-info{margin-bottom:var(--e3)}
/* Formulario a la izquierda y vista previa a la derecha (7 : 5). */
.fx-lay{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--e4); align-items:start}
.fx-col{display:flex; flex-direction:column; gap:var(--e3); min-width:0}
.fx-col .card{margin:0; padding:22px 24px}
.fx-lateral{position:sticky; top:var(--e4); display:flex; flex-direction:column; gap:var(--e3); min-width:0}
.fx-lateral .btn:not(.accion-fija){width:100%; margin:0}
/* Los rótulos de este formulario van con mayúscula normal (la maqueta), no en
   versalitas como el resto de la app. */
.fx-form label{text-transform:none; letter-spacing:0; font-size:var(--t-sm); color:var(--ink); margin-bottom:var(--e1)}
.fx-paso{margin-bottom:var(--e3); font-size:var(--t-lg)}
.fx-lectura{display:flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--line-input);
  border-radius:var(--r-sm); background:var(--bg); color:var(--mute); font-size:var(--t-md)}
.fx-tc{display:grid; gap:var(--e1); margin-top:var(--e3); max-width:340px}
.fx-etq{font-size:var(--t-sm); font-weight:600}
.fx-tipo{display:flex; align-items:flex-start; gap:var(--e2); margin-top:var(--e3); padding:12px 16px;
  background:var(--info-bg); color:var(--info); border-radius:var(--r-md); font-size:var(--t-sm); line-height:1.5}
.fx-tipo p{margin:0; display:flex; flex-direction:column}
.fx-tipo p > strong{order:-1}
.fx-tipo-ic{flex:none; width:18px; height:18px; margin-top:1px; border:1.5px solid currentColor; border-radius:50%;
  font-size:var(--t-xs); font-weight:700; line-height:15px; text-align:center}
/* La vista previa: un recibo sobre papel blanco, con la sombra de levante. */
.fx-recibo{padding:22px 24px; background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-lift)}
.fx-recibo-cab{display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--e3)}
.fx-recibo-cab h2{margin:0; font-size:var(--t-lg); font-weight:600}
.fx-eb{margin:0 0 4px; font-size:var(--t-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mute)}
.fx-mono{margin:0 0 var(--e3); font:var(--t-xs) ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--mute)}
.fx-partes{display:grid; grid-template-columns:1fr 1fr; gap:var(--e4); padding:var(--e3) 0; border-top:1px dashed var(--line-strong)}
.fx-partes p{margin:0; font-size:var(--t-sm); line-height:1.4}
.fx-partes .hint{margin:0}
.fx-linea{display:flex; justify-content:space-between; gap:var(--e4); padding:12px 0; margin-bottom:var(--e2);
  border-top:1px dashed var(--line-strong); border-bottom:1px dashed var(--line-strong)}
.fx-linea p{margin:0; font-size:var(--t-sm)}
.fx-tl{display:flex; justify-content:space-between; padding:7px 0; font-variant-numeric:tabular-nums}
.fx-tl span:first-child{color:var(--mute)}
.fx-tl-total{margin-top:var(--e1); padding-top:var(--e3); border-top:1px solid var(--line); font-weight:700; font-size:17px}
.fx-tl-total span:first-child{color:var(--ink)}
.fx-nota{margin:0; font-size:var(--t-sm); color:var(--mute); text-align:center; line-height:1.5}
@media (max-width:900px){
  /* El botón fijo ya no es hijo directo del `<form>` (vive en la columna de la
     vista previa), así que el aire que le deja `form:has(> .accion-fija)` se
     repone acá. */
  .fx-form{padding-bottom:64px}
}
@media (max-width:1000px){
  .fx-lay{grid-template-columns:minmax(0,1fr)}
  .fx-lateral{position:static}
}


/* ---- Gastos (QA contra la maqueta, 01-oct-2026) ---- */
.gx-tit{flex:1 1 420px; min-width:0}
.gx-tit .sub{max-width:760px}
.fx-acciones .btn-enlace{min-height:44px; display:inline-flex; align-items:center}
.gx-tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--e3); margin:var(--e3) 0 var(--e4)}
.gx-tarjeta{display:flex; flex-direction:column; gap:var(--e1); padding:18px var(--e4); background:var(--bg);
  border-radius:var(--r-lg); box-shadow:var(--sh-float)}
.gx-tarjeta .fx-eb{margin:0}
.gx-tarjeta .hint{margin:0}
.gx-n{font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums}
.gx-cab-sec{display:flex; align-items:baseline; justify-content:space-between; gap:var(--e3); flex-wrap:wrap; margin:var(--e5) 0 var(--e1)}
.gx-cab-sec h2, .gx-sec{margin:0; font-size:var(--t-h2); font-weight:600}
.gx-sec{margin:var(--e5) 0 var(--e1)}
.gx-cab-sec + .sub{margin-bottom:0}
.gx-tabla{background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-float); padding:var(--e1) 0}
.gx-tabla table{margin-top:0}
.gx-tabla td, .gx-tabla th{padding-left:var(--e4); padding-right:var(--e3)}
.gx-revisar{font-weight:600; white-space:nowrap}
.gx-form{max-width:760px}
.gx-form label{text-transform:none; letter-spacing:0; font-size:var(--t-sm); color:var(--ink)}


/* ---- Detalle del comprobante (QA contra la maqueta, 01-oct-2026) ---- */
.fx-ids{display:flex; flex-direction:column; gap:var(--e1); margin:var(--e2) 0 var(--e3); font-size:var(--t-sm)}
.fx-ids code{font:var(--t-xs) ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink); overflow-wrap:anywhere}
.fx-ids .fx-eb{display:inline; margin-right:var(--e1)}
.fx-copiar{height:28px; min-height:28px; margin-left:var(--e1); padding:0 12px; border-radius:var(--r-pill)}
.fx-cab .fx-acciones .btn{min-height:44px}
.fx-lado .card{margin:0}
.fx-rel{display:flex; justify-content:space-between; align-items:center; gap:var(--e3); margin:0; padding:var(--e2) 0;
  border-top:1px solid var(--line)}
.fx-rel:first-of-type{border-top:0}
.fx-rel .hint{display:block; margin:0}
.fx-doc{display:flex; justify-content:space-between; align-items:center; gap:var(--e3); padding:var(--e2) 0;
  border-top:1px solid var(--line)}
.fx-doc:first-of-type{border-top:0}
.fx-doc .hint{display:block; margin:0}
@media (max-width:1000px){
  .fx-grid{grid-template-columns:minmax(0,1fr)}
}
.fx-titulo{display:block}
.fx-titulo::first-letter{text-transform:uppercase}
.fx-cab h1 .pill{text-transform:capitalize}
.fx-rel a{white-space:nowrap}


/* ---- Liquidaciones (QA contra la maqueta, 01-oct-2026) ---- */
/* Cada liquidación es su propia tarjeta (no una fila de una lista con borde) y la
   objetada se marca con un aro rojo. */
.liq-lista{border:0; border-radius:0; overflow:visible; display:flex; flex-direction:column; gap:var(--e3); margin-top:var(--e3)}
.liq-lista .liq-fila{padding:18px 24px; background:var(--bg); border:2px solid transparent; border-radius:var(--r-lg);
  box-shadow:var(--sh-float)}
.liq-lista .liq-fila:last-child{border-bottom:2px solid transparent}
.liq-lista .liq-fila.liq-objetada{border-color:var(--err)}
.liq-lista .liq-cuenta{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:var(--e1) var(--e4)}
.liq-titulo{display:flex; align-items:center; gap:var(--e2); grid-column:1}
.liq-titulo .liq-periodo{flex:none}
.liq-lista .liq-terminos{grid-column:1; grid-row:2; justify-content:flex-start}
.liq-neto-bloque{grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; align-items:flex-end}
.liq-neto-rot{font-size:var(--t-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mute)}
.liq-lista .liq-neto{font-size:var(--cifra); line-height:1.15}
/* Aviso | Respuesta | Pago: tres columnas con su rótulo arriba, bajo un filo. */
.liq-lista .liq-estados{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e2) var(--e4);
  margin-top:var(--e3); padding-top:var(--e3); border-top:1px solid var(--line); align-items:start}
.liq-lista .liq-estado{flex-wrap:wrap; align-items:center; gap:var(--e2)}
.liq-lista .liq-estado > .rot{flex:0 0 100%; margin:0}
.liq-lista .liq-estado a.btn-enlace{display:inline-flex; align-items:center; min-height:36px; padding:0 14px;
  border:1px solid var(--line-input); border-radius:var(--r-pill); background:var(--bg); font-size:var(--t-sm);
  text-decoration:none}
.liq-lista .liq-estado a.btn-enlace:hover{background:var(--crema)}
.liq-lista .liq-objecion{margin-top:var(--e3); background:var(--err-bg)}
@media (max-width:900px){
  .liq-lista .liq-cuenta{grid-template-columns:minmax(0,1fr)}
  .liq-neto-bloque{grid-column:1; grid-row:auto; align-items:flex-start}
  .liq-lista .liq-terminos{grid-row:auto; order:0; flex:0 0 auto}
  .liq-lista .liq-estados{grid-template-columns:minmax(0,1fr)}
}


/* ---- Responder el comprobante (QA contra la maqueta GastoConfirmar, 01-oct-2026) ---- */
.gc-lay{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e4); align-items:start; margin-top:var(--e3)}
.gc-lay .card{margin:0; padding:22px 24px}
.gc-lay h3{margin:0 0 var(--e3); font-size:var(--t-lg); font-weight:600}
.gc-respuesta{max-width:none}
.gc-respuesta label{text-transform:none; letter-spacing:0; font-size:var(--t-sm); color:var(--ink)}
.gc-opciones{display:flex; flex-direction:column; gap:var(--e2); margin:var(--e2) 0 var(--e3)}
.gc-opcion{display:flex; align-items:flex-start; gap:var(--e2); margin:0; padding:12px 16px; cursor:pointer;
  background:var(--bg); border:1px solid var(--line-input); border-radius:var(--r-md)}
.gc-opcion input{width:auto; margin-top:3px}
.gc-opcion strong{display:block; font-size:var(--t-md); font-weight:600}
.gc-opcion .hint{display:block; margin:0}
.gc-opcion:has(input:checked){border:2px solid var(--accent); background:var(--brand-tint); padding:11px 15px}
.fx-cab .btn-enlace{white-space:nowrap}
@media (max-width:900px){
  .gc-lay{grid-template-columns:minmax(0,1fr)}
}


/* ---- QA liquidaciones/declaraciones (01-oct-2026, contra Liquidaciones.dc y Declaraciones.dc) ---- */
/* Liquidaciones: la barra de filtros (propietario y año). */
.liq-filtros{display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap; margin-bottom:var(--e3)}
.liq-sel{position:relative}
.liq-sel summary{display:inline-flex; align-items:center; gap:var(--e2); min-height:44px; padding:0 var(--e4); cursor:pointer;
  background:var(--bg); border:1px solid var(--line-input); border-radius:var(--r-pill); font-size:var(--t-md); list-style:none}
.liq-sel summary::-webkit-details-marker{display:none}
.liq-sel summary::after{content:"\25BE"; color:var(--mute)}
.liq-sel ul{position:absolute; z-index:5; top:calc(100% + 6px); left:0; min-width:100%; margin:0; padding:var(--e1); list-style:none;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-lift)}
.liq-sel li a{display:block; padding:8px var(--e3); border-radius:var(--r-sm); color:var(--ink); text-decoration:none; white-space:nowrap}
.liq-sel li a:hover, .liq-sel li a[aria-current]{background:var(--crema)}
.liq-anio{display:flex; align-items:center; gap:var(--e2); margin:0}
.liq-anio label{margin:0; text-transform:none; letter-spacing:0; font-size:var(--t-md); color:var(--ink)}
.liq-anio select{width:auto; min-width:120px}
/* La tarjeta: el chevron al detalle y las proporciones de las tres columnas. */
.liq-lista .liq-cuenta{grid-template-columns:minmax(0,1fr) auto auto}
.liq-ver{grid-column:3; grid-row:1 / span 2; align-self:center; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; color:var(--mute); font-size:26px; line-height:1; text-decoration:none}
.liq-ver:hover{background:var(--crema); color:var(--ink)}
.liq-lista .liq-cuenta a.liq-ver{text-decoration:none; border-bottom:0}
.liq-lista .liq-estados{grid-template-columns:1fr 1fr 1.3fr}
.liq-lista .liq-estado a.btn.btn-chico{min-height:36px; padding:0 14px; font-size:var(--t-sm); text-decoration:none}
.liq-objecion strong{font-weight:600}
@media (max-width:900px){
  .liq-lista .liq-cuenta{grid-template-columns:minmax(0,1fr) auto}
  .liq-ver{grid-column:2; grid-row:1}
  .liq-lista .liq-estados{grid-template-columns:minmax(0,1fr)}
}
/* El detalle de una liquidación. */
.ld-lay{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:var(--e3); align-items:start}
.ld-lay .card{margin:0}
.ld-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e3); flex-wrap:wrap}
.ld-cab h2{margin:4px 0 0; font-size:19px}
.ld-cab .hint{margin:2px 0 0}
.ld-estados{display:flex; gap:var(--e2); flex-wrap:wrap; justify-content:flex-end}
.ld-hoja .liq-objecion{margin:var(--e3) 0 0; padding:10px 14px; border-radius:12px}
.ld-desglose{margin:var(--e3) 0 0; display:flex; flex-direction:column}
.ld-desglose > div{display:flex; justify-content:space-between; gap:var(--e3); padding:9px 0; border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.ld-desglose dt{color:var(--mute)}
.ld-desglose dd{margin:0; font-weight:600}
.ld-desglose .fin{border-bottom:0; padding-top:14px}
.ld-desglose .fin dt, .ld-desglose .fin dd{color:var(--ink); font-weight:700; font-size:var(--t-lg)}
.ld-acciones{display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap; margin-top:var(--e3)}
.ld-kv{margin:var(--e2) 0}
.ld-sep{display:block; margin-top:var(--e4)}
.ld-tabla{width:100%; border-collapse:collapse; margin-top:var(--e2)}
.ld-tabla th, .ld-tabla td{padding:9px var(--e2); border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.ld-tabla th{font-size:var(--t-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mute)}
.ld-tabla .monto{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.ld-tabla tfoot td{font-weight:600; border-bottom:0; color:var(--ink)}
@media (max-width:900px){
  .ld-lay{grid-template-columns:minmax(0,1fr)}
}
/* Los diálogos del cierre, del aviso y del pago (maqueta "Diálogos y confirmaciones"). */
.liq-dlg{max-width:720px}
.liq-dlg .card{box-shadow:var(--sh-lift)}
.liq-dlg .card-aviso{box-shadow:none}
.liq-dlg dl.kv{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:0; margin:var(--e2) 0}
.liq-dlg dl.kv dt, .liq-dlg dl.kv dd{margin:0; padding:8px 0; border-bottom:1px solid var(--line)}
.liq-dlg dl.kv dd{padding-left:var(--e3); text-align:right; font-weight:600; font-variant-numeric:tabular-nums}
.liq-dlg form.card .btn{margin-top:var(--e2)}
.liq-dlg form.card p:last-child{margin:var(--e2) 0 0}

/* Declaraciones: casillas agrupadas con subtítulo, el desglose, el IVA
   recuperado, la fórmula, el panel de "Marcar como presentada". */
.dc-antes{font-size:12px; font-weight:500; color:var(--mute)}
.dc-sh{margin:var(--e4) 0 var(--e1); padding-bottom:6px; border-bottom:1px solid var(--line);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mute)}
.dc-form .casilla-h{display:block; margin-top:2px; font-size:12.5px; font-weight:400; color:var(--mute); line-height:1.4}
.dc-form .casilla-h a{font-weight:600}
.dc-form .casilla.total .casilla-t, .dc-form .casilla.total .casilla-monto{font-weight:700}
.dc-form .casilla.casilla-sub{padding:6px 0 6px var(--e4)}
.dc-form .casilla.casilla-sub .casilla-t{font-weight:400; font-size:var(--t-sm); color:var(--mute)}
.dc-form .casilla.casilla-sub .casilla-monto{font-weight:500; font-size:var(--t-sm)}
.dc-recu{display:flex; align-items:center; gap:var(--e5); flex-wrap:wrap; margin:var(--e3) 0; padding:14px 18px;
  background:var(--crema); border-radius:var(--r-md)}
.dc-recu b{display:block; font-size:var(--t-lg); font-variant-numeric:tabular-nums}
.dc-recu .dc-rot{display:block; margin:0 0 2px}
.dc-recu .hint{flex:1; min-width:220px; margin:0}
.dc-formula{margin:var(--e2) 0 0; font-size:12.5px; color:var(--mute); font-variant-numeric:tabular-nums}
.dc-detalle{margin-top:var(--e3)}
.dc-remesas table{width:100%}
.dc-remesas .monto{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.dc-remesas .casilla-copiar{margin-left:var(--e2)}
/* "Cómo declarar": los pasos numerados. */
.dc-como ol.dc-pasos{list-style:none; padding:0; margin:0 0 var(--e3); gap:var(--e3)}
.dc-pasos li{display:flex; align-items:flex-start; gap:var(--e2)}
.dc-pasos i{flex:none; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:var(--brand-tint); color:var(--accent); font-size:12px; font-style:normal; font-weight:700}
/* "Marcar como presentada": panel unificado + estado por formulario. */
.dc-marca-panel h3{margin:0 0 var(--e2); font-size:var(--t-lg); font-weight:600}
.dc-marca-panel label{display:block; margin:var(--e3) 0 var(--e1); text-transform:none; letter-spacing:0;
  font-size:var(--t-sm); font-weight:600; color:var(--ink)}
.dc-marca-panel select, .dc-marca-panel input{width:100%}
.dc-marca-panel .dc-m-btn{width:100%; margin-top:var(--e3)}
.dc-estados{list-style:none; margin:var(--e3) 0 0; padding:0; display:flex; flex-direction:column}
.dc-estados li{display:flex; align-items:center; justify-content:space-between; gap:var(--e2); flex-wrap:wrap;
  padding:10px 0; border-top:1px solid var(--line); font-size:var(--t-sm)}
.dc-estados li form{margin:0}
/* La navegación de período, como un grupo de píldora. */
.rf-cab-mes .paso{min-width:36px}
@media (max-width:640px){
  .dc-form .casilla.casilla-sub{padding-left:var(--e3)}
  .dc-recu{gap:var(--e3)}
}

/* ---- Gastos de la cartera (QA 2, 01-oct-2026) ---- */
.gc-alerta{display:flex; align-items:center; gap:var(--e3); margin:var(--e3) 0; padding:12px 16px 12px 18px;
  background:var(--warn-bg); border-radius:var(--r-md); color:var(--ink)}
.gc-alerta .ico{width:20px; height:20px; color:var(--warn); flex:none}
.gc-alerta strong{font-weight:500}
.gx-tabla .nm{font-weight:600}
.gx-tabla td .hint{margin:0}
/* La nota a la derecha de la fila de pestañas. */
.tabs .nota-tabs{margin-left:auto; align-self:center; font-size:var(--t-sm); color:var(--mute); white-space:nowrap}
@media (max-width:640px){ .tabs .nota-tabs{display:none} }

.gx-dos{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:var(--e4); margin-bottom:var(--e4); align-items:start}
.gx-dos .card{margin:0; padding:22px 24px}
.gx-dos h3{margin:0; font-size:var(--t-lg); font-weight:600}
.gx-dos .hint{margin:var(--e1) 0 var(--e2)}
.gx-barra{display:grid; grid-template-columns:minmax(120px,1fr) minmax(0,1.4fr) auto; align-items:center; gap:var(--e3); padding:6px 0; font-size:var(--t-sm)}
.gx-barra > span:first-child{font-weight:600}
.gx-pista{display:block; height:14px; background:var(--crema); border-radius:var(--r-xs); overflow:hidden}
.gx-pista i{display:block; height:100%; background:var(--chart-1); border-radius:var(--r-xs)}
.gx-monto{font-weight:600; font-variant-numeric:tabular-nums}
.gx-camino{display:flex; justify-content:space-between; align-items:center; gap:var(--e3); padding:var(--e2) 0; border-top:1px solid var(--line)}
.gx-camino .hint{display:block; margin:0}
@media (max-width:900px){ .gx-dos{grid-template-columns:minmax(0,1fr)} .gx-barra{grid-template-columns:minmax(0,1fr) auto} .gx-pista{grid-column:1 / -1; order:3} }
/* La fila-enlace de la tabla (`.fila-ver` es absoluto) tiene que quedar adentro
   del contenedor de scroll: sin esto en móvil escapa y ensancha la página. */
.gx-tabla .tabla-scroll{position:relative}