/* =====================================================================
   Sistema de Operaciones de Agrimensura
   Identidad "Pizarra": azul pizarra, azul de trabajo y papel frio.
   Los nombres de las clases son los mismos de siempre, para que todas
   las pantallas tomen el diseno nuevo sin tener que tocarlas una por una.
   ===================================================================== */

:root{
  /* papel frio y tinta */
  --fondo:#F4F6F8; --panel:#FFFFFF; --panel2:#F7F9FB;
  --borde:#DDE4EB; --borde2:#EAEFF4;
  --texto:#15293D; --suave:#41505F; --tenue:#8895A4;

  /* azul de trabajo: el color principal */
  --azul:#2E7CC4; --azul-osc:#1B5B96; --azul-suave:#E3EFF9;

  /* apoyos */
  --verde:#1D8A6A; --verde-suave:#E1F0EA;
  --ambar:#B07C0E; --ambar-suave:#F7ECD6;
  --rojo:#B03A34; --rojo-suave:#F8E5E3;
  --morado:#5D4E87; --morado-suave:#ECE9F4;

  /* el azul pizarra de la barra de arriba */
  --pizarra:#15293D; --pizarra2:#1F3A55;
  --pizarra-txt:#E8EDF2; --pizarra-suave:#8FA3B8; --pizarra-brillo:#5FAEEA;

  --sombra:0 1px 2px rgba(21,41,61,.05), 0 8px 22px -18px rgba(21,41,61,.35);
  --sombra-alta:0 2px 4px rgba(21,41,61,.06), 0 18px 40px -24px rgba(21,41,61,.45);
  --radio:12px;

  --titulos:"Archivo","Archivo Black","Segoe UI",system-ui,sans-serif;
  --cuerpo:"Source Sans 3","Segoe UI",-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --dato:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}

[data-tema="oscuro"]{
  --fondo:#0E141B; --panel:#151D26; --panel2:#1A232E;
  --borde:#27323E; --borde2:#212A35;
  --texto:#E6EDF3; --suave:#A7B4C2; --tenue:#7C8A99;

  --azul:#5FAEEA; --azul-osc:#7CC0F2; --azul-suave:#152634;
  --verde:#3FBF95; --verde-suave:#14302A;
  --ambar:#E0A64A; --ambar-suave:#33290F;
  --rojo:#E2726B; --rojo-suave:#33191A;
  --morado:#B9A9DE; --morado-suave:#241F33;

  --pizarra:#0B1219; --pizarra2:#151D26;
  --pizarra-txt:#E6EDF3; --pizarra-suave:#7C8A99; --pizarra-brillo:#5FAEEA;

  --sombra:0 1px 2px rgba(0,0,0,.45);
  --sombra-alta:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -24px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--cuerpo);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--titulos);letter-spacing:-.015em}
a{color:var(--azul);text-decoration:none}
.ico{width:18px;height:18px;flex:none}
.mono,.dato{font-family:var(--dato);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- estructura: BARRA ARRIBA + LATERAL DE SECCION -------------
   Arriba, una barra verde pino con las secciones primordiales. Debajo, a
   la izquierda, una lateral CORTA que solo lleva las opciones de la
   seccion abierta: entre dos y siete renglones, nunca la lista larga de
   quince. Cuando la seccion no tiene opciones (el Panel), la lateral no
   se dibuja y el contenido ocupa todo el ancho.                       */
.capa{display:flex;flex-direction:column;min-height:100vh}

/* --- la barra de arriba --- */
.barra1{background:var(--pizarra);display:flex;align-items:stretch;
  position:sticky;top:0;z-index:30;padding-left:14px}
.marca{display:flex;align-items:center;gap:10px;padding:9px 18px 9px 0;flex:none;
  border-right:1px solid rgba(255,255,255,.10);margin-right:8px;color:var(--pizarra-txt)}
.logo{width:31px;height:31px;border-radius:7px;background:var(--azul);color:#fff;font-weight:800;
  font-size:11.5px;display:flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--titulos);letter-spacing:.02em}
.marca-nombre{font-family:var(--titulos);font-weight:700;font-size:13px;color:var(--pizarra-txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;line-height:1.25}
.marca-plan{font-size:9px;color:var(--pizarra-suave);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;font-family:var(--dato)}

.secciones{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;min-width:0}
.secciones::-webkit-scrollbar{display:none}
.sec{display:flex;align-items:center;gap:8px;padding:0 15px;color:var(--pizarra-suave);
  font-size:13.5px;font-weight:600;white-space:nowrap;position:relative;transition:.13s}
.sec:hover{color:var(--pizarra-txt);background:rgba(255,255,255,.06)}
.sec.activo{color:var(--pizarra-brillo);background:var(--pizarra2)}
.sec.activo::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;
  background:var(--pizarra-brillo);border-radius:2px 2px 0 0}
