/* Demo 8 · Facturas e impuestos · prefijo df- (las piezas de chat y de app vienen de agentes.css y _base.css) */
.df-area{ position:relative; flex:1; min-width:0; }
/* Vistas de la app, una encima de otra: cuando sale una, la anterior se esconde */
.df-vista{ position:absolute; inset:0; padding:14px 18px 12px; display:flex; flex-direction:column; gap:9px; background:#fff; overflow:hidden; }
.df-vista:has(~ .df-vista:not(.off)){ display:none; }

.df-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.df-cab b{ display:block; margin-top:2px; font-size:17px; font-weight:600; letter-spacing:-.015em; }
.df-btn{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:7px; background:var(--tinta); color:#fff; font-size:12px; font-weight:500; }
.df-btn .ico{ width:13px; height:13px; }
.df-resumen{ margin:0; font-size:12px; color:var(--tinta-60); }

/* Estado de la factura: borrador → emitida */
.df-estado{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px; background:var(--nieve-2); color:var(--tinta-60); font-size:11.5px; font-weight:500; transition:background .4s, color .4s; }
.df-estado i{ width:7px; height:7px; border-radius:50%; background:var(--tinta-30); }
.df-est-e{ display:none; }
.df-estado.emitida{ background:var(--verde-agua); color:var(--verde-osc); }
.df-estado.emitida i{ background:var(--verde); }
.df-estado.emitida .df-est-b{ display:none; }
.df-estado.emitida .df-est-e{ display:inline; }

/* De · Para · Fechas */
.df-partes{ display:grid; grid-template-columns:1fr 1.25fr .62fr; gap:14px; padding:9px 12px; border-radius:9px; background:var(--nieve); }
.df-partes b{ display:block; margin-top:3px; font-size:12.2px; font-weight:600; line-height:1.3; border-radius:4px; }
.df-partes em{ display:block; font-style:normal; font-size:10.6px; line-height:1.34; color:var(--tinta-60); border-radius:4px; }
.df-fechas b{ margin:2px 0 5px; font-size:12px; }

/* Líneas de la factura */
.df-lineas{ width:100%; border-collapse:collapse; font-size:12px; }
.df-lineas th{ text-align:left; font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-45); padding:0 6px 6px; border-bottom:1px solid var(--linea); }
.df-lineas td{ padding:7px 6px; border-bottom:1px solid var(--linea); vertical-align:top; color:var(--tinta-80); }
.df-lineas th:nth-child(n+2), .df-lineas td:nth-child(n+2){ text-align:right; white-space:nowrap; }
.df-lineas td:first-child{ width:62%; }
.df-lineas td b{ display:block; font-weight:500; line-height:1.36; color:var(--tinta); }
.df-cat{ display:inline-flex; align-items:center; gap:4px; margin-top:3px; padding:2px 8px 2px 6px; border-radius:999px; background:var(--verde-agua); color:var(--verde-osc); font-size:10.2px; font-weight:500; }
.df-cat .ico{ width:11px; height:11px; }

/* Totales */
.df-abajo{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.df-iva-nota{ margin:4px 0 0; max-width:230px; font-size:11px; line-height:1.45; color:var(--tinta-60); }
.df-totales{ width:238px; flex:none; display:flex; flex-direction:column; }
.df-totales > div{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid var(--linea); font-size:12.2px; color:var(--tinta-60); }
.df-totales b{ font-weight:500; color:var(--tinta); border-radius:4px; text-align:right; }
.df-total{ border-bottom:0 !important; padding-top:6px !important; font-size:13.5px !important; color:var(--tinta) !important; font-weight:600; }
.df-total b{ font-size:17px; font-weight:600; letter-spacing:-.015em; }

/* Verifactu y botón de crear */
.df-pie{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:9px; border-top:1px solid var(--linea); }
.df-vf{ display:flex; align-items:center; gap:10px; }
.df-qr{ width:34px; height:34px; flex:none; border-radius:4px; border:3px solid #fff; box-shadow:0 0 0 1px var(--linea);
  background:
    linear-gradient(#0a0a0a,#0a0a0a) 0 0/11px 11px no-repeat, linear-gradient(#0a0a0a,#0a0a0a) 100% 0/11px 11px no-repeat, linear-gradient(#0a0a0a,#0a0a0a) 0 100%/11px 11px no-repeat,
    repeating-linear-gradient(90deg, #0a0a0a 0 3px, transparent 3px 6px), repeating-linear-gradient(0deg, transparent 0 3px, #fff 3px 5px); }
.df-vf b{ display:block; font-size:12px; font-weight:600; }
.df-vf em{ display:block; font-style:normal; font-size:10.5px; color:var(--tinta-60); }
.df-crear{ display:inline-flex; align-items:center; height:32px; padding:0 16px; border-radius:8px; background:var(--tinta); color:#fff; font-size:12.8px; font-weight:500; transition:background .35s, color .35s; }
.df-crear-b{ display:none; align-items:center; gap:6px; }
.df-crear-b .ico{ width:13px; height:13px; stroke-width:2.6; }
.df-crear.hecha{ background:var(--verde); color:var(--tinta); }
.df-crear.hecha .df-crear-a{ display:none; }
.df-crear.hecha .df-crear-b{ display:inline-flex; }

/* Lista de facturas del mes */
.df-tabla{ width:100%; border-collapse:collapse; font-size:12px; }
.df-tabla th{ text-align:left; font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-45); padding:0 6px 7px; border-bottom:1px solid var(--linea); }
.df-tabla td{ padding:10px 6px; border-bottom:1px solid var(--linea); color:var(--tinta-80); white-space:nowrap; }
.df-tabla td:nth-child(2){ white-space:normal; max-width:190px; color:var(--tinta); font-weight:500; }
.df-tabla td:nth-child(4){ text-align:right; font-weight:500; color:var(--tinta); }
.df-tabla th:nth-child(4){ text-align:right; }
.df-nueva-fila td{ background:var(--verde-agua); }
.df-nueva-fila td:first-child{ box-shadow:inset 3px 0 0 var(--verde); }
.df-lista1 .df-nueva-fila td{ animation:destello 1.6s ease-out; }
.df-pill{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:10.8px; font-weight:500; }
.df-pill.ok{ background:var(--verde-agua); color:var(--verde-osc); }
.df-pill.pen{ background:var(--ambar-fondo); color:var(--ambar); }
.df-pill.nueva{ background:var(--tinta); color:#fff; }

/* Finanzas y contabilidad */
.df-aldia{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500; color:var(--verde-osc); background:var(--verde-agua); padding:4px 10px; border-radius:999px; }
.df-aldia .ico{ width:12px; height:12px; stroke-width:2.6; }
.df-kpis{ display:grid; grid-template-columns:1.25fr 1fr; gap:10px; }
.df-kpi{ display:flex; flex-direction:column; gap:3px; padding:11px 14px; border:1px solid var(--linea); border-radius:10px; }
.df-kpi > span{ font-size:11.5px; color:var(--tinta-60); }
.df-kpi b{ font-size:27px; font-weight:500; letter-spacing:-.03em; line-height:1.1; border-radius:5px; width:fit-content; }
.df-kpi em{ font-style:normal; font-size:11.2px; color:var(--verde-osc); font-weight:500; }
.df-kpi:nth-child(2) em{ color:var(--tinta-45); font-weight:400; }
.df-graf{ display:flex; flex-direction:column; gap:6px; }
.df-barras{ display:flex; align-items:flex-end; gap:12px; height:86px; padding:0 2px; }
.df-bar{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; }
.df-bar i{ display:block; width:100%; height:calc(var(--h) * .78); border-radius:4px 4px 2px 2px; background:var(--nieve-2); }
.df-bar em{ font-style:normal; font-size:10px; color:var(--tinta-45); }
.df-bar-hoy i{ height:calc(var(--h0) * .78); background:var(--verde); transition:height 1.1s cubic-bezier(.16,1,.3,1); }
.df-bar-hoy.sube i{ height:calc(var(--h) * .78); }
.df-bar-hoy em{ color:var(--tinta); font-weight:600; }
.df-hucha{ display:flex; flex-direction:column; padding:11px 14px 9px; border-radius:10px; background:var(--nieve); }
.df-hucha-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:4px; }
.df-hucha-cab em{ font-style:normal; font-size:11px; color:var(--tinta-45); }
.df-h-fila{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; border-top:1px solid var(--linea); }
.df-h-fila span b{ display:block; font-size:12.6px; font-weight:600; }
.df-h-fila span em{ display:block; font-style:normal; font-size:10.8px; color:var(--tinta-60); }
.df-h-fila > b{ font-size:18px; font-weight:600; letter-spacing:-.02em; border-radius:5px; white-space:nowrap; }
.df-h-sin{ display:flex; align-items:center; gap:6px; margin:-2px 0 6px; font-size:11.2px; font-weight:500; color:var(--verde-osc); }
.df-h-sin .ico{ width:12px; height:12px; stroke-width:2.6; }
.df-h-nota{ margin:2px 0 0; font-size:10.6px; color:var(--tinta-45); }