/* ==========================================================
   Granate Presupuestos — hoja de estilos
   Diseño limpio, blanco, con los colores de Granate Directo.
   Mobile first.
   ========================================================== */

/* ---------- Tipografía (Poppins, incluida en assets/fuentes) ---------- */
@font-face{font-family:"Poppins";src:url("fuentes/poppins-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fuentes/poppins-500.woff2") format("woff2");
  font-weight:500 650;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fuentes/poppins-700.woff2") format("woff2");
  font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --granate:#8e1b34;
  --granate-osc:#6d1526;
  --granate-claro:#b93552;
  --granate-suave:#fdf2f4;
  --granate-borde:#f0c9d2;
  --granate-rgb:142,27,52;
  --sobre-granate:#fff;
  /* Con la que se escribe: el color de la empresa, bajado de tono si hace falta
     para que se lea sobre fondo claro. Lo calcula includes/empresas.php. */
  --granate-tinta:#8e1b34;
  --acento-tinta:#90661d;
  --acento:#efa92f;
  --acento-osc:#c98708;
  --acento-suave:#fdf3de;
  --sobre-acento:#3b2500;
  --negro:#141414;
  --texto:#20232a;
  --texto-suave:#6b7280;
  --borde:#e5e7eb;
  --borde-fuerte:#d3d7de;
  --fondo:#f6f7f9;
  --blanco:#fff;
  --verde:#15803d;
  --verde-bg:#e8f6ed;
  --ambar:#a16207;
  --ambar-bg:#fef6e3;
  --rojo:#b91c1c;
  --rojo-bg:#fdecec;
  --azul:#1d4ed8;
  --azul-bg:#eaf0fe;
  --gris:#55606f;
  --gris-bg:#eef0f3;
  --radio:12px;
  --tabs-h:0px;
  --sombra:0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.06);
  --sombra-fuerte:0 10px 30px rgba(16,24,40,.12);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Al saltar a un ancla, que no lo tape la cabecera pegada */
[id]{scroll-margin-top:78px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
a,button,summary,label,input,select,textarea{-webkit-tap-highlight-color:rgba(142,27,52,.10)}
body{
  margin:0;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--fondo);
  color:var(--texto);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--granate-tinta);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .6rem;line-height:1.25;font-weight:650;letter-spacing:-.01em}
h1{font-size:1.4rem}
h2{font-size:1.15rem}
h3{font-size:1rem}
p{margin:0 0 .8rem}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:50;
  background:var(--blanco);
  border-bottom:1px solid var(--borde);
}
.cabecera-in{
  max-width:1180px;margin:0 auto;padding:.6rem 1rem;
  display:flex;align-items:center;gap:.75rem;
}
.marca{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--negro);
  letter-spacing:-.02em;min-width:0;flex:0 1 auto;overflow:hidden}
.marca:hover{text-decoration:none}
.marca-logotipo{height:30px;width:auto;display:block;flex:0 0 auto}
.marca-logo-emp{height:32px;width:auto;max-width:190px;display:block;object-fit:contain;flex:0 0 auto}
.marca-sub{
  font-size:.72rem;font-weight:600;color:var(--texto-suave);letter-spacing:.02em;
  border-left:1px solid var(--borde-fuerte);padding-left:.6rem;margin-left:.1rem;
}
.cabecera-sp{flex:1 1 0;min-width:0}
.usuario-chip{
  display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--texto-suave);
}
.avatar{
  width:32px;height:32px;border-radius:50%;background:var(--granate-suave);
  color:var(--granate-tinta);display:grid;place-items:center;font-weight:700;font-size:.8rem;
  border:1px solid var(--granate-borde);
}
.menu-btn{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;
  border:1px solid var(--borde);background:#fff;cursor:pointer;
}
.menu-btn span{display:block;width:18px;height:2px;background:var(--negro);position:relative}
.menu-btn span::before,.menu-btn span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--negro)
}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}

