/* ============================================================
   IDENTIDAD VISUAL (neutra)
   Cada empresa pone sus colores en Ajustes → Datos de la empresa:
   "Principal" reemplaza a --verde (encabezado y títulos) y "Acento" a
   --dorado (botones y pestaña activa). Estos son los valores por defecto.
   ============================================================ */
:root{
  --verde:      #1f3b57;
  --verde-med:  #44596f;
  --verde-suave:#e9ebee;
  --dorado:     #d9a441;
  --dorado-osc: #ae8334;
  --crema:      #edd3a2;
  --fondo:      #f4f6f5;
  --carta:      #ffffff;
  --tinta:      #1c2b28;
  --gris:       #5c6b67;
  --borde:      #d9e2df;
  --ok:         #1c7c4d;
  --ok-fondo:   #e2f3ea;
  --error:      #b3372b;
  --error-fondo:#fbeae7;
  --aviso-fondo:#fdf6e0;
  --aviso-tinta:#7a5c00;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{ font-family:'Segoe UI', system-ui, Arial, sans-serif; background:var(--fondo); color:var(--tinta); font-size:15px; }
.oculta{ display:none !important; }

/* ---------- ENCABEZADO ---------- */
.topbar{
  background:var(--verde); color:#fff; padding:10px 22px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  border-bottom:3px solid var(--dorado);
}
.marca{ display:flex; align-items:center; gap:12px; }
/* el logo va sobre una pastilla clara: así se ve aunque la empresa tenga un logo oscuro */
.marca-logo{ height:46px; width:auto; max-width:170px; object-fit:contain; background:#fff; border-radius:8px; padding:4px 8px; }
.marca-texto{ display:flex; flex-direction:column; line-height:1.25; }
.marca-nombre{ font-family:Georgia, 'Times New Roman', serif; font-size:19px; letter-spacing:2.5px; }
.marca-nombre em{ font-style:normal; color:var(--crema); font-size:13px; letter-spacing:3px; }
.marca-sub{ font-size:11.5px; opacity:.75; letter-spacing:.4px; }
.tabs{ display:flex; gap:6px; flex:1; justify-content:center; flex-wrap:wrap; }
.tab{
  background:transparent; color:#e6efec; border:1px solid transparent; border-radius:8px;
  padding:8px 16px; font-size:14px; cursor:pointer; font-weight:600; transition:all .15s;
}
.tab:hover{ background:rgba(255,255,255,.08); }
.tab.activa{ background:var(--dorado); color:var(--verde); }
.chip-conexion{
  font-size:12.5px; padding:5px 12px; border-radius:16px; background:rgba(255,255,255,.1);
  color:var(--crema); white-space:nowrap;
}
.chip-conexion.conectado{ background:var(--ok); color:#fff; }
.chip-conexion.pendiente{ background:var(--dorado); color:var(--verde); }

/* ---------- ESTRUCTURA ---------- */
main{ max-width:1240px; margin:0 auto; padding:18px 22px 70px; }
.vista{ display:flex; flex-direction:column; gap:16px; }
.card{
  background:var(--carta); border:1px solid var(--borde); border-radius:12px;
  padding:20px 22px; box-shadow:0 1px 3px rgba(20,24,28,.06);
}
.card h2{
  font-size:15.5px; color:var(--verde); margin-bottom:14px;
  display:flex; align-items:center; gap:10px; font-family:Georgia, serif; letter-spacing:.3px;
}
.paso{
  background:var(--verde); color:var(--crema); width:24px; height:24px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-family:'Segoe UI',sans-serif; flex-shrink:0;
}

/* ---------- FORMULARIOS ---------- */
.fila{ display:grid; gap:12px 14px; margin-bottom:12px; align-items:end; }
.fila:last-child{ margin-bottom:0; }
.c2{ grid-template-columns:repeat(2,1fr); }
.c3{ grid-template-columns:repeat(3,1fr); }
.c4{ grid-template-columns:repeat(4,1fr); }
.fila-obs{ grid-template-columns:1fr auto; align-items:end; }
@media(max-width:860px){ .c3,.c4{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .c2,.c3,.c4,.fila-obs{ grid-template-columns:1fr; } .topbar{ padding:10px 14px; } main{ padding:14px 12px 70px; } }

label{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--gris); }
label .req{ color:var(--error); }
.ayuda{ font-weight:400; font-size:11.5px; color:var(--gris); }
input, select, textarea{
  border:1px solid #c2cfcb; border-radius:8px; padding:9px 11px; font-size:14.5px;
  font-family:inherit; background:#fcfdfd; width:100%; color:var(--tinta);
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--dorado); border-color:var(--dorado); background:#fff; }
input[readonly]{ background:#eef2f1; color:var(--gris); }
input.invalido, select.invalido{ border-color:var(--error); background:var(--error-fondo); }
textarea{ resize:vertical; min-height:64px; }
.error{ color:var(--error); font-size:12px; font-weight:600; min-height:0; }
.error:empty{ display:none; }

/* buscador rápido de puestos */
.buscador-lote-caja{ position:relative; display:block; }
.resultados-lote{
  position:absolute; top:100%; left:0; right:0; z-index:30;
  background:#fff; border:1px solid var(--borde); border-radius:0 0 10px 10px;
  box-shadow:0 8px 24px rgba(20,24,28,.18); max-height:280px; overflow-y:auto;
}
.resultados-lote .item{
  padding:9px 14px; cursor:pointer; font-size:14px; display:flex; justify-content:space-between; gap:10px;
  border-bottom:1px solid #f0f4f2; font-weight:400; color:var(--tinta);
}
.resultados-lote .item:hover{ background:var(--verde-suave); }
.resultados-lote .item b{ color:var(--verde); }
.resultados-lote .item .det{ color:var(--gris); font-size:12.5px; }
.resultados-lote .item.nodisp{ opacity:.55; }
.resultados-lote .sin{ padding:10px 14px; color:var(--gris); font-size:13px; }

.info-lote{
  background:var(--verde-suave); border:1px solid var(--verde-med); border-radius:10px;
  padding:12px 16px; margin-bottom:12px; display:flex; gap:22px; flex-wrap:wrap; align-items:center; font-size:14px;
}
.info-lote .codigo{ font-family:Georgia, serif; font-size:24px; color:var(--verde); font-weight:700; }
.info-lote .dato{ display:flex; flex-direction:column; }
.info-lote .dato small{ color:var(--gris); font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.info-lote .dato b{ font-size:14.5px; color:var(--tinta); }
.info-lote.no-disponible{ background:var(--error-fondo); border-color:var(--error); }

.chip-estado{ display:inline-block; padding:3px 12px; border-radius:14px; font-size:12px; font-weight:700; white-space:nowrap; margin:3px 4px 3px 0; }
.ch-disponible{ background:var(--ok-fondo); color:var(--ok); }
.ch-separacion, .ch-separación{ background:var(--aviso-fondo); color:var(--aviso-tinta); }
.ch-vendido, .ch-bloqueado, .ch-anulado{ background:var(--error-fondo); color:var(--error); }
.ch-credito, .ch-crédito{ background:#e3ecf7; color:#1d5a94; }
.ch-contado{ background:#e9e4f5; color:#5b3d99; }
.ch-pagado{ background:var(--ok-fondo); color:var(--ok); }
.ch-vencehoy{ background:#fdebd7; color:#a35a00; }

/* ---------- PUESTOS ADICIONALES DE UNA MISMA FICHA ---------- */
.lotes-extra{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.lotes-extra .chip-lote{
  background:var(--verde-suave); border:1px solid var(--verde-med); color:var(--verde);
  border-radius:16px; padding:4px 12px; font-size:13px; font-weight:700;
  display:inline-flex; align-items:center; gap:7px;
}
.lotes-extra .chip-lote small{ font-weight:400; color:var(--gris); }
.lotes-extra .chip-lote button{
  background:none; border:none; cursor:pointer; color:var(--error); font-size:14px; padding:0; line-height:1;
}
.lotes-extra .total-lotes{ font-size:12.5px; color:var(--gris); font-weight:600; }

/* ---------- CONTROL DE VENCIMIENTOS ---------- */
.venc-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.venc-chips button{
  border:1px solid var(--borde); background:#fff; border-radius:18px; padding:7px 15px;
  font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; color:var(--gris);
}
.venc-chips button.activo{ border-width:2px; }
.venc-chips .vc-vencida.activo, .venc-chips .vc-vencida:hover{ background:var(--error-fondo); color:var(--error); border-color:var(--error); }
.venc-chips .vc-hoy.activo, .venc-chips .vc-hoy:hover{ background:#fdebd7; color:#a35a00; border-color:#a35a00; }
.venc-chips .vc-proxima.activo, .venc-chips .vc-proxima:hover{ background:#e3ecf7; color:#1d5a94; border-color:#1d5a94; }
.venc-chips .vc-aldia.activo, .venc-chips .vc-aldia:hover{ background:var(--ok-fondo); color:var(--ok); border-color:var(--ok); }

.resumen-credito{
  background:var(--verde-suave); border:1px dashed var(--verde-med); border-radius:10px;
  padding:12px 16px; display:flex; gap:26px; flex-wrap:wrap; font-size:14px;
}
.resumen-credito .dato{ display:flex; flex-direction:column; }
.resumen-credito .dato small{ color:var(--gris); font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.resumen-credito .dato b{ font-size:17px; color:var(--verde); }
.resumen-credito .dato b.destacado{ color:var(--dorado-osc); font-size:19px; }

.nota{
  background:var(--aviso-fondo); border:1px solid #edd9a3; color:var(--aviso-tinta);
  border-radius:8px; padding:9px 14px; font-size:13.5px; margin-top:10px;
}
.nota.ok{ background:var(--ok-fondo); border-color:#bfe3cf; color:var(--ok); }
.nota.error{ background:var(--error-fondo); border-color:#eec7c1; color:var(--error); }

/* ---------- BOTONES ---------- */
.btn{
  border:none; border-radius:8px; padding:10px 16px; font-size:14px; cursor:pointer;
  font-weight:700; transition:filter .15s, opacity .15s; font-family:inherit;
}
.btn:hover{ filter:brightness(1.08); }
.btn:disabled{ opacity:.55; cursor:wait; }
.btn-primario{ background:var(--dorado); color:var(--verde); }
.btn-oscuro{ background:var(--verde); color:var(--crema); }
.btn-suave{ background:#e7ecea; color:var(--verde); }
.btn-peligro{ background:var(--error-fondo); color:var(--error); }
.btn-mini{ padding:5px 10px; font-size:12.5px; border-radius:6px; }
.acciones-form{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.estado-guardado{ font-size:13.5px; font-weight:600; color:var(--gris); }
.estado-guardado.ok{ color:var(--ok); }
.estado-guardado.error{ color:var(--error); }

/* ---------- TABLA ---------- */
.barra-ops{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }
.barra-ops input[type="search"]{ flex:1; min-width:200px; }
.barra-ops select{ width:auto; }
.barra-ops .filtro-fecha{ flex-direction:row; align-items:center; gap:6px; font-size:12px; white-space:nowrap; }
.barra-ops .filtro-fecha input{ width:auto; padding:7px 8px; }
.stats{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.stats .chip{
  background:var(--verde-suave); color:var(--verde); border-radius:16px;
  padding:4px 13px; font-size:12.5px; font-weight:700;
}
.tabla-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{
  background:var(--verde); color:var(--crema); text-align:left; padding:9px 11px;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap;
}
td{ padding:10px 11px; border-bottom:1px solid #eef2f0; vertical-align:top; }
tr:hover td{ background:#f7faf9; }
td .sub{ display:block; font-size:12px; color:var(--gris); margin-top:2px; }
.vacio{ text-align:center; color:var(--gris); padding:34px 10px; }
.acciones-td{ white-space:nowrap; }
.acciones-td .btn{ margin:4px 10px 4px 0; }
.acciones-td .btn:last-child{ margin-right:0; }
.tabla-info td{ padding:7px 12px; }
.tabla-info td:first-child{ color:var(--gris); font-weight:600; width:180px; }

/* ---------- MODAL ---------- */
.modal-fondo{
  position:fixed; inset:0; background:rgba(20,24,28,.55); z-index:50;
  display:flex; align-items:flex-start; justify-content:center; padding:26px 14px; overflow-y:auto;
}
.modal-caja{
  background:#fff; border-radius:14px; max-width:900px; width:100%;
  padding:22px 24px; box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.modal-caja h3{ font-family:Georgia, serif; color:var(--verde); font-size:18px; margin-bottom:4px; }
.modal-cerrar{ float:right; background:none; border:none; font-size:22px; cursor:pointer; color:var(--gris); }
.bloque-detalle{ margin-top:16px; }
.bloque-detalle h4{
  font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--dorado-osc);
  border-bottom:1px solid var(--borde); padding-bottom:5px; margin-bottom:9px;
}
.grid-cuenta{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px; }
.grid-cuenta .dato{ background:var(--verde-suave); border-radius:9px; padding:9px 12px; }
.grid-cuenta .dato small{ display:block; color:var(--gris); font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; }
.grid-cuenta .dato b{ font-size:16px; color:var(--verde); }
.grid-cuenta .dato.alerta b{ color:var(--error); }

/* ---------- TOASTS / AVISOS ---------- */
#toasts{ position:fixed; bottom:18px; right:18px; z-index:100; display:flex; flex-direction:column; gap:8px; max-width:380px; }
.toast{
  background:var(--verde); color:#fff; border-left:4px solid var(--dorado);
  padding:12px 16px; border-radius:9px; font-size:13.5px; box-shadow:0 4px 16px rgba(0,0,0,.25);
  animation:entrar .25s ease;
}
.toast.ok{ border-left-color:#48c98a; }
.toast.error{ background:#6e2018; border-left-color:#ff8d7e; }
@keyframes entrar{ from{ transform:translateY(8px); opacity:0; } to{ transform:none; opacity:1; } }
#avisos{ max-width:1240px; margin:0 auto; padding:0 22px; }
#avisos .nota{ margin-top:12px; }

/* ---------- PANTALLA DE CLAVE ---------- */
.clave-fondo{
  position:fixed; inset:0; z-index:200; background:var(--verde);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.clave-caja{
  background:#fff; border-radius:16px; padding:36px 32px; max-width:360px; width:100%;
  text-align:center; box-shadow:0 12px 50px rgba(0,0,0,.35); border-top:4px solid var(--dorado);
}
.clave-caja .clave-logo{ height:70px; margin-bottom:10px; }
.clave-caja h1{ font-family:Georgia, serif; font-size:22px; color:var(--verde); letter-spacing:2px; }
.clave-caja h1 em{ font-style:normal; display:block; font-size:12px; color:var(--dorado-osc); letter-spacing:4px; }
.clave-caja p{ font-size:13px; color:var(--gris); margin:8px 0 18px; }
.clave-caja input{ text-align:center; font-size:16px; margin-bottom:12px; }
.clave-caja .btn{ width:100%; }
.clave-error{ color:var(--error); font-size:13px; font-weight:600; margin-top:10px; min-height:18px; }

/* ============================================================
   FICHA IMPRESA — réplica geométrica del documento oficial
   "Ficha de separación" (A4, medidas tomadas del PDF real):
   caja de texto 157.6mm (márgenes 27.4/25mm), Calibri 11pt,
   interlínea ≈4.7mm, tabla 147.1mm sangrada 8.1mm.
   @page margin:0 → el navegador omite su encabezado/pie (título,
   URL, fecha); los márgenes reales los pone el padding del doc.
   ============================================================ */
#fichaPrint{ display:none; }
/* ── MODO IMPRESIÓN ──
   Mientras se imprime, el documento es lo ÚNICO que hay en la página: así
   ningún teléfono puede acabar imprimiendo la pantalla de la app. Se aplica
   en pantalla y en papel (en pantalla se añade el botón Volver y, en móvil,
   la hoja se reduce para verse entera; el papel nunca lleva esa reducción). */
body.imprimiendo{ background:#f2f4f3; }
body.imprimiendo > *{ display:none !important; }
body.imprimiendo > #fichaPrint{ display:block !important; margin:0 auto; }
@media screen{ body.imprimiendo > #barraVolver{ display:flex !important; } }
#barraVolver{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:9999;
  align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--verde); color:#fff; font-size:12.5px; text-align:center;
}
@media screen{
  body.imprimiendo > #fichaPrint{
    transform:scale(var(--esc-impresion, 1)); transform-origin:top left;
    box-shadow:0 4px 24px rgba(0,0,0,.18);
  }
}
@media print{
  body{ background:#fff; }
  body.imprimiendo > #fichaPrint{ transform:none !important; box-shadow:none !important; }
  #barraVolver{ display:none !important; }
  /* La APLICACIÓN no se imprime nunca. Si alguien usa el menú del navegador
     (Compartir → Imprimir) en vez del botón 🖨️ de la ficha, antes salían más
     de 100 hojas de listados; ahora sale una sola hoja explicando qué hacer. */
  body:not(.imprimiendo) > *{ display:none !important; }
  body:not(.imprimiendo)::before{
    content:"Para imprimir un documento ábrelo en el sistema y usa el botón 🖨️ (Imprimir ficha / PDF). Este menú del navegador imprime la pantalla, no la ficha.";
    display:block; padding:60mm 28mm; text-align:center;
    font:14pt/1.7 Calibri, 'Segoe UI', Arial, sans-serif; color:#000;
  }
  #bannerVersion{ display:none !important; }
  /* Al imprimir se oculta TODO lo que cuelga del body y se deja solo el
     documento. Antes esto apuntaba a un contenedor `.app` que no existe en la
     página, así que no ocultaba nada y el teléfono imprimía la pantalla entera
     (42 hojas de la lista de vencimientos). Con `> *` no depende de nombres:
     cabecera, contenido, avisos y ventanas quedan fuera del papel siempre. */
  body.imprimiendo > *{ display:none !important; }
  body.imprimiendo > #fichaPrint{ display:block !important; }
  @page{ size:A4; margin:0; }
}
#fichaPrint, .hoja-a4{
  color:#000; position:relative; background:#fff;
  width:210mm; box-sizing:border-box;
}
/* La ficha es de UNA hoja por definición: se le fija el alto de la A4 y no se
   deja desbordar, así el navegador no puede sacar una segunda página (lo que
   no entra se ajusta antes reduciendo el contenido, ver ajustarEscalaFicha). */
#fichaPrint.doc-ficha, .hoja-a4.doc-ficha{ height:297mm; overflow:hidden; }
.fp-escala{ transform-origin:top left; }
#fichaPrint.doc-ficha, .hoja-a4.doc-ficha{
  font-family:Calibri, 'Segoe UI', Arial, sans-serif;
  font-size:11pt; line-height:1.21;
  /* encabezado un poco más abajo que el modelo (pedido de administración 23/07) */
  padding:12mm 25mm 14mm 27.4mm;
}
#fichaPrint.doc-cronograma{
  font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.4;
  padding:12mm 12mm;
}
/* encabezado limpio del cronograma: logo de la empresa a la izquierda, datos
   al centro y logo del proyecto a la derecha (si tiene uno propio) */
.cr-encabezado{ display:flex; align-items:center; gap:14px; border-bottom:2.5px solid var(--verde); padding-bottom:9px; margin-bottom:11px; }
.cr-logo-empresa{ height:52px; width:auto; max-width:60mm; object-fit:contain; }
.cr-emp{ flex:1; text-align:center; }
.cr-emp-nombre{ font-family:Georgia, serif; font-size:15px; font-weight:700; color:var(--verde); letter-spacing:.5px; }
.cr-emp-datos{ font-size:10.5px; color:#333; margin-top:1px; }
.cr-logo-proyecto{ height:40px; width:auto; max-width:45mm; object-fit:contain; }
/* colores y fondos deben imprimirse tal cual (barras del cronograma) */
#fichaPrint *, .hoja-a4 *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
/* nada esencial debe partirse entre páginas (las tablas largas — cronograma,
   contrato — sí pueden fluir; sus filas individuales no se parten) */
#fichaPrint table.fp-tabla, #fichaPrint table.cr-datos, #fichaPrint .fp-firmas, #fichaPrint .fp-parrafo,
#fichaPrint .fp-fecha, #fichaPrint .fp-precio-linea, #fichaPrint .cr-pie, #fichaPrint .ct-firmas,
#fichaPrint tr, #fichaPrint li{ break-inside:avoid; page-break-inside:avoid; }
#fichaPrint .ct-clausula{ break-after:avoid; page-break-after:avoid; }
#fichaPrint{ orphans:2; widows:2; }
/* marca de agua: se sube el logo normal (PNG sin fondo) y aquí se atenúa,
   así cualquier empresa puede usar el suyo sin prepararlo antes. */
.fp-marca-agua{
  position:absolute; top:84mm; left:50%; transform:translateX(-50%);
  width:95mm; z-index:0; pointer-events:none; opacity:.12;
}
.fp-contenido{ position:relative; z-index:1; }
.fp-cabecera-doc{ position:relative; height:13mm; margin-bottom:7mm; }
.fp-logo-ancho{ position:absolute; left:0; top:0; width:37.7mm; max-height:13mm; object-fit:contain; object-position:left center; }
/* Logos cuadrados o verticales: se ajustan por ALTO, si no desbordan la cabecera */
.fp-logo-alto{ position:absolute; left:0; top:0; height:13mm; width:auto; }
.fp-titulo-doc{
  text-align:center; padding-top:3.4mm;
  font-family:'Trebuchet MS', Verdana, sans-serif; font-size:11pt; font-weight:700; letter-spacing:.2px;
}
.fp-obs{ height:25.4mm; vertical-align:top; }
/* líneas de precio del modelo: el rótulo no se parte y el subrayado se estira
   hasta el borde de su columna (así los montos nunca caen a una segunda línea) */
.fp-precio-linea{ display:flex; margin:2.6mm 0; }
.fp-precio-linea > span{ display:flex; align-items:baseline; white-space:nowrap; min-width:0; }
.fp-pl1 > span:first-child{ width:78.3mm; flex:0 0 auto; padding-right:5mm; }
.fp-pl2 > span:first-child{ width:84.3mm; flex:0 0 auto; padding-right:5mm; }
.fp-pl1 > span:last-child, .fp-pl2 > span:last-child{ flex:1 1 auto; }
.fp-campo-flex{ flex:1 1 auto; min-width:8mm; white-space:nowrap; overflow:hidden; }
.fp-rol{ font-weight:700; margin-bottom:8mm; }
.fp-nombre-linea{ font-size:11pt; }
.fp-encabezado{ display:flex; align-items:center; gap:14px; border-bottom:2px solid var(--verde); padding-bottom:8px; margin-bottom:10px; }
.fp-logo{ height:52px; width:auto; }
.fp-emp{ flex:1; }
.fp-emp-nombre{ font-family:Georgia, serif; font-size:14px; font-weight:700; color:var(--verde); letter-spacing:.5px; }
.fp-emp-datos{ font-size:10.5px; color:#333; }
.fp-campo{ border-bottom:1px solid #000; padding:0 4px; font-weight:700; display:inline-block; max-width:100%; white-space:normal; overflow-wrap:break-word; }
.fp-parrafo{ text-align:justify; margin-bottom:3.2mm; }
.fp-sub{ font-weight:700; margin:4.5mm 0 2.4mm; }
/* "LA RESERVA DEL PUESTO SE EFECTÚA…" con más aire respecto al bloque de precios */
.fp-sub-cond{ margin-top:7mm; }
.fp-normal{ font-weight:400; }
/* tabla del modelo: 147.1mm de ancho, sangrada 8.1mm respecto al margen de texto */
table.fp-tabla{ width:147.1mm; margin-left:8.1mm; border-collapse:collapse; margin-bottom:2.5mm; }
table.fp-tabla td{ border:1.4px solid #000; padding:1.6mm 2.4mm; font-size:11pt; }
table.fp-tabla .fp-f1 td{ height:9.4mm; }
table.fp-tabla .fp-f2 td{ height:9.6mm; }
table.fp-tabla .fp-label{ font-weight:700; white-space:nowrap; }
.fp-fecha{ text-align:right; margin:5mm 0 3.5mm; }

/* ---------- CRONOGRAMA DE PAGOS (réplica del modelo oficial) ---------- */
.cr-logo-sec{ height:34px; width:auto; background:var(--verde); padding:5px 9px; border-radius:6px; }
.cr-barra{
  background:var(--verde); color:var(--crema); font-weight:800; letter-spacing:.8px;
  text-align:center; padding:6px 10px; font-size:12.5px; margin:10px 0 0;
  border:1.4px solid var(--verde);
}
table.cr-datos{ width:100%; border-collapse:collapse; margin-bottom:4px; }
table.cr-datos td{ border:1px solid #b8bdc2; padding:5px 8px; font-size:11.5px; }
table.cr-datos .cr-l{ font-weight:700; background:var(--verde-suave); width:13%; white-space:nowrap; }
table.cr-datos .cr-v{ width:20%; }
/* la tabla de cuotas debe caber SIEMPRE dentro del ancho de la hoja:
   anchos fijos por columna y encabezados que ajustan en varias líneas */
table.cr-tabla{ width:100%; border-collapse:collapse; table-layout:fixed; }
table.cr-tabla th{
  border:1.4px solid var(--verde); background:var(--verde-suave); color:var(--verde);
  font-size:9.5px; padding:4px 3px; text-align:center; letter-spacing:.2px;
  white-space:normal; word-break:break-word; line-height:1.15; vertical-align:middle;
}
table.cr-tabla td{ border:1px solid #b8bdc2; padding:4px 4px; font-size:11px; text-align:center; word-break:break-word; }
table.cr-tabla th:nth-child(1), table.cr-tabla td:nth-child(1){ width:7%; }
table.cr-tabla th:nth-child(2), table.cr-tabla td:nth-child(2){ width:16%; }
table.cr-tabla th:nth-child(3), table.cr-tabla td:nth-child(3){ width:13%; }
table.cr-tabla th:nth-child(4), table.cr-tabla td:nth-child(4){ width:13%; }
table.cr-tabla th:nth-child(5), table.cr-tabla td:nth-child(5){ width:8%; }
table.cr-tabla th:nth-child(6), table.cr-tabla td:nth-child(6){ width:23%; }
table.cr-tabla th:nth-child(7), table.cr-tabla td:nth-child(7){ width:20%; }
table.cr-tabla .cr-inicial td{ background:#f6f6f6; }
table.cr-tabla .cr-check{ font-size:14px; }
.cr-pie{ margin-top:16px; border-top:2px solid var(--dorado); padding-top:8px; text-align:center; }
.cr-pie-emp{ font-family:Georgia, serif; font-weight:700; color:var(--verde); font-size:13px; letter-spacing:.6px; margin-bottom:4px; }
.cr-cuenta{ font-size:11.5px; margin:2px 0; }
.cr-cuenta span{ color:#333; margin-right:8px; }
.cr-cuenta b{ letter-spacing:.5px; }
.fp-firmas{ display:flex; justify-content:space-between; margin-top:4mm; }
.fp-firma{ width:46%; text-align:center; }
.fp-dni-linea{ margin-top:1.5mm; }
/* tres firmas (con el representante de la empresa): columnas más angostas */
.fp-firmas-3 .fp-firma{ width:32%; }
.fp-firmas-3 .fp-rol{ font-size:9.5pt; white-space:nowrap; }
.fp-firmas-3 .fp-nombre-linea{ font-size:10pt; }
/* número de ficha bajo el título (dato opcional del proyecto) */
.fp-numero{ text-align:right; font-size:9pt; margin:-5mm 0 2mm; color:#222; }
/* nota del proyecto al pie del cronograma (ej. "cuotas sin intereses") */
.cr-nota{ margin-top:8px; font-size:11px; font-style:italic; text-align:center; color:#333; }

/* ---------- CONTRATO DE ADQUISICIÓN (multipágina) ---------- */
#fichaPrint.doc-contrato, .hoja-a4.doc-contrato{
  font-family:Calibri, 'Segoe UI', Arial, sans-serif; font-size:11pt; line-height:1.35;
  padding:0 24mm;
}
.ct-pag{ width:100%; border-collapse:collapse; }
.ct-pag > tbody > tr > td{ padding:0; }
.ct-esp-sup{ height:14mm; }   /* margen superior repetido en cada página */
.ct-esp-inf{ height:12mm; }   /* margen inferior repetido en cada página */
.ct-logo{ text-align:center; margin-bottom:5mm; }
.ct-logo img{ width:38mm; height:auto; }
.ct-titulo{ text-align:center; font-weight:700; font-size:11.5pt; margin-bottom:1.5mm; }
.ct-sub{ text-align:center; font-weight:700; margin-bottom:5mm; }
.ct-clausula{ font-weight:700; margin:4.5mm 0 2mm; }
#fichaPrint.doc-contrato p, .hoja-a4.doc-contrato p{ text-align:justify; margin-bottom:2.8mm; }
#fichaPrint.doc-contrato ul, .hoja-a4.doc-contrato ul{ margin:0 0 2.8mm 7mm; }
#fichaPrint.doc-contrato li, .hoja-a4.doc-contrato li{ margin-bottom:1.4mm; text-align:justify; }
.ct-firmas{
  display:flex; justify-content:space-between; margin-top:12mm;
  font-family:'Times New Roman', Georgia, serif; text-align:center;
}
.ct-firmas > div{ width:47%; }
.ct-linea-firma{ margin-top:12mm; }

/* medidor invisible para calcular la altura real de la ficha antes de imprimir */
.medidor-oculto{ position:absolute !important; left:-9999px; top:0; visibility:hidden; display:block !important; }

/* ---------- VISTA PREVIA DE LA FICHA EN PANTALLA ---------- */
.vista-previa-fondo{ align-items:flex-start; }
.vista-previa-caja{ max-width:calc(210mm + 36px); width:100%; }
.vista-previa-barra{
  background:var(--verde); color:#fff; border-radius:10px 10px 0 0;
  padding:10px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  position:sticky; top:0; z-index:5;
}
.vista-previa-barra b{ color:var(--crema); font-size:13.5px; }
.vista-previa-caja .hoja-a4{
  box-shadow:0 10px 40px rgba(0,0,0,.45); margin:0 auto; min-height:297mm;
  border-radius:0 0 4px 4px; overflow:hidden;
}
@media(max-width:840px){
  .vista-previa-caja{ overflow-x:auto; }
}

/* ============================================================
   v3 — SESIÓN, ROLES Y APROBACIONES
   ============================================================ */
.chip-usuario{
  display:flex; flex-direction:column; line-height:1.25; text-align:right;
  color:#fff; font-size:13.5px; padding:4px 12px; border-radius:10px; background:rgba(255,255,255,.1);
}
.chip-usuario span{ font-size:11.5px; color:var(--crema); opacity:.9; }
.badge-pendientes{
  display:inline-block; background:var(--error); color:#fff; border-radius:12px;
  padding:1px 8px; font-size:11.5px; margin-left:5px; font-weight:800;
}
.tab.activa .badge-pendientes{ background:var(--verde); color:var(--crema); }
/* el asesor no ve la columna administrativa de la tabla */
body.nivel-asesor .solo-admin{ display:none !important; }
.clave-caja input{ margin-bottom:10px; }
/* la jefatura de ventas puede registrar fichas de su equipo, pero NO cobra,
   aprueba ni anula: se ocultan esas acciones (el servidor igual las bloquea) */
/* Lo que cada área no puede hacer se oculta (Ajustes → Permisos por área). */
body.sin-anular .btn-peligro,

body.sin-cobranza .bloque-pago,
body.sin-cobranza .bloque-admin{ display:none !important; }

/* ---------- desglose de WhatsApp ---------- */
.wa-fondo{ align-items:flex-start; }
.wa-caja{
  background:#fff; border-radius:14px; max-width:560px; width:100%;
  padding:22px 24px; box-shadow:0 10px 40px rgba(0,0,0,.25); margin-top:6vh;
}
.wa-caja h3{ font-family:Georgia, serif; color:var(--verde); font-size:18px; margin-bottom:2px; }
.wa-opciones{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.wa-opcion{ border:1px solid var(--borde); border-radius:10px; padding:10px 12px; background:#fbfdfc; }
.wa-opcion .wa-elegir{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.wa-accion{ font-size:11.5px; font-weight:700; opacity:.85; white-space:nowrap; }
.wa-opcion.copiada{ border-color:var(--ok); background:var(--ok-fondo); }
.wa-opcion.copiada .wa-accion{ color:var(--ok); opacity:1; }
.wa-copiar-cel{ margin-left:6px; vertical-align:middle; }
.wa-previa{
  font-size:12px; color:var(--gris); margin-top:8px; line-height:1.45;
  background:#fff; border:1px dashed #d9e2df; border-radius:8px; padding:8px 10px;
}
/* fila de encabezado de grupo en la tabla de perfiles */
tr.fila-grupo td{
  background:var(--verde-suave); color:var(--verde); font-weight:800;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; padding:6px 11px;
}

/* ---------- administración del equipo ---------- */
.gestion-cabecera{
  display:flex; align-items:flex-start; justify-content:space-between; gap:22px;
  padding-bottom:18px; border-bottom:2px solid var(--verde);
}
.gestion-cabecera h2{ margin:3px 0 5px; }
.gestion-sello{
  display:inline-block; color:var(--dorado-osc); font-size:10.5px; font-weight:900;
  text-transform:uppercase; letter-spacing:1.15px;
}
.gestion-resumen{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; max-width:390px; }
.gestion-contador{
  min-width:94px; padding:8px 11px; border:1px solid #d9e4e0; border-radius:9px;
  background:linear-gradient(180deg,#fff,#f5f9f7); color:var(--verde); text-align:right;
}
.gestion-contador b{ display:block; font-family:Georgia,serif; font-size:21px; line-height:1; }
.gestion-contador span{ display:block; margin-top:3px; color:var(--gris); font-size:10.5px; }
.gestion-bloque{ padding:20px 0 4px; }
.gestion-bloque + .gestion-bloque{ margin-top:12px; border-top:1px solid var(--borde); }
.gestion-titulo,.editor-cabecera{
  display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px;
}
.gestion-titulo h3{ margin:0; color:var(--verde); font-family:Georgia,serif; font-size:17px; }
.gestion-titulo p{ margin:2px 0 0; }
.gestion-editor{
  margin:14px 0 8px; padding:15px 16px 12px; border:1px solid #cfddd8;
  border-left:5px solid var(--dorado); border-radius:10px; background:#fbfdfc;
  box-shadow:0 4px 16px rgba(20,24,28,.05);
}
.gestion-editor h4{ margin:2px 0 0; color:var(--verde); font-family:Georgia,serif; font-size:17px; }
.tabla-equipo td{ vertical-align:middle; }
.estado-linea{ display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.estado-punto{ width:8px; height:8px; border-radius:50%; background:#2d936c; box-shadow:0 0 0 3px #e8f5ef; }
.estado-punto.inactivo{ background:#a5aca9; box-shadow:0 0 0 3px #edf0ef; }
.acciones-td{ white-space:normal; }

/* ---------- inventario de lotes ----------
   La franja dorada funciona como "límite del plano": deja claro que esta
   pantalla gobierna la disponibilidad de todos los proyectos. */
.inventario-cabecera{ position:relative; padding-top:5px; }
.inventario-cabecera::before{
  content:''; position:absolute; left:0; right:0; top:-20px; height:4px;
  background:linear-gradient(90deg,var(--dorado),var(--crema) 58%,transparent);
}
.inventario-filtros{
  display:grid; grid-template-columns:minmax(170px,1.2fr) repeat(3,minmax(145px,1fr)) auto;
  gap:10px; align-items:end; margin:18px 0 12px;
}
.inventario-filtros .btn{ min-height:40px; }
.tabla-inventario td{ vertical-align:middle; }
.tabla-inventario tr.lote-revisar td{ background:#fff9eb; }
.tabla-inventario tr.lote-revisar:hover td{ background:#fff4d5; }
.inventario-alerta{ display:inline-flex; align-items:center; gap:6px; color:var(--aviso-tinta); font-weight:800; }
.inventario-alerta::before{ content:'!'; width:18px; height:18px; border-radius:50%; background:var(--dorado); color:var(--verde); display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.inventario-paginacion{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:14px; color:var(--gris); font-size:12.5px; }
.inventario-paginacion .btn{ min-width:92px; }
.lote-codigo{ font-family:Georgia,serif; font-size:19px; color:var(--verde); }
.lote-ruta{ display:block; color:var(--gris); font-size:12px; margin-top:2px; }

/* ---------- mesa de corrección segura ---------- */
.correccion-mesa{ padding-top:24px; }
.correccion-cabecera{ border-bottom-color:var(--dorado); }
.correccion-regla{
  display:flex; align-items:center; gap:7px; white-space:nowrap; color:var(--gris);
  font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.45px;
}
.correccion-regla b{
  width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--verde); color:var(--crema); font-family:Georgia,serif; font-size:13px;
}
.correccion-regla span{ color:var(--dorado-osc); font-size:17px; }
.corr-buscador{ position:relative; display:block; margin:18px 0 12px; }
.corr-buscador > input{ margin-top:5px; font-size:16px; padding:12px 14px; border-width:2px; }
.corr-buscador .resultados-lote{ top:100%; }
.corr-op-item{ width:100%; border:0; background:#fff; text-align:left; font-family:inherit; }
.corr-seleccion{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:13px 15px; border:1px solid var(--verde-med); border-radius:10px; background:var(--verde-suave);
}
.corr-seleccion .corr-codigo{ font-family:Georgia,serif; font-size:25px; color:var(--verde); font-weight:800; }
.corr-seleccion .corr-cliente{ font-weight:800; color:var(--tinta); }
.corr-seleccion .corr-meta{ display:block; color:var(--gris); font-size:12px; margin-top:2px; }
.corr-pestanas{
  display:flex; gap:5px; margin:18px 0 0; padding-bottom:8px; overflow-x:auto; scrollbar-width:thin;
  border-bottom:1px solid var(--borde);
}
.corr-pestanas button{
  flex:0 0 auto; border:1px solid var(--borde); background:#fff; color:var(--gris); border-radius:8px;
  padding:8px 12px; font:700 12.5px inherit; cursor:pointer;
}
.corr-pestanas button.activo{ background:var(--verde); border-color:var(--verde); color:var(--crema); }
.corr-panel{ padding:18px 2px 2px; }
.corr-panel-cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:13px; }
.corr-panel h3{ margin:0 0 2px; color:var(--verde); font-family:Georgia,serif; font-size:18px; }
.corr-comparacion{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:10px; margin:13px 0;
}
.corr-lado{ border:1px solid var(--borde); border-radius:9px; padding:10px 12px; background:#fafcfb; }
.corr-lado.nuevo{ border-color:#a9d2be; background:var(--ok-fondo); }
.corr-lado small{ display:block; color:var(--gris); font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; margin-bottom:3px; }
.corr-lado b{ display:block; color:var(--verde); font-size:14px; }
.corr-lado span{ display:block; color:var(--gris); font-size:12px; margin-top:2px; }
.corr-flecha{ align-self:center; color:var(--dorado-osc); font-size:22px; font-weight:900; }
.corr-total{ display:flex; justify-content:flex-end; gap:18px; padding:10px 12px; margin:8px 0 12px; background:var(--verde-suave); border-radius:8px; font-size:13px; }
.corr-total b{ color:var(--verde); }
.corr-historial-item{ border-left:4px solid var(--dorado); padding:9px 12px; margin-bottom:8px; background:#fafcfb; border-radius:0 8px 8px 0; }
.corr-historial-item b{ color:var(--verde); }
.corr-historial-item .sub{ display:block; color:var(--gris); font-size:11.5px; margin-top:3px; }
.contador-alerta{ border-color:#e6c46c; background:var(--aviso-fondo); }

@media(max-width:940px){
  .inventario-filtros{ grid-template-columns:1fr 1fr; }
  .inventario-filtros .btn{ grid-column:1 / -1; }
}

@media(max-width:760px){
  .gestion-cabecera{ flex-direction:column; }
  .gestion-resumen{ justify-content:flex-start; max-width:none; width:100%; }
  .gestion-contador{ flex:1 1 92px; text-align:left; }
  .gestion-titulo,.editor-cabecera{ align-items:flex-start; }
  #tbodyAsesoresAdmin td:nth-child(1)::before{ content:'Asesor'; }
  #tbodyAsesoresAdmin td:nth-child(2)::before{ content:'Celular'; }
  #tbodyAsesoresAdmin td:nth-child(3)::before{ content:'Tipo'; }
  #tbodyAsesoresAdmin td:nth-child(4)::before{ content:'Acceso'; }
  #tbodyAsesoresAdmin td:nth-child(5)::before{ content:none; }
  #tbodyUsuarios td:nth-child(1)::before{ content:'Usuario'; }
  #tbodyUsuarios td:nth-child(2)::before{ content:'Nombre y rol'; }
  #tbodyUsuarios td:nth-child(3)::before{ content:'Estado'; }
  #tbodyUsuarios td:nth-child(4)::before{ content:none; }
  #tbodyLotesAdmin td:nth-child(1)::before{ content:'Lote'; }
  #tbodyLotesAdmin td:nth-child(2)::before{ content:'Proyecto y etapa'; }
  #tbodyLotesAdmin td:nth-child(3)::before{ content:'Datos'; }
  #tbodyLotesAdmin td:nth-child(4)::before{ content:'Estado'; }
  #tbodyLotesAdmin td:nth-child(5)::before{ content:'Ficha vinculada'; }
  #tbodyLotesAdmin td:nth-child(6)::before{ content:none; }
  #tbodyAsesoresAdmin td:nth-child(5),#tbodyUsuarios td:nth-child(4){
    justify-content:flex-start; flex-wrap:wrap; gap:7px; text-align:left;
    border-top:1px dashed var(--borde); margin-top:4px; padding-top:9px;
  }
  #tbodyLotesAdmin td:nth-child(6){
    justify-content:flex-start; flex-wrap:wrap; gap:7px; text-align:left;
    border-top:1px dashed var(--borde); margin-top:4px; padding-top:9px;
  }
  .inventario-filtros{ grid-template-columns:1fr; }
  .inventario-filtros .btn{ grid-column:auto; }
  .inventario-paginacion{ justify-content:space-between; flex-wrap:wrap; }
  .correccion-regla{ white-space:normal; flex-wrap:wrap; }
  .corr-seleccion{ grid-template-columns:auto 1fr; }
  .corr-seleccion > :last-child{ grid-column:1 / -1; }
  .corr-comparacion{ grid-template-columns:1fr; }
  .corr-flecha{ transform:rotate(90deg); justify-self:center; line-height:1; }
  #corrTbodyCuotas td:nth-child(1)::before{ content:'Cuota'; }
  #corrTbodyCuotas td:nth-child(2)::before{ content:'Fecha'; }
  #corrTbodyCuotas td:nth-child(3)::before{ content:'Monto'; }
  #corrTbodyCuotas td:nth-child(4)::before{ content:'Pagado'; }
  #corrTbodyCuotas td:nth-child(5)::before{ content:'Estado'; }
}

/* ── reportes: gráficos de barras ── */
.rep-grafs{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 22px; }
@media(max-width:860px){ .rep-grafs{ grid-template-columns:1fr; } }
.rep-graf h5{ margin:0 0 8px; font-size:13px; color:var(--verde); }
.rg-fila{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.rg-etq{ width:34%; font-size:11.5px; color:var(--texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; }
.rg-track{ flex:1; position:relative; background:var(--verde-claro,var(--verde-suave)); border-radius:6px; height:20px; display:flex; align-items:center; }
.rg-fill{ position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,var(--verde),var(--verde-med)); border-radius:6px; min-width:2px; }
.rg-val{ position:relative; margin-left:auto; padding:0 7px; font-size:11px; font-weight:700; color:var(--verde); }


/* ════════════════════════════════════════════════════════════
   CELULAR — es donde más trabajan los asesores
   ════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  /* ---- cabecera compacta: marca y usuario arriba, pestañas deslizables ---- */
  .topbar{ padding:8px 12px; gap:8px 10px; }
  .marca{ flex:1 1 auto; min-width:0; gap:9px; }
  .marca-logo{ height:34px; }
  .marca-nombre{ font-size:15px; letter-spacing:1.6px; }
  .marca-nombre em{ font-size:11px; letter-spacing:1.6px; }
  .marca-sub{ display:none; }
  .chip-usuario{ order:2; padding:3px 9px; font-size:12px; text-align:right; }
  .chip-usuario span{ font-size:10.5px; }
  #btnSalir{ order:3; min-height:34px; }
  .tabs{
    order:4; flex:0 0 100%; width:100%; justify-content:flex-start;
    flex-wrap:nowrap; overflow-x:auto; gap:5px; padding:1px 0 3px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:0 0 auto; white-space:nowrap; padding:9px 13px; font-size:13.5px; }
  .chip-conexion{ order:5; font-size:11px; padding:3px 10px; }

  /* ---- formularios pensados para el dedo (16px evita el zoom de iOS) ---- */
  input, select, textarea{ font-size:16px; padding:11px 12px; }
  .btn{ min-height:44px; }
  .btn-mini{ min-height:38px; }
  .acciones-form .btn{ flex:1 1 100%; }
  .barra-ops{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch; }
  .barra-ops input[type="search"]{ grid-column:1 / -1; min-width:0; }
  .barra-ops select{ width:100%; }
  .barra-ops .filtro-fecha{ font-size:11.5px; }
  .barra-ops .filtro-fecha input{ width:100%; }
  .barra-ops .btn{ grid-column:1 / -1; }
  .card{ padding:16px 14px; }
  h2{ font-size:17px; }

  /* ---- cada fila de tabla se vuelve una tarjeta legible ----
     (ojo: .tabla-wrap conserva su overflow-x:auto — las tablas que NO son
     tarjetas, como las de Reportes, lo necesitan para poder desplazarse) */
  .tabla-cards thead{ display:none; }
  .tabla-cards, .tabla-cards tbody, .tabla-cards tr, .tabla-cards td{ display:block; width:100%; }
  .tabla-cards tr{
    border:1px solid var(--borde); border-radius:12px; background:#fff;
    margin-bottom:10px; padding:6px 2px; box-shadow:0 1px 4px rgba(20,24,28,.06);
  }
  .tabla-cards td{
    border:0; padding:5px 11px; display:flex; gap:12px;
    align-items:flex-start; justify-content:space-between; text-align:right;
  }
  .tabla-cards td::before{
    content:attr(data-t); flex:0 0 37%; text-align:left; padding-top:2px;
    font-size:10.5px; font-weight:800; text-transform:uppercase;
    letter-spacing:.5px; color:var(--gris);
  }
  .tabla-cards td .sub{ text-align:right; }
  .tabla-cards td.vacio{ display:block; text-align:center; }
  .tabla-cards td.vacio::before{ content:none; }
  /* el rótulo de cada dato sale de la columna (sin tocar el JS de las filas) */
  #tbodyOps td:nth-child(1)::before{ content:'Fecha'; }
  #tbodyOps td:nth-child(2)::before{ content:'Lote'; }
  #tbodyOps td:nth-child(3)::before{ content:'Cliente'; }
  #tbodyOps td:nth-child(4)::before{ content:'Asesor'; }
  #tbodyOps td:nth-child(5)::before{ content:'Modalidad'; }
  #tbodyOps td:nth-child(6)::before{ content:'Pagado / saldo'; }
  #tbodyOps td:nth-child(7)::before{ content:'Estado'; }
  #tbodyAprob td:nth-child(1)::before{ content:'Fecha'; }
  #tbodyAprob td:nth-child(2)::before{ content:'Puesto'; }
  #tbodyAprob td:nth-child(3)::before{ content:'Cliente'; }
  #tbodyAprob td:nth-child(4)::before{ content:'Asesor'; }
  #tbodyAprob td:nth-child(5)::before{ content:'Modalidad'; }
  #tbodyAprob td:nth-child(6)::before{ content:'Separación'; }
  #tbodyVenc td:nth-child(1)::before{ content:'Vence'; }
  #tbodyVenc td:nth-child(2)::before{ content:'Cuota'; }
  #tbodyVenc td:nth-child(3)::before{ content:'Cliente'; }
  #tbodyVenc td:nth-child(4)::before{ content:'Puesto'; }
  #tbodyVenc td:nth-child(5)::before{ content:'Pendiente'; }
  #tbodyVenc td:nth-child(6)::before{ content:'Asesor'; }
  /* la fila de botones ocupa el ancho completo de la tarjeta */
  #tbodyOps td:nth-child(8), #tbodyAprob td:nth-child(7), #tbodyVenc td:nth-child(7){
    justify-content:flex-start; flex-wrap:wrap; gap:7px; text-align:left;
    white-space:normal; border-top:1px dashed var(--borde); margin-top:4px; padding-top:9px;
  }
  #tbodyOps td:nth-child(8)::before,
  #tbodyAprob td:nth-child(7)::before,
  #tbodyVenc td:nth-child(7)::before{ content:none; }
  .acciones-td .btn{ margin:4px 8px 4px 0; min-width:46px; font-size:17px; }

  /* ---- ventanas y avisos ---- */
  .modal-caja, .wa-caja{
    width:100%; max-width:none; border-radius:14px;
    padding:18px 15px; max-height:88vh; overflow-y:auto;
  }
  .vista-previa-caja{ width:100%; padding:0; overflow:hidden; }
  #toasts{ left:10px; right:10px; bottom:10px; max-width:none; pointer-events:none; }
  .stats .chip{ font-size:11.5px; }
  .venc-chips button{ flex:1 1 46%; }
}

/* aviso de versión nueva (los celulares se quedan con la copia vieja) */
#bannerVersion{
  position:fixed; left:0; right:0; top:0; z-index:9998;
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px; background:var(--dorado); color:var(--verde);
  font-size:13px; font-weight:700; box-shadow:0 2px 10px rgba(0,0,0,.2);
}

/* ── caja del día: los tres resúmenes lado a lado ── */
.caja-resumen{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 20px; }
.caja-resumen h3{ font-size:12px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--gris); margin-bottom:4px; font-weight:800; }
.caja-resumen table td{ padding:5px 8px; font-size:13px; }
@media(max-width:860px){ .caja-resumen{ grid-template-columns:1fr; } }

/* desplegable "Mostrar" dentro del título de vencimientos */
.venc-ver{ margin-left:auto; flex-direction:row; align-items:center; gap:6px; font-weight:600; }
.venc-ver select{ width:auto; padding:5px 8px; font-size:12.5px; }
@media(max-width:760px){ .venc-ver{ margin-left:0; flex-basis:100%; } }

/* ============================================================
   v4 — Ajustes de empresa, proyectos, inventario editable,
   desistimiento e instalación
   ============================================================ */
.modal-caja.modal-ancho{ max-width:1180px; }
.v4-imagenes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin:14px 0; }
.v4-imagen{ display:flex; flex-direction:column; gap:7px; align-items:flex-start; }
.v4-imagen small{ font-weight:700; color:var(--gris); font-size:12.5px; }
.v4-marco{
  width:100%; max-width:260px; height:92px; border:1px dashed var(--borde); border-radius:10px; background:#fff;
  display:flex; align-items:center; justify-content:center; padding:8px; overflow:hidden;
}
.v4-marco img{ max-width:100%; max-height:100%; object-fit:contain; }
.v4-marco span{ color:var(--gris); font-size:12.5px; }
.v4-marco.chico{ width:86px; height:60px; flex:0 0 86px; }
.v4-colores{ display:flex; gap:16px; }
.v4-colores label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; }
.v4-colores input[type=color]{ width:64px; height:38px; padding:2px; border-radius:8px; cursor:pointer; }
.v4-cuenta{ align-items:end; }
.v4-proyectos{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.v4-proyecto{
  display:flex; align-items:center; gap:14px; padding:10px 12px; border:1px solid var(--borde);
  border-radius:10px; background:#fff;
}
.v4-proyecto > div:nth-child(2){ flex:1; min-width:0; }
.v4-proyecto .sub{ display:block; color:var(--gris); font-size:12.5px; margin-top:2px; }
.v4-proyecto.inactivo{ opacity:.6; }
.v4-pestanas{ display:flex; gap:5px; margin:14px 0 4px; border-bottom:1px solid var(--borde); padding-bottom:8px; overflow-x:auto; }
.v4-pestanas button{
  flex:0 0 auto; border:1px solid var(--borde); background:#fff; color:var(--gris); border-radius:8px;
  padding:8px 12px; font:700 12.5px inherit; cursor:pointer;
}
.v4-pestanas button.activo{ background:var(--verde); border-color:var(--verde); color:var(--crema); }
.v4-panel{ padding-top:12px; }
.v4-panel label{ margin-top:8px; }
.v4-check{ display:flex !important; flex-direction:row !important; align-items:center; gap:8px; font-weight:600; margin:10px 0; }
.v4-check input{ width:auto; }
.v4-contrato{ display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:16px; }
.v4-editor{
  width:100%; min-height:460px; font-family:Consolas, 'Courier New', monospace; font-size:12.5px; line-height:1.5;
  white-space:pre-wrap; tab-size:2;
}
.v4-ayuda{
  font-size:12.5px; background:var(--verde-suave); border-radius:10px; padding:12px; max-height:560px; overflow-y:auto;
}
.v4-ayuda b{ display:block; margin:10px 0 5px; color:var(--verde); }
.v4-ayuda b:first-child{ margin-top:0; }
.v4-ayuda code{ background:#fff; border-radius:4px; padding:0 4px; font-size:11.5px; }
.v4-ayuda ul{ margin:0 0 0 16px; }
.v4-ayuda li{ margin:2px 0; }
.v4-vars{ display:flex; flex-wrap:wrap; gap:4px; }
.v4-vars button{
  border:1px solid var(--borde); background:#fff; border-radius:6px; padding:3px 6px; font:11.5px Consolas, monospace;
  cursor:pointer; color:var(--verde);
}
.v4-vars button:hover{ background:var(--crema); }
.v4-resumen{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.v4-resumen span{ background:var(--verde-suave); border-radius:8px; padding:7px 11px; font-size:13px; }
.v4-muestra{
  font:12.5px Consolas, monospace; background:#fafbfb; border:1px solid var(--borde); border-radius:8px;
  padding:10px 12px; max-height:260px; overflow-y:auto; line-height:1.55;
}
.inventario-acciones{ margin:6px 0 14px; }
.clave-caja.v4-instalar{ max-width:420px; }
.clave-caja.v4-instalar input{ text-align:left; font-size:15px; }
@media (max-width:860px){
  .v4-contrato{ grid-template-columns:1fr; }
  .v4-ayuda{ max-height:none; }
}

/* ============================================================
   v5 — permisos, reporte y movimiento
   ============================================================ */
.v5-permisos{ width:100%; border-collapse:collapse; }
.v5-permisos th, .v5-permisos td{ padding:10px 12px; border-bottom:1px solid var(--borde); text-align:left; vertical-align:middle; }
.v5-permisos thead th{ background:var(--verde-suave); font-size:13px; }
.v5-permisos thead th span, .v5-permisos td .sub{ display:block; font-weight:400; color:var(--gris); font-size:12px; margin-top:2px; }
.v5-celda{ text-align:center !important; width:150px; }
.v5-interruptor{ display:inline-flex; position:relative; cursor:pointer; }
.v5-interruptor input{ position:absolute; opacity:0; width:0; height:0; }
.v5-interruptor i{ width:42px; height:24px; border-radius:12px; background:#cfd8d5; position:relative; transition:background .18s ease; }
.v5-interruptor i::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s cubic-bezier(.2,.8,.2,1); }
.v5-interruptor input:checked + i{ background:var(--ok); }
.v5-interruptor input:checked + i::after{ transform:translateX(18px); }
.v5-interruptor input:focus-visible + i{ outline:2px solid var(--dorado); outline-offset:2px; }
.v5-interruptor.bloqueado{ opacity:.35; cursor:not-allowed; }
.v5-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.v5-chip{ display:inline-flex !important; flex-direction:row !important; align-items:center; gap:6px; background:#fff; border:1px solid var(--borde);
  border-radius:999px; padding:4px 10px; font-weight:600; }
.v5-chip input{ width:auto; }
.v5-sub{ margin:18px 0 8px; color:var(--verde); font-family:Georgia,serif; font-size:16px; }
.v5-sub small{ font-family:'Segoe UI',system-ui,sans-serif; font-weight:400; color:var(--gris); font-size:12.5px; }
.v5-grupo{ border:1px solid var(--borde); border-radius:10px; margin-bottom:8px; background:#fff; }
.v5-grupo summary{ padding:10px 12px; cursor:pointer; font-weight:700; color:var(--verde); }
.v5-grupo summary label{ display:inline-flex; flex-direction:row; align-items:center; gap:8px; }
.v5-grupo summary input{ width:auto; }
.v5-grupo ul{ list-style:none; margin:0; padding:0 12px 10px; max-height:320px; overflow-y:auto; }
.v5-grupo li{ padding:5px 0; border-top:1px dashed var(--borde); font-size:13.5px; }
.v5-grupo li label{ display:flex; flex-direction:row; gap:8px; align-items:flex-start; font-weight:400; }
.v5-grupo li input{ width:auto; margin-top:3px; }
.v5-grupo.pendiente summary{ color:var(--aviso-tinta); }
.v4-resumen .v5-alerta{ background:var(--aviso-fondo); color:var(--aviso-tinta); }
.v5-historial{ margin-top:14px; }
.v5-historial summary{ cursor:pointer; color:var(--gris); font-weight:600; }
.v5-lista{ margin:8px 0 0 18px; font-size:13px; color:var(--gris); }

/* --- movimiento (mismo lenguaje que mis-finanzas) --- */
@keyframes v5-fundido{ from{ opacity:0; } to{ opacity:1; } }
@keyframes v5-sube{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes v5-pop{ 0%{ transform:scale(1); } 35%{ transform:scale(1.08); } 70%{ transform:scale(.97); } 100%{ transform:scale(1); } }
@keyframes v5-chispa{ 0%{ opacity:0; transform:translate(-50%, 4px) scale(.6); } 25%{ opacity:1; transform:translate(-50%, -10px) scale(1.15); }
  100%{ opacity:0; transform:translate(-50%, -38px) scale(1); } }
@keyframes v5-sacudir{ 0%,100%{ transform:none; } 20%{ transform:translateX(-5px); } 40%{ transform:translateX(5px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); } }
@keyframes v5-barra{ 0%{ left:-35%; width:35%; } 60%{ left:100%; width:20%; } 100%{ left:100%; width:20%; } }
@keyframes v5-brillo{ 0%{ background-position:-400px 0; } 100%{ background-position:400px 0; } }
@keyframes v5-gira{ to{ transform:rotate(360deg); } }

.btn{ transition:transform .08s ease, box-shadow .08s ease, filter .15s ease, opacity .15s ease; box-shadow:0 3px 0 0 rgba(0,0,0,.14); }
.btn:active:not(:disabled){ transform:translateY(2px); box-shadow:none; }
.btn.pop{ animation:v5-pop .38s cubic-bezier(.2,.8,.2,1); }
.btn.sacudir{ animation:v5-sacudir .35s ease; }
.btn.cargando{ position:relative; color:transparent !important; pointer-events:none; }
.btn.cargando::after{ content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-color:var(--verde) transparent var(--verde) transparent; animation:v5-gira .7s linear infinite; }
.btn-oscuro.cargando::after{ border-color:var(--crema) transparent var(--crema) transparent; }
.chispa-ok{ position:fixed; z-index:200; pointer-events:none; font:800 16px 'Segoe UI',sans-serif; color:#fff; background:var(--ok);
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center; box-shadow:0 4px 12px rgba(0,0,0,.2);
  animation:v5-chispa .85s cubic-bezier(.2,.8,.2,1) forwards; }
#barraCarga{ position:fixed; top:0; left:0; right:0; height:3px; z-index:300; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .2s; }
#barraCarga::before{ content:""; position:absolute; top:0; height:100%; background:var(--dorado); border-radius:2px; animation:v5-barra 1.1s ease-in-out infinite; }
#barraCarga.activa{ opacity:1; }
.modal-fondo:not(.oculta){ animation:v5-fundido .15s ease-out; }
.modal-fondo:not(.oculta) .modal-caja, .modal-fondo:not(.oculta) .vista-previa-caja{ animation:v5-sube .2s cubic-bezier(.2,.8,.2,1); }
.vista.v5-entra, .v5-aparece{ animation:v5-sube .22s cubic-bezier(.2,.8,.2,1); }
.toast{ animation:v5-sube .2s cubic-bezier(.2,.8,.2,1); }
.skeleton{ border-radius:10px; background:linear-gradient(90deg, #eef2f0 0px, #f8faf9 120px, #eef2f0 240px); background-size:800px 100%;
  animation:v5-brillo 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce){
  .btn, .btn.pop, .btn.sacudir, .chispa-ok, .modal-fondo, .modal-caja, .vista, .v5-aparece, .toast, .skeleton, #barraCarga::before{ animation:none !important; transition:none !important; }
}
.v5-permisos thead th{ color:var(--verde); text-transform:none; letter-spacing:0; }
.v5-permisos thead th b{ font-size:14px; }

/* Separación entre botones vecinos (en celdas, títulos y cabeceras) */
td:not(.acciones-td) > .btn + .btn, .gestion-titulo .btn + .btn, .corr-panel-cab .btn + .btn, .bloque-detalle h4 .btn + .btn,
.editor-cabecera .btn + .btn, .v4-imagen span .btn + .btn{ margin-left:10px; }
.bloque-detalle .acciones-form{ gap:12px; }
.inventario-filtros{ gap:12px; }

/* Ajustes → Proyectos → Ficha: datos adicionales de la hoja impresa */
.v4-extras{ margin-top:12px; display:flex; flex-direction:column; gap:2px; }
/* logo cuadrado (o el de la empresa, si el proyecto no tiene uno propio) en la cabecera de la ficha */
.fp-cabecera-doc .fp-logo{ position:absolute; left:0; top:0; height:13mm; width:auto; max-width:40mm; object-fit:contain; }
/* en tres columnas el nombre va debajo de "Nombre:" en las tres firmas, así quedan parejas */
.fp-firmas-3 .fp-nombre-linea:not(.fp-dni-linea) .fp-campo{ display:block; margin:1mm auto 0; width:94%; }