.sec .ico{opacity:.7;flex:none}
.sec.activo .ico{opacity:1;color:var(--pizarra-brillo)}

.yo{margin-left:auto;display:flex;align-items:center;gap:12px;padding:0 16px 0 20px;flex:none}
.usuario-sup{display:flex;align-items:center;gap:9px;color:var(--pizarra-txt)}
.avatar{width:30px;height:30px;border-radius:7px;background:var(--azul);color:#fff;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  font-family:var(--titulos);flex:none}
.u-nombre{font-size:12.5px;font-weight:600;line-height:1.2;color:var(--pizarra-txt);
  max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-rol{font-size:10.5px;color:var(--pizarra-suave)}
.salir{font-size:12.5px;color:var(--pizarra-suave)}
.salir:hover{color:var(--pizarra-brillo)}
.icono-btn{border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--pizarra-suave);
  cursor:pointer;padding:6px;border-radius:8px;display:inline-flex}
.icono-btn:hover{border-color:var(--pizarra-brillo);color:var(--pizarra-brillo)}

/* --- el cuerpo: lateral + contenido --- */
.cuerpo{display:flex;align-items:stretch;flex:1;min-height:0}
.lateral{width:226px;flex:none;background:var(--panel);border-right:1px solid var(--borde);
  padding:13px 0 0;display:flex;flex-direction:column;
  position:sticky;top:49px;height:calc(100vh - 49px);overflow-y:auto}
.lateral-rotulo{font-family:var(--dato);font-size:9.5px;letter-spacing:.17em;font-weight:700;
  text-transform:uppercase;color:var(--tenue);padding:0 17px 10px;
  display:flex;align-items:center;gap:9px}
.lateral-rotulo::after{content:"";flex:1;height:1px;background:var(--borde2)}

.mi{display:flex;align-items:flex-start;gap:10px;padding:8px 17px;color:var(--suave);
  font-size:13.5px;line-height:1.35;transition:.13s;border-left:3px solid transparent}
.mi:hover{background:var(--panel2);color:var(--texto)}
.mi.activo{background:var(--azul-suave);color:var(--azul);font-weight:600;
  border-left-color:var(--azul)}
.mi .ico{opacity:.7;margin-top:1px}
.mi.activo .ico{opacity:1}
.num{font-style:normal;font-family:var(--dato);font-size:12px;font-weight:700;
  color:var(--tenue);flex:none;width:18px;text-align:center;letter-spacing:-.03em;padding-top:1px}
.mi.activo .num{color:var(--ambar)}

.version-app{margin-top:auto;padding:12px 17px 11px;font-size:10.5px;letter-spacing:.03em;
  color:var(--tenue);border-top:1px solid var(--borde2);font-family:var(--dato);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.principal{flex:1;min-width:0}
.contenido{padding:24px 26px 54px;max-width:1360px;width:100%;flex:1;min-width:0}

/* --- en pantallas angostas la lateral se acuesta arriba del contenido --- */
@media (max-width:860px){
  .cuerpo{flex-direction:column}
  .lateral{width:auto;height:auto;position:static;border-right:0;
    border-bottom:1px solid var(--borde);flex-direction:row;overflow-x:auto;padding:0}
  .lateral-rotulo,.version-app{display:none}
  .mi{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;padding:10px 14px}
  .mi.activo{border-left-color:transparent;border-bottom-color:var(--azul)}
  .marca-txt{display:none}
  .usuario-txt{display:none}
  .contenido{padding:18px 15px 44px}
}

/* ---------- cabecera de pagina ---------- */
.encabezado{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;flex-wrap:wrap}
h1{font-size:27px;font-weight:800;margin:0;letter-spacing:-.025em}
.sub{color:var(--suave);font-size:14px;margin:3px 0 0}
.derecha{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.volver{width:34px;height:34px;border-radius:9px;border:1px solid var(--borde);background:var(--panel);
  display:inline-flex;align-items:center;justify-content:center;color:var(--suave);font-size:16px}
.volver:hover{border-color:var(--azul);color:var(--azul)}
.miga{font-size:12px;color:var(--tenue);margin-bottom:8px;font-family:var(--dato);letter-spacing:.02em}
.miga a{color:var(--suave)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--azul);color:#fff;border:1px solid var(--azul);
  border-radius:9px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:.14s}
.btn:hover{background:var(--azul-osc);border-color:var(--azul-osc);color:#fff}
[data-tema="oscuro"] .btn{color:#0B1219}
[data-tema="oscuro"] .btn:hover{color:#0B1219}
.btn.sec{background:var(--panel);color:var(--texto);border:1px solid var(--borde);font-weight:500}
.btn.sec:hover{background:var(--panel2);border-color:var(--azul);color:var(--azul)}
.btn.verde{background:var(--verde);border-color:var(--verde)}
.btn.verde:hover{background:var(--azul-osc);border-color:var(--azul-osc)}
.btn.rojo{background:var(--rojo);border-color:var(--rojo)}
.btn.rojo:hover{background:#7f231e;border-color:#7f231e}
.btn.morado{background:var(--morado);border-color:var(--morado)}
.btn.chico{padding:5px 11px;font-size:13px;border-radius:7px}
.btn.grande{width:100%;justify-content:center;padding:11px}
.btn.degradado{background:linear-gradient(100deg,var(--azul),var(--verde));border-color:transparent}
.enlace{color:var(--azul);font-size:13px;cursor:pointer;background:none;border:0;font-family:inherit;
  font-weight:600}
.enlace:hover{text-decoration:underline}
.enlace.gris{color:var(--suave);font-weight:500}

/* ---------- tarjetas ---------- */
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:20px;
  box-shadow:var(--sombra);margin-bottom:16px}
.tarjeta h2{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--tenue);
  text-transform:uppercase;margin:0 0 14px;display:flex;align-items:center;gap:7px;
  font-family:var(--cuerpo)}
.rejilla{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g5{grid-template-columns:repeat(5,1fr)}
.g23{grid-template-columns:2fr 1fr}
.tarjetas-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px}

/* KPI */
.kpi{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:18px;
  box-shadow:var(--sombra)}
.kpi .cuadro{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;color:var(--azul);background:var(--azul-suave)}
.kpi .n{font-family:var(--titulos);font-size:30px;font-weight:800;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.kpi .t{font-size:13.5px;color:var(--suave);margin-top:5px}
.kpi .t2{font-size:11.5px;color:var(--tenue)}
.c-amb{background:var(--ambar-suave)!important;color:var(--ambar)!important}
.c-ver{background:var(--verde-suave)!important;color:var(--verde)!important}
.c-mor{background:var(--morado-suave)!important;color:var(--morado)!important}
.c-azu{background:var(--azul-suave)!important;color:var(--azul)!important}

/* ---------- cinta metrica de etapas ----------------------------------
   No son circulos unidos por lineas: es una CINTA DE MEDIR. Cada etapa
   es un tramo de cinta con sus marcas de regla; los tramos recorridos van
   en verde pino, el que se esta trabajando se llena a medias en ambar y
   los que faltan quedan en papel. Es la metafora del oficio y no se
   parece a ningun asistente de pasos al uso.                          */
.stepper{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:15px 18px 14px;margin-bottom:20px;box-shadow:var(--sombra)}
.cinta-cab{display:flex;align-items:baseline;gap:11px;margin-bottom:13px;flex-wrap:wrap}
.cinta-cab .n{font-family:var(--dato);font-size:10.5px;letter-spacing:.16em;color:var(--tenue);
  text-transform:uppercase;flex:none}
.cinta-cab .t{font-family:var(--titulos);font-size:15.5px;color:var(--texto);line-height:1.2}
.cinta-via{display:flex;gap:5px}
.paso{flex:1;min-width:0}
/* el tramo de cinta */
.paso .barra{height:13px;border-radius:4px;background:var(--panel2);
  border:1px solid var(--borde);position:relative;overflow:hidden}
/* las marcas de la regla */
.paso .barra::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,var(--borde) 0 1px,transparent 1px 9px)}
.paso.hecho .barra{background:var(--azul);border-color:var(--azul)}
/* el tramo en curso va lleno hasta la mitad: el trabajo esta empezado */
.paso.activo .barra{border-color:var(--ambar);
  background:linear-gradient(90deg,var(--ambar) 0 50%,var(--ambar-suave) 50% 100%)}
.paso.hecho .barra::after,.paso.activo .barra::after{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.42) 0 1px,transparent 1px 9px)}
/* la etiqueta bajo cada tramo */
.paso .pie{display:flex;align-items:baseline;gap:7px;margin-top:9px;min-width:0}
.paso .pie b{font-family:var(--dato);font-size:11.5px;font-weight:700;color:var(--tenue);flex:none;
  font-variant-numeric:tabular-nums}
.paso .pie span{font-size:12.5px;color:var(--tenue);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paso.hecho .pie b,.paso.hecho .pie span{color:var(--azul)}
.paso.activo .pie b,.paso.activo .pie span{color:var(--ambar);font-weight:600}
@media (max-width:820px){
  .paso .pie span{display:none}
  .paso .pie{justify-content:center}
}

/* ---------- formularios ---------- */
label{display:block;font-size:11.5px;font-weight:700;margin-bottom:6px;color:var(--tenue);
  letter-spacing:.06em;text-transform:uppercase}
label .req{color:var(--rojo)}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],
input[type=datetime-local],input[type=email],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--borde);border-radius:9px;font-size:14px;
  font-family:inherit;background:var(--panel2);color:var(--texto)}