@media (max-width:719px){
  .cabecera-in{gap:.45rem;padding:.5rem .7rem}
  .marca-logotipo{height:24px}
  .marca-sub{font-size:.66rem;padding-left:.45rem;
    max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cambia-empresa .emp-siglas{display:none}
  .usuario-chip{gap:.3rem}
  .avatar{width:28px;height:28px;font-size:.72rem}
  .cabecera-in .btn-fant.btn-peq{padding:.3rem .45rem;min-height:30px;font-size:.8rem}
}

/* ---------- Navegación ---------- */
.nav{background:var(--blanco);border-bottom:1px solid var(--borde)}
/* El menú **se dobla, no se esconde**. Antes rodaba de lado con la barra de
   scroll quitada, así que en una tablet —y hasta en un monitor grande, porque
   la caja no pasa de 1180px— las últimas entradas quedaban cortadas y no había
   manera de saber que estaban ahí. Ahora pasan a una segunda línea y se ven
   todas, que es lo que importa de un menú. */
.nav-in{
  max-width:1180px;margin:0 auto;padding:0 1rem;
  display:flex;gap:.25rem;flex-wrap:wrap;align-items:flex-end;
}
.nav a{
  padding:.7rem .85rem;font-size:.92rem;color:var(--texto-suave);white-space:nowrap;
  border-bottom:2px solid transparent;font-weight:550;
}
/* En pantallas justas, las entradas se aprietan un poco antes de doblarse */
@media (max-width:980px){
  .nav a{padding:.6rem .6rem;font-size:.88rem}
}
.nav a:hover{color:var(--negro);text-decoration:none}
.nav a.activo{color:var(--granate-tinta);border-bottom-color:var(--granate-tinta)}
.pastilla{
  background:var(--granate);color:var(--sobre-granate);border-radius:99px;padding:.05rem .4rem;
  font-size:.72rem;margin-left:.3rem;font-weight:700;vertical-align:1px;
}
/* La de Eliminados no pide nada: solo dice cuántos hay guardados */
.pastilla.gris{background:#8a8f98;color:#fff;font-weight:600}

/* ---------- Contenedor ---------- */
.contenedor{max-width:1180px;margin:0 auto;padding:1rem 1rem 5rem}
.cabecera-pag{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.cabecera-pag h1{margin:0}
.cabecera-pag .sub{color:var(--texto-suave);font-size:.9rem;margin-top:.15rem}
.cabecera-pag .acciones{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}

/* ---------- Tarjetas ---------- */
.tarjeta{
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
  box-shadow:var(--sombra);margin-bottom:1rem;overflow:hidden;
}
.tarjeta-cab{
  padding:.85rem 1rem;border-bottom:1px solid var(--borde);
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.tarjeta-cab h2,.tarjeta-cab h3{margin:0;font-size:1rem}
.tarjeta-cuerpo{padding:1rem}
.tarjeta-pie{padding:.85rem 1rem;border-top:1px solid var(--borde);background:#fafbfc}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.6rem 1rem;border-radius:10px;border:1px solid var(--borde-fuerte);
  background:var(--blanco);color:var(--texto);font-size:.92rem;font-weight:600;
  cursor:pointer;text-decoration:none;line-height:1.2;min-height:42px;
  transition:background .15s,border-color .15s,transform .05s;
}
.btn:hover{text-decoration:none;background:#f8f9fa}
.btn:active{transform:translateY(1px)}
.btn-primario{background:var(--granate);border-color:var(--granate);color:var(--sobre-granate)}
.btn-primario:hover{background:var(--granate-osc);border-color:var(--granate-osc);color:var(--sobre-granate)}
.btn-verde{background:var(--verde);border-color:var(--verde);color:#fff}
/* Pendiente de cobro o de pago: ámbar, que se vea sin tener que leer */
.btn-amarillo{background:#fff5e0;border-color:#e0b24a;color:#7c5307;font-weight:700}
.btn-amarillo:hover{background:#ffeecd}
.btn-verde:hover{background:#12652f;border-color:#12652f}
.btn-facturar{background:var(--azul);border-color:var(--azul);color:#fff}
.btn-facturar:hover{background:#173db0;border-color:#173db0}
.btn-realizar{
  background:var(--acento);border-color:var(--acento-osc);color:var(--sobre-acento);
  font-weight:750;letter-spacing:.02em;box-shadow:0 2px 6px rgba(0,0,0,.16);
}
.btn-realizar:hover{background:var(--acento-osc);border-color:var(--acento-osc);color:var(--sobre-acento)}
.btn-rojo{background:#fff;border-color:#e6b8b8;color:var(--rojo)}
.btn-rojo:hover{background:var(--rojo-bg)}
.btn-fant{border-color:transparent;background:transparent;color:var(--texto-suave)}
.btn-fant:hover{background:#eef0f3}
.btn-peq{padding:.4rem .7rem;font-size:.85rem;min-height:34px;border-radius:8px}
.btn-bloque{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- Formularios ---------- */
.campo{margin-bottom:.9rem}
.campo label,.etq{display:block;font-size:.82rem;font-weight:600;color:var(--texto-suave);margin-bottom:.3rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=search],input[type=url],select,textarea{
  width:100%;padding:.62rem .7rem;border:1px solid var(--borde-fuerte);border-radius:10px;
  font-size:16px;font-family:inherit;background:#fff;color:var(--texto);
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--granate-claro);box-shadow:0 0 0 3px rgba(var(--granate-rgb),.18);
}
textarea{min-height:90px;resize:vertical}
select{appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right .55rem center;background-size:18px;padding-right:2rem;
}
.fila{display:grid;gap:.9rem}
.fila-2{grid-template-columns:1fr}
.fila-3{grid-template-columns:1fr}
.fila-4{grid-template-columns:1fr 1fr}
.fila-5{grid-template-columns:1fr 1fr}
.ayuda{font-size:.78rem;color:var(--texto-suave);margin-top:.25rem}
fieldset{border:0;padding:0;margin:0}

/* ---------- Avisos ---------- */
.aviso{
  padding:.75rem .9rem;border-radius:10px;margin-bottom:1rem;font-size:.9rem;
  border:1px solid var(--borde);background:var(--blanco);
}
.aviso.ok{background:var(--verde-bg);border-color:#bfe3cc;color:#14532d}
.aviso.error{background:var(--rojo-bg);border-color:#f3c9c9;color:#7f1d1d}
.aviso.info{background:#eef4ff;border-color:#cfdcfa;color:#1e3a8a}
.aviso.amarillo{background:#fff8e8;border-color:#ecd29a;color:#7c5307}
.kpi.azul .k-val{color:var(--azul)}

/* ---------- Badges ---------- */
.badge{
  display:inline-block;padding:.2rem .55rem;border-radius:99px;font-size:.76rem;font-weight:700;
  letter-spacing:.01em;white-space:nowrap;
}
.badge.gris{background:var(--gris-bg);color:var(--gris)}
.badge.ambar{background:var(--ambar-bg);color:var(--ambar)}
.badge.verde{background:var(--verde-bg);color:var(--verde)}
.badge.amarillo{background:#fff5e0;color:#7c5307}
.badge.rojo{background:var(--rojo-bg);color:var(--rojo)}
.badge.azul{background:var(--azul-bg);color:var(--azul)}
.badge.granate{background:var(--granate-suave);color:var(--granate-tinta)}
.badge-urgente{background:var(--granate);color:var(--sobre-granate)}

/* ---------- Tablas ---------- */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tabla{width:100%;border-collapse:collapse;font-size:.92rem}
table.tabla th{
  text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--texto-suave);padding:.6rem .75rem;border-bottom:1px solid var(--borde);white-space:nowrap;
}
table.tabla td{padding:.7rem .75rem;border-bottom:1px solid #f0f1f3;vertical-align:middle}
table.tabla tr:last-child td{border-bottom:0}
table.tabla tbody tr:hover{background:#fbfbfc}
.der{text-align:right}
.cen{text-align:center}
.mono{font-variant-numeric:tabular-nums}

/* ---------- Clientes: el número y la ficha ---------- */
/* El número de cliente, que es lo que se escribe para encontrarlo */
.cli-num{
  display:inline-block;padding:.05rem .4rem;border-radius:6px;
  background:var(--granate-suave);color:var(--granate-tinta);
  font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
td .cli-num{font-size:.85em}
/* Por qué ha salido este cliente al buscar: «se parece al nombre», «es el nº…» */
.cli-porque{
  display:inline-block;margin-left:.35rem;padding:.02rem .35rem;border-radius:5px;
  background:var(--gris-bg,#f1f3f5);color:var(--texto-suave);font-size:.72rem;
}
/* Los datos de contacto de la ficha, en dos columnas */
.datos-cli{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;margin:0}
.datos-cli dt{color:var(--texto-suave);font-size:.82rem;white-space:nowrap}
.datos-cli dd{margin:0;font-size:.92rem}
@media (max-width:520px){
  .datos-cli{grid-template-columns:1fr;gap:.1rem}
  .datos-cli dd{margin:0 0 .45rem}
}
/* Nombres de fichero, rutas y palabras largas: que corten de línea en vez de
   empujar la tarjeta y salirse de la pantalla en el móvil. */
code,kbd,samp{overflow-wrap:anywhere}
.num-pres{font-weight:700;color:var(--granate-tinta);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Lista de presupuestos en móvil ---------- */
.lista-movil{display:grid;gap:.7rem}
.item{
  display:block;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);
  padding:.85rem;box-shadow:var(--sombra);color:inherit;
}
.item:hover{text-decoration:none;border-color:var(--borde-fuerte)}
.item-cab{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}
.item-cliente{font-weight:650;margin-bottom:.15rem}
.item-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:.5rem;color:var(--texto-suave);font-size:.85rem}
.item-total{font-weight:700;color:var(--negro);font-size:1.02rem;font-variant-numeric:tabular-nums}

/* ---------- Resumen / KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem;margin-bottom:1rem}
.kpi{
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:.6rem .75rem;
  box-shadow:var(--sombra);
}
.kpi .k-etq{font-size:.7rem;color:var(--texto-suave);text-transform:uppercase;letter-spacing:.04em}
.kpi .k-val{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin-top:.1rem;font-variant-numeric:tabular-nums}
.kpi.destacado{border-color:var(--granate-borde);background:linear-gradient(180deg,#fff,var(--granate-suave))}
.kpi.destacado .k-val{color:var(--granate-tinta)}

/* ---------- Filtros ---------- */
.filtros{display:grid;gap:.6rem;grid-template-columns:1fr;margin-bottom:1rem}
.mas-filtros{display:grid;gap:.6rem}
.mas-filtros>summary{
  cursor:pointer;font-size:.85rem;font-weight:600;color:var(--texto-suave);
  padding:.5rem .2rem;list-style:none;
}
.mas-filtros>summary::-webkit-details-marker{display:none}
.mas-filtros>summary::before{content:"▸ ";font-size:.8em}
.mas-filtros[open]>summary::before{content:"▾ "}
/* Las filas de chips también se doblan en vez de cortarse: con la barra de
   scroll escondida, el que quedaba a medias en el borde parecía un fallo y
   nadie sabía que había más detrás. */
.chips{display:flex;gap:.4rem;flex-wrap:wrap;padding-bottom:.2rem}
.chip{
  padding:.42rem .8rem;border-radius:99px;border:1px solid var(--borde-fuerte);background:#fff;
  font-size:.85rem;font-weight:600;color:var(--texto-suave);white-space:nowrap;
}
.chip:hover{text-decoration:none;background:#f8f9fa}
.chip.activo{background:var(--granate);border-color:var(--granate);color:var(--sobre-granate)}

/* ---------- Editor de líneas ---------- */
.lineas{display:grid;gap:.7rem}
.linea{
  border:1px solid var(--borde);border-radius:var(--radio);padding:.75rem;background:#fff;
  position:relative;
}
.linea .linea-num{
  position:absolute;top:-9px;left:.75rem;background:var(--granate-suave);color:var(--granate-tinta);
  border:1px solid var(--granate-borde);border-radius:99px;font-size:.7rem;font-weight:700;padding:.05rem .5rem;
}
/* Línea con descuento: se nota a simple vista que lleva rebaja */
.linea.con-dto{border-color:#e3c489;background:#fffdf6}
.linea.con-dto .l-dto{border-color:#d9a441;background:#fff7e6;font-weight:700}
.linea .campo{margin-bottom:.6rem}
.linea-fila{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.linea-pie{display:flex;align-items:center;gap:.6rem;margin-top:.4rem}
.linea-importe{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.arrastrar{cursor:grab;color:var(--texto-suave);user-select:none;font-size:1.1rem;padding:.2rem .35rem}
.linea.arrastrando{opacity:.45;border-style:dashed}

/* ---------- Editor de medidas (proyectos) ---------- */
.medidas{display:grid;gap:.7rem}
.medida{
  border:1px solid var(--borde);border-radius:var(--radio);padding:.75rem;background:#fff;
}
.medida .campo{margin-bottom:.6rem}
.medida .m-m2{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-weight:700;font-variant-numeric:tabular-nums;
}
.medida .m-m2 .m2v::after{content:" m²";font-weight:600;color:var(--texto-suave);font-size:.8rem}
.medida .m-acc{display:flex;gap:.3rem;margin-top:.5rem}
.mini{
  border:1px solid var(--borde);background:#fff;border-radius:8px;cursor:pointer;
  width:32px;height:32px;line-height:1;font-size:.9rem;color:var(--texto-suave);
}
.mini:hover{background:#f8f9fa;color:var(--negro)}
.mini.borrar:hover{border-color:#f0c9d2;background:var(--rojo-bg);color:var(--rojo)}
.medida-cabs{display:none}

/* ==========================================================
   Contabilidad
   ========================================================== */
.periodo{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.9rem;
}
.periodo .chips{margin:0}
.periodo-nav{display:flex;align-items:center;gap:.4rem;margin-left:auto;flex-wrap:wrap}
.periodo-nav strong{font-size:.95rem;min-width:0}

.kpis .kpi .k-pie{font-size:.68rem;color:var(--texto-suave);margin-top:.15rem;line-height:1.3}
.kpi.verde .k-val{color:var(--verde)}
.kpi.rojo  .k-val{color:var(--rojo)}
.verde{color:var(--verde)}
.rojo{color:var(--rojo)}

/* Gasto o venta */
.tipo-sel{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.tipo-sel .ts{
  display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:10px;
  border:1px solid var(--borde-fuerte);background:#fff;cursor:pointer;font-weight:650;
  font-size:.92rem;color:var(--texto-suave);margin:0;
}
.tipo-sel .ts input{position:absolute;opacity:0;width:0;height:0}
.tipo-sel .ts.sel{border-color:var(--granate-tinta);background:var(--granate-suave);color:var(--granate-tinta)}
.et-venta{display:none}

/* Desglose del IVA en vivo */
.desglose{
  background:var(--granate-suave);border:1px solid var(--granate-borde);border-radius:var(--radio);
  padding:.7rem .9rem;margin:0 0 1rem;display:grid;gap:.3rem;max-width:380px;margin-left:auto;
}
.desglose>div{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem}
.desglose>div[hidden]{display:none}
/* Las filas de IVA se pintan dentro de una caja, una por tipo: la caja no
   cuenta y sus filas se colocan como si colgaran directas del desglose. */
.desglose #fFilasIva,.desglose #dFilasIva{display:contents}
.desglose #fFilasIva>div,.desglose #dFilasIva>div{
  display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;
}
.desglose .d-total{
  border-top:2px solid var(--negro);margin-top:.25rem;padding-top:.4rem;font-size:1.1rem;font-weight:750;
}
.desglose strong{font-variant-numeric:tabular-nums}

/* Margen de una venta */
.margen{display:flex;align-items:stretch;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}
.margen .mg{
  flex:1 1 150px;border:1px solid var(--borde);border-radius:var(--radio);padding:.6rem .8rem;
  display:flex;flex-direction:column;gap:.1rem;background:#fff;
}
.margen .mg-et{font-size:.75rem;color:var(--texto-suave);font-weight:600}
.margen .mg-va{font-size:1.15rem;font-weight:750;font-variant-numeric:tabular-nums}
.margen .mg-va small{font-size:.72rem;font-weight:600;color:var(--texto-suave)}
.margen .mg-in{border-color:#bfe3cc;background:var(--verde-bg)}
.margen .mg-in .mg-va{color:var(--verde)}
.margen .mg-out{border-color:#f3c9c9;background:var(--rojo-bg)}
.margen .mg-out .mg-va{color:var(--rojo)}
.margen .mg-ok{border-color:var(--granate-borde);background:var(--granate-suave)}
.margen .mg-ok .mg-va{color:var(--granate-tinta)}
.margen .mg-mal{border-color:#f3c9c9;background:var(--rojo-bg)}
.margen .mg-mal .mg-va{color:var(--rojo)}
.margen .mg-op{align-self:center;font-size:1.2rem;color:var(--texto-suave);font-weight:700}

/* Tabla de movimientos */
.tabla-conta .fila-venta td:first-child{box-shadow:inset 3px 0 0 var(--verde)}
.tabla-conta .fila-gasto td:first-child{box-shadow:inset 3px 0 0 var(--rojo)}
.tabla-conta tfoot th{background:#fafbfc;font-variant-numeric:tabular-nums}
.tabla-conta td.der,.tabla-conta th.der{white-space:nowrap}
.item.mov.es-venta{border-left:3px solid var(--verde)}
.item.mov.es-gasto{border-left:3px solid var(--rojo)}
.item-total.verde{color:var(--verde)}
.item-total.rojo{color:var(--rojo)}

/* Barras de evolución */
.barras{
  display:flex;align-items:flex-end;gap:3px;height:170px;overflow-x:auto;padding-bottom:.2rem;
}
.barras .bt{flex:1 0 26px;display:flex;flex-direction:column;height:100%;min-width:26px}
.barras .bt-barras{
  flex:1;display:flex;align-items:flex-end;justify-content:center;gap:2px;
  border-bottom:1px solid var(--borde);
}
.barras .bt-v,.barras .bt-g{width:9px;border-radius:3px 3px 0 0;min-height:1px;display:block}
.barras .bt-v{background:var(--verde)}
.barras .bt-g{background:var(--rojo)}
.barras .bt-et{
  font-size:.6rem;color:var(--texto-suave);text-align:center;padding-top:.25rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.leyenda{display:flex;gap:1rem;font-size:.8rem;color:var(--texto-suave);margin-top:.5rem}
.leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.3rem}
.leyenda .l-v{background:var(--verde)}
.leyenda .l-g{background:var(--rojo)}

/* Reparto por categorías */
.cat-fila{margin-bottom:.7rem}
.cat-cab{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;margin-bottom:.25rem}
.cat-cab strong{font-variant-numeric:tabular-nums}
.cat-barra{height:7px;border-radius:99px;background:var(--gris-bg);overflow:hidden}
.cat-barra span{display:block;height:100%;border-radius:99px}
.cat-barra .cb-v{background:var(--verde)}
.cat-barra .cb-g{background:var(--rojo)}

/* Cuadro de impuestos */
.tabla-impuestos tbody tr.vacia td{opacity:.5}
.tabla-impuestos .fila-trimestre th{
  background:var(--granate-suave);border-top:1px solid var(--granate-borde);
  border-bottom:1px solid var(--granate-borde);font-size:.85rem;
}
.tabla-impuestos tfoot th{background:var(--negro);color:#fff;font-size:.9rem}
.tabla-impuestos tfoot th .badge{background:#fff;color:var(--negro)}

/* Subir un justificante desde la ficha del apunte */
.subir-just{
  display:grid;gap:.6rem;grid-template-columns:1fr;align-items:end;
}
.subir-just .btn{justify-self:start}
@media (min-width:720px){
  .subir-just{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto}
}
/* ---------- Campos de archivo ---------- */
input[type=file]{
  width:100%;padding:.55rem .6rem;border:1px dashed var(--borde-fuerte);border-radius:10px;
  background:#fbfcfd;font-family:inherit;font-size:.9rem;color:var(--texto-suave);
}
input[type=file]:focus{outline:none;border-color:var(--granate-claro);
  box-shadow:0 0 0 3px rgba(var(--granate-rgb),.18)}
input[type=file]::file-selector-button{
  border:1px solid var(--borde-fuerte);background:#fff;color:var(--texto);
  font:inherit;font-weight:600;font-size:.85rem;padding:.4rem .75rem;border-radius:8px;
  margin-right:.6rem;cursor:pointer;
}
input[type=file]::file-selector-button:hover{background:#f3f4f6}

/* Con JavaScript, el campo nativo se esconde y manda un botón en condiciones */
.archivo-campo{position:relative}
.archivo-campo input[type=file]{
  position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.archivo-btn{
  width:100%;justify-content:center;border-style:dashed;background:#fbfcfd;
  font-weight:650;color:var(--granate-tinta);border-color:var(--granate-borde);
}
.archivo-btn:hover{background:var(--granate-suave)}
.archivo-campo input[type=file]:focus + .archivo-btn{
  border-style:solid;border-color:var(--granate-claro);
  box-shadow:0 0 0 3px rgba(var(--granate-rgb),.18);
}
.archivo-nota{
  font-size:.82rem;color:var(--texto-suave);margin-top:.35rem;
  overflow:hidden;text-overflow:ellipsis;
}
.archivo-nota.con{color:var(--verde);font-weight:600}

/* Opciones de la empresa */
.opcion-caja{
  border:1px solid var(--borde);border-radius:var(--radio);padding:.7rem .85rem;background:#fbfcfd;
}

/* ---------- Editor de marca de la empresa ---------- */
.paletas{display:flex;gap:.5rem;flex-wrap:wrap}
.paleta{
  display:flex;align-items:center;gap:.35rem;padding:.35rem .55rem .35rem .4rem;
  border:1px solid var(--borde);border-radius:99px;background:#fff;cursor:pointer;
  font-family:inherit;font-size:.78rem;font-weight:600;color:var(--texto-suave);
}
.paleta:hover{border-color:var(--borde-fuerte);background:#f8f9fa;color:var(--negro)}
.paleta .p-pri,.paleta .p-ace{width:15px;height:15px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.paleta .p-ace{margin-left:-9px}
.paleta .p-nom{margin-left:.15rem}

.color-campo{display:flex;gap:.4rem;align-items:center}
.color-campo input[type=color]{
  width:52px;height:42px;padding:3px;border:1px solid var(--borde-fuerte);border-radius:10px;
  background:#fff;cursor:pointer;flex:0 0 auto;
}
.color-campo input[type=text]{flex:1;min-width:0;text-transform:uppercase}

.muestra{
  display:inline-block;width:16px;height:16px;border-radius:5px;vertical-align:middle;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}

.vista-marca{
  --vm-pri:#8e1b34;--vm-pri-osc:#6d1526;--vm-pri-suave:#fdf2f4;--vm-pri-borde:#f0c9d2;
  --vm-sobre-pri:#fff;--vm-ace:#efa92f;--vm-sobre-ace:#3b2500;
  border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;background:#fff;
}
.vista-marca .vm-cab{
  background:var(--vm-pri);color:var(--vm-sobre-pri);padding:.7rem .85rem;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.vista-marca .vm-logo{height:30px;width:auto;max-width:150px;object-fit:contain;
  background:rgba(255,255,255,.14);border-radius:6px;padding:2px 5px}
.vista-marca .vm-siglas{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--vm-ace);color:var(--vm-sobre-ace);font-weight:800;font-size:.8rem;
}
.vista-marca .vm-nombre{font-weight:700;letter-spacing:-.01em}
.vista-marca .vm-num{
  margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;font-size:.85rem;
  background:rgba(255,255,255,.18);border-radius:99px;padding:.1rem .55rem;
}
.vista-marca .vm-cuerpo{padding:.8rem .85rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  background:var(--vm-pri-suave)}
.vista-marca .vm-btn{
  display:inline-flex;align-items:center;padding:.45rem .85rem;border-radius:9px;
  font-size:.85rem;font-weight:700;
}
.vista-marca .vm-pri{background:var(--vm-pri);color:var(--vm-sobre-pri)}
.vista-marca .vm-ace{background:var(--vm-ace);color:var(--vm-sobre-ace)}
.vista-marca .vm-chip{
  font-size:.74rem;font-weight:700;border-radius:99px;padding:.15rem .55rem;
  background:#fff;color:var(--vm-pri);border:1px solid var(--vm-pri-borde);
}

/* ---------- Selector de empresa ---------- */
.cambia-empresa{
  display:flex;align-items:center;gap:.4rem;margin:0;min-width:0;flex:0 1 auto;
}
.cambia-empresa select{
  width:auto;min-width:0;max-width:min(38vw,220px);padding:.3rem 1.7rem .3rem .5rem;font-size:.85rem;
  font-weight:650;border-radius:9px;background-position:right .35rem center;background-size:15px;
  border-color:var(--borde);color:var(--negro);text-overflow:ellipsis;
}
.cambia-empresa select:hover{background-color:#f8f9fa}
.emp-siglas{
  flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:inline-grid;place-items:center;
  background:var(--granate);color:var(--sobre-granate);font-size:.68rem;font-weight:800;letter-spacing:.02em;
}
.check-linea{
  display:flex;align-items:center;gap:.5rem;padding:.3rem 0;
  font-size:.9rem;font-weight:500;color:var(--texto);margin:0;
}
.check-linea input{width:auto;margin:0}
.empresas-check{
  border:1px solid var(--borde);border-radius:var(--radio);padding:.5rem .7rem;margin-top:.4rem;
  max-height:230px;overflow:auto;background:#fbfcfd;
}

/* ---------- Vínculo presupuesto ⇄ proyecto ---------- */
.pro-ficha{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  background:var(--granate-suave);border:1px solid var(--granate-borde);border-radius:var(--radio);
  padding:.7rem .85rem;margin-bottom:.9rem;
}
.pro-ficha .pro-datos{flex:1;min-width:min(100%,240px)}
.pro-ficha .pro-num{display:block;font-weight:650;color:var(--negro);margin-bottom:.15rem}
.pro-ficha .pro-num:hover{text-decoration:none;color:var(--granate-tinta)}

.pro-tag{
  display:inline-block;font-size:.78rem;font-weight:650;white-space:nowrap;
  background:var(--granate-suave);color:var(--granate-tinta);border:1px solid var(--granate-borde);
  border-radius:99px;padding:.1rem .5rem;
}
.pro-tag:hover{text-decoration:none;background:var(--granate-borde)}
.pro-tag.vacia{background:var(--gris-bg);color:var(--texto-suave);border-color:var(--borde);font-weight:600}
.pro-tag.vacia:hover{background:#e4e7ec}

/* ---------- La pregunta del proyecto en el editor de presupuestos ---------- */
.campo-proyecto{
  background:var(--granate-suave);border:1px solid var(--granate-borde);border-radius:var(--radio);
  padding:.8rem .85rem;margin-bottom:1rem;
}
.campo-proyecto label{color:var(--granate-tinta);font-weight:700;font-size:.88rem}
.campo-proyecto .ayuda{margin-bottom:0}

/* ---------- Archivos elegidos antes de subir ---------- */
.elegidos{display:grid;gap:.5rem;margin:.2rem 0 .9rem}
.elegidos:empty{margin:0}
.elegidos-cab{font-size:.82rem;font-weight:650;color:var(--granate-tinta)}
.elegido{
  display:flex;gap:.7rem;align-items:flex-start;padding:.55rem .6rem;
  border:1px solid var(--borde);border-radius:var(--radio);background:#fbfcfd;
}
.elegido .e-mini{
  flex:0 0 54px;width:54px;height:54px;border-radius:9px;overflow:hidden;background:#eef0f3;
  display:grid;place-items:center;
}
.elegido .e-mini img{width:100%;height:100%;object-fit:cover;display:block}
.elegido .e-ico{font-size:1.4rem}
.elegido .e-datos{flex:1;min-width:0}
.elegido .e-nom{
  font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.elegido input[type=text]{margin-top:.35rem;padding:.45rem .6rem;font-size:.88rem}

/* ---------- Comentario de un archivo ya subido ---------- */
.grupo-arch{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-suave);
  font-weight:800;margin:0 0 .5rem;
}
.coment{margin-top:.3rem}
.coment>summary{
  cursor:pointer;font-size:.75rem;color:var(--granate-tinta);font-weight:600;list-style:none;
  padding:.15rem 0;
}
.coment>summary::-webkit-details-marker{display:none}
.coment>summary:hover{text-decoration:underline}
.coment-form{display:flex;gap:.35rem;margin-top:.35rem;align-items:center}
.coment-form input[type=text]{padding:.4rem .55rem;font-size:.85rem}

/* ---------- Galería de fotos ---------- */
.galeria{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem;
}
.foto{margin:0;border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;background:#fff}
.foto>a{display:block}
.foto img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#f2f3f5}
.foto figcaption{padding:.45rem .55rem .55rem}
.foto .f-coment{
  margin:0 0 .2rem;font-size:.8rem;color:var(--texto);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.foto .f-coment.vacio-coment{color:#b6bcc5;font-style:italic}
.foto .f-meta{
  display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--texto-suave);
}
.foto .f-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.foto .f-meta form{margin:0;line-height:1}
.foto .f-meta .x{
  border:0;background:none;cursor:pointer;color:var(--texto-suave);font-size:.85rem;padding:.1rem .2rem;
}
.foto .f-meta .x:hover{color:var(--rojo)}

/* ---------- Lista de documentos ---------- */
.docs{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.docs li{
  display:flex;align-items:flex-start;gap:.6rem;padding:.55rem .6rem;
  border:1px solid var(--borde);border-radius:var(--radio);background:#fff;
}
.docs .d-ico{font-size:1.2rem;flex:none;line-height:1.4}
.docs .d-nom{flex:1;min-width:0;display:grid}
.docs .d-nom a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.docs .d-coment{font-size:.85rem;color:var(--texto);margin:.1rem 0}
.docs .d-acc{flex:none;display:flex;gap:.3rem;align-items:center}
.docs form{margin:0;display:inline}

.check{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;color:var(--texto-suave)}
.check input{width:auto;margin:0}

/* ---------- Totales ---------- */
.totales{display:grid;gap:.35rem;font-size:.95rem;max-width:340px;margin-left:auto}
.totales .t-fila{display:flex;justify-content:space-between;gap:1rem}
/* Una fila escondida tiene que esconderse: el display:flex de arriba le gana
   al [hidden] del navegador, así que hay que decirlo a mano. */
.totales .t-fila[hidden]{display:none}
.totales .t-fila span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
/* Lo que se descuenta, para que se vea que sí se ha aplicado */
.totales .t-dto{color:#7c5307}
.totales .t-dto span:last-child{color:#7c5307}
.totales .t-total{
  border-top:2px solid var(--negro);margin-top:.4rem;padding-top:.5rem;font-size:1.25rem;font-weight:750;
}
.totales .t-total span:last-child{color:var(--granate-tinta)}

/* ---------- Historial ---------- */
.hist{list-style:none;margin:0;padding:0}
.hist li{
  padding:.55rem 0 .55rem 1.1rem;border-left:2px solid var(--borde);position:relative;font-size:.88rem;
}
.hist li::before{
  content:"";position:absolute;left:-5px;top:.95rem;width:8px;height:8px;border-radius:50%;
  background:var(--granate-claro);
}
.hist .h-meta{color:var(--texto-suave);font-size:.78rem}

/* ---------- Login ---------- */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:1.2rem;background:
  radial-gradient(1200px 500px at 50% -10%, var(--granate-suave) 0%, var(--fondo) 60%)}
.login-caja{width:100%;max-width:390px}
.login-caja .tarjeta{margin:0}
.login-marca{text-align:center;margin-bottom:1.2rem}
.login-logotipo{width:min(230px,72%);height:auto;display:block;margin:0 auto .5rem}
.login-marca p{margin:.1rem 0 0}
.login-marca h1{font-size:1.25rem;margin:0}
.login-marca p{color:var(--texto-suave);font-size:.88rem;margin:.2rem 0 0}

/* ==========================================================
   Importar un presupuesto: repaso de lo leído
   ========================================================== */
.imp-lineas{display:grid;gap:.6rem}
.imp-cabs{display:none}
.imp-linea{
  border:1px solid var(--borde);border-radius:var(--radio);background:#fff;padding:.7rem;
  display:grid;gap:.5rem;grid-template-columns:1fr;
}
.imp-linea.es-apartado{background:var(--granate-suave);border-color:var(--granate-borde)}
.imp-linea.es-dudoso{background:var(--ambar-bg);border-color:#f0dcae}
.imp-tag.duda{background:var(--ambar);color:#fff}
.imp-linea label.solo-movil{
  display:block;font-size:.72rem;font-weight:600;color:var(--texto-suave);margin-bottom:.15rem;
}
.imp-check{display:flex;align-items:center;gap:.5rem;margin:0}
.imp-check input{width:20px;height:20px;margin:0}
.imp-check::after{content:"Incluir esta línea";font-size:.8rem;color:var(--texto-suave)}
.imp-desc{position:relative}
.imp-tag{
  position:absolute;top:-.55rem;right:.4rem;background:var(--granate);color:var(--sobre-granate);
  border-radius:99px;font-size:.64rem;font-weight:700;padding:.05rem .45rem;letter-spacing:.02em;
}
.imp-imp{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:719px){
  .imp-linea{grid-template-columns:repeat(3,1fr);gap:.45rem .5rem}
  .imp-check,.imp-desc,.imp-imp{grid-column:1 / -1}
  .imp-linea input[type=text]{padding:.6rem}
}
/* Leer una foto */
.foto-ocr{
  border:1px solid var(--granate-borde);background:var(--granate-suave);
  border-radius:var(--radio);padding:.85rem;
}
.foto-ocr>label:first-child{color:var(--granate-tinta);font-size:.92rem}
.fotos-elegidas{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.fotos-elegidas:empty{margin:0}
.foto-mini{
  position:relative;width:78px;height:98px;border-radius:10px;overflow:hidden;
  border:1px solid var(--borde-fuerte);background:#fff;flex:0 0 auto;
}
.foto-mini img{width:100%;height:100%;object-fit:cover;display:block}
.foto-mini-n{
  position:absolute;left:4px;top:4px;background:rgba(0,0,0,.6);color:#fff;
  border-radius:99px;font-size:.66rem;font-weight:700;padding:.02rem .35rem;
}
.foto-mini-x{
  position:absolute;right:2px;top:2px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;cursor:pointer;font-size:.7rem;line-height:1;padding:0;
}
.foto-mini-x:hover{background:var(--rojo)}
.ocr-barra{
  height:8px;border-radius:99px;background:#fff;border:1px solid var(--granate-borde);
  overflow:hidden;margin-top:.5rem;
}
.ocr-barra>span{display:block;height:100%;width:0;background:var(--granate);transition:width .25s}
.ocr-barra[hidden]{display:none}
#ocrEstado{font-weight:600}

.imp-crudo{
  white-space:pre-wrap;word-break:break-word;font-size:.78rem;line-height:1.45;
  background:#fbfcfd;border:1px solid var(--borde);border-radius:10px;padding:.7rem;
  max-height:340px;overflow:auto;margin:0;
}
@media (min-width:720px){
  .imp-cabs{
    display:grid;grid-template-columns:34px minmax(200px,1fr) 90px 110px 80px 110px;
    gap:.5rem;padding:0 .7rem .2rem;
    font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--texto-suave);font-weight:700;
  }
  .imp-linea{
    grid-template-columns:34px minmax(200px,1fr) 90px 110px 80px 110px;
    align-items:center;padding:.55rem .7rem;
  }
  .imp-linea label.solo-movil{display:none}
  .imp-check::after{content:none}
  .imp-imp{align-self:center}
}

/* ==========================================================
   Pantalla de firma del cliente
   ========================================================== */
.pantalla-firma{background:var(--fondo)}
.firma-cab{
  position:sticky;top:0;z-index:40;background:var(--granate);color:var(--sobre-granate);
  padding-top:env(safe-area-inset-top);
}
.firma-cab-in{
  max-width:760px;margin:0 auto;padding:.6rem .9rem;
  display:flex;align-items:center;gap:.7rem;
}
.firma-logo{height:30px;width:auto;max-width:150px;object-fit:contain;
  background:rgba(255,255,255,.16);border-radius:7px;padding:2px 6px}
.firma-emp{font-weight:700;letter-spacing:-.01em;font-size:.98rem}
.firma-num{
  margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;font-size:.85rem;
  background:rgba(255,255,255,.2);border-radius:99px;padding:.15rem .6rem;white-space:nowrap;
}
.firma-salir{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--sobre-granate);background:rgba(255,255,255,.16);font-size:.95rem;line-height:1;
}
.firma-salir:hover{text-decoration:none;background:rgba(255,255,255,.3)}

.firma-cuerpo{
  max-width:760px;margin:0 auto;
  padding:1rem .9rem calc(2.5rem + env(safe-area-inset-bottom));
}
.firma-titulo h1{font-size:1.2rem;margin:0 0 .2rem}
.firma-titulo{margin-bottom:.9rem}

.firma-lineas{list-style:none;margin:0 0 1rem;padding:0}
.firma-lineas li{
  display:flex;gap:.8rem;align-items:flex-start;justify-content:space-between;
  padding:.6rem 0;border-bottom:1px solid #f0f1f3;
}
.firma-lineas li:last-child{border-bottom:0}
.firma-lineas .fl-desc{flex:1;min-width:0;line-height:1.35}
.firma-lineas .fl-imp{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

.firma-cond>summary{
  cursor:pointer;font-size:.88rem;font-weight:650;color:var(--granate-tinta);
  padding:.5rem 0;list-style:none;
}
.firma-cond>summary::-webkit-details-marker{display:none}
.firma-cond>summary::before{content:"▸ "}
.firma-cond[open]>summary::before{content:"▾ "}

/* El lienzo */
.lienzo-caja{
  position:relative;border:2px dashed var(--borde-fuerte);border-radius:var(--radio);
  background:#fff;height:190px;overflow:hidden;
}
.lienzo-caja canvas{
  display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;
  position:relative;z-index:2;background:transparent;
}
.lienzo-pista{
  position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  color:#c2c7cf;font-weight:650;font-size:1rem;pointer-events:none;
}
.lienzo-pista[hidden]{display:none}
.lienzo-raya{
  position:absolute;left:8%;right:8%;bottom:34px;height:1px;background:var(--borde);z-index:1;
}
.lienzo-caja:focus-within{border-color:var(--granate-claro)}
.lienzo-caja canvas.con-firma{cursor:default}
.lienzo-caja canvas.falta{animation:firma-tiembla .4s}
@keyframes firma-tiembla{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}
.ayuda.ok{color:var(--verde);font-weight:600}
.ayuda.mal{color:var(--rojo);font-weight:600}

.firma-hecha{
  display:block;max-width:min(280px,80%);height:auto;margin:.6rem auto 0;
}

/* La firma dentro de la ficha del presupuesto */
.firma-ficha{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.firma-ficha .ff-img{
  flex:0 0 auto;max-width:220px;border:1px solid var(--borde);border-radius:10px;
  background:#fff;padding:.4rem .6rem;
}
.firma-ficha .ff-img img{display:block;max-width:100%;height:auto;max-height:90px}
.firma-ficha .ff-datos{flex:1;min-width:min(100%,220px)}
.firma-ficha .ff-datos strong{font-size:1.02rem}
.firma-invita{display:flex;gap:.8rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.firma-invita .btn{min-height:46px}
@media (max-width:719px){.firma-invita .btn{width:100%}}
.firma-dni{font-variant-numeric:tabular-nums;letter-spacing:.02em}

@media (max-width:719px){
  .lienzo-caja{height:170px}
  .firma-cuerpo{padding-left:.75rem;padding-right:.75rem}
}

/* ---------- Vacío ---------- */
.vacio{text-align:center;padding:2.5rem 1rem;color:var(--texto-suave)}
.vacio .v-icono{font-size:2rem;opacity:.4;margin-bottom:.4rem}

/* ---------- Barra inferior móvil ---------- */
.barra-accion{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
  border-top:1px solid var(--borde);padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  display:flex;gap:.5rem;box-shadow:0 -4px 16px rgba(16,24,40,.06);
}
.barra-accion .btn{flex:1}
.con-barra{padding-bottom:6rem}

/* ---------- Barra de pestañas: solo en el teléfono ---------- */
.tabs{display:none}
.tab-mas{position:relative}
.tab summary{list-style:none}
.tab::-webkit-details-marker,.tab::marker{display:none;content:""}

/* ---------- Utilidades ---------- */
.solo-movil{display:block}
.solo-escritorio{display:none}
.silencio{color:var(--texto-suave)}
.peq{font-size:.85rem}
.mt{margin-top:1rem}
.mb0{margin-bottom:0}
.flex{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.flex.solo-escritorio{display:none}
.acciones .solo-escritorio{display:none}
.sep{height:1px;background:var(--borde);margin:1rem 0}
.nowrap{white-space:nowrap}

/* ==========================================================
   Teléfono: todo pensado para el pulgar
   ========================================================== */
@media (max-width:719px){
  :root{--tabs-h:58px}

  /* La navegación de arriba se va abajo, al alcance del dedo */
  .nav{display:none}
  .salir-esc{display:none}

  .tabs{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:#fff;border-top:1px solid var(--borde);
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-shadow:0 -2px 14px rgba(16,24,40,.07);
  }
  .tabs>*{flex:1 1 0;min-width:0}
  .tabs>.tab-mas:only-child{flex:0 1 170px;margin:0 auto}
  .tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    min-height:var(--tabs-h);padding:.4rem .15rem .45rem;
    color:var(--texto-suave);font-size:.66rem;font-weight:650;line-height:1.15;
    text-align:center;text-decoration:none;cursor:pointer;list-style:none;
    -webkit-tap-highlight-color:transparent;
  }
  .tab:hover{text-decoration:none}
  .tab .ic{width:23px;height:23px;display:block}
  .tab-ic{position:relative;display:block;padding:.12rem .62rem;border-radius:99px;transition:background .15s}
  .tab-et{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab.activo{color:var(--granate-tinta)}
  .tab.activo .tab-ic{background:var(--granate-suave)}
  .tab:active .tab-ic{background:var(--gris-bg)}
  .tab .pastilla{
    position:absolute;top:-4px;right:-2px;margin:0;min-width:18px;height:18px;
    display:grid;place-items:center;padding:0 .25rem;font-size:.65rem;line-height:1;
    border:2px solid #fff;
  }

  /* «Más»: una hoja que sube desde abajo, sin salir de la página */
  .tab-mas[open]>.tab{color:var(--granate-tinta)}
  .tab-mas[open]::before{
    content:"";position:fixed;inset:0;z-index:-1;background:rgba(16,24,40,.38);
  }
  .hoja{
    position:fixed;left:.55rem;right:.55rem;
    bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom) + .5rem);
    background:#fff;border:1px solid var(--borde);border-radius:18px;
    box-shadow:var(--sombra-fuerte);padding:.55rem .7rem .8rem;
    max-height:72vh;overflow:auto;text-align:left;
    animation:hoja-sube .16s ease-out;
  }
  @keyframes hoja-sube{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
  .hoja-tirador{width:40px;height:4px;border-radius:99px;background:var(--borde-fuerte);margin:.15rem auto .65rem}
  .hoja-quien{
    display:flex;align-items:center;gap:.6rem;padding:0 .25rem .65rem;
    border-bottom:1px solid var(--borde);margin-bottom:.65rem;
  }
  .hoja-quien strong{font-size:.95rem;display:block}
  .hoja-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
  .hoja-op{
    display:flex;align-items:center;gap:.55rem;padding:.65rem .7rem;border-radius:13px;
    border:1px solid var(--borde);background:#fff;color:var(--texto);
    font-size:.87rem;font-weight:600;min-height:54px;line-height:1.2;
  }
  .hoja-op .ic{width:20px;height:20px;flex:0 0 auto;color:var(--texto-suave)}
  .hoja-op:hover,.hoja-op:active{text-decoration:none;background:#f8f9fa}
  .hoja-op.destacada{
    grid-column:1 / -1;border-color:var(--granate-tinta);background:var(--granate-suave);color:var(--granate-tinta);
  }
  .hoja-op.destacada .ic{color:var(--granate-tinta)}
  .hoja-op.salir,.hoja-op.salir .ic{color:var(--rojo)}

  /* Sitio para las pestañas al final de la página */
  .contenedor{
    padding:.9rem .85rem calc(var(--tabs-h) + 1.4rem + env(safe-area-inset-bottom));
  }
  body:has(.barra-accion) .contenedor{
    padding-bottom:calc(var(--tabs-h) + 5.4rem + env(safe-area-inset-bottom));
  }
  .barra-accion{
    bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom));
    padding:.55rem .75rem .6rem;
  }
  .barra-accion .btn{min-height:48px}

  /* Una sola acción: botón flotante, que tapa menos */
  .barra-accion.acc-fab{
    left:auto;right:.85rem;bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom) + .85rem);
    width:auto;background:none;border:0;box-shadow:none;padding:0;
  }
  .barra-accion.acc-fab .btn{
    flex:0 0 auto;border-radius:99px;padding:.8rem 1.2rem;font-size:.95rem;min-height:52px;
    box-shadow:0 8px 20px rgba(16,24,40,.22);
  }
  body:has(.barra-accion.acc-fab) .contenedor{
    padding-bottom:calc(var(--tabs-h) + 5rem + env(safe-area-inset-bottom));
  }

  /* Tocar sin apuntar */
  .btn{min-height:46px;padding:.7rem 1rem}
  .btn-peq{min-height:38px;padding:.45rem .75rem}
  .mini{width:38px;height:38px;font-size:1rem}
  .chip{padding:.5rem .9rem;font-size:.88rem}
  /* (Antes esto sacaba los chips a sangre para que el scroll lateral llegara
     al borde. Ahora se doblan, así que se quedan dentro como todo lo demás.) */
  .mas-filtros>summary{padding:.5rem .2rem;font-size:.9rem}
  .filtros{margin-bottom:.7rem}
  .coment>summary{padding:.4rem 0;font-size:.8rem}

  /* Cabecera de cada página */
  .cabecera-pag{gap:.55rem;margin-bottom:.9rem}
  .cabecera-pag h1{font-size:1.22rem}
  .cabecera-pag .acciones{margin-left:0;width:100%;gap:.45rem}
  .cabecera-pag .acciones .btn{flex:1 1 auto}

  /* Tarjetas y listas */
  .tarjeta{border-radius:14px}
  .tarjeta-cab{padding:.75rem .85rem}
  .tarjeta-cuerpo{padding:.85rem}
  .tarjeta-pie{padding:.75rem .85rem}
  .item{padding:.9rem;border-radius:14px}
  .item:active{background:#fafbfc;border-color:var(--borde-fuerte)}
  .item-cliente{font-size:1rem}

  /* Formularios */
  .campo{margin-bottom:1rem}
  .campo label,.etq{font-size:.85rem}
  input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
  input[type=search],input[type=url],select,textarea{padding:.72rem .75rem;border-radius:12px}
  textarea{min-height:110px}
  .filtros button[type=submit]{width:100%}
  .check-linea{padding:.45rem 0;font-size:.95rem}
  .check-linea input,.check input{width:20px;height:20px}

  /* Buscar y filtrar, en una sola línea */
  .filtros{grid-template-columns:1fr auto;align-items:start;gap:.5rem}
  .filtros>input[type=search]{order:1}
  .filtros>button[type=submit]{order:2;width:auto;min-width:52px;padding:.72rem .95rem}
  .filtros>.mas-filtros{order:3;grid-column:1 / -1;gap:.5rem}

  /* Números a lo ancho, que se lean */
  .totales,.desglose{max-width:none;margin-left:0}
  .totales .t-total{font-size:1.2rem}

  /* Cifras compactas: así la lista empieza antes */
  .kpis{gap:.45rem;margin-bottom:.8rem}
  .kpi{padding:.5rem .6rem;border-radius:11px}
  .kpi .k-etq{font-size:.64rem;letter-spacing:.03em}
  .kpi .k-val{font-size:1.12rem;margin-top:0}
  .kpis .kpi .k-pie{font-size:.63rem;margin-top:.05rem}
  .kpis.kpis-5 .kpi:nth-child(5){grid-column:1 / -1}
  /* Seis cuadros en el móvil: de dos en dos y ya está */
  .kpis.kpis-6 .kpi:nth-child(5){grid-column:auto}

  /* Botoneras de las fichas: rejilla pareja en vez de amontonarse */
  .acc-grid{gap:.45rem}
  .acc-grid>form,.acc-grid>.btn{flex:1 1 calc(50% - .25rem);margin:0}
  .acc-grid>form>.btn{width:100%}

  /* Contabilidad */
  .periodo{gap:.5rem}
  .periodo-nav{margin-left:0;width:100%;gap:.35rem}
  .periodo-nav strong{flex:1 1 auto;text-align:center;font-size:.9rem}
  .periodo-nav .btn-peq{min-width:48px;min-height:42px;font-size:1.05rem}
  .barras{height:140px}
  .margen{gap:.45rem}
  .margen .mg{flex:1 1 100%;padding:.5rem .7rem}
  .margen .mg-va{font-size:1.05rem}
  .margen .mg-op{display:none}
  .tipo-sel .ts{flex:1 1 0;justify-content:center;min-height:48px}

  /* Fotos y archivos */
  .galeria{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.55rem}
  .docs li{padding:.65rem;flex-wrap:wrap}
  .docs .d-acc{width:100%;margin-top:.45rem;justify-content:flex-end}
  .docs .d-acc .btn-peq{min-height:38px}
  .foto figcaption{padding:.5rem}
  .foto .f-coment{-webkit-line-clamp:4}

  /* Editor de líneas y medidas */
  .linea,.medida{border-radius:14px;padding:.8rem}
  .linea-pie .btn-peq,.medida .m-acc .mini{min-height:38px}
}

/* ==========================================================
   Escritorio
   ========================================================== */
@media (min-width:720px){
  .fila-2{grid-template-columns:1fr 1fr}
  .fila-3{grid-template-columns:repeat(3,1fr)}
  .fila-4{grid-template-columns:repeat(4,1fr)}
  .fila-5{grid-template-columns:repeat(5,1fr)}
  .kpis{grid-template-columns:repeat(4,1fr);gap:.7rem}
  .kpis.kpis-5{grid-template-columns:repeat(5,1fr)}
  .kpis.kpis-6{grid-template-columns:repeat(3,1fr)}
  .kpi{padding:.8rem .9rem}
  .kpi .k-etq{font-size:.75rem}
  .kpi .k-val{font-size:1.45rem}
  .filtros{grid-template-columns:2fr 150px 150px 170px auto}
  .filtros.filtros-2{grid-template-columns:2fr 170px 190px auto}
  .mas-filtros{display:contents}
  .mas-filtros>summary{display:none}
  .solo-movil{display:none}
  .campo label.solo-movil,.linea label.solo-movil,.medida label.solo-movil{display:none}
  .medida{
    display:grid;
    grid-template-columns:minmax(160px,1fr) 92px 92px 66px minmax(120px,.7fr) 80px 108px;
    gap:.5rem;align-items:center;padding:.6rem .7rem;
  }
  .medida .campo{margin-bottom:0}
  .medida .m-m2{justify-content:flex-end;white-space:nowrap}
  .medida .m-acc{margin-top:0;justify-content:flex-end}
  .medida-cabs{
    display:grid;
    grid-template-columns:minmax(160px,1fr) 92px 92px 66px minmax(120px,.7fr) 80px 108px;
    gap:.5rem;padding:0 .7rem .3rem;
    font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--texto-suave);font-weight:700;
  }
  .medida-cabs span:nth-child(6){text-align:right}
  .solo-escritorio{display:block}
  .flex.solo-escritorio{display:flex}
  .acciones .solo-escritorio{display:inline-flex}
  h1{font-size:1.65rem}
  .linea-fila{grid-template-columns:repeat(4,1fr)}
  .barra-accion{display:none}
  .con-barra{padding-bottom:5rem}
  .contenedor{padding:1.5rem 1rem 4rem}
}
@media (min-width:960px){
  .linea{
    display:grid;
    grid-template-columns:28px minmax(220px,1fr) 88px 72px 104px 228px;
    gap:.5rem;align-items:center;padding:.6rem .7rem;
  }
  .linea .campo{margin-bottom:0}
  .linea .linea-num{position:static;justify-self:center;padding:.05rem .4rem}
  .linea-fila{display:contents}
  .linea-pie{display:flex;align-items:center;gap:.3rem;margin-top:0}
  .linea-importe{margin-left:auto;text-align:right;white-space:nowrap}
  .linea-cabs{
    display:grid;
    grid-template-columns:28px minmax(220px,1fr) 88px 72px 104px 228px;
    gap:.5rem;padding:0 .7rem .3rem;
    font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--texto-suave);font-weight:700;
  }
  .linea-cabs span:last-child{text-align:right}
}

/* ==========================================================
   Impresión
   ========================================================== */
@media print{
  .cabecera,.nav,.tabs,.barra-accion,.no-imprimir{display:none !important}
  body{background:#fff;font-size:12px}
  .contenedor{padding:0;max-width:none}
  .tarjeta{box-shadow:none;border:0;margin:0}
  a{color:#000;text-decoration:none}
  @page{margin:14mm}
}

/* ---------- Cobrado / pagado en contabilidad ---------- */
.tabla-conta tr.fila-pendiente td{background:#fffaf0}
.lista-movil .item.mov.sin-pagar{border-left:4px solid #e0b24a}
.mov-pago{margin:-.45rem 0 .7rem;display:flex;justify-content:flex-end}
.mov-pago .btn{min-height:40px}

/* ==========================================================
   Impresión 3D
   ========================================================== */
.p3d-cab{
  display:grid;gap:.5rem;align-items:end;padding:0 .2rem .35rem;
  grid-template-columns:26px minmax(160px,2.2fr) 84px 62px 72px 76px 70px 72px 72px 86px 86px 92px;
  font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-suave);font-weight:700;
}
.p3d-pieza{
  display:grid;gap:.5rem;align-items:start;position:relative;
  grid-template-columns:26px minmax(160px,2.2fr) 84px 62px 72px 76px 70px 72px 72px 86px 86px 92px;
  border:1px solid var(--borde);border-radius:var(--radio);padding:.55rem;background:#fff;margin-bottom:.55rem;
}
.p3d-pieza .campo{margin:0}
.p3d-pieza input,.p3d-pieza select{padding:.45rem .5rem;font-size:.9rem}
.p3d-pieza .c-num input{text-align:right;font-variant-numeric:tabular-nums}
.p3d-pieza .p3d-num{
  color:var(--texto-suave);font-weight:700;font-size:.8rem;text-align:center;padding-top:.55rem;
}
.p3d-pieza.vacia{opacity:.62}
.p3d-res{display:contents}
.p3d-coste,.p3d-precio{
  padding-top:.62rem;text-align:right;font-variant-numeric:tabular-nums;font-size:.9rem;
}
.p3d-coste{color:var(--texto-suave)}
.p3d-precio{font-weight:700}
.p3d-bot{display:flex;gap:.2rem;justify-content:flex-end;padding-top:.45rem;flex-wrap:wrap}
.p3d-bot .btn{padding:.3rem .5rem;font-size:.78rem}
.p3d-detalle{grid-column:2 / -1;margin-top:.1rem;font-size:.74rem}

.p3d-calc{display:grid;grid-template-columns:1fr minmax(280px,360px);gap:1.2rem;align-items:start}
.p3d-resumen{
  background:var(--crema,#fbf7f3);border:1px solid var(--borde);border-radius:var(--radio);padding:.9rem 1rem;
  display:grid;gap:.35rem;font-size:.95rem;
}
.p3d-resumen .t-fila{display:flex;justify-content:space-between;gap:1rem}
.p3d-resumen .t-fila[hidden]{display:none}
.p3d-resumen .t-fila span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.p3d-resumen .t-sub{border-top:1px solid var(--borde);padding-top:.35rem;font-weight:700}
.p3d-resumen .t-ben,.p3d-resumen .t-ben span:last-child{color:#1b7a4b}
.p3d-resumen .t-total{
  border-top:2px solid var(--tinta,#191922);margin-top:.25rem;padding-top:.4rem;font-size:1.15rem;font-weight:700;
}
.p3d-resumen .t-total span:last-child{color:var(--granate-tinta)}
.p3d-extra{
  margin-top:.5rem;padding-top:.5rem;border-top:1px dashed var(--borde);
  display:flex;flex-wrap:wrap;gap:.2rem 1rem;font-size:.78rem;color:var(--texto-suave);
}

@media (max-width:900px){
  .p3d-cab{display:none}
  .p3d-pieza{grid-template-columns:1fr 1fr;padding:.75rem}
  .p3d-pieza .p3d-num{
    position:absolute;top:-9px;left:.75rem;padding:.05rem .5rem;background:var(--granate-suave);
    color:var(--granate-tinta);border:1px solid var(--granate-borde);border-radius:99px;font-size:.7rem;
  }
  .p3d-pieza .c-nombre{grid-column:1 / -1}
  .p3d-pieza .c-num input{text-align:left}
  .p3d-res{display:flex;grid-column:1 / -1;justify-content:space-between;align-items:baseline;
    border-top:1px solid var(--borde);margin-top:.3rem;padding-top:.5rem}
  .p3d-coste,.p3d-precio{padding-top:0}
  .p3d-coste::before{content:"coste ";font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
  .p3d-precio::before{content:"precio ";font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
    color:var(--texto-suave);font-weight:400}
  .p3d-bot{grid-column:1 / -1;justify-content:flex-start}
  .p3d-detalle{grid-column:1 / -1}
  .p3d-calc{grid-template-columns:1fr}
}

/* ==========================================================
   Contabilidad interna por áreas e importación del banco
   ========================================================== */
.t-gasto{color:var(--rojo,#b3261e)}
.t-venta{color:#1b7a4b}

.punto-area{
  display:inline-block;width:.55rem;height:.55rem;border-radius:50%;
  vertical-align:baseline;margin-right:.3rem}

/* --- Tarjetas de área --- */
.areas-rejilla{display:grid;grid-template-columns:1fr;gap:.8rem;margin-bottom:1rem}
.area-tarjeta{
  background:var(--tarjeta,#fff);border:1px solid var(--borde);border-radius:var(--radio,14px);
  padding:.9rem 1rem;border-top:4px solid var(--area)}
.area-nombre{display:flex;align-items:center;gap:.4rem;font-weight:700;margin-bottom:.6rem}
.area-punto{width:.7rem;height:.7rem;border-radius:50%;background:var(--area);flex:none}
.area-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.area-cifras > div{display:flex;flex-direction:column;gap:.05rem}
.area-cifras .etq{font-size:.72rem;color:var(--texto-suave);text-transform:uppercase;letter-spacing:.03em}
.area-cifras strong{font-size:1.05rem;font-variant-numeric:tabular-nums}
.area-barras{margin-top:.6rem;display:flex;flex-direction:column;gap:.25rem}
.area-barras .barra{height:.5rem;background:var(--gris-bg,#f1f2f4);border-radius:999px;overflow:hidden}
.area-barras .barra span{display:block;height:100%;border-radius:999px}
.area-barras .b-venta{background:#3aa06b}
.area-barras .b-gasto{background:#d0645a}
.area-detalle{margin-top:.7rem}
.area-detalle summary{cursor:pointer;font-size:.85rem;color:var(--texto-suave)}
.area-detalle .peq-titulo{margin:.6rem 0 .1rem}
.area-pie{margin-top:.7rem}
.area-tarjeta.sin-area{opacity:.85}

/* --- Repaso del extracto --- */
.barra-repaso{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  position:sticky;top:0;z-index:5;padding:.5rem .1rem;background:var(--fondo,#fff);
  border-bottom:1px solid var(--borde);margin-bottom:.5rem}
.acciones-inline{display:flex;gap:.35rem;flex-wrap:wrap}

.banco-lista{display:flex;flex-direction:column;gap:.5rem}
.banco-mov{
  display:flex;gap:.6rem;background:var(--tarjeta,#fff);border:1px solid var(--borde);
  border-radius:12px;padding:.7rem .85rem;border-left:4px solid #d8dbe0}
.banco-mov.es-seguro{border-left-color:#3aa06b}
.banco-mov.es-ia{border-left-color:var(--ambar,#c8890a);background:#fffdf6}
.banco-mov.es-traspaso{border-left-color:#9ca3af;background:#fafafa}
.banco-mov.es-dup{opacity:.62}
.banco-marca{flex:none;padding-top:.2rem}
.banco-marca input{width:1.15rem;height:1.15rem}
.banco-cuerpo{flex:1;min-width:0}
.banco-cab{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.82rem}
.banco-fecha{font-variant-numeric:tabular-nums;color:var(--texto-suave)}
.banco-importe{font-weight:700;font-variant-numeric:tabular-nums}
.banco-motivo{color:var(--texto-suave);font-style:italic}
.banco-motivo.ok{color:#1b7a4b;font-style:normal}
.banco-motivo.ia{color:var(--ambar,#a4700a);font-style:normal}
.banco-concepto{
  font-size:.86rem;margin:.15rem 0 .4rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--texto)}

.banco-campos,.banco-areas{display:flex;gap:.45rem .5rem;flex-wrap:wrap;align-items:flex-end}
.banco-areas{margin-top:.4rem;padding-top:.4rem;border-top:1px dashed var(--borde)}
.banco-campos .b-campo,.banco-areas .b-campo{
  display:flex;flex-direction:column;gap:.1rem;min-width:6rem;max-width:15rem}
.banco-campos .b-campo.crece,.banco-areas .b-campo.crece{flex:1 1 8rem;max-width:24rem}
.banco-campos .b-campo.estrecha{min-width:5.2rem;max-width:9rem;flex:0 0 auto}
.banco-areas .b-campo.estrecha{min-width:6.5rem;max-width:10rem;flex:0 0 auto}
.banco-areas .b-campo > span{
  flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.banco-campos .b-campo > span,.banco-areas .b-campo > span{
  font-size:.68rem;line-height:1.35;color:var(--texto-suave);
  text-transform:uppercase;letter-spacing:.03em}
.banco-campos .b-campo input,.banco-campos .b-campo select,
.banco-areas .b-campo input,.banco-areas .b-campo select{
  padding:.28rem .4rem;font-size:.84rem;border:1px solid var(--borde);border-radius:8px;
  background:#fff;width:100%}
.banco-campos .b-campo.interruptor,.banco-areas .b-campo.interruptor{
  flex:none;flex-direction:row;align-items:center;gap:.3rem;min-width:max-content;
  white-space:nowrap;padding:.35rem .5rem;border:1px solid var(--borde);border-radius:8px;
  background:#fff;cursor:pointer}
.banco-campos .b-campo.interruptor input{width:1rem;height:1rem;flex:none}
.banco-campos .b-campo.interruptor > span,.banco-areas .b-campo.interruptor > span{
  flex:none;text-transform:none;letter-spacing:0;font-size:.78rem;color:var(--texto)}
.banco-campos .b-campo.interruptor:has(input:checked){background:var(--suave,#fdf2f4);border-color:#e7c3cc}
.banco-atajos{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}
.b-suma.aviso-suave{color:#9a6b05}

.acciones.pegajosa{
  position:sticky;bottom:0;background:var(--fondo,#fff);padding:.6rem 0;
  border-top:1px solid var(--borde);margin-top:.6rem;z-index:5}

.tabla-reglas .fila-fijada td{background:#fbfaf5}
.tabla-reglas .fila-editor td{background:var(--gris-bg,#f7f8f9)}
.regla-form{margin-bottom:.5rem}

@media (min-width:860px){
  .areas-rejilla{grid-template-columns:repeat(2,1fr)}
  .areas-rejilla:has(> :nth-child(3)){grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .banco-campos .b-campo,.banco-areas .b-campo{min-width:6rem;flex:1 1 6rem}
  .banco-concepto{white-space:normal}
  .barra-repaso{position:static}
}
.banco-campos .b-campo input:disabled,.banco-campos .b-campo select:disabled{
  background:#f4f5f6;color:#aab0b6;cursor:not-allowed}

/* Los filtros de «más», en una sola fila en el escritorio.
   Chrome mete un contenedor propio dentro de <details>, así que
   display:contents no basta: la fila se monta aquí dentro. */
@media (min-width:720px){
  .filtros > .mas-filtros{
    display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
    grid-column:1 / -1;order:3}
  .filtros > .mas-filtros > select{flex:1 1 9rem;min-width:8.5rem;width:auto}
}

/* La columna de área, compacta: que no empuje al resto de la tabla */
.tabla-conta td.col-area{max-width:7.5rem}
.tabla-conta td.col-area .linea-area{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.76rem}
.sel-peq{
  padding:.3rem .45rem;font-size:.82rem;border:1px solid var(--borde);
  border-radius:8px;background:#fff;width:auto;max-width:12rem}
.barra-repaso .acciones-inline{align-items:center;flex-wrap:nowrap}
.barra-repaso .acciones-inline label{white-space:nowrap}

/* Varios extractos a la vez: el paso de «qué es cada archivo» y los grupos */
.archivos-lista{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.8rem}
.archivo-fila{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;
  padding:.7rem .8rem;border:1px solid var(--borde);border-radius:12px;background:#fff}
.archivo-que{flex:1 1 16rem;min-width:0}
.archivo-fila .b-campo{display:flex;flex-direction:column;gap:.1rem;flex:1 1 11rem;min-width:9rem}
.archivo-fila .b-campo > span{
  font-size:.68rem;line-height:1.35;color:var(--texto-suave);
  text-transform:uppercase;letter-spacing:.03em}
.archivo-fila .b-campo input,.archivo-fila .b-campo select{
  padding:.38rem .5rem;font-size:.88rem;border:1px solid var(--borde);
  border-radius:8px;background:#fff;width:100%}

.banco-grupo{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:space-between;
  margin:.9rem 0 .1rem;padding:.5rem .7rem;border-radius:10px;
  background:var(--gris-bg,#f1f2f4);border:1px solid var(--borde)}
.banco-grupo:first-child{margin-top:0}
.banco-grupo .peq{margin-left:.4rem}

/* Marcar apuntes para eliminarlos */
.barra-borrar{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.5rem .7rem;margin-bottom:.5rem;border:1px solid var(--borde);
  border-radius:10px;background:var(--gris-bg,#f7f8f9)}
.barra-borrar .check-linea{margin:0}
.barra-borrar .sep-v{flex:1}
.barra-borrar .sel-peq{max-width:16rem}

/* Que la tabla de apuntes quepa de ancho y no haya que arrastrarla de lado.
   Las dos columnas de texto largo se quedan con lo suyo: el concepto parte
   líneas y el proveedor corta con puntos suspensivos (el nombre entero sale
   al pasar el ratón por encima). */
.tabla-conta{font-size:.88rem}
.tabla-conta th,.tabla-conta td{padding:.5rem .4rem}
.tabla-conta .cel-ancha{max-width:17rem;min-width:9rem}
/* En pantallas anchas, la tabla de apuntes se sale del ancho de lectura y
   aprovecha lo que hay: son muchas columnas y así no se corta nada. */
@media (min-width:1240px){
  /* En pantalla ancha caben los seis seguidos, que es como se leen mejor:
     ventas, gastos, resultado, IVA, caja y lo que queda limpio. */
  .kpis.kpis-6{grid-template-columns:repeat(6,1fr)}
  .contenedor .tarjeta.ancho-extra{
    width:min(97vw,1560px);
    margin-left:calc(50% - min(48.5vw,780px));
  }
}
.tabla-conta .btn-peq{padding:.25rem .5rem}
/* Si aun así no cabe (pantallas pequeñas), al menos que se vea que hay más */
.tabla-scroll{scrollbar-width:thin}
.tabla-conta td.col-marca,.tabla-conta th.col-marca{width:2rem;padding-right:0}
.tabla-conta tr.fila-marcada td{background:#fdecec}
.mov-marca{margin-left:auto}
.lista-volcados{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.lista-volcados li{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
@media (max-width:640px){
  .barra-borrar .sep-v{flex:0 0 100%}
}

/* Una fila de tabla que pide que le hagas caso */
.tabla tr.fila-aviso td{background:#fff8ec}

/* Quién le debe a quién */
.deudas{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.deuda{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.45rem .7rem;border-radius:9px;border-left:4px solid var(--borde);
  background:var(--gris-bg,#f7f8f9)}
.deuda .deuda-txt{flex:1;min-width:12rem}
.deuda.debe{border-left-color:#d0645a}
.deuda.cobra{border-left-color:#3aa06b}
.tabla.compacta td,.tabla.compacta th{padding:.28rem .45rem;font-size:.85rem}
.chip-filtro{
  display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem;
  border:1px solid var(--borde);border-radius:999px;background:#fff;font-size:.85rem}
.chip-filtro a{text-decoration:none;color:var(--texto-suave);font-weight:700}

/* Qué tiene que poner cada parte en cada cuenta */
.cuentas-rejilla{display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:.6rem}
.cuenta-caja{border:1px solid var(--borde);border-radius:11px;padding:.65rem .8rem;background:#fff}
.cuenta-nombre{font-weight:700;margin-bottom:.35rem}
.movidas{list-style:none;margin:0 0 .25rem;padding:0;display:flex;flex-direction:column;gap:.25rem}
.movida{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.35rem .55rem;border-radius:8px;background:var(--gris-bg,#f7f8f9);
  border-left:4px solid var(--borde)}
.movida.pone{border-left-color:#d0645a}
.movida.saca{border-left-color:#3aa06b}
.movida .movida-txt{flex:1;min-width:9rem}
.movida .movida-eur{font-variant-numeric:tabular-nums;white-space:nowrap}
.movida.pone .movida-eur{color:var(--rojo,#b3261e)}
.movida.saca .movida-eur{color:#1b7a4b}
.cuenta-propio{margin:.3rem 0 0}
@media (min-width:980px){
  .cuentas-rejilla{grid-template-columns:repeat(2,1fr)}
  .cuentas-rejilla:has(> :nth-child(3)){grid-template-columns:repeat(3,1fr)}
}

/* Repartir en euros en vez de en porcentaje */
.banco-areas .b-equiv{display:block;font-size:.66rem;line-height:1.25;min-height:.9em}
.banco-areas.en-euros{background:#fbfaf5;border-radius:8px;padding:.35rem .4rem;margin-left:-.4rem}
.b-cambia-modo{flex:none;align-self:flex-end}


/* ==========================================================
   Facturas
   ========================================================== */
/* Botón de «sin cobrar»: el amarillo de lo que está pendiente */
.btn-aviso{background:#fff6e3;border-color:#e6cf9a;color:#7c5307}
.btn-aviso:hover{background:#fdeecb}
.en-linea{display:inline}

/* Subir el papel */
.leer-factura .leer-form{
  border:1px dashed var(--granate-borde);background:var(--granate-suave);
  border-radius:var(--radio);padding:.9rem 1rem;margin-bottom:.7rem}
.leer-fila{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.leer-fila .peq{flex:1 1 14rem;min-width:0}
.leer-factura .mas-texto{margin-top:.6rem}
.leer-factura .mas-texto summary{cursor:pointer;color:var(--texto-suave)}
.leer-factura .mas-texto textarea{min-height:120px;margin:.5rem 0}

/* Los datos de la ficha, en rejilla */
.datos-rejilla{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem}
.datos-rejilla .etq{margin-bottom:.1rem}

/* La factura y el justificante de pago */
.papeles{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem}
.papel{
  width:9.5rem;border:1px solid var(--borde);border-radius:12px;overflow:hidden;
  background:#fff;display:flex;flex-direction:column}
.papel>a{display:block;text-decoration:none;color:inherit}
.papel img{width:100%;height:7.5rem;object-fit:cover;display:block;background:var(--gris-bg)}
.papel-icono{
  display:flex;align-items:center;justify-content:center;height:7.5rem;
  font-size:2.2rem;background:var(--gris-bg)}
.papel-nombre{display:block;padding:.35rem .5rem;font-size:.75rem;color:var(--texto-suave)}
.papel-acc{display:flex;gap:.3rem;padding:0 .4rem .45rem;flex-wrap:wrap}
.papel-acc form{margin:0}
/* El pie de un papel de documento: el peso a un lado y los botones al otro */
.papel-pie{
  display:flex;align-items:center;justify-content:space-between;gap:.3rem;
  padding:0 .45rem .45rem;flex-wrap:wrap}
.papel-pie form{margin:0;display:inline}

/* El firmario: las firmas que se guardan para reutilizarlas */
.firmario{display:flex;gap:.6rem;flex-wrap:wrap}
.firma-elegir,.firma-guardada{
  width:12rem;border:1px solid var(--borde);border-radius:12px;background:#fff;
  padding:.5rem;display:flex;flex-direction:column;gap:.25rem;text-align:left}
.firma-elegir{cursor:pointer;align-items:stretch;font:inherit;color:inherit}
.firma-elegir:hover{border-color:var(--granate);background:var(--granate-suave)}
.firma-elegir.elegida{border-color:var(--granate);border-width:2px;background:var(--granate-suave)}
.firma-elegir img,.firma-guardada img{
  width:100%;height:4.2rem;object-fit:contain;background:#fff;display:block}
.fg-nombre{font-weight:600;font-size:.85rem}
.firma-guardada{width:15rem}
.firma-guardada .fg-datos{font-size:.85rem}
.firma-guardada .fg-acc>summary{
  cursor:pointer;font-size:.78rem;color:var(--texto-suave);padding:.25rem 0;list-style:none}
.firma-guardada .fg-acc>summary::before{content:"▸ "}
.firma-guardada .fg-acc[open]>summary::before{content:"▾ "}
.firma-guardada .fg-acc form{margin:0}
/* Cuando se elige un PNG, el lienzo se apaga: ya no hace falta dibujar */
.lienzo-caja.apagada{opacity:.4;pointer-events:none}

/* Las firmas de un documento */
.firmas-lista{display:flex;flex-direction:column;gap:.6rem}
.firma-tarjeta{
  display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;
  border:1px solid var(--borde);border-radius:12px;padding:.6rem .8rem;background:#fff}
.firma-tarjeta img{
  max-width:min(220px,46vw);max-height:5.5rem;height:auto;display:block;
  background:#fff;border-radius:6px}
.firma-tarjeta .firma-datos{flex:1;min-width:11rem}
.firma-tarjeta .firma-datos form{display:inline;margin-left:.3rem}
.subir-papel{margin:0}
.subir-papel label{cursor:pointer}

/* En el móvil los filtros van uno por línea: media caja no da para leerlos */
@media (max-width:719px){
  .filtros.filtros-2 input[type=search],
  .filtros.filtros-2 select{grid-column:1 / -1}
}

/* Una cabecera de tarjeta que se puede pulsar para abrir el formulario */
.tarjeta-cab.como-boton{text-decoration:none;color:inherit;cursor:pointer}
.tarjeta-cab.como-boton:hover{background:var(--granate-suave)}


/* ==========================================================
   Cabeceras que ordenan al pincharlas
   ========================================================== */
.tabla th .th-orden{
  color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:.25rem;
  white-space:nowrap;border-radius:6px;padding:.1rem .2rem;margin:-.1rem -.2rem}
.tabla th .th-orden:hover{color:var(--granate-tinta);background:var(--granate-suave)}
.tabla th.der .th-orden{flex-direction:row-reverse}
.tabla th.th-activa{color:var(--granate-tinta)}
.th-flecha{font-size:.9em;line-height:1}
/* Si no está ordenada por ahí, se insinúa la flecha al pasar por encima */
.tabla th .th-orden::after{
  content:'↕';font-size:.85em;opacity:0;transition:opacity .15s}
.tabla th.th-activa .th-orden::after{content:''}
.tabla th .th-orden:hover::after{opacity:.45}

/* En el móvil no hay cabecera que pinchar: el orden va en un desplegable */
.orden-movil{
  align-items:center;gap:.5rem;margin:0 0 .6rem;
  padding:.45rem .7rem;border:1px solid var(--borde);border-radius:10px;
  background:var(--gris-bg,#f7f8f9)}
.orden-movil.solo-movil{display:flex}
@media (min-width:720px){ .orden-movil.solo-movil{display:none} }
.orden-movil label{margin:0;white-space:nowrap}
.orden-movil select{flex:1;min-width:0}

/* Una opción que depende de la de arriba: va metida hacia dentro */
.opcion-caja.opcion-hija{
  margin:.35rem 0 0 1.4rem;border-left:3px solid var(--granate-borde);
  border-radius:0 10px 10px 0}

/* Cuando se llega a una opción desde un enlace —«llévame a la casilla»— se
   queda marcada un rato, que si no hay que buscarla entre todas. */
.opcion-caja:target{
  border-color:var(--granate);border-left-width:4px;
  box-shadow:0 0 0 3px var(--granate-suave);
  animation:opcion-avisa 2.2s ease-out 1;
}
@keyframes opcion-avisa{
  0%,22%{background:var(--granate-suave)}
  100%{background:transparent}
}
@media (prefers-reduced-motion:reduce){ .opcion-caja:target{animation:none;background:var(--granate-suave)} }

/* Un sitio al que volver: al guardar un apunte se cae justo en su lista */
.ancla{display:block;position:relative;top:-80px;visibility:hidden}

/* ==========================================================
   El calendario de meses: los doce a la vista
   ========================================================== */
.calendario{
  display:flex;flex-direction:column;gap:.45rem;margin:-.4rem 0 1rem}
.cal-anos{display:flex;gap:.3rem;flex-wrap:wrap}
.cal-anos .chip.ano-visto{border-color:var(--granate-borde);color:var(--granate-tinta)}
.cal-meses{
  display:grid;grid-template-columns:repeat(6,1fr);gap:.3rem}
.cal-mes{
  display:flex;flex-direction:column;align-items:center;gap:.05rem;
  padding:.35rem .2rem;border:1px solid var(--borde);border-radius:9px;
  background:#fff;text-decoration:none;color:var(--texto);line-height:1.15}
.cal-mes:hover{border-color:var(--granate-borde);background:var(--granate-suave)}
.cal-mes-et{font-size:.78rem;font-weight:650}
.cal-mes-n{font-size:.66rem;color:var(--texto-suave);font-variant-numeric:tabular-nums}
.cal-mes.activo{
  background:var(--granate);border-color:var(--granate);color:var(--sobre-granate)}
.cal-mes.activo .cal-mes-n{color:inherit;opacity:.85}
.cal-mes.vacio{opacity:.45}
.cal-mes.vacio:hover{opacity:.8}
@media (min-width:720px){
  .cal-meses{grid-template-columns:repeat(12,1fr)}
  .calendario{flex-direction:row;align-items:center;gap:.7rem}
  .cal-meses{flex:1}
}

/* ==========================================================
   Vista previa: dónde va la firma en el papel
   ========================================================== */
.previa{
  position:relative;width:100%;max-width:780px;margin:0 auto;
  border:1px solid var(--borde);border-radius:10px;overflow:hidden;background:#fff;
  box-shadow:0 2px 10px rgba(16,19,26,.07)}
.previa-fondo{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  object-fit:contain;background:#fff}
.previa-vacia{display:flex;align-items:center;justify-content:center;background:var(--gris-bg)}
/* «hidden» tiene que poder con el display de la clase, o el respaldo tapa el lienzo */
.previa .previa-fondo[hidden]{display:none}
.previa-firma{
  position:absolute;cursor:grab;touch-action:none;user-select:none;
  border:1px dashed transparent;border-radius:4px;padding:2px}
.previa-firma img{width:100%;height:auto;display:block;pointer-events:none}
.previa-firma .previa-pie{
  display:block;font-size:.6rem;color:#3a3f4a;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;pointer-events:none}
.previa-firma:hover,.previa-firma.moviendo{
  border-color:var(--granate);background:rgba(142,27,52,.06);cursor:grabbing}

.firmas-colocar{display:flex;flex-direction:column;gap:.5rem}
.colocar-fila{
  display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;
  border:1px solid var(--borde);border-radius:10px;padding:.5rem .7rem;background:#fff}
.colocar-fila.aqui{border-color:var(--granate)}
.colocar-fila img{width:5rem;height:2.4rem;object-fit:contain;background:#fff}
.colocar-fila .colocar-datos{flex:1;min-width:8rem;font-size:.85rem}
.colocar-fila input[type=range]{width:8rem}
@media (max-width:719px){
  .colocar-fila input[type=range]{width:100%}
  .colocar-fila .colocar-datos{min-width:6rem}
}

/* El cotejo de quién ingresa y quién saca en cada cuenta */
.cotejo{display:flex;flex-direction:column;gap:.4rem;margin:.6rem 0 .3rem}
.cotejo-linea{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;text-decoration:none;color:inherit;
  border:1px solid var(--borde);border-left-width:4px;border-radius:10px;padding:.55rem .8rem;
  background:#fff}
.cotejo-linea:hover{background:var(--granate-suave);text-decoration:none}
.cotejo-linea.pone{border-left-color:var(--rojo,#b3261e)}
.cotejo-linea.saca{border-left-color:#3aa06b}
.cotejo-que{flex:1;min-width:12rem}
.cotejo-importe{font-weight:700;font-variant-numeric:tabular-nums;font-size:1.05rem}
.cotejo-linea.pone .cotejo-importe{color:var(--rojo,#b3261e)}
.cotejo-linea.saca .cotejo-importe{color:#1b7a4b}
.cotejo-donde{color:var(--texto-suave);font-size:.85rem;width:100%}
@media (min-width:720px){
  .cotejo-donde{width:auto}
}

/* ------------------------------------------------------------------
   «Ver los movimientos de…»: cuenta, área y cuándo, en una línea.
------------------------------------------------------------------ */
.buscador-mov{margin:.9rem 0}
.bm-fila{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end}
.bm-fila label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;
  color:var(--texto-suave);flex:1 1 11rem;min-width:9rem;margin:0}
.bm-fila select{width:100%}
.bm-fila label.bm-ano{flex:0 0 auto;flex-direction:row;align-items:center;gap:.4rem;
  color:var(--texto);padding-bottom:.55rem;white-space:nowrap}
.bm-fila label.bm-ano input{margin:0}
.bm-fila button{flex:0 0 auto}
@media (max-width:560px){
  .bm-fila label{flex:1 1 100%}
  .bm-fila button{width:100%}
}

/* ------------------------------------------------------------------
   Cuentas: la misma cuenta con doce nombres distintos.
------------------------------------------------------------------ */
.ctas-tabla{width:100%;border-collapse:collapse}
.ctas-tabla th,.ctas-tabla td{padding:.5rem .6rem;border-bottom:1px solid var(--borde);
  text-align:left;vertical-align:middle}
.ctas-tabla th{font-size:.8rem;color:var(--texto-suave);font-weight:600}
.ctas-tabla td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ctas-tabla tr.marcada{background:var(--granate-suave)}
.cta-nombre{font-weight:600}
.grupo-propuesto{border:1px solid var(--borde);border-radius:10px;padding:.8rem;margin:.6rem 0;
  background:#fafbfc}
.grupo-propuesto .g-cab{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.5rem}
.grupo-propuesto .g-nombre{font-weight:700}
.grupo-piezas{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem}
.grupo-piezas .pieza{background:#fff;border:1px solid var(--borde);border-radius:999px;
  padding:.15rem .6rem;font-size:.85rem}
.grupo-propuesto form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.grupo-propuesto input[type=text]{flex:1 1 14rem;min-width:10rem}

/* ------------------------------------------------------------------
   Lo que falta por repartir, cuenta por cuenta.
------------------------------------------------------------------ */
.sin-repartir .tarjeta-cab{flex-wrap:wrap}
.sinrep-lista{display:flex;flex-direction:column;gap:.4rem}
.sinrep-linea{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;
  padding:.6rem .8rem;border:1px solid var(--borde);border-left:4px solid #e0b24a;
  border-radius:8px;background:#fff;color:inherit;text-decoration:none}
.sinrep-linea:hover{background:var(--granate-suave);text-decoration:none}
.sinrep-cuenta{flex:1 1 12rem;min-width:9rem;font-weight:600}
.sinrep-cifras{display:flex;flex-wrap:wrap;gap:.35rem .8rem;font-size:.9rem}
.sinrep-trozo{white-space:nowrap;font-variant-numeric:tabular-nums}
.sinrep-trozo.tras{color:var(--texto-suave)}
.sinrep-trozo.tras strong{color:var(--granate)}
.sinrep-ir{margin-left:auto;white-space:nowrap;color:var(--granate);font-weight:600}
@media (max-width:560px){
  .sinrep-ir{margin-left:0}
  .sinrep-cuenta{flex:1 1 100%}
}

/* La versión instalada, abajo del todo y sin molestar. */
.pie-version{
  max-width:1200px;margin:2.5rem auto .5rem;padding:0 1rem 1rem;
  text-align:center;font-size:.78rem;color:var(--texto-suave);opacity:.75}
.pie-version{margin-bottom:calc(1rem + var(--tabs-h))}

/* El detalle de una cuenta: los dos botones de cada caja y su tabla. */
.cuenta-acciones{display:flex;gap:.35rem;margin:-.2rem 0 .6rem}
.tabla-cuenta td{vertical-align:top}
.tabla-cuenta .punto-area{margin-right:.15rem}

/* ------------------------------------------------------------------
   Notas internas de un presupuesto: se ven distintas a propósito, para
   que nadie las confunda con lo que sale en el papel del cliente.
------------------------------------------------------------------ */
.notas-internas{border-color:#e3cf9a;background:#fffdf6}
.notas-internas .tarjeta-cab{background:#fff8e8;border-bottom-color:#ecd29a;flex-wrap:wrap}
.notas-internas .tarjeta-cab h2{color:#7c5307}
.notas-internas .tarjeta-pie{background:#fffaf0;border-top-color:#f0e2c2}
.notas-lista{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.6rem}
.nota{border:1px solid #ecd29a;border-left:4px solid #d9a400;border-radius:9px;
  padding:.55rem .75rem;background:#fff}
.nota-quien{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.2rem}
.nota-texto{font-size:.95rem;line-height:1.45}
.nota-acciones{display:flex;gap:.5rem;align-items:center;margin-top:.45rem;flex-wrap:wrap}
.nota-acciones details{flex:0 0 auto}
.nota-acciones summary{cursor:pointer;color:var(--granate)}
.nota-form{display:flex;flex-direction:column;gap:.4rem;margin-top:.4rem}
.nota-form textarea{width:100%;min-height:4.5rem;font:inherit}
.nota-form button{align-self:flex-start}
.nota-nueva{border-top:1px dashed #e3cf9a;padding-top:.8rem;margin-top:.2rem}
/* El candadito del listado: que se vea que ese presupuesto lleva algo apuntado */
.tiene-notas{color:#7c5307;text-decoration:none;font-size:.9rem;white-space:nowrap}
.tiene-notas:hover{text-decoration:none;opacity:.75}

/* Los archivos que cuelgan de una nota interna */
.nota-archivos{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.na{display:flex;align-items:center;gap:.3rem;background:#fff;border:1px solid #ecd29a;
  border-radius:9px;padding:.25rem .4rem;max-width:100%}
.na > a{display:flex;align-items:center;gap:.4rem;text-decoration:none;color:inherit;min-width:0}
.na > a:hover{text-decoration:none;opacity:.8}
.na-mini{width:42px;height:42px;object-fit:cover;border-radius:6px;display:block;background:#f4f6f8}
.na-icono{font-size:1.3rem;width:42px;text-align:center}
.na-nombre{font-size:.85rem;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.na-peso{white-space:nowrap}
.na-quitar{border:0;background:none;color:#b3261e;cursor:pointer;font-size:1rem;line-height:1;
  padding:.1rem .25rem;border-radius:6px}
.na-quitar:hover{background:#fdecea}
.nota-form input[type=file]{font-size:.9rem}
@media (max-width:560px){ .na-nombre{max-width:7rem} }

/* Pegar (Ctrl+V) y arrastrar archivos encima de una nota */
.nf-pista{margin:.1rem 0 0}
.nf-pista kbd{font:inherit;font-size:.82rem;background:#fff;border:1px solid #d9c38a;
  border-bottom-width:2px;border-radius:5px;padding:0 .3rem}
.nf-elegidos{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.nfe{display:flex;align-items:center;gap:.45rem;background:#fff;border:1px solid #ecd29a;
  border-radius:9px;padding:.25rem .4rem}
.nfe-mini{width:40px;height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:center;
  background:#f8f4e8;border-radius:6px;overflow:hidden}
.nfe-mini img{width:100%;height:100%;object-fit:cover;display:block}
.nfe-ico{font-size:1.2rem}
.nfe-nom{flex:1 1 auto;min-width:0;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nfe-peso{flex:0 0 auto}
.nfe-quitar{flex:0 0 auto;align-self:center;border:0;background:none;color:#b3261e;cursor:pointer;
  font-size:1rem;line-height:1;width:1.7rem;height:1.7rem;display:flex;align-items:center;
  justify-content:center;border-radius:6px;padding:0}
.nfe-quitar:hover{background:#fdecea}
.nfe-malo{border-color:#f0b3ad;background:#fdecea;color:#8a1c14}
.nfe-malo .nfe-nom{white-space:normal}
/* Mientras arrastras algo por encima de la tarjeta */
.notas-internas.nf-soltando{outline:3px dashed #d9a400;outline-offset:-3px;background:#fffaea}
.nf-recien{animation:nf-brillo .9s ease-out}
@keyframes nf-brillo{
  0%  {background:#fff3cd;box-shadow:0 0 0 4px #fdeab6}
  100%{background:transparent;box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){ .nf-recien{animation:none} }

/* ------------------------------------------------------------------
   Los conceptos de una factura: una línea por cosa, con su precio y
   su IVA. En el móvil la tabla se deshace en fichas, que una tabla de
   seis columnas en un teléfono no se lee.
------------------------------------------------------------------ */
.conceptos{margin:.2rem 0 1rem}
.conceptos-cab{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.4rem}
.conceptos-cab h3{margin:0;font-size:1rem}
.tabla-conceptos{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla-conceptos th{
  text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--texto-suave,#5b6671);font-weight:650;padding:.2rem .35rem;border-bottom:1px solid var(--granate-borde);
}
.tabla-conceptos td{padding:.25rem .35rem;vertical-align:middle;border-bottom:1px solid #eef0f2}
.tabla-conceptos .c-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabla-conceptos th.c-num{text-align:right}
.tabla-conceptos .c-quita{width:2.2rem;text-align:center}
.tabla-conceptos input,.tabla-conceptos select{width:100%;font:inherit;padding:.3rem .4rem}
.tabla-conceptos .c-num input{text-align:right}
.tabla-conceptos .l-cant{max-width:5.5rem}
.tabla-conceptos .l-precio{max-width:8rem}
.tabla-conceptos .c-iva{width:6.5rem}
.tabla-conceptos .l-importe{font-variant-numeric:tabular-nums;white-space:nowrap}
.l-quitar{
  border:0;background:none;color:#b3261e;cursor:pointer;font-size:1rem;line-height:1;
  width:1.8rem;height:1.8rem;border-radius:6px;display:flex;align-items:center;justify-content:center;
}
.l-quitar:hover{background:#fdecea}
.tabla-conceptos.solo-ver td{padding:.35rem .35rem}
.tabla-conceptos.solo-ver .c-iva,
.tabla-conceptos.solo-ver th.c-iva{text-align:right;padding-right:1.4rem}
#masConcepto{margin-top:.5rem}
.sr-solo{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@media (max-width:720px){
  .tabla-conceptos thead{display:none}
  .tabla-conceptos,.tabla-conceptos tbody,.tabla-conceptos tr,.tabla-conceptos td{display:block;width:100%}
  .tabla-conceptos tr{
    border:1px solid var(--granate-borde);border-radius:var(--radio);
    padding:.5rem .6rem;margin-bottom:.6rem;position:relative;background:#fff;
  }
  .tabla-conceptos td{border:0;padding:.18rem 0;display:flex;align-items:center;gap:.6rem}
  .tabla-conceptos td::before{
    content:attr(data-et);flex:0 0 5.5rem;font-size:.78rem;text-transform:uppercase;
    letter-spacing:.03em;color:var(--texto-suave,#5b6671);font-weight:650;
  }
  /* Sitio para la ✕ de la esquina, que si no se come el final del concepto */
  .tabla-conceptos td.c-concepto{padding-right:1.8rem}
  .tabla-conceptos td.c-concepto::before{flex-basis:5.5rem}
  .tabla-conceptos .c-num{text-align:left}
  .tabla-conceptos .c-num input{text-align:left}
  .tabla-conceptos .l-cant,.tabla-conceptos .l-precio{max-width:none}
  .tabla-conceptos .c-iva{width:auto}
  .tabla-conceptos .c-quita{position:absolute;top:.35rem;right:.35rem;width:auto;padding:0}
  .tabla-conceptos .c-quita::before{content:none}
}

/* El interruptor de «los precios que escribo son sin IVA / lo llevan dentro» */
.modo-precio{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:.2rem 0 1rem;padding:.45rem .6rem;
  background:var(--granate-suave);border:1px solid var(--granate-borde);border-radius:var(--radio);
}
.modo-precio[hidden]{display:none}
.modo-precio .mp{
  display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.92rem;
  padding:.2rem .55rem;border:1px solid transparent;border-radius:999px;
}
.modo-precio .mp:has(input:checked){background:#fff;border-color:var(--granate-borde)}
.modo-precio .mp input{margin:0}
@media (max-width:560px){ .modo-precio{align-items:flex-start;flex-direction:column;gap:.2rem} }

/* ------------------------------------------------------------------
   Los checks del presupuesto: cómo va la cosa de un vistazo.
   Uno azul, hecho. Dos azules, facturado. Dos azules y uno verde,
   cobrado. Uno rojo, no aceptado. Se leen como en el móvil, sin
   tener que explicárselo a nadie.
------------------------------------------------------------------ */
.checks{display:inline-flex;align-items:center;gap:.3rem;vertical-align:middle;line-height:1}
.chk{display:block;overflow:visible}
.chk path{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chk-azul .chk-g1 path{stroke:#1d82d6}
.chk-rojo .chk-g1 path{stroke:#c62828}
.chk .chk-g2 path{stroke:#1aa35a}
.checks-txt{font-size:.78rem;font-weight:650;letter-spacing:.01em}
.checks-terminado   .checks-txt{color:#1d82d6}
.checks-facturado   .checks-txt{color:#1d82d6}
.checks-cobrado     .checks-txt{color:#1aa35a}
.checks-no_aceptado .checks-txt{color:#c62828}
/* En la ficha se enseñan más grandes, que es donde se miran de verdad */
.checks-grande .chk{transform:scale(1.5);transform-origin:left center;margin-right:.7rem}
.checks-grande .checks-txt{font-size:.95rem}

/* Los botones de poner y quitar cada marca */
.marcas-botones{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.marcas-botones form{display:inline}
.btn-marca{display:inline-flex;align-items:center;gap:.4rem}
.btn-marca.puesta{background:#eaf4fd;border-color:#9ccaf0;color:#14598f}
.btn-marca.puesta.verde{background:#e8f7ee;border-color:#9bdcb8;color:#117a44}
.col-checks{white-space:nowrap;text-align:center;width:4.5rem}
.chips-marcas{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.chips-marcas .chip{display:inline-flex;align-items:center;gap:.35rem}
/* El hueco donde iría el check de los que están en trámite: no llevan */
.chk-vacio{display:inline-block;width:14px;height:11px;border-bottom:2px dotted #b9c0c7;
  vertical-align:middle;opacity:.8}
/* El veredicto del IVA, dicho con palabras debajo del número */
.iva-dicho{font-weight:650}
.kpi.rojo .iva-dicho{color:#b3261e}
.kpi.verde .iva-dicho{color:#117a44}

/* ------------------------------------------------------------------
   Varios meses a la vez: cada mes lleva un ✓ para sumarlo a lo que ya
   estás viendo, sin perder el clic de siempre que va sólo a ese mes.
------------------------------------------------------------------ */
.cal-casilla{position:relative;display:block}
.cal-casilla .cal-mes{width:100%;box-sizing:border-box}
.cal-mas{
  position:absolute;top:-5px;right:-5px;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;line-height:1;font-weight:700;text-decoration:none;
  background:#fff;border:1px solid var(--borde);color:var(--texto-suave);
}
.cal-mas:hover{border-color:var(--granate);color:var(--granate);background:var(--granate-suave)}
.cal-casilla.elegido .cal-mas{background:var(--granate);border-color:var(--granate);color:#fff}
/* El mes elegido ya se pinta como «lo que estoy mirando» con .activo: aquí no
   se le toca el fondo, que si no el texto claro se queda sobre rosa claro y
   no hay quien lo lea. */
.cal-elegidos{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.35rem .6rem;margin:-.2rem 0 .5rem;
  background:var(--granate-suave);border:1px solid var(--granate-borde);border-radius:var(--radio);
}
.cal-elegidos .btn{margin-left:auto}
/* El dato de apoyo del cuadro: el total con IVA, debajo y más pequeño, sin
   quitarle sitio a lo que ya estaba. */
.kpis .kpi .k-pie .k-mas{display:inline-block;margin-top:.1rem;font-size:.92em;opacity:.85}

/* ------------------------------------------------------------------
   Los consejos de la IA: el botón va con los demás de la cabecera —así
   no tapa ningún botón de la tabla en tablet ni en el móvil— y lo que
   flota es la ventanita. En el móvil se pega abajo y ocupa el ancho,
   que es donde se lee.
------------------------------------------------------------------ */
.consejos-boton{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  background:var(--granate);color:var(--sobre-granate);border-color:var(--granate);
}
.consejos-boton:hover{filter:brightness(1.08);background:var(--granate);color:var(--sobre-granate)}
.consejos-boton.abierto{background:var(--texto);border-color:var(--texto)}
.consejos-boton .cb-icono{font-size:1.05rem;line-height:1}

.consejos-panel{
  position:fixed;right:1rem;bottom:1rem;z-index:61;
  width:min(26rem, calc(100vw - 2rem));max-height:min(32rem, calc(100vh - 4rem));
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--borde);border-radius:14px;
  box-shadow:0 14px 44px rgba(0,0,0,.26);overflow:hidden;
}
.consejos-panel[hidden]{display:none}
.cp-cab{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.6rem .8rem;border-bottom:1px solid var(--borde);background:var(--granate-suave);
}
.cp-cerrar{
  margin-left:auto;border:0;background:none;cursor:pointer;font-size:1rem;line-height:1;
  padding:.2rem .35rem;border-radius:6px;color:var(--texto-suave);
}
.cp-cerrar:hover{background:#fff;color:var(--texto)}
.cp-cuerpo{padding:.7rem .8rem;overflow:auto;flex:1;min-height:4rem}
.cp-cuerpo p{margin:0 0 .5rem}
.cp-pie{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-top:1px solid var(--borde)}
.cp-aviso{
  padding:.45rem .8rem;background:#fffaf0;border-top:1px solid #f0e2c2;color:#7c5307;line-height:1.35;
}

.cp-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.cp-consejo{border:1px solid var(--borde);border-left:4px solid var(--borde);border-radius:9px;padding:.5rem .6rem}
.cp-consejo.cp-alta{border-left-color:#c62828;background:#fdf5f5}
.cp-consejo.cp-media{border-left-color:#d9a400;background:#fffdf6}
.cp-consejo.cp-baja{border-left-color:#1d82d6;background:#f6fafd}
.cp-titulo{font-weight:700;font-size:.92rem;margin-bottom:.15rem}
.cp-texto{font-size:.88rem;line-height:1.45}
.cp-cuando{margin:.6rem 0 0}
.cp-fallo{
  padding:.5rem .6rem;border:1px solid #f0b3ad;background:#fdecea;color:#8a1c14;
  border-radius:9px;font-size:.88rem;
}
/* Los tres puntitos de «estoy pensando» */
.cp-cargando{display:flex;gap:.35rem;align-items:center;justify-content:center;padding:1.6rem 0}
.cp-cargando span{
  width:.5rem;height:.5rem;border-radius:50%;background:var(--granate);opacity:.35;
  animation:cp-late 1.1s infinite ease-in-out;
}
.cp-cargando span:nth-child(2){animation-delay:.18s}
.cp-cargando span:nth-child(3){animation-delay:.36s}
@keyframes cp-late{0%,80%,100%{opacity:.3;transform:scale(.85)}40%{opacity:1;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){ .cp-cargando span{animation:none;opacity:.6} }

/* En el móvil la ventanita se pega abajo y ocupa el ancho, por encima de la
   barra de abajo para no pelearse con ella. */
@media (max-width:560px){
  .consejos-panel{
    right:.5rem;left:.5rem;bottom:4.6rem;width:auto;max-height:calc(100vh - 8rem);
  }
}