/* Visor de facturas: solo el acento y la disposición propia. Lo demás viene de videla-ui (vendor/videla-ui@0.2.0). */

/* Geist, solo el subconjunto latino (variable, 400-600), servido desde aquí: sin pedidos a Google. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/vendor/geist-v5/latin.woff2) format('woff2'); }

/* Acento teal (Tailwind): 700 y texto blanco en claro; 400 y texto 950 en oscuro. */
:root { --acento: #0f766e; --acento-fg: #ffffff; --acento-hover: #115e59; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --acento: #2dd4bf; --acento-fg: #042f2e; --acento-hover: #5eead4; }
}
[data-tema="oscuro"] { --acento: #2dd4bf; --acento-fg: #042f2e; --acento-hover: #5eead4; }

[tabindex="-1"]:focus { outline: 0; }
.pagina { padding-top: 20px; padding-bottom: 40px; display: grid; gap: 16px; }
.enc p { margin-top: 8px; max-width: 64ch; }
.v-zona { justify-items: start; text-align: left; }
.v-zona.encima { border-style: solid; }
.priv { font-weight: 500; margin-top: -8px; }

/* Cabecera: la marca y los países; en el teléfono las pestañas pasan a una fila entera */
.v-top > .v-wrap { flex-wrap: wrap; gap: 4px 16px; padding-block: 8px; }
.v-marca { min-height: 44px; }
.v-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-tabs > a { justify-content: center; min-height: 44px; padding: 0 4px; }

/* Resultado */
.app, #salida { display: grid; gap: 16px; }
.estado:empty { display: none; }
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.barra .sep { flex: 1; }
.barra .v-btn { flex: 1 1 auto; }
.cabeza { flex-wrap: wrap; }
.avisos { display: grid; gap: 4px; margin-top: 4px; font-size: var(--texto-2); line-height: var(--texto-2-lh); overflow-wrap: anywhere; }
.avisos b { font-weight: 600; }
.v-nota > div { min-width: 0; }
.v-nota.urgente { background: var(--background); border: 1px solid var(--urgente); } /* rojo sobre --muted da 4,43; sobre el fondo 4,83 */

/* Lista de documentos */
.tabla .t { background: none; border: 0; padding: 12px 4px; margin: -12px -4px; cursor: pointer; font-weight: 500; text-align: left; }
.tabla tr.fila { cursor: pointer; }
.tabla tr.fila:hover { background: var(--hover); }
.tabla tr.fila:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.tabla .cor { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla .c-t { font-weight: 600; white-space: nowrap; }
.chev { display: none; color: var(--muted-foreground); }
.c-tp, .c-fm { display: none; }
.urge { font-weight: 500; white-space: nowrap; }

/* La factura: un documento */
.hoja { display: grid; gap: 24px; overflow-wrap: anywhere; padding: 16px; }
.h-cab, .h-dos { display: grid; gap: 16px; align-items: start; }
.h-emisor p { color: var(--muted-foreground); }
.h-tipo { border: 1px solid var(--foreground); border-radius: var(--radio-control); padding: 12px 16px; text-align: center; display: grid; gap: 2px; }
.h-tipo .k { font-size: var(--texto-2); color: var(--muted-foreground); }
.h-tipo .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.h-sec h3 { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
dl.d { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
dl.d dt { color: var(--muted-foreground); font-size: var(--texto-2); line-height: var(--texto-2-lh); }
dl.d dd { margin-bottom: 8px; }

.items td { height: auto; padding: 10px 8px; vertical-align: top; }
.items th { border-bottom-color: var(--foreground); }
.items .r { text-align: right; }
.items td.r { white-space: nowrap; }

.totales { justify-self: end; width: 100%; max-width: 420px; display: grid; gap: 6px; }
.totales div { display: flex; justify-content: space-between; gap: 16px; }
.totales dt { color: var(--muted-foreground); }
.totales dd { font-weight: 500; text-align: right; }
.totales .gran { border-top: 1px solid var(--foreground); padding-top: 8px; margin-top: 4px; }
.totales .gran dt { color: var(--foreground); font-weight: 600; }
.totales .gran dd { font-size: var(--titulo-2); line-height: var(--titulo-2-lh); font-weight: 600; }

.items .clave { display: block; }
.extra { display: grid; gap: 16px; }
.extra h3 { font-weight: 500; margin-bottom: 2px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; word-break: break-all; }
.pie-hoja { border-top: 1px solid var(--border); padding-top: 12px; }

/* Texto y preguntas */
.texto { display: grid; gap: 12px; max-width: 68ch; padding-top: 8px; }
.texto h2 { margin-top: 12px; }
.texto ul, .texto ol { padding-left: 24px; display: grid; gap: 6px; }
.texto ul { list-style: disc; }
.texto ol { list-style: decimal; }
/* En línea para que los enlaces largos corten con el texto; el relleno vertical lleva la zona táctil a 44 px (también la miga de pan) sin mover las líneas. */
.texto .v-lnk, .enc .v-lnk { display: inline; padding: 13px 2px; margin: -13px -2px; }
.texto code { overflow-wrap: anywhere; }
.texto details { border-top: 1px solid var(--border); }
.texto details:last-of-type { border-bottom: 1px solid var(--border); }
.texto summary { min-height: var(--fila); display: flex; align-items: center; gap: 12px; padding: 8px 0; font-weight: 500; cursor: pointer; list-style: none; }
.texto summary::-webkit-details-marker { display: none; }
.texto summary::after { content: ""; margin-left: auto; flex: none; width: 8px; height: 8px; border: solid var(--muted-foreground); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.texto details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.texto details p { padding-bottom: 12px; color: var(--muted-foreground); }

/* Pie */
.pie { border-top: 1px solid var(--border); margin-top: 24px; }
.pie .v-wrap { padding-top: 12px; padding-bottom: 28px; display: grid; gap: 8px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 0 12px; }
.pie nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; font-weight: 500; }
.pie nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Teléfono: filas de lista en vez de tabla, líneas de factura apiladas */
@media screen and (max-width: 719px) {
  .enc h1 { font-size: var(--titulo-2); line-height: var(--titulo-2-lh); }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; }
  .tabla thead, .items thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "e t c" "n n c" "r r c"; column-gap: 8px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--border); position: relative; min-height: var(--fila); }
  .tabla tbody tr:last-child { border-bottom: 1px solid var(--border); }
  .tabla td, .tabla td:first-child, .tabla td:last-child { padding: 0; border: 0; height: auto; }
  .tabla td.c-e { grid-area: e; font-weight: 500; max-width: none; }
  .tabla td.c-t { grid-area: t; text-align: right; }
  .tabla td.c-n { grid-area: n; color: var(--muted-foreground); font-size: var(--texto-2); line-height: var(--texto-2-lh); }
  .tabla td.c-n .t::after { content: ""; position: absolute; inset: 0; }
  .tabla td.c-r { grid-area: r; color: var(--muted-foreground); font-size: var(--texto-2); line-height: var(--texto-2-lh); max-width: none; }
  .tabla td.c-f, .tabla td.c-ti { display: none; }
  .c-tp, .c-fm { display: inline; }
  .tabla td.c-ch { grid-area: c; align-self: center; }
  .chev { display: block; }
  .tabla .t { font-weight: 400; }
  .tabla tr.fila:hover .t { text-decoration: none; }

  .items, .items tbody, .items tr, .items td { display: block; }
  .items tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d i" "m m"; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .items td { padding: 0; border: 0; }
  .items td.c-d { grid-area: d; }
  .items td.c-i { grid-area: i; font-weight: 600; text-align: right; }
  .items td.c-m { grid-area: m; font-size: var(--texto-2); line-height: var(--texto-2-lh); color: var(--muted-foreground); }
  .items td.c-c, .items td.c-u, .items td.c-p, .items td.c-x { display: none; }
}
@media screen and (min-width: 720px), print {
  .items td.c-m { display: none; }
  .barra .v-btn { flex: none; }
  .pagina { padding-top: 24px; gap: 20px; }
  .v-zona { padding: 32px 24px; }
  .hoja { padding: 32px; gap: 28px; }
  .h-cab { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
  .h-dos { grid-template-columns: 1fr 1fr; gap: 32px; }
  dl.d { grid-template-columns: 10rem minmax(0, 1fr); }
  dl.d dt { font-size: inherit; line-height: inherit; }
  dl.d dd { margin-bottom: 6px; }
}

/* Seis países: las pestañas van junto a la marca solo cuando caben */
@media screen and (min-width: 960px) {
  .v-top > .v-wrap { flex-wrap: nowrap; padding-block: 0; }
  .v-tabs { width: auto; margin-left: auto; display: inline-flex; }
  .v-tabs > a { padding: 0 var(--control-pad); }
}

/* Impresión: solo la factura, en claro y a la medida de una hoja */
@media print {
  :root:root:root {
    --background: #fff; --foreground: #000; --card: #fff; --muted: #f5f5f5; --muted-foreground: #555; --border: #d4d4d4; --sombra: none; --acento: #0f766e;
    --texto: 12px; --texto-lh: 17px; --texto-2: 11px; --texto-2-lh: 15px;
    --titulo-2: 17px; --titulo-2-lh: 24px; --titulo-3: 13px; --titulo-3-lh: 18px; --radio-caja: 0px;
    color-scheme: light;
  }
  @page { margin: 14mm; }
  .v-top, .pie, .enc, .texto, .v-zona, .priv, #salida > :not(.hoja) { display: none !important; }
  .pagina { padding: 0; display: block; }
  .v-wrap { max-width: none; padding: 0; }
  .hoja { border: 0; padding: 0; }
  .h-cab { grid-template-columns: minmax(0, 1fr) 240px; }
  .items tr, .totales { break-inside: avoid; }
  .items thead { display: table-header-group; }
}


/* ===== Portada (propuesta): piezas comunes ===== */
.home { -webkit-tap-highlight-color: transparent; }
.home ::selection { background: color-mix(in srgb, var(--acento) 28%, transparent); }
.home button, .home a, .home summary, .home label { touch-action: manipulation; }
.home .priv { margin-top: 0; }
.home .estado { min-height: 0; }
.home .resultado { padding-block: 0 8px; }
.home .resultado:has(#salida:not(:empty)) { padding-block: 32px 24px; }
.home #salida:empty { display: none; }
/* La vista previa usa el mismo markup del visor, pero sin ids ni encabezados */
.hoja .h3 { font-weight: 600; }
.h-sec .h3 { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.extra .h3 { font-weight: 500; margin-bottom: 2px; }
.h-nombre { font-weight: 600; }
/* Marca de la vista previa: no es un documento propio, no se imprime */
@media print {
  .home > header, .home > footer, .home main > :not(.resultado) { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .home * { animation: none !important; transition: none !important; } }
.home #salida { scroll-margin-top: 16px; }

/* ===== Ronda 2: base común (piezas compartidas por a2-1, a2-2 y a2-3) ===== */
.r2 {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sup: color-mix(in srgb, var(--acento) 5%, var(--background));
  /* Dos capas, como la tarjeta de producto de stripe.com/invoicing (rgba(50,50,93,.25) 0 30px 60px -12px, rgba(0,0,0,.3) 0 18px 36px -18px), con el tinte llevado al verde del acento */
  --sombra-prod: 0 30px 60px -12px rgba(16, 52, 49, .25), 0 18px 36px -18px rgba(0, 0, 0, .3);
  --sombra-chica: 0 18px 36px -18px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .06);
  --boton-sombra: 0 3px 6px rgba(0, 0, 0, .14); /* iLovePDF: botón principal 80 px, radio 12, rgba(0,0,0,.14) 0 3px 6px */
  --hoja-fondo: var(--card);
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .r2 {
    /* Linear: marco de 8 px #090a0b, pieza #101112 con borde 1px rgba(255,255,255,.08) y radio 12 */
    --sombra-prod: 0 0 0 1px rgba(255, 255, 255, .08);
    --sombra-chica: 0 0 0 1px rgba(255, 255, 255, .08);
    --boton-sombra: none;
    --hoja-fondo: #101112;
  }
}
.r2 ::selection { background: color-mix(in srgb, var(--acento) 28%, transparent); }
.r2 button, .r2 a, .r2 summary, .r2 label { touch-action: manipulation; }
.r2 .v-wrap { max-width: 1200px; }
.r2 .priv { margin-top: 0; font-weight: 500; }
.r2 .resultado { padding-block: 0; }
.r2 .resultado:has(#salida:not(:empty)) { padding-block: 32px 24px; }
.r2 #salida:empty { display: none; }
.r2 #salida { scroll-margin-top: 16px; }

/* Cabecera */
.r2 .v-top > .v-wrap { flex-wrap: nowrap; padding-block: 0; gap: 14px; }
.r2 .v-marca { min-height: 44px; font-size: 18px; }
.r2 .v-marca .nom b { color: var(--acento); font-weight: 600; }
.r2 .sub { display: none; font-size: var(--texto-2); padding-left: 14px; border-left: 1px solid var(--border); line-height: 20px; }
.r2 .v-tabs { width: auto; margin-left: auto; display: inline-flex; padding: 3px; }
.r2 .v-tabs > a { min-height: 44px; padding: 0 10px; }

/* Titular y bajada (Stripe invoicing 56/68 peso 500, -0.02em; Linear 64/64 peso 510, -0.022em) */
.r2 .h1 { font-weight: 500; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; }
.r2 .lead { font-size: 18px; line-height: 28px; color: var(--muted-foreground); max-width: 46ch; margin-top: 16px; }

/* Zona de soltar */
.zo { position: relative; grid-template-columns: 1fr; justify-items: start; text-align: left; gap: 12px; padding: 24px; border-width: 1.5px; border-radius: 14px; background: var(--background); }
.zo-i { width: 28px; height: 28px; color: var(--muted-foreground); stroke-width: 1.75; }
.zo-t { display: grid; gap: 4px; }
.zo-t .v-t3 { text-wrap: balance; }
.zo-b { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.zo-b .v-btn { flex: 1 1 auto; }
.zo .v-btn.pri { min-height: 52px; border-radius: 12px; font-size: 17px; font-weight: 500; box-shadow: var(--boton-sombra); }
.zo-ej { min-height: 52px; border-radius: 12px; }
.zo-p { margin-top: 12px; }
.r2 .estado { margin-top: 4px; }
.zo-chip { position: absolute; top: 14px; right: 14px; display: none; align-items: center; gap: 8px; padding: 8px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; font-size: 14px; box-shadow: var(--sombra-chica); pointer-events: none; opacity: 0; }

/* Vista previa: lo que arma el visor, país por país */
.vp { margin: 0; background: transparent; display: grid; gap: 14px; min-width: 0; }
.vp-sel { display: inline-flex; justify-self: start; gap: 2px; padding: 3px; background: var(--muted); border-radius: 12px; max-width: 100%; }
.vp-sel label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 9px; border: 1px solid transparent; font-weight: 500; font-size: 15px; color: var(--muted-foreground); cursor: pointer; transition: background-color .15s, color .15s; }
.vp-sel input:checked + label { background: var(--background); color: var(--acento); border-color: var(--border); }
.vp-sel input:focus-visible + label { outline: 2px solid var(--acento); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .vp-sel label:hover { color: var(--foreground); } }
.vp-sel { order: 0; } .vp-cap { order: 1; } .vp-escena { order: 2; position: relative; min-width: 0; }
.vp-pila { display: grid; min-width: 0; }
.vp-h, .vp-cap p { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .16s var(--ease-out), visibility .16s; }
.vp:has(#p-mx:checked) [data-p="mx"], .vp:has(#p-pe:checked) [data-p="pe"], .vp:has(#p-co:checked) [data-p="co"], .vp:has(#p-cl:checked) [data-p="cl"], .vp:has(#p-ec:checked) [data-p="ec"] { opacity: 1; visibility: visible; }
.vp-cap { display: grid; }
.vp-cap p { color: var(--muted-foreground); font-size: var(--texto-2); line-height: var(--texto-2-lh); }
.vp-h { --texto: 15px; --texto-lh: 22px; --texto-2: 13px; --texto-2-lh: 18px; --titulo-2: 18px; --titulo-2-lh: 24px; --titulo-3: 15px; --titulo-3-lh: 22px; font-size: 15px; line-height: 22px; }
.vp-h .hoja { border-radius: 12px; border-color: transparent; background: var(--hoja-fondo); box-shadow: var(--sombra-prod); padding: 24px; gap: 20px; }
.vp-h .extra, .vp-h .pie-hoja { display: none; }
.vp-h .h-cab { grid-template-columns: minmax(0, 1fr) 150px; gap: 16px; }
.vp-h .h-dos { grid-template-columns: 1fr 1fr; gap: 20px; }
.vp-h dl.d { grid-template-columns: 5.2rem minmax(0, 1fr); gap: 0 8px; }
.vp-h dl.d dt { font-size: var(--texto-2); line-height: var(--texto-2-lh); }
.vp-h .h-sec dl.d > :nth-child(n + 7) { display: none; }
.vp-h .totales { max-width: 280px; }

/* El Excel que descarga el visor: hoja «Documentos» con los cinco ejemplos */
.vp-xls { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sombra-chica); overflow: hidden; min-width: 0; }
.xl-bar { padding: 8px 12px; background: var(--muted); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.xl-cuerpo { overflow: hidden; }
.xl { border-collapse: collapse; width: 100%; font-size: 11.5px; line-height: 18px; font-variant-numeric: tabular-nums; }
.xl th, .xl td { padding: 4px 6px; border: 1px solid var(--border); white-space: nowrap; text-align: left; font-weight: 400; }
.xl tr > :first-child { border-left: 0; }
.xl .letras th { background: var(--muted); color: var(--muted-foreground); text-align: center; font-size: 11px; }
.xl th.n { background: var(--muted); color: var(--muted-foreground); text-align: center; width: 28px; padding-inline: 4px; }
.xl .xl-t th:not(.n) { font-weight: 600; }
.xl .xl-t th:not(.n)::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: var(--muted-foreground); transform: translateY(3px); }
.xl td.r { text-align: right; }
.xl-hojas { display: flex; gap: 0; padding: 0 8px; background: var(--muted); border-top: 1px solid var(--border); font-size: 12px; }
.xl-hojas span { padding: 6px 12px; color: var(--muted-foreground); }
.xl-hojas .on { background: var(--card); color: var(--foreground); font-weight: 600; box-shadow: inset 0 -2px 0 var(--acento); }

/* Secciones */
.sec { padding-top: 72px; }
.cab { display: grid; gap: 4px; padding-bottom: 20px; }
.fr { display: grid; gap: 32px; }
.fr-i { margin: 0; min-width: 0; }
.fr-v { height: 260px; padding: 16px; overflow: hidden; background: var(--sup); border: 1px solid var(--border); border-radius: 14px; }
.fr-i figcaption { margin-top: 14px; max-width: 38ch; }
.fr-arch { display: grid; justify-items: start; gap: 8px; }
.fr-arch li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; font-size: 14px; box-shadow: var(--sombra-chica); }
.fr-arch li:nth-child(even) { margin-left: 28px; }
.fr-arch .v-i { color: var(--muted-foreground); width: 16px; height: 16px; }
.fr-2 .tabla { font-size: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; border-collapse: separate; border-spacing: 0; }
.fr-2 .tabla thead { display: none; }
.fr-2 .tabla .c-f, .fr-2 .tabla .c-ti, .fr-2 .tabla .c-r, .fr-2 .tabla .c-ch, .fr-2 .tabla .c-fm { display: none; }
.fr-2 .tabla .c-tp { display: inline; }
.fr-2 .tabla td { height: 52px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.fr-2 .tabla tr:last-child td { border-bottom: 0; }
.fr-2 .tabla .c-e { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); }
.fr-2 .tabla .t { background: none; border: 0; padding: 0; font: inherit; text-align: left; }
.fr-2 .tabla tr.fila { cursor: default; }
.fr-2 .tabla tr.fila:hover { background: none; }
.fr-3 .fr-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.fr-3 .fr-bar .v-btn { min-height: 36px; padding-inline: 14px; font-size: 14px; pointer-events: none; }
.fr-3 .xl-cuerpo { border: 1px solid var(--border); border-radius: 8px; background: var(--card); }

.paises { border-bottom: 1px solid var(--border); }
.paises li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; grid-template-areas: "n au c" "p p p"; gap: 2px 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border); }
.paises .n { grid-area: n; font-weight: 600; font-size: var(--titulo-3); }
.paises .n a { text-decoration: none; }
.paises .n a::after { content: ""; position: absolute; inset: 0; }
.paises .au { grid-area: au; font-size: var(--texto-2); font-weight: 500; letter-spacing: .02em; }
.paises p { grid-area: p; color: var(--muted-foreground); }
.paises .chev { grid-area: c; color: var(--muted-foreground); justify-self: end; transition: transform .18s var(--ease-out); }
.paises li:has(a:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
.paises a:focus-visible { outline: 0; }
.paises li:active { background: var(--hover); }
@media (hover: hover) and (pointer: fine) {
  .paises li:hover { background: var(--hover); }
  .paises li:hover .chev { transform: translateX(3px); color: var(--foreground); }
  .paises li:hover .n a { text-decoration: underline; text-underline-offset: 3px; }
}
.det details { border-top: 1px solid var(--border); }
.det details:last-of-type { border-bottom: 1px solid var(--border); }
.det summary { min-height: var(--fila); display: flex; align-items: center; gap: 12px; padding: 8px 0; font-weight: 500; cursor: pointer; list-style: none; }
.det summary::-webkit-details-marker { display: none; }
.det summary::after { content: ""; margin-left: auto; flex: none; width: 8px; height: 8px; border: solid var(--muted-foreground); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .18s var(--ease-out); }
.det details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.det details p { padding-bottom: 14px; color: var(--muted-foreground); max-width: 62ch; }
.r2 .pie { margin-top: 72px; }

/* Movimiento: una sola vez al cargar. Propósito: explicar el recorrido archivo, factura, Excel.
   Solo transform y opacity; cada paso dura menos de 400 ms; sin movimiento si la persona lo pide. */
@keyframes chip-cae { 0% { opacity: 0; transform: translateY(-56px) rotate(-4deg); } 30% { opacity: 1; } 62% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes borde-late { 0%, 100% { border-color: var(--input); } 50% { border-color: var(--acento); } }
@keyframes arma { from { opacity: 0; transform: translateY(10px); } }
@keyframes asoma { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes fila-entra { from { opacity: 0; transform: translateX(-6px); } }

/* Teléfono y tablet */
@media screen and (max-width: 719px) {
  .r2 .v-top > .v-wrap { flex-wrap: wrap; padding-block: 4px 6px; gap: 0 12px; }
  .r2 .v-tabs { width: 100%; display: flex; justify-content: space-between; overflow-x: auto; scrollbar-width: none; padding: 2px; gap: 0; }
  .r2 .v-tabs > a { flex: 1 0 auto; justify-content: center; padding: 0 6px; font-size: 15px; }
  .vp-sel { width: 100%; }
  .vp-sel label { flex: 1 0 auto; justify-content: center; padding: 0 6px; }
  .vp-h .hoja { padding: 16px; }
  .vp-h .h-cab, .vp-h .h-dos { grid-template-columns: 1fr; }
  .vp-h .items thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vp-xls { display: none; }
}
@media screen and (min-width: 720px) {
  .r2 .sub { display: block; }
  .zo-b .v-btn { flex: none; }
  .fr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .paises li { grid-template-columns: 150px 80px minmax(0, 1fr) 24px; grid-template-areas: "n au p c"; gap: 12px 20px; align-items: start; padding: 18px 0; }
  .paises .au { padding-top: 3px; }
  .paises .chev { align-self: center; }
  .cab { grid-template-columns: auto 1fr; align-items: baseline; gap: 16px; }
  .vp-h .h-cab { grid-template-columns: minmax(0, 1fr) 168px; }
  .vp-h .hoja { padding: 28px; }
}
@media screen and (min-width: 1000px) {
  .faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
  .faq .cab { padding-bottom: 0; display: block; }
  .fr-v { height: 300px; }
}
@media print {
  .home > header, .home > footer, .home main > :not(.resultado) { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .r2 * { animation: none !important; transition: none !important; } }

/* El visor exporta 29 columnas; la vista previa muestra las que caben (A, C, E y U, como en la hoja real) */
.r2 .xl tr > :nth-child(3), .r2 .xl tr > :nth-child(6), .r2 .xl tr > :nth-child(7) { display: none; }
.r2 .xl { width: 100%; table-layout: auto; }
.r2 .xl { table-layout: fixed; }
.r2 .xl .letras th:nth-child(1), .r2 .xl .xl-t th:nth-child(1), .r2 .xl th.n { width: 28px; }
.r2 .xl .letras th:nth-child(2) { width: 33%; }
.r2 .xl .letras th:nth-child(4) { width: 25%; }
.r2 .xl .letras th:nth-child(5) { width: 24%; }
.r2 .xl td, .r2 .xl .xl-t th { overflow: hidden; text-overflow: ellipsis; }

.r2 .hero-in, .r2 .stage-in { grid-template-columns: minmax(0, 1fr); }
.vp-cap a { display: inline-block; padding: 13px 2px; margin: -13px -2px; }
.r2 .st-izq, .r2 .st-der, .r2 .hero-l, .r2 .hero-t { min-width: 0; }
.r2 .vp, .r2 .vp-pila { grid-template-columns: minmax(0, 1fr); }
.r2 .zo-ej[hidden] { display: inline-flex !important; visibility: hidden; }


/* ===== a2-1: sutil. Superficie tintada, tarjeta de producto con la sombra de Stripe, país por pestañas ===== */
.v1 .hero { background: var(--sup); border-bottom: 1px solid var(--border); padding: 40px 0 56px; overflow-x: clip; }
.v1 .hero-in { display: grid; gap: 36px; align-items: start; }
.v1 .hero-l { align-self: center; }
.v1 .h1 { font-size: 34px; }
.v1 .zo { box-shadow: 0 1px 2px rgba(0, 0, 0, .05); margin-top: 28px; }
.v1 .zo-b { margin-top: 4px; }
.v1 .vp-xls { display: none; }
.v1 .vp { gap: 16px; }
@media screen and (min-width: 1000px) {
  .v1 .hero { padding: 72px 0 88px; }
  .v1 .hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; }
  .v1 .h1 { font-size: 44px; line-height: 1.06; }
  .v1 .zo { padding: 28px; }
}

/* Marca «AbrirXML» en la cabecera de todas las páginas (en la portada el mismo estilo lo da .r2) */
.v-marca { font-size: 18px; }
.v-marca .nom b { color: var(--acento); font-weight: 600; }