textarea{min-height:78px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--tenue)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);background:var(--panel);
  box-shadow:0 0 0 3px var(--azul-suave)}
.campo{margin-bottom:15px}
.ayuda{font-size:12px;color:var(--tenue);margin-top:5px}
.chk{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--suave);font-weight:600;
  letter-spacing:.04em;margin-top:6px}
.chk input{width:auto}
.seccion{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--tenue);
  text-transform:uppercase;margin:20px 0 12px;padding-top:4px;
  border-top:1px dashed var(--borde);padding-top:14px}
.seccion:first-child{margin-top:0;border-top:0;padding-top:0}
.linea-sep{border:0;border-top:1px solid var(--borde2);margin:18px 0}
.pestanas{display:flex;gap:22px;border-bottom:1px solid var(--borde);margin-bottom:20px}
.pestanas a{padding:10px 2px;font-size:14px;color:var(--suave);border-bottom:2px solid transparent}
.pestanas a:hover{color:var(--texto)}
.pestanas a.activa{color:var(--azul);font-weight:700;border-bottom-color:var(--azul)}
.pie-form{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--borde2);
  padding-top:16px;margin-top:6px}

/* ---------- tablas ---------- */
.tabla-caja{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  overflow:hidden;box-shadow:var(--sombra)}
table.datos{width:100%;border-collapse:collapse;font-size:14px}
table.datos th{background:var(--panel2);color:var(--tenue);font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;text-align:left;padding:12px 15px;
  border-bottom:1px solid var(--borde)}
