/* Bella Vida — Facturación electrónica (prototipo visual).
   Depende de tokens.css y app.css. Cargar después de app.css. */

.mt-6 { margin-top: 6px; }

/* ---------- accesos rápidos ---------- */
.fact-accesos {
  margin-top: 16px;
  display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.fact-acceso {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 13px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m);
  background: var(--app-card, #FFF); text-align: left; cursor: pointer;
  transition: border-color var(--bv-transicion), box-shadow var(--bv-transicion), transform var(--bv-transicion);
}
.fact-acceso:hover { border-color: var(--bv-verde); box-shadow: 0 10px 22px -18px rgba(26, 24, 20, .7); transform: translateY(-1px); }
.fact-acceso:focus-visible { outline: 2px solid var(--bv-verde); outline-offset: 2px; }
.fact-acceso.es-inactivo { cursor: default; opacity: .58; }
.fact-acceso.es-inactivo:hover { border-color: var(--bv-borde); box-shadow: none; transform: none; }
.fact-acceso-icono {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--bv-radio-s); background: var(--bv-ok-bg); color: var(--bv-verde-profundo);
}
.fact-acceso-icono svg { width: 18px; height: 18px; }
.fact-acceso-txt { min-width: 0; }
.fact-acceso-txt strong { display: block; color: var(--bv-tinta); font-size: 12.5px; font-weight: 600; }
.fact-acceso-txt span { display: block; margin-top: 2px; color: var(--bv-gris); font-size: 10.5px; line-height: 1.4; }