table.datos td{padding:12px 15px;border-bottom:1px solid var(--borde2);vertical-align:middle}
table.datos tr:last-child td{border-bottom:0}
table.datos tr:hover td{background:var(--panel2)}
.tabla-scroll{overflow-x:auto}
.registros{padding:11px 15px;font-size:12.5px;color:var(--tenue);font-family:var(--dato)}
.mini{font-size:12px;color:var(--tenue)}
.fila-ficha{display:flex;gap:11px;align-items:center}
.ficha-ico{width:32px;height:32px;border-radius:9px;background:var(--ambar-suave);color:var(--ambar);
  display:flex;align-items:center;justify-content:center;flex:none}
.ficha-ico.verde{background:var(--verde-suave);color:var(--verde)}
.ficha-ico.azul{background:var(--azul-suave);color:var(--azul)}

/* ---------- pastillas y avisos ---------- */
.pastilla{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;
  letter-spacing:.03em;background:var(--panel2);color:var(--suave);border:1px solid var(--borde)}
.pastilla.verde{background:var(--verde-suave);color:var(--verde);border-color:transparent}
.pastilla.azul{background:var(--azul-suave);color:var(--azul);border-color:transparent}
.pastilla.ambar{background:var(--ambar-suave);color:var(--ambar);border-color:transparent}
.pastilla.roja{background:var(--rojo-suave);color:var(--rojo);border-color:transparent}
.aviso-ambar{background:var(--ambar-suave);border:1px solid transparent;border-left:3px solid var(--ambar);
  color:var(--texto);border-radius:9px;padding:10px 13px;font-size:12.5px;display:flex;gap:8px;
  align-items:flex-start;margin:8px 0}
.aviso-azul{background:var(--azul-suave);border-left:3px solid var(--azul);color:var(--texto);
  border-radius:9px;padding:12px 14px;font-size:13.5px;margin-bottom:16px}
.aviso-verde{background:var(--verde-suave);border-left:3px solid var(--verde);color:var(--texto);
  border-radius:10px;padding:13px 14px;font-size:13.5px}
.aviso-gris{background:var(--panel2);border:1px solid var(--borde);border-radius:9px;padding:12px 14px;
  font-size:13px;color:var(--suave)}
/* Para cuando algo esta fallando de verdad y hay que leerlo entero: el texto
   viene en varios renglones, asi que respeta los saltos de linea. */
.aviso-rojo{background:var(--rojo-suave);border-left:3px solid var(--rojo);color:var(--texto);
  border-radius:10px;padding:13px 14px;font-size:13px;line-height:1.55;margin:8px 0}

/* ---------- documentos ------------------------------------------------
   Cada documento es una PIEZA con su sello, no una linea de lista con un
   puntito y enlaces sueltos. El sello cuadrado imita el cuno que se pone
   en un expediente; las acciones son botones con forma, no texto azul. */
.doc{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--borde2);background:var(--panel2);margin-bottom:7px;
  transition:border-color .15s ease,background .15s ease}
.doc:last-of-type{margin-bottom:0}
.doc:hover{border-color:var(--borde);background:var(--panel)}
.doc.destacado{background:var(--ambar-suave);border-color:transparent;
  box-shadow:inset 3px 0 0 var(--ambar)}
.doc .nom{flex:1;font-size:14px;min-width:0}
.doc .acc{display:flex;gap:6px;align-items:center;flex:none}
.doc .acc a{font-size:12px;font-weight:600;color:var(--suave);white-space:nowrap;
  border:1px solid var(--borde);border-radius:7px;padding:4px 10px;background:var(--panel);
  transition:all .15s ease}