/* ---------- bloques de formulario ---------- */
.fact-bloque-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--app-muted, var(--bv-borde));
}
.fact-etiqueta { color: var(--bv-gris-claro); font-size: 10.5px; line-height: 1.4; text-align: right; }
.fact-bloque-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.fact-bloque .campo input[readonly] { background: #F6F4EE; color: var(--bv-gris); cursor: default; }
.fact-bloque .campo input[readonly].es-lleno { background: #F1F7EF; color: var(--bv-tinta); font-weight: 600; }

.fact-ruc { display: flex; align-items: center; gap: 6px; }
.fact-ruc .input { flex: 1 1 auto; min-width: 0; height: 46px; }
.fact-ruc-sep { color: var(--bv-gris-claro); font-weight: 700; }
.fact-ruc .fact-dv { flex: 0 0 52px; width: 52px; text-align: center; }
.fact-ruc .btn-tabla { flex: none; height: 46px; }

.fact-span-check { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fact-check { display: inline-flex; align-items: center; gap: 5px; color: var(--bv-gris); font-size: 11px; font-weight: 500; }
.fact-check input { width: 15px; height: 15px; }

.fact-grid-cab { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact-grid-cab .ancho-2 { grid-column: span 2; }
.fact-grid-contrib { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact-grid-contrib .ancho-2 { grid-column: span 2; }

.fact-busca-ruc { display: flex; align-items: center; gap: 6px; }
.fact-busca-ruc .input { flex: 1 1 auto; min-width: 0; height: 46px; }
.fact-cdc { font-variant-numeric: tabular-nums; letter-spacing: .04em; font-size: 11.5px !important; }

.btn-icono {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--bv-verde); border-radius: var(--bv-radio-s);
  background: var(--bv-verde); color: #FFF; cursor: pointer;
}
.btn-icono svg { width: 17px; height: 17px; }
.btn-icono:hover { background: var(--bv-verde-profundo); }
.btn-icono.peligro { width: 34px; height: 34px; border-color: var(--bv-borde); background: #FFF; color: var(--bv-error); font-size: 13px; }
.btn-icono.peligro:hover { border-color: var(--bv-error); background: var(--bv-error-bg); }

/* ---------- bloque de autocompletado ---------- */
.fact-auto-ficha {
  margin-top: 14px; padding: 13px; border: 1px dashed #A9C9A4; border-radius: var(--bv-radio-m);
  background: linear-gradient(180deg, #F3F9F1, #FFF);
}
.fact-auto-titulo { display: flex; align-items: center; gap: 8px; color: var(--bv-verde-profundo); font-size: 11.5px; font-weight: 600; }
.fact-auto-badge {
  padding: 2px 8px; border-radius: 999px; background: var(--bv-verde); color: #FFF;
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.fact-vacio-contrib {
  margin-top: 14px; padding: 16px; border: 1px dashed var(--bv-borde); border-radius: var(--bv-radio-m);
  color: var(--bv-gris); font-size: 12px; text-align: center; line-height: 1.55;
}
@keyframes fact-destello {
  0% { box-shadow: 0 0 0 0 rgba(46, 98, 49, .38); background: #E6F0E4; }
  100% { box-shadow: 0 0 0 10px rgba(46, 98, 49, 0); }
}
.es-auto { animation: fact-destello 1.5s ease-out 2; }

/* ---------- tablas de ítems y pagos ---------- */
.fact-tabla-items .input, .fact-tabla-items .select,
.fact-tabla-pagos .input, .fact-tabla-pagos .select { width: 100%; height: 36px; font-size: 12px; }
.fact-tabla-items td, .fact-tabla-pagos td { vertical-align: top; }
.fact-tabla-items .fact-item-cod { display: flex; gap: 6px; }
.fact-tabla-items .fact-cod { flex: 0 0 78px; width: 78px; }
.fact-tabla-items { min-width: 940px; }
.fact-tabla-items thead th:nth-child(1) { width: 27%; }
.fact-tabla-items thead th:nth-child(2) { width: 21%; }
.fact-tabla-items thead th:nth-child(3) { width: 108px; }
.fact-tabla-items thead th:nth-child(4) { width: 96px; text-align: right; }
.fact-tabla-items thead th:nth-child(5) { width: 124px; text-align: right; }
.fact-tabla-items thead th:nth-child(6) { width: 116px; text-align: right; }
.fact-tabla-items thead th:nth-child(7) { width: 46px; }
.fact-tabla-items .select { min-width: 96px; }
.fact-tabla-pagos thead th:last-child { width: 46px; }
.fact-tabla-items .num input { text-align: right; }
.data-table input.num, .data-table .num input { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- totales ---------- */
.fact-totales { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.fact-total-caja {
  padding: 11px 13px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: #FCFBF7;
}
.fact-total-caja span { display: block; color: var(--bv-gris-claro); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fact-total-caja strong {
  display: block; margin-top: 5px; color: var(--bv-verde-profundo);
  font-family: var(--bv-serif); font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums;
}
.fact-total-caja .input { margin-top: 5px; width: 100%; height: 38px; }
.fact-liquidacion { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--bv-gris); font-size: 11.5px; }
.fact-liquidacion strong { color: var(--bv-tinta); font-variant-numeric: tabular-nums; }

/* ---------- línea de tiempo del documento ---------- */
.fact-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.fact-timeline li { display: flex; align-items: flex-start; gap: 10px; }
.fact-timeline-canal {
  flex: none; min-width: 84px; padding: 3px 8px; border-radius: 999px;
  background: var(--bv-neutro-bg); color: var(--bv-tinta-suave);
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-align: center; text-transform: uppercase;
}
.fact-timeline strong { display: block; color: var(--bv-tinta); font-size: 12px; }
.fact-timeline span { display: block; margin-top: 2px; color: var(--bv-gris-claro); font-size: 10.5px; }
.fact-timeline-vacio { color: var(--bv-gris-claro); font-size: 12px; }

/* ---------- barra de acciones ---------- */
.fact-barra-acciones { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fact-barra-izq, .fact-barra-der { display: flex; gap: 7px; flex-wrap: wrap; }
.fact-barra-der { justify-content: flex-end; }
.fact-acciones-pie { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fact-acciones-der { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }

/* ============================================================
   KuDE — representación gráfica de la factura electrónica
   ============================================================ */
.kude-hoja { display: flex; justify-content: center; }
.kude {
  width: 100%; max-width: 820px; padding: 18px 20px 22px;
  border: 1px solid #C9C4B6; border-radius: 3px; background: #FFF; color: #16150F;
  font-family: Arial, Helvetica, sans-serif; font-size: 10.5px; line-height: 1.35;
  box-shadow: 0 20px 48px -30px rgba(26, 24, 20, .6);
}
.kude-titulo { margin: 0 0 8px; font-size: 13px; font-weight: 700; text-align: center; }
.kude-cab { display: grid; grid-template-columns: 96px 1fr 210px; border: 1px solid #16150F; }
.kude-marca { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 6px; border-right: 1px solid #16150F; text-align: center; }
.kude-marca img { display: block; }
.kude-marca span { font-family: var(--bv-serif), Georgia, serif; font-size: 11px; letter-spacing: .06em; }
.kude-marca small { font-size: 5.5px; letter-spacing: .14em; color: #55524A; }
.kude-emisor { padding: 7px 9px; border-right: 1px solid #16150F; }
.kude-emisor strong { font-size: 10.5px; }
.kude-emisor p { margin: 2px 0 4px; font-size: 9px; line-height: 1.35; }
.kude-emisor ul { margin: 0; padding-left: 12px; font-size: 8.5px; line-height: 1.35; color: #33312B; }
.kude-fiscal { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; font-size: 9.5px; }
.kude-fiscal .kude-tipo { margin-top: 4px; font-size: 11.5px; font-weight: 700; }
.kude-fiscal .kude-nro { font-size: 11.5px; font-weight: 700; }

.kude-datos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px 14px;
  margin-top: 7px; padding: 7px 9px; border: 1px solid #16150F; font-size: 9.5px;
}
.kude-datos span { color: #46443C; }

.kude-items { width: 100%; margin-top: 7px; border-collapse: collapse; font-size: 9px; }
.kude-items th, .kude-items td { border: 1px solid #16150F; padding: 3px 4px; }
.kude-items th { font-size: 8.5px; font-weight: 700; text-align: center; background: #F5F3ED; }
.kude-items td { vertical-align: top; }
.kude-items .num { text-align: right; font-variant-numeric: tabular-nums; }
.kude-items .kude-desc { min-width: 200px; }
.kude-items .kude-relleno td { height: 15px; border-top: 0; border-bottom: 0; }
.kude-items tbody tr:last-child td { border-bottom: 1px solid #16150F; }

.kude-cierre { width: 100%; border-collapse: collapse; font-size: 9px; }
.kude-cierre td { border: 1px solid #16150F; border-top: 0; padding: 3px 5px; }
.kude-cierre .kude-cierre-rot { font-weight: 700; width: 42%; }
.kude-cierre .num { text-align: right; font-variant-numeric: tabular-nums; }
.kude-letras, .kude-iva { font-weight: 700; }

.kude-pie { display: flex; gap: 12px; margin-top: 8px; }
/* S5 · EL TAMAÑO DEL QR NO ES DECORATIVO, ES NORMATIVO.
   Manual Técnico 13.8.1: «La imagen impresa del QR debe tener mínimamente
   25 mm de ancho, de los cuales 22 mm son para el contenido y 3 mm de margen
   seguro». Los 96 px que había acá son 25,4 mm justos — el mínimo — y con la
   cadena del SIFEN, que son unos 400 caracteres y da un símbolo de 69×69, cada
   módulo quedaba en 0,32 mm: por debajo de lo que un lector agarra. Se imprime
   a 34 mm, que el manual autoriza expresamente («queda a criterio del emisor
   si desea un tamaño mayor»), y así cada módulo ronda los 0,39 mm.
   En milímetros y no en píxeles, porque lo que importa es el papel. */
.kude-pie .fact-qr { flex: none; width: 34mm; height: 34mm; border: 1px solid #16150F; }
/* En pantalla hace falta bastante más que en el papel. Medido contra un lector
   de verdad, la cadena del SIFEN da un símbolo de 69×69 que necesita unos 4 px
   por módulo para que lo agarre; por debajo de eso se ve perfecto y no sirve,
   que es la peor combinación posible. 348 px son esos 4 px por módulo con la
   zona de silencio incluida. */
@media screen { .kude-pie .fact-qr { width: 348px; height: 348px; } }
.kude-pie-texto { flex: 1; min-width: 0; font-size: 8.5px; line-height: 1.4; }
.kude-pie-texto p { margin: 0 0 4px; }
.kude-cdc { font-size: 11px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.kude-nota { color: #46443C; }
.kude-firmas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.kude-firmas span { border-top: 1px solid #16150F; padding-top: 3px; font-size: 8.5px; text-align: center; }
.kude-demo { margin-top: 12px; color: #8B867C; font-size: 8.5px; text-align: center; letter-spacing: .06em; text-transform: uppercase; }

/* S5 · El sello de situación fiscal. A diferencia de `.kude-demo`, que es una
   nota de pantalla y se oculta al imprimir, ESTO SE IMPRIME: si el documento
   salió del ambiente de prueba, o todavía no es un DTE, el papel tiene que
   decirlo — es justamente lo que no puede quedar sólo en la pantalla. */
.kude-sello { margin-top: 12px; padding: 6px 10px; border-radius: 4px; font-size: 9px;
  text-align: center; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
.kude-sello-ok { background: #EAF4EA; color: #2C5E2E; border: 1px solid #A9CBA8; }
.kude-sello-aviso { background: #FDF4E3; color: #6B4E12; border: 1px solid #E0C88B; }
.kude-sello-mal { background: #FBEAEA; color: #7A2222; border: 1px solid #DDA6A6; }

/* Sin QR no se dibuja un QR: se dice por qué falta. */
.fact-qr-vacio { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border: 1px dashed #B9B3A6 !important; background: #FAF8F3; text-align: center; padding: 4px; }
.fact-qr-vacio span { font-size: 10px; font-weight: 700; color: #8B867C; }
.fact-qr-vacio small { font-size: 7px; line-height: 1.2; color: #A09A8D; }

/* Los motivos que devolvió la SET, todos. */
.fact-motivos h3 { margin: 0 0 8px; font-size: 14px; }
.fact-motivos ul { margin: 0; padding-left: 18px; }
.fact-motivos li { margin-bottom: 4px; }
.fact-motivos code { background: var(--app-fondo, #F2EFE8); color: #1C3D22; padding: 1px 5px; border-radius: 3px; font-size: 12px; font-weight: 600; }
.fact-motivos-pie { margin: 8px 0 0; font-size: 11px; color: var(--app-texto-suave, #6B6658); word-break: break-all; }

/* ---------- modo oscuro ---------- */
[data-theme="dark"] .fact-acceso,
[data-theme="dark"] .fact-total-caja { background: var(--app-card); border-color: var(--app-borde, var(--bv-borde)); }
[data-theme="dark"] .fact-acceso-txt strong,
[data-theme="dark"] .fact-total-caja strong { color: var(--bv-marfil); }
[data-theme="dark"] .fact-bloque .campo input[readonly] { background: #1b2922; color: #B9C4B6; }
[data-theme="dark"] .fact-bloque .campo input[readonly].es-lleno { background: #22352a; color: #EAF2E6; }
[data-theme="dark"] .fact-auto-ficha { background: #1b2922; border-color: #3d5c40; }
[data-theme="dark"] .fact-auto-titulo { color: #9ED49B; }
[data-theme="dark"] .fact-vacio-contrib { color: var(--bv-gris-claro); }
[data-theme="dark"] .btn-icono.peligro { background: transparent; }
[data-theme="dark"] .kude { color: #16150F; }

/* ---------- correcciones globales de modo oscuro ----------
   Se cargan aquí porque este archivo va después de app.css.
   Afectan a toda la plataforma (eran ilegibles en modo oscuro). */
[data-theme="dark"] .aviso-ok { background: #1b2922; border-color: #3d5c40; color: #C8E3C4; }
[data-theme="dark"] .segmented button.es-activo { background-color: var(--bv-verde); color: var(--bv-marfil); }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .fact-grid-cab, .fact-grid-contrib { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .fact-grid-cab, .fact-grid-contrib { grid-template-columns: 1fr; }
  .fact-grid-cab .ancho-2, .fact-grid-contrib .ancho-2 { grid-column: span 1; }
  .fact-etiqueta { text-align: left; }
  .fact-barra-der, .fact-acciones-der { width: 100%; }
  .table-wrap.apilable .fact-tabla-items td,
  .table-wrap.apilable .fact-tabla-pagos td { flex-wrap: wrap; }
  .table-wrap.apilable .fact-tabla-items td > .input,
  .table-wrap.apilable .fact-tabla-items td > .select,
  .table-wrap.apilable .fact-tabla-pagos td > .input,
  .table-wrap.apilable .fact-tabla-pagos td > .select { flex: 1 1 60%; }
  .table-wrap.apilable .fact-item-cod { flex: 1 1 100%; }
  .table-wrap.apilable .fact-tabla-items td > .input.mt-6 { flex: 1 1 100%; margin-top: 6px; }
  .kude-cab { grid-template-columns: 1fr; }
  .kude-marca, .kude-emisor { border-right: 0; border-bottom: 1px solid #16150F; }
  .kude-datos { grid-template-columns: 1fr; }
  .kude { padding: 12px; font-size: 9.5px; }
}

/* ---------- impresión: solo el KuDE ---------- */
@media print {
  .fact-accesos, .fact-barra-acciones { display: none !important; }
  .kude-hoja { display: block; }
  .kude { max-width: none; border: 0; box-shadow: none; padding: 0; }
  .kude-demo { display: none; }
}

[data-theme="dark"] .fact-acceso-icono { background: #22352a; color: #9ED49B; }

/* diferencia entre el total general y la suma de las formas de pago */
.fact-total-caja.es-error { border-color: var(--bv-error-borde); background: var(--bv-error-bg); }
.fact-total-caja.es-error span { color: var(--bv-error-texto); }
.fact-total-caja.es-error strong { color: var(--bv-error); }

/* 0065 · el tipo de cambio del BCP debajo de la moneda, y la regla fija del rubro */
.fact-cambio-nota { display: block; margin-top: 5px; color: var(--bv-gris-claro); font-size: 10.5px; line-height: 1.45; }
.fact-cambio-nota.es-aviso { color: var(--bv-error-texto, #8A3B12); }
.fact-rubro-fijo { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--app-fondo, #F2EFE8); color: #46443C; font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.kude-cambio-fecha { color: #46443C; font-size: 10px; }