.doc .acc a:hover{color:var(--azul);border-color:var(--azul);background:var(--azul-suave)}
.doc .acc a.gen{color:#fff;background:var(--azul);border-color:var(--azul)}
.doc .acc a.gen:hover{background:var(--azul-osc);border-color:var(--azul-osc);color:#fff}
[data-tema="oscuro"] .doc .acc a.gen{color:#0B1219}
/*  Documento generado ANTES de que cambiara su plantilla: el archivo que
    hay guardado es el viejo y hay que volver a generarlo.               */
.doc.viejo{background:var(--ambar-suave);border-color:var(--ambar)}
.doc .aviso-viejo{font-size:11.5px;color:var(--ambar);font-weight:600;
  line-height:1.3;margin-top:2px}
.doc.viejo .acc a.gen{background:var(--ambar);border-color:var(--ambar);color:#fff}
[data-tema="oscuro"] .doc.viejo .acc a.gen{color:#0B1219}

/* el sello: cuadrado y punteado mientras falta, macizo cuando esta hecho */
.punto{width:22px;height:22px;border-radius:6px;border:1.5px dashed var(--borde);flex:none;
  background:var(--panel)}
.punto.ok{border:1.5px solid var(--verde);background:var(--verde);position:relative}
.punto.ok::after{content:"";position:absolute;left:7.5px;top:4px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
[data-tema="oscuro"] .punto.ok::after{border-color:#0B1219}

/* ---------- regla de filtros -----------------------------------------
   No es una fila de cajitas sueltas con su lupa: es UNA sola barra con
   separadores finos y el rotulo de cada campo en monoespaciada encima,
   como el frente de un instrumento de medicion.                       */
.filtros{display:flex;align-items:stretch;background:var(--panel);flex-wrap:wrap;
  border:1px solid var(--borde);border-radius:11px;margin-bottom:18px;overflow:hidden;
  box-shadow:var(--sombra)}
.filtros .f{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:130px;
  padding:6px 14px;border-right:1px solid var(--borde2)}
.filtros .f.corto{flex:none;width:158px}
.filtros .f>span{font-family:var(--dato);font-size:9px;letter-spacing:.17em;font-weight:700;
  text-transform:uppercase;color:var(--tenue);margin-bottom:1px}
.filtros input,.filtros select{border:0!important;background:transparent!important;width:100%;
  padding:2px 0!important;font-size:13.5px;border-radius:0!important;box-shadow:none!important;
  color:var(--texto);font-family:inherit}
.filtros input:focus,.filtros select:focus{outline:none}
.filtros .f:focus-within{background:var(--panel2)}
.filtros .f:focus-within>span{color:var(--azul)}
.filtros button{border:0;border-radius:0;padding:0 22px;background:var(--azul);color:#fff;
  font-weight:600;font-size:13.5px;cursor:pointer;font-family:inherit;flex:none}
.filtros button:hover{background:var(--azul-osc)}
[data-tema="oscuro"] .filtros button{color:#0B1219}

/* ---------- ficha con pestana de carpeta ---------- */
.ficha{position:relative;margin-top:14px;background:var(--panel);border:1px solid var(--borde);
  border-radius:0 12px 12px 12px;padding:17px 19px 18px;box-shadow:var(--sombra)}
.ficha-tab{position:absolute;top:-14px;left:-1px;background:var(--azul);color:#fff;
  font-family:var(--dato);font-size:10.5px;font-weight:700;letter-spacing:.05em;
  padding:3px 13px 2px;border-radius:7px 7px 0 0}
[data-tema="oscuro"] .ficha-tab{color:#0B1219}
.ficha-tab.gris{background:var(--tenue)}
.ficha h3{margin:0 0 9px;font-size:17.5px;line-height:1.25}
.ficha .datos-linea{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13px;
  color:var(--suave);margin:10px 0}
.ficha .datos-linea dt{font-family:var(--dato);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tenue);font-weight:700;padding-top:3px;white-space:nowrap}
.ficha .datos-linea dd{margin:0}

/* ---------- el plan, de solo lectura ---------------------------------
   No es un formulario: es lo que usted contrato. Por eso no tiene forma de
   campo escribible, para que nadie intente cambiarlo ahi.              */
.plan-fijo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--borde);border:1px solid var(--borde);border-radius:10px;
  overflow:hidden;margin-bottom:10px}
.plan-fijo>div{background:var(--panel2);padding:11px 14px}
.plan-fijo .rot{display:block;font-family:var(--dato);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tenue);font-weight:700;margin-bottom:3px}
.plan-fijo b{display:block;font-size:15px;font-weight:700;color:var(--azul);line-height:1.25}
.plan-fijo .mini{display:block;margin-top:2px}

/* ---------- casillas de permisos del gestor ---------- */
.permisos{display:flex;flex-direction:column;gap:2px;border:1px solid var(--borde);
  border-radius:10px;padding:5px;background:var(--panel2)}
.permiso{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;
  cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400;font-size:13.5px;
  color:var(--texto);margin:0}
.permiso:hover{background:var(--panel)}
.permiso input{margin:2px 0 0;flex:none;width:16px;height:16px;accent-color:var(--azul)}
.permiso span{display:block;min-width:0}
.permiso b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.permiso em{display:block;font-style:normal;font-size:12px;color:var(--tenue);line-height:1.35}
.permiso:has(input:checked){background:var(--azul-suave)}
.permiso:has(input:checked) b{color:var(--azul)}

/* ---------- avance del trabajo: cuatro casillas de la libreta ---------- */
.avance{display:flex;gap:0;margin:11px 0 4px;border:1px solid var(--borde);
  border-radius:8px;overflow:hidden}
.casilla{flex:1;text-align:center;font-family:var(--dato);font-size:10px;font-weight:600;
  letter-spacing:.04em;padding:5px 3px;color:var(--tenue);background:var(--panel2);
  border-right:1px solid var(--borde);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.casilla:last-child{border-right:0}
.casilla.llena{background:var(--azul);color:#fff;border-right-color:var(--azul-osc)}
[data-tema="oscuro"] .casilla.llena{color:#0B1219}

/* ---------- ficha de trabajo (las tarjetas de cada etapa) ---------- */
.ficha-cab{display:flex;align-items:flex-start;gap:13px;
  padding-bottom:13px;border-bottom:1px dashed var(--borde);margin-bottom:13px}
/* la chapa: el numero de expediente como la placa de un mojon */
.chapa{flex:none;background:var(--azul-suave);color:var(--azul);border-radius:9px;
  padding:7px 11px;text-align:center;line-height:1.2}
.chapa em{display:block;font-style:normal;font-size:8.5px;letter-spacing:.15em;opacity:.8;
  font-family:var(--dato);text-transform:uppercase}
.chapa b{display:block;font-family:var(--dato);font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ficha-tit{flex:1;min-width:0}
.ficha-tit h3{margin:0 0 3px;font-size:17px;line-height:1.25}
.ficha-acc{flex:none;text-align:right}
.ficha-pie{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px dashed var(--borde)}

/* ---------- toasts ---------- */
.avisos{position:fixed;top:72px;right:22px;z-index:60;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--panel);border:1px solid var(--borde);border-left:4px solid var(--verde);
  border-radius:10px;padding:13px 36px 13px 15px;font-size:13.5px;box-shadow:var(--sombra-alta);
  max-width:380px;position:relative;animation:entra .25s ease}
.toast.error{border-left-color:var(--rojo)}
.toast .cerrar{position:absolute;top:8px;right:10px;cursor:pointer;color:var(--tenue);font-size:15px}
@keyframes entra{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ---------- barras y grafico ---------- */
.barra-fila{margin-bottom:13px}
.barra-top{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:6px}
.barra{height:8px;border-radius:20px;background:var(--borde2);overflow:hidden}
.barra i{display:block;height:100%;border-radius:20px;background:var(--azul)}
.barra i.verde{background:var(--verde)}
.gr{display:flex;align-items:flex-end;gap:14px;height:170px;padding:10px 6px 0;
  border-left:1px solid var(--borde2);border-bottom:1px solid var(--borde2)}
.gr .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.gr .col i{width:100%;max-width:150px;background:var(--azul);border-radius:4px 4px 0 0;display:block}
.gr .col span{font-size:11px;color:var(--tenue);margin-top:6px;font-family:var(--dato)}

/* ---------- mapa ---------- */
#mapa{height:320px;border-radius:10px;border:1px solid var(--borde);margin-top:8px}
.croquis svg{max-width:100%;height:auto}

/* ---------- login ---------- */
.login-capa{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--fondo);
  background-image:repeating-linear-gradient(90deg,rgba(14,91,69,.05) 0 1px,transparent 1px 42px),
                   repeating-linear-gradient(0deg,rgba(14,91,69,.05) 0 1px,transparent 1px 42px)}
.login{width:390px;background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:32px;
  box-shadow:var(--sombra-alta)}
.login .logo{width:46px;height:46px;border-radius:12px;margin:0 auto 16px;font-size:15px}
.login h1{font-size:21px;text-align:center;margin-bottom:4px}
.login .sub{text-align:center;margin-bottom:24px}

/* ---------- hoja de documento ---------- */
.hoja{background:#fff;color:#111;border:1px solid var(--borde);border-radius:10px;
  padding:40px 48px;max-width:920px;margin:0 auto;box-shadow:var(--sombra)}
@media print{.lateral,.superior,.encabezado,.avisos{display:none!important}
  .contenido{padding:0}.hoja{border:0;padding:0;max-width:100%;box-shadow:none}}

@media(max-width:1250px){.g5{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
@media(max-width:1000px){
  .g2,.g3,.g23{grid-template-columns:1fr}
  .lateral{position:fixed;left:-236px;z-index:50;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .lateral.abierto{left:0}
  .contenido{padding:20px 16px 44px}
}

/* ---------- contador de documentos en la barra superior ---------- */
/*  El contador vive sobre la barra oscura: lleva sus propios colores,
    no los del papel, o sale como un recuadro blanco pegado.  */
.cuota{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;
  padding:4px 12px;border:1px solid rgba(255,255,255,.14);border-radius:9px;
  background:var(--pizarra2);color:var(--pizarra-txt)}
.cuota:hover{border-color:var(--pizarra-brillo)}
.cuota b{font-size:14px;font-weight:600;color:var(--pizarra-txt)}
.cuota small{font-size:10.5px;color:var(--pizarra-suave)}

/* ---------- logo de la marca en las pantallas publicas ---------- */
.logo-marca{display:block;width:250px;max-width:100%;margin:0 auto 8px}
[data-tema="oscuro"] .logo-marca{filter:none}

/* =====================================================================
   CARPETAS DE TRABAJO
   Se dibujan como carpetas de archivo de verdad: con su ceja arriba a la
   izquierda, para que se entienda de un golpe que ahi dentro hay algo.
   ===================================================================== */
.rejilla-carpetas{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));margin-top:4px}

.carpeta-tarj{display:block;position:relative;background:var(--panel);
  border:1px solid var(--borde);border-radius:4px 12px 12px 12px;
  box-shadow:var(--sombra);transition:transform .12s, box-shadow .12s, border-color .12s;
  color:inherit;text-decoration:none}
.carpeta-tarj:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta);
  border-color:var(--azul)}
.carpeta-ceja{position:absolute;top:-9px;left:-1px;width:92px;height:10px;
  background:var(--azul);border-radius:4px 10px 0 0}
.carpeta-tarj.suelta .carpeta-ceja{background:var(--tenue)}
.carpeta-tarj.cerrada{opacity:.62}
.carpeta-tarj.cerrada .carpeta-ceja{background:var(--tenue)}
.carpeta-cuerpo{padding:16px 16px 14px}
.carpeta-nom{display:block;font-family:var(--titulos);font-size:16px;font-weight:700;
  letter-spacing:-.01em;color:var(--texto);text-decoration:none;line-height:1.2}
a.carpeta-nom:hover{color:var(--azul)}
.carpeta-sub{font-size:12px;color:var(--tenue);margin-top:3px}
.carpeta-cifras{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;
  font-size:12.5px;color:var(--suave)}
.carpeta-cifras b{font-family:var(--dato);font-size:14px;color:var(--texto)}
.carpeta-pie{display:flex;gap:8px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--borde2)}

/* ---------- cinta de la carpeta abierta ---------- */
.cinta-carpeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:8px 22px;background:var(--azul-suave);
  border-bottom:1px solid var(--borde);font-size:13px}
.cinta-carpeta .ico{width:15px;height:15px}
.cc-ruta{display:flex;align-items:center;gap:6px;color:var(--suave);text-decoration:none}
.cc-ruta:hover{color:var(--azul)}
.cc-sep{color:var(--tenue)}
.cc-nombre{font-family:var(--titulos);font-weight:700;font-size:14px;
  color:var(--azul-osc);text-decoration:none;letter-spacing:-.01em}
.cc-nombre:hover{text-decoration:underline}
.cc-nota{margin-left:auto;color:var(--suave);font-size:11.5px}
.cc-btn{padding:3px 11px;border:1px solid var(--borde);border-radius:7px;
  background:var(--panel);color:var(--suave);font-size:11.5px;font-weight:600;
  text-decoration:none}
.cc-btn:hover{border-color:var(--azul);color:var(--azul)}
/*  El de salir se ve distinto: es la puerta para salir de la carpeta.  */
.cc-salir{background:var(--azul);border-color:var(--azul);color:#fff}
.cc-salir:hover{background:var(--azul-osc);border-color:var(--azul-osc);color:#fff}

/* ---------- tarjeta de cifra (totales de cobros) ---------- */
.tarjeta.cifra{display:flex;flex-direction:column;gap:3px;padding:16px 18px}
.tarjeta.cifra .rot{font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tenue)}
.tarjeta.cifra b{font-family:var(--titulos);font-size:24px;font-weight:800;
  letter-spacing:-.025em;line-height:1.1}
.tarjeta.cifra .mini{color:var(--tenue)}
.tarjeta.cifra.alerta{border-color:var(--ambar)}
.tarjeta.cifra.alerta b{color:var(--ambar)}

/* ---------- apoyos que faltaban ---------- */
table.datos td.der, table.datos th.der{text-align:right}
.debe{color:var(--rojo);font-weight:700}
.pastilla.gris{background:var(--panel2);color:var(--tenue)}
.btn.peligro{background:var(--rojo);border-color:var(--rojo);color:#fff}
.btn.peligro:hover{background:#7d221d;border-color:#7d221d}
.tarjeta.vacio{text-align:center;color:var(--suave);padding:28px 20px}
.tarjeta.vacio p{margin-bottom:12px}

@media(max-width:1000px){
  .cinta-carpeta{padding:8px 16px}
  .cc-nota{display:none}
}
.mover{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--borde2)}
.mover select{max-width:240px;padding:5px 9px;font-size:12.5px}

/* =====================================================================
   BLOQUES QUE SE AGREGAN: representantes de un cliente y propietarios
   de una solicitud. Se ven como fichas sueltas dentro del formulario,
   para que se entienda que son varios y no un formulario mas largo.
   ===================================================================== */
.rep-bloque, .prop-bloque{border:1px solid var(--borde);border-left:3px solid var(--azul);
  border-radius:10px;padding:14px 16px 4px;margin-bottom:12px;background:var(--panel2)}
.rep-cab, .prop-cab{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rep-num, .prop-num{font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul)}
.rep-cab button, .prop-cab button{margin-left:auto}
.prop-reps{margin:2px 0 12px;color:var(--suave);line-height:1.45}
.prop-reps b{color:var(--texto)}

/* =====================================================================
   SEGUIMIENTO DE EXPEDIENTES
   A proposito NO es una tabla de filas: cada expediente es una ficha con
   su barra de color a la izquierda -el semaforo- y su historial en linea
   de tiempo debajo. Se lee de un vistazo cual se movio.
   ===================================================================== */
.seg-cinta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:14px 20px;margin-bottom:18px;box-shadow:var(--sombra)}
.seg-dato{display:flex;flex-direction:column;line-height:1.15}
.seg-dato b{font-family:var(--titulos);font-size:21px;letter-spacing:-.025em}
.seg-dato span{font-size:11.5px;color:var(--tenue)}
.seg-dato.vivo b{color:var(--azul)}
.seg-dato.ojo b{color:var(--ambar)}
.seg-buscar{margin-left:auto;min-width:240px}
.seg-buscar input{width:100%}

.seg-ficha{display:flex;background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--radio);margin-bottom:14px;overflow:hidden;box-shadow:var(--sombra)}
.seg-barra{width:6px;flex:none;background:var(--tenue)}
.seg-ficha.proceso  .seg-barra{background:var(--azul)}
.seg-ficha.observado .seg-barra{background:var(--ambar)}
.seg-ficha.aprobado .seg-barra{background:var(--verde)}
.seg-ficha.error    .seg-barra{background:var(--rojo)}
.seg-ficha.nuevo-cambio{border-color:var(--azul);box-shadow:var(--sombra-alta)}
.seg-cuerpo{flex:1;padding:16px 20px;min-width:0}
.seg-cab{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.seg-num{font-size:16px;font-weight:600;letter-spacing:-.01em}
.seg-quien{font-size:13.5px;color:var(--suave);margin-top:2px}
.seg-act{color:var(--tenue)}
.seg-acciones{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}

.seg-estado{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.seg-pastilla{font-family:var(--titulos);font-size:15px;font-weight:700;
  letter-spacing:-.01em;color:var(--texto)}
.seg-ficha.observado .seg-pastilla{color:var(--ambar)}
.seg-ficha.aprobado .seg-pastilla{color:var(--verde)}
.seg-sub{font-size:12.5px;color:var(--suave)}
.seg-chispa{background:var(--azul);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:2px 8px;border-radius:20px}
.seg-error{margin:8px 0;font-size:12.5px;color:var(--rojo);
  background:var(--rojo-suave);border-radius:8px;padding:7px 11px}

/*  La linea de tiempo: el hito mas nuevo arriba.  */
.seg-linea{margin:14px 0 10px;padding-left:4px}
.seg-hito{display:flex;gap:12px;position:relative;padding:0 0 12px 16px;
  border-left:2px solid var(--borde2)}
.seg-hito:last-child{border-left-color:transparent;padding-bottom:2px}
.seg-punto{position:absolute;left:-6px;top:4px;width:10px;height:10px;
  border-radius:50%;background:var(--borde);border:2px solid var(--panel)}
.seg-hito.fresco .seg-punto{background:var(--azul);box-shadow:0 0 0 3px var(--azul-suave)}
.seg-hito-txt{font-size:13px}
.seg-hito-txt b{font-weight:600}
.seg-pie{color:var(--tenue);border-top:1px dashed var(--borde2);padding-top:9px}

/*  El numerito de aviso en la barra de arriba y en la lateral.  */
.chispa{background:var(--rojo);color:#fff;font-family:var(--dato);font-size:9.5px;
  font-weight:700;font-style:normal;padding:1px 6px;border-radius:20px;margin-left:6px}
.mi .chispa{margin-left:auto}

@media(max-width:1000px){
  .seg-cinta{gap:16px}
  .seg-buscar{margin-left:0;width:100%}
}