/* ===========================================================================
   Portal de Contratistas - sistema visual
   Identidad tomada de podiocapital.com: tinta #0a0a0a, papel calido #fafaf7,
   azul pizarra #243746, hueso #efece4, Fraunces (serif) + Inter (sans).
   Las tipografias se sirven desde ESTE servidor: nada se pide a Google, asi
   el portal carga rapido con mala senal en obra.
   =========================================================================== */

@font-face{
  font-family:'Inter';src:url('fuentes/inter.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';src:url('fuentes/fraunces.woff2') format('woff2');
  font-weight:300 600;font-style:normal;font-display:swap;
}
/* La ITALICA de Fraunces, en archivo aparte porque asi la publica la fundicion.
   Sin ella el navegador inclina la redonda por su cuenta (oblicua sintetica) y
   en un serif de contraste alto como este se nota feo justo en los titulares
   grandes, que es donde vive el gesto. Es la misma version (v38) y el mismo
   corte latino que fraunces.woff2: se bajaron de la misma peticion. */
@font-face{
  font-family:'Fraunces';src:url('fuentes/fraunces-italica.woff2') format('woff2');
  font-weight:300 600;font-style:italic;font-display:swap;
}

:root{
  --ink:#0a0a0a; --ink-soft:#1a1a1a;
  --paper:#fafaf7; --blanco:#fff;
  --bone:#efece4; --bone-warm:#e8e3d6;
  --blue:#243746; --blue-soft:#6d85c4; --blue-bg:#eef1f5;
  --mute:#6b6b6b; --mute-2:#8a8a8a;
  --line:rgba(10,10,10,.10); --line-strong:rgba(10,10,10,.22);

  --verde:#2f6b4f; --verde-bg:#eaf2ed;
  --ambar:#8a5a1a; --ambar-bg:#f7efe2;
  --rojo:#9b2c2c; --rojo-bg:#f7eceb;

  --serif:'Fraunces','Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Escala tipografica. Antes cada bloque inventaba su rem. */
  --t-micro:.63rem; --t-etq:.68rem; --t-cuerpo:.9rem;
  --t-titulo:clamp(1.2rem,2.6vw,1.45rem);
  --t-display:clamp(1.7rem,4.6vw,2.6rem);
  --t-cifra:clamp(2.2rem,8vw,3.4rem);

  /* Tracking. El .08em es el del menu de podiocapital.com. */
  --tk-etq:.14em; --tk-nav:.08em; --tk-display:-.02em;

  /* Espacio. Del sitio se toma la PROPORCION (1:1.6), no la escala: alla las
     secciones respiran 200px y aqui esto se consulta desde el telefono. */
  --e-1:.4rem; --e-2:.7rem; --e-3:1.15rem;
  --e-4:1.8rem; --e-5:2.8rem; --e-6:clamp(3rem,7vw,4.5rem);

  /* Colores que vivian escritos a mano por todo el archivo. Mismo valor de
     siempre; ahora con nombre para que se puedan cambiar en un solo sitio. */
  --fila-hover:#fcfbf8; --fila-alerta:#fffdfd;
  /* Los verdes y rojos de arriba son para AVISOS: cajas chicas donde el color
     tiene que gritar. En una lista de documentos, donde el relleno cubre el
     renglon entero y hay seis seguidos, el mismo tono grita demasiado y la
     pantalla se vuelve un semaforo. Estos son los mismos colores, casi
     apagados: se distingue de un vistazo cual es cual y nada mas. */
  --fila-si:#f5f9f6; --fila-no:#fdf8f7;
  --canto-si:#bcd6c6; --canto-no:#e8cdca;
  --borde-verde:#cadfd3; --borde-ambar:#e8d5b8;
  --borde-rojo:#e6cac8;  --borde-azul:#ccd5dd;
  --line-suave:rgba(10,10,10,.06);

  --r:12px; --r-sm:9px;
  --sombra:0 1px 2px rgba(10,10,10,.04);
  --sombra-2:0 6px 20px rgba(10,10,10,.08), 0 1px 3px rgba(10,10,10,.04);

  /* alias antiguos, por si quedo alguna referencia suelta */
  --acento:#243746; --acento-claro:#eef1f5; --tinta:#0a0a0a; --suave:#6b6b6b;
  --texto:#0a0a0a; --texto-2:#4a4a4a; --texto-3:#6b6b6b;
  --linea:rgba(10,10,10,.10); --linea-2:rgba(10,10,10,.22);
  --gris:#6b6b6b; --gris-bg:#efece4; --azul:#243746; --azul-bg:#eef1f5;
  --azul-borde:#c9d2da; --papel:#fafaf7;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ===========================================================================
   GESTOS EDITORIALES
   Lo que hace que podiocapital.com se vea caro no es la paleta -esa ya la
   teniamos- sino estos seis gestos. Van aqui arriba, juntos, porque son un
   vocabulario: se combinan entre si y con las tarjetas de mas abajo.
   =========================================================================== */

/* CEJA -- el filete corto + la etiqueta diminuta que encabeza cada seccion.
   El filete va en el ::before para no pedir un <span> extra en cada uso. */
.ceja{
  display:flex;align-items:center;gap:.6rem;
  font-size:var(--t-etq);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--tk-etq);color:var(--mute);margin:0 0 var(--e-1)
}
.ceja::before{content:"";width:28px;height:1px;background:var(--line-strong);flex:none}
.hero .ceja{color:rgba(255,255,255,.5)}
.hero .ceja::before{background:rgba(255,255,255,.3)}

/* FILETE suelto, para cuando hace falta la raya sin etiqueta. */
.filete{display:inline-block;width:28px;height:1px;background:var(--line-strong);vertical-align:middle}

/* MARCADOR -- el "N° 03 / Proyectos" del sitio. El numero en itálica azul. */
.marcador{
  font-family:var(--serif);font-size:.8rem;font-weight:400;color:var(--mute);margin:0
}
.marcador b{font-style:italic;font-weight:400;color:var(--blue-soft)}

/* DISPLAY -- el titular. Fraunces ligera con UNA palabra en itálica azul.
   Se marca con <em>, que ya existe en HTML y significa exactamente eso; no
   hace falta inventar una clase. */
/* text-transform y color van explicitos: .display se pone encima de un h1, un
   h2 o un h3, y el h2 de este portal es una etiqueta chica, GRIS y en
   MAYUSCULAS. Sin reponerlos, el nombre de una propiedad salia gritado. */
.display{
  font-family:var(--serif);font-weight:300;font-size:var(--t-display);
  line-height:1.1;letter-spacing:var(--tk-display);margin:0 0 var(--e-2);
  text-transform:none;color:var(--ink)
}
.display em{font-style:italic;font-weight:300;color:var(--blue-soft)}
.display.chico{font-size:var(--t-titulo);line-height:1.15}
.seccion em{font-style:italic;color:var(--blue-soft)}

/* PAR DE DATOS -- etiqueta diminuta encima de un valor en serif.
   Los hijos se llaman .etq y .val igual que en .stat y en .hero: es el mismo
   concepto y no tiene por que aprenderse dos veces. */
.datos{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-4);margin:var(--e-3) 0}
.dato{min-width:0}
.dato .etq{
  font-size:var(--t-micro);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--mute);line-height:1.35
}
.dato .val{font-family:var(--serif);font-size:1.02rem;font-weight:400;margin-top:.15rem}
.hero .datos{margin-bottom:0}
.hero .dato .etq{color:rgba(255,255,255,.5)}
.hero .dato .val{color:#fff}

/* NUMERACION ROMANA -- i. ii. iii. dentro de cada propiedad.
   Contador CSS y no PHP porque las secciones son condicionales: una propiedad
   puede no tener documentos, y el contador solo cuenta lo que se pinta. */
.romanos{counter-reset:rom}
.romanos .seccion::before{
  counter-increment:rom;content:counter(rom,lower-roman) ". ";
  font-family:var(--serif);font-style:italic;color:var(--blue-soft)
}

/* REGLA -- hairline para separar sin encerrar, como hace el sitio. */
.regla{border:0;border-top:1px solid var(--line);margin:var(--e-5) 0}

/* La fila de arriba del hero: la ceja a la izquierda y la submarca a la
   derecha, como la cabecera de las fichas del sitio. */
.arriba-hero{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.arriba-hero .ceja{margin:0}
.hero > .ceja{margin-bottom:var(--e-1)}
.hero .cifra{margin-top:.2rem}

/* Los datos del proyecto, justo bajo el hero. */
.datos-obra{margin-top:var(--e-3);padding-bottom:var(--e-3);border-bottom:1px solid var(--line)}

/* La cabecera de cada propiedad. Hasta hoy el nombre de la propiedad salia mas
   chico que el titulo "Estado de cuenta" que va DENTRO de su tarjeta: el
   contenedor pesaba menos que su contenido. */
.cab-propiedad{margin:var(--e-5) 0 var(--e-3)}
.cab-propiedad .marcador{margin-bottom:var(--e-1)}
.cab-propiedad .display{margin:0;font-size:clamp(1.45rem,4.2vw,1.95rem)}
.propiedad:first-of-type .cab-propiedad{margin-top:var(--e-4)}

/* Cuando se dice de cuando es la informacion. */
.frescura{
  text-align:center;color:var(--mute-2);font-size:.8rem;margin:var(--e-4) 0 var(--e-3)
}
/* Antes el subrayado se pintaba con una sombra interior y el relleno lo
   dejaba flotando dos lineas mas abajo del texto. */
.frescura a{
  color:var(--mute);padding:.78rem .3rem;display:inline-block;
  text-decoration:underline;text-decoration-color:var(--line-strong);
  text-underline-offset:3px;text-decoration-thickness:1px
}
.frescura a:hover{color:var(--ink)}

/* El membrete solo existe en papel; en pantalla no ocupa nada.
   Ver el bloque @media print al final de este archivo. */
.membrete-impresion{display:none}

/* Boton de imprimir. Solo aparece si el navegador puede imprimir, y lo
   enciende assets/portal.js: sin JavaScript no se pinta un boton que no
   haria nada. */
.imprimir{text-align:center;margin:var(--e-3) 0 var(--e-5)}
.imprimir button{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:.6rem 1.25rem;border-radius:999px;
  border:1px solid var(--line);background:var(--blanco);
  color:var(--mute);font-size:.84rem;font-weight:500;cursor:pointer
}
.imprimir button:hover{border-color:var(--line-strong);color:var(--ink);background:var(--blanco)}

/* ----------------------------------------------------- barra utilitaria --- */
/* La franja fina de arriba del sitio: "DESDE 2007 - CIUDAD DE MEXICO" a la
   izquierda y "EST. MMVII" a la derecha.
   ⚠️ SOLO EN PANTALLA GRANDE. El boton del menu movil es position:fixed y la
   barra negra no lo es: en telefono esta franja empujaria la barra pero no el
   boton, que quedaria flotando encima. Y ademas 30px de cromo en un telefono
   cuestan mas de lo que dan. */
.utilitaria{
  background:var(--ink);color:rgba(255,255,255,.55);
  height:30px;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:0 1.25rem;
  font-size:11px;text-transform:uppercase;letter-spacing:var(--tk-nav);
  border-bottom:1px solid rgba(255,255,255,.10)
}
.utilitaria span{display:flex;align-items:center;gap:.55rem;min-width:0}
.utilitaria .punto{width:4px;height:4px;border-radius:999px;background:var(--blue-soft);flex:none}
.utilitaria .romano{
  font-family:var(--serif);font-style:italic;color:var(--blue-soft);
  text-transform:none;letter-spacing:0
}
@media(max-width:760px){ .utilitaria{display:none} }

/* ---------------------------------------------------------------- barra --- */
.barra{
  background:var(--ink);color:#fff;padding:.85rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem
}
.barra .marca{display:flex;align-items:center;gap:.7rem;min-width:0}
.barra .marca img{height:26px;width:auto;display:block;flex:none;filter:brightness(0) invert(1)}
.barra .marca .txt{min-width:0}
.barra .marca .nom{
  font-family:var(--serif);font-weight:400;font-size:1rem;letter-spacing:.01em;
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.barra .marca small{
  display:block;font-size:.74rem;color:rgba(255,255,255,.55);
  letter-spacing:.03em;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.barra .quien{font-size:.76rem;color:rgba(255,255,255,.55);text-align:right;line-height:1.45;flex:none}
.barra .quien b{display:block;color:#fff;font-weight:500;font-size:.82rem}
.barra a{color:rgba(255,255,255,.8);text-decoration:none}
.barra a:hover{color:#fff;text-decoration:underline}

.suplantando{
  background:var(--ambar);color:#fff;padding:.6rem 1.25rem;font-size:.84rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap
}
.suplantando a{color:#fff;font-weight:600}

/* --------------------------------------------------------- selector obra --- */
.obras{
  background:var(--blanco);border-bottom:1px solid var(--line);
  padding:.6rem 1.25rem;display:flex;gap:.4rem;align-items:center;overflow-x:auto
}
.obras-etq{
  font-size:.66rem;color:var(--mute);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;white-space:nowrap;margin-right:.2rem
}
.obras a{
  padding:.32rem .8rem;border-radius:999px;text-decoration:none;white-space:nowrap;
  font-size:.83rem;font-weight:500;color:var(--mute);background:var(--bone);
  border:1px solid transparent
}
.obras a:hover{border-color:var(--line-strong);color:var(--ink)}
.obras a.activa{background:var(--blue);color:#fff}

/* ----------------------------------------------------------------- menu --- */
.menu{
  background:var(--blanco);border-bottom:1px solid var(--line);
  padding:0 1.25rem;display:flex;gap:.1rem;overflow-x:auto
}
.menu a{
  padding:.85rem .8rem .7rem;text-decoration:none;color:var(--mute);
  font-size:.88rem;font-weight:500;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px
}
.menu a:hover{color:var(--ink)}
.menu a.activo{color:var(--ink);border-bottom-color:var(--blue);font-weight:600}

/* ------------------------------------------------------------ estructura --- */
.envoltura{max-width:1060px;margin:0 auto;padding:1.5rem 1.25rem 2rem}
.centrado{max-width:400px;margin:2.5rem auto;padding:0 1.25rem}

/* PORTADA -- lo que ve alguien que todavia no ha entrado.
   Antes esta pantalla era un formulario con una barra negra encima. Es la
   primera impresion del portal y la unica que ve un inversionista antes de
   confiarle sus numeros a la pagina, asi que se trata como una portada. */
.portada{
  text-align:center;padding:var(--e-6) 1.25rem var(--e-4);
  border-bottom:1px solid var(--line);background:var(--paper)
}
/* El logo es arte BLANCO sobre transparencia -es el mismo archivo que va en la
   barra negra-. brightness(0) lo colapsa a negro solido conservando el
   antialiasing de los bordes. Asi el mismo PNG sirve en los dos fondos y no
   hace falta un segundo archivo que alguien tenga que mantener al dia. */
.portada .logo-entrada{
  display:block;height:52px;width:auto;margin:0 auto var(--e-3);
  filter:brightness(0) opacity(.88)
}
.portada .marcador{display:inline-block}
.centrado .logo-entrada{display:block;height:44px;width:auto;margin:0 auto 1.5rem;filter:brightness(0)}

/* PROMESA -- el remate al pie del acceso. El texto sale de lib/marca.php y es
   el mismo que ya dice podiocapital.com, palabra por palabra. */
.promesa{
  border-top:1px solid var(--line);margin-top:var(--e-5);padding-top:var(--e-3);
  font-size:.84rem;color:var(--mute);line-height:1.7
}
.promesa .display{margin-bottom:var(--e-1)}

h1{font-family:var(--serif);font-size:1.7rem;font-weight:400;letter-spacing:-.01em;margin:0 0 .3rem;line-height:1.2}
h2{
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  color:var(--mute);margin:2.2rem 0 .75rem
}
h3{margin:0 0 .15rem;font-size:1rem;font-weight:600;letter-spacing:-.01em}
p.ayuda{color:var(--mute);font-size:.88rem;margin:.2rem 0 1.2rem;line-height:1.6}

/* ------------------------------------------------------------------ hero --- */
.hero{
  background:var(--ink);color:#fff;border-radius:var(--r);
  padding:1.7rem 1.5rem;margin-bottom:.7rem;box-shadow:var(--sombra-2)
}
.hero .etq{
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.5)
}
.hero .cifra{
  font-family:var(--serif);font-weight:300;
  font-size:var(--t-cifra);line-height:1.04;margin:.4rem 0 0;
  font-variant-numeric:tabular-nums;letter-spacing:-.025em;overflow-wrap:anywhere
}
.hero .cifra.negativo{color:#e8a9a9}
.hero .pie-hero{
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  margin-top:1.15rem;font-size:.81rem;color:rgba(255,255,255,.6);flex-wrap:wrap
}
.hero .barra-pct{
  height:5px;background:rgba(255,255,255,.14);border-radius:999px;overflow:hidden;margin-top:1rem
}
.hero .barra-pct span{display:block;height:100%;background:var(--blue-soft);border-radius:999px}

/* --------------------------------------------------------- tarjetas dato --- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-bottom:1.3rem}
.stat{
  background:var(--blanco);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.85rem .9rem;box-shadow:var(--sombra);min-width:0
}
.stat .etq{
  font-size:.63rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--mute);line-height:1.35
}
.stat .val{
  font-family:var(--serif);font-size:1.1rem;font-weight:400;margin-top:.3rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow-wrap:anywhere
}
@media(max-width:520px){
  .stats{gap:.4rem}
  .stat{padding:.65rem .55rem}
  .stat .val{font-size:.85rem}
  .stat .etq{font-size:.57rem;letter-spacing:.06em}
}

/* --------------------------------------------------------------- tarjeta --- */
.tarjeta{
  background:var(--blanco);border:1px solid var(--line);border-radius:var(--r);
  padding:1.15rem 1.25rem;margin-bottom:.7rem;box-shadow:var(--sombra)
}
.tarjeta.plana{padding:0;overflow:hidden}
a.bloque{display:block;text-decoration:none;color:inherit}
a.bloque .tarjeta{transition:border-color .14s,box-shadow .14s}
a.bloque:hover .tarjeta{border-color:var(--line-strong);box-shadow:var(--sombra-2)}

/* FICHA DE PROYECTO -- la tarjeta con cabecera en tinta.
   En el sitio la cabecera es una foto del proyecto oscurecida. Aqui va tinta
   plana a proposito: una foto por obra seria un archivo nuevo que alguien
   tendria que mantener, y servirlas desde SmartSuite ya se descarto por los
   503 de Hostinger. La tinta da el mismo peso visual con cero archivos. */
.ficha-cab{
  position:relative;background:var(--ink);color:#fff;overflow:hidden
}
/* Con foto del proyecto: la misma imagen que ensena podiocapital.com en su
   portafolio. Va detras y oscurecida, para que el texto se lea sin depender
   de como sea la foto. */
.ficha-cab .fondo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.5);display:block
}
.ficha-cab .encima{
  position:relative;padding:var(--e-3) 1.25rem var(--e-2)
}
.ficha-cab.con-foto .encima{
  padding-top:var(--e-6);
  background:linear-gradient(to top, rgba(10,10,10,.72), rgba(10,10,10,.05))
}
.ficha-cab .arriba{
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  margin-bottom:var(--e-2)
}
.ficha-cab .arriba .marcador{color:rgba(255,255,255,.62)}
.ficha-cab .arriba .marcador b{color:#cdd8ee}
/* Mismo cuidado que en la portada: sin align-self, el flex lo aplasta. */
.ficha-cab .logo-submarca{
  height:22px;width:auto;align-self:center;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.95
}
.ficha-cab .display{color:#fff;margin:0;font-size:clamp(1.4rem,4.4vw,1.85rem)}
.ficha-cuerpo{padding:var(--e-3) 1.25rem 1.25rem}
.ficha-cuerpo .datos{margin-top:0}
.ficha-cuerpo .stats{margin-bottom:0}
/* "Ver el proyecto ->" al pie de la ficha. Antes era una flecha gris arriba a
   la derecha, donde nadie la miraba. */
.ficha-cuerpo .ver-proyecto{
  margin:var(--e-3) 0 0;padding-top:var(--e-2);
  border-top:1px solid var(--line);color:var(--mute)
}
.ficha-cuerpo .ver-proyecto .ver-mas{margin-left:auto}
a.bloque:hover .ver-proyecto{color:var(--ink)}
a.bloque:hover .ficha-cab .display em{color:#fff;transition:color .14s}

/* flex-wrap y min-width:0 no son adorno: sin ellos, en un telefono el bloque
   de la derecha -las pastillas- empujaba la pagina 184px hacia fuera y toda la
   administracion se movia de lado al navegar. Medido, no supuesto. */
.tar-cab{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:.55rem .8rem;flex-wrap:wrap
}
.tar-cab > *{min-width:0}
.sub{color:var(--mute);font-size:.82rem;margin:.15rem 0 0;line-height:1.6}
.sub b{color:var(--ink);font-weight:500}

/* -------------------------------------------------------------- etiquetas --- */
.pill{
  display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;
  border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap;
  border:1px solid transparent
}
.pill::before{content:"";width:5px;height:5px;border-radius:999px;background:currentColor;flex:none}
.pill.verde{background:var(--verde-bg);color:var(--verde);border-color:var(--borde-verde)}
.pill.ambar{background:var(--ambar-bg);color:var(--ambar);border-color:var(--borde-ambar)}
.pill.rojo {background:var(--rojo-bg); color:var(--rojo); border-color:var(--borde-rojo)}
.pill.azul {background:var(--blue-bg); color:var(--blue); border-color:var(--borde-azul)}
.pill.gris {background:var(--bone);    color:var(--mute); border-color:var(--line)}
/* Pastilla de SUBMARCA (AVORA, FAISANO), como en las fichas del sitio.
   Vive sobre tinta y no lleva el puntito: no es un estado, es un nombre. */
.pill.marca{
  background:transparent;border-color:rgba(255,255,255,.28);
  color:rgba(255,255,255,.8);font-size:.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:var(--tk-etq)
}
.pill.marca::before{display:none}

.marca-obra{
  display:inline-block;font-size:.7rem;font-weight:600;color:var(--mute);
  background:var(--bone);border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem
}
.clave{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;color:var(--mute)}

/* ------------------------------------------------------------- progreso --- */
.avance{height:5px;background:var(--bone);border-radius:999px;overflow:hidden;margin:.75rem 0 .3rem}
.avance span{display:block;height:100%;background:var(--blue-soft);border-radius:999px}
.avance.azul span{background:var(--blue)}

/* ----------------------------------------------------------- movimientos --- */
.movs{list-style:none;margin:0;padding:0}
.movs li{
  display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;
  padding:.95rem 1.25rem;border-top:1px solid var(--line)
}
.movs li:first-child{border-top:0}
.movs li:hover{background:var(--fila-hover)}
.movs .desc{font-weight:500;font-size:.93rem;overflow-wrap:anywhere}
.movs .meta{grid-column:1;color:var(--mute);font-size:.79rem;line-height:1.65}
.movs .monto{
  grid-row:1;grid-column:2;text-align:right;font-weight:600;font-size:1rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap
}
.movs .estado{grid-row:2;grid-column:2;text-align:right}
.negativo{color:var(--rojo)}

/* ------------------------------------------------------------- archivos --- */
a.archivo{
  display:inline-flex;align-items:center;gap:.3rem;margin:.45rem .35rem 0 0;
  padding:.28rem .7rem;background:var(--blanco);color:var(--blue);
  border:1px solid var(--borde-azul);border-radius:999px;
  font-size:.75rem;font-weight:600;text-decoration:none
}
a.archivo::before{content:"\2193";font-weight:700;opacity:.65}
a.archivo:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---------------------------------------------------------------- tabla --- */
.tabla{width:100%;border-collapse:collapse;font-size:.88rem}
.tabla th{
  text-align:left;font-size:.63rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--mute);padding:.7rem 1rem;
  border-bottom:1px solid var(--line-strong);white-space:nowrap
}
.tabla td{padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--fila-hover)}
.tabla .der{font-family:var(--sans);text-align:right;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.tabla a{color:inherit;text-decoration:none;font-weight:600}
.tabla a:hover{color:var(--blue)}
.tabla tfoot td{background:var(--fila-hover);font-weight:700;border-top:2px solid var(--line-strong);border-bottom:0}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}

/* ------------------------------- tabla chica dentro de una tarjeta --------- */
.mini{
  width:100%;border-collapse:collapse;font-size:.78rem;margin:.7rem 0 .2rem;
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap
}
.mini th{
  text-align:left;font-size:.6rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;color:var(--mute);padding:.3rem .55rem .35rem;
  border-bottom:1px solid var(--line)
}
.mini td{padding:.38rem .55rem;border-bottom:1px solid var(--line);color:var(--mute)}
.mini tbody tr:last-child td{border-bottom:0}
.mini td:first-child{color:var(--ink);font-weight:500}
.mini .der{text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mini .der.negativo{font-weight:600}

/* ------------------------------------------------------------ formularios --- */
label{display:block;font-weight:500;font-size:.83rem;margin:1rem 0 .35rem;color:var(--ink)}
input[type=email],input[type=password],input[type=text]{
  width:100%;padding:.72rem .85rem;font-size:16px;   /* 16px evita el zoom en iPhone */
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);font-family:var(--sans)
}
input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
.codigo{letter-spacing:.4em;text-align:center;font-size:1.35rem;font-weight:600}

button{
  width:100%;margin-top:1.3rem;padding:.8rem 1rem;font-size:.93rem;font-weight:600;
  background:var(--ink);color:#fff;border:0;border-radius:var(--r-sm);cursor:pointer;
  font-family:var(--sans);letter-spacing:-.005em
}
button:hover{background:var(--ink-soft)}
button.secundario{background:var(--blanco);color:var(--ink);border:1px solid var(--line-strong)}
button.secundario:hover{background:var(--bone)}
button.peligro{background:var(--blanco);color:var(--rojo);border:1px solid var(--borde-rojo)}
button.peligro:hover{background:var(--rojo-bg)}
.acciones{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.9rem}
.acciones form{margin:0}
.acciones button{width:auto;margin:0;padding:.45rem .85rem;font-size:.81rem}

/* "Recordarme en este dispositivo" (login) */
label.recordar{display:flex;align-items:flex-start;gap:.6rem;margin:.2rem 0 1.1rem;
  font-size:.9rem;font-weight:500;color:var(--ink-soft);cursor:pointer;line-height:1.4}
label.recordar input{width:1.15rem;height:1.15rem;margin:.1rem 0 0;flex:0 0 auto;
  accent-color:var(--ink);cursor:pointer}
label.recordar small{display:block;font-size:.78rem;font-weight:400;color:var(--mute)}
.enlaces{margin-top:1.4rem;text-align:center;font-size:.86rem;line-height:2}
.enlaces a{color:var(--blue);text-decoration:none;font-weight:600}
.enlaces a:hover{text-decoration:underline}

/* --- Las dos salidas de la pantalla de entrada no pesan igual ------------
   Antes eran dos enlaces identicos y habia que leer las dos frases completas
   para saber cual era cual. Desde que las cuentas se crean solas, la PRIMERA
   VEZ de todo el mundo pasa por el de arriba: ese va como boton; el de abajo,
   que solo hace falta si ya tenias y la perdiste, queda discreto. */
.enlaces .principal{display:block;margin:0 0 .9rem}
.enlaces .principal a{
  display:block;padding:.72rem 1rem;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--blanco);color:var(--ink);
  font-size:.92rem;line-height:1.3
}
.enlaces .principal a:hover{background:var(--bone);text-decoration:none;border-color:var(--ink)}
.enlaces .secundario{margin:0}
.enlaces .secundario a{color:var(--mute);font-weight:500}

/* -------------------------------------------------------------- mensajes --- */
.aviso{padding:.8rem .95rem;border-radius:var(--r-sm);font-size:.86rem;margin:.9rem 0;border:1px solid;line-height:1.55}
.aviso.error{background:var(--rojo-bg);color:var(--rojo);border-color:var(--borde-rojo)}
.aviso.exito{background:var(--verde-bg);color:var(--verde);border-color:var(--borde-verde)}
.aviso.info {background:var(--blue-bg);color:var(--blue);border-color:var(--borde-azul)}
.aviso.ojo  {background:var(--ambar-bg);color:var(--ambar);border-color:var(--borde-ambar)}

.clave-nueva{
  border:1px solid var(--ink);border-radius:var(--r);padding:1.15rem 1.25rem;
  background:var(--blanco);margin-bottom:.7rem
}
.clave-nueva .valor{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.5rem;font-weight:700;
  letter-spacing:.04em;margin:.5rem 0;overflow-wrap:anywhere
}

.vacio{text-align:center;color:var(--mute);padding:2.5rem 1.25rem;font-size:.9rem;line-height:1.7}
/* ---------------------------------------------------------------- pie --- */
/* Con la misma idea que el de podiocapital.com: fondo en tinta, el lema
   grande, columnas de enlaces y una raya abajo con el aviso legal. No es una
   copia: aqui no hay "Navegacion" -esas son paginas de la web publica- y en
   cambio se manda a la OTRA puerta del portal, que es lo unico que alguien de
   aqui podria estar buscando. */
/* ⚠️ VA COMO footer.pie Y NO COMO .pie A SECAS.
   La barra de filtros de la administracion tiene su propio <div class="pie">
   -es el renglon de abajo, con el boton Filtrar y el conteo- y al poner el pie
   de pagina en oscuro se lo trago: quedaba un rectangulo negro en medio del
   formulario. El pie de pagina siempre es un <footer>, asi que acotarlo por
   etiqueta los separa sin tocar el HTML de nadie. */
footer.pie{
  background:var(--ink);color:rgba(255,255,255,.62);
  margin-top:var(--e-6);padding:var(--e-6) 0 var(--e-4);
  font-size:.82rem;line-height:1.75
}
/* Cuando la pagina termina con el avance de obra -que va en oscuro- el pie
   pega directo: si no, quedaba una franja de fondo claro de una sola linea
   entre dos zonas negras. */
/* ⚠️ VA VACIO Y SE OCULTA. Existe solo para que cierre el </div> de la
   envoltura que se abrio arriba: el apartado del avance de obra sale de ella
   para que su filete cruce toda la pantalla. Aunque no tenga nada dentro, los
   espacios en blanco del HTML le daban altura. Si algun dia hace falta poner
   algo ahi, quitar este display:none y darle su propio hueco.

   (Hubo aqui una regla ".cierre-banda + .pie" que nunca llego a aplicar: entre
   los dos vive el <dialog> del visor de fotos, y aunque no ocupe espacio, si
   rompe la adyacencia. Se quito para no dejar codigo que engana al leerlo.) */
.cierre-banda{display:none}
.pie-dentro{max-width:1060px;margin:0 auto;padding:0 1.25rem}

footer.pie .lema{
  font-family:var(--serif);font-weight:300;color:#fff;
  font-size:clamp(2.4rem,9vw,5rem);line-height:1;letter-spacing:-.03em;
  margin:0 0 var(--e-5);padding-bottom:var(--e-4);
  border-bottom:1px solid rgba(255,255,255,.16)
}
footer.pie .lema em{font-style:italic;color:var(--blue-soft)}

.pie-columnas{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--e-4) var(--e-5)
}
.pie-col p{margin:0 0 .35rem}
.pie-col .etq{
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.16em;
  color:rgba(255,255,255,.4);margin-bottom:var(--e-2)
}
.pie-col .domicilio{
  font-family:var(--serif);font-style:italic;color:rgba(255,255,255,.5);
  margin-top:var(--e-2)
}
.pie-col ul{list-style:none;margin:0;padding:0}
.pie-col li{margin-bottom:.1rem}
.pie-col a{
  color:rgba(255,255,255,.75);text-decoration:none;
  display:inline-flex;align-items:center;gap:.35rem;padding:.35rem 0
}
.pie-col a:hover{color:#fff}
.pie-col a span{font-size:.8em;opacity:.55}

footer.pie .redes{display:flex;gap:.55rem;margin-top:.2rem}
footer.pie .redes a{
  width:38px;height:38px;padding:0;border-radius:999px;justify-content:center;
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.75)
}
footer.pie .redes a:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.06)}

/* La linea de cuando se actualizo, ya dentro del pie oscuro. */
footer.pie .frescura{
  margin:var(--e-4) 0 0;text-align:left;
  color:rgba(255,255,255,.45);font-size:.78rem
}
footer.pie .frescura a{
  color:rgba(255,255,255,.72);padding:.35rem 0;display:inline-block;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);
  text-underline-offset:3px;text-decoration-thickness:1px
}
footer.pie .frescura a:hover{color:#fff;text-decoration-color:#fff}

.pie-abajo{
  margin-top:var(--e-5);padding-top:var(--e-3);
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:.4rem 1.5rem;flex-wrap:wrap;
  font-size:.76rem;color:rgba(255,255,255,.42)
}
.pie-abajo p{margin:0}

@media(max-width:760px){
  .pie-columnas{grid-template-columns:1fr 1fr}
  .pie-col.ancha{grid-column:1 / -1}
}
@media(max-width:480px){
  .pie-columnas{grid-template-columns:1fr;gap:var(--e-3)}
}

/* ---------------------------------------------------------------- movil --- */
@media(max-width:480px){
  .barra{padding:.75rem 1rem}
  .barra .marca img{height:22px}
  .barra .marca .nom{font-size:.92rem}
  .barra .quien b{font-size:.78rem}
  .envoltura{padding:1.1rem 1rem 2rem}
  .obras,.menu{padding-left:1rem;padding-right:1rem}
  .hero{padding:1.35rem 1.15rem}
  .tarjeta{padding:1rem 1.05rem}
  .movs li{padding:.85rem 1.05rem}
  h1{font-size:1.45rem}
}

/* ======================================================= menu de telefono ===
   Las "tres rayitas".

   POR QUE: en pantalla chica el selector de obra y el menu de secciones eran
   listas horizontales con scroll (overflow-x:auto). Para cambiar de proyecto
   habia que arrastrar de lado, que con una mano y en obra es incomodo, y
   ademas las opciones de la derecha quedaban escondidas sin que se notara.

   COMO: un cajon que entra desde la derecha con todo adentro: en que proyecto
   estas, a donde quieres ir, y cerrar sesion.

   SIN JAVASCRIPT. El interruptor es el propio <input type="checkbox">, asi que
   tambien se abre y cierra con el teclado (barra espaciadora) sin programar
   nada. En pantalla grande estos tres bloques no existen y las barras de
   siempre siguen mandando.
   ========================================================================= */
.interruptor,.hamb,.velo,.cajon{display:none}

@media(max-width:760px){

  /* Fuera las listas que se arrastraban de lado. */
  .obras-portal,.menu{display:none}
  .barra .quien{display:none}
  .barra{padding-right:64px}          /* hueco para el boton */

  /* En administracion el selector de obra se queda, pero ahora envuelve en
     varias lineas en vez de irse de lado. */
  .obras{flex-wrap:wrap;overflow:visible;row-gap:.45rem}

  /* ------------------------------------------- el boton de tres rayitas ---
     Lo que se toca es la <label>. El checkbox va escondido pero SIGUE
     existiendo para el teclado, por eso se esconde recortandolo y no con
     display:none (eso lo sacaria del orden de tabulacion). */
  .interruptor{
    display:block;position:fixed;top:0;right:0;
    width:1px;height:1px;margin:0;padding:0;border:0;
    clip-path:inset(50%);overflow:hidden;white-space:nowrap
  }
  .hamb{
    display:block;position:fixed;top:8px;right:10px;z-index:70;
    width:44px;height:44px;border-radius:11px;cursor:pointer
  }
  .hamb span,.hamb::before,.hamb::after{
    content:"";position:absolute;left:50%;top:50%;
    width:21px;height:2px;background:#fff;border-radius:2px;
    transition:transform .22s ease,background-color .22s ease,opacity .18s ease
  }
  .hamb span{transform:translate(-50%,-50%)}
  .hamb::before{transform:translate(-50%,-50%) translateY(-7px)}
  .hamb::after {transform:translate(-50%,-50%) translateY(7px)}
  .interruptor:focus-visible ~ .hamb{outline:2px solid #fff;outline-offset:3px}

  /* Abierto: las rayitas se vuelven una X. Y se pintan oscuras, porque el
     cajon es blanco y una X blanca sobre blanco no se veria. */
  .interruptor:checked ~ .hamb span{opacity:0}
  .interruptor:checked ~ .hamb::before{transform:translate(-50%,-50%) rotate(45deg)}
  .interruptor:checked ~ .hamb::after {transform:translate(-50%,-50%) rotate(-45deg)}
  .interruptor:checked ~ .hamb::before,
  .interruptor:checked ~ .hamb::after{background:var(--ink)}
  .interruptor:checked:focus-visible ~ .hamb{outline-color:var(--ink)}

  /* ------------------------------------------------------------- el velo --- */
  .velo{
    display:block;position:fixed;inset:0;z-index:60;
    background:rgba(10,10,10,.5);
    opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s
  }
  .interruptor:checked ~ .velo{opacity:1;visibility:visible}

  /* ------------------------------------------------------------ el cajon --- */
  .cajon{
    display:flex;flex-direction:column;
    position:fixed;top:0;right:0;bottom:0;z-index:65;
    width:min(86vw,330px);
    background:var(--blanco);border-left:1px solid var(--line);
    box-shadow:-12px 0 34px rgba(10,10,10,.16);
    padding:calc(env(safe-area-inset-top,0px) + 4.1rem) 0
            calc(env(safe-area-inset-bottom,0px) + 1rem);
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);
    /* Cerrado va oculto de verdad, no solo corrido a un lado: si no, al ir
       con Tab el foco se metia en enlaces que no se ven. */
    visibility:hidden;
    transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s
  }
  .interruptor:checked ~ .cajon{transform:translateX(0);visibility:visible}

  .cajon-quien{padding:0 1.25rem 1rem;border-bottom:1px solid var(--line)}
  .cajon-quien b{display:block;font-size:.95rem;font-weight:600;line-height:1.3}
  .cajon-quien small{
    display:block;color:var(--mute);font-size:.78rem;margin-top:2px;overflow-wrap:anywhere
  }

  .cajon-etq{
    font-size:.64rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
    color:var(--mute-2);margin:1.15rem 0 .2rem;padding:0 1.25rem
  }

  /* 48px de alto: el minimo para que un dedo le atine sin fallar. */
  .cajon a{
    display:flex;align-items:center;justify-content:space-between;gap:.6rem;
    min-height:48px;padding:.7rem 1.25rem;
    text-decoration:none;color:var(--ink);font-size:.95rem;font-weight:500;
    border-left:3px solid transparent
  }
  .cajon a:active{background:var(--bone)}
  .cajon a.activo{
    background:var(--blue-bg);border-left-color:var(--blue);
    color:var(--blue);font-weight:600
  }
  .cajon a.activo::after{
    content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none
  }
  .cajon-salir{
    margin-top:auto;border-top:1px solid var(--line);
    color:var(--mute)!important;font-weight:500!important;font-size:.88rem!important
  }
}

/* ==================================================== cifras en telefono ===
   Tres tarjetas lado a lado no caben en un telefono: "$130,500.00" se partia
   en dos renglones y quedaba un "0" solo abajo. Sobre cifras de dinero eso se
   lee mal y hasta se puede malinterpretar.

   En pantalla chica se vuelven una sola tarjeta con renglones: el concepto a
   la izquierda y el importe a la derecha. Nunca se parte y se lee de corrido.
   ========================================================================= */
@media(max-width:560px){
  :root{ --t-micro:.72rem; --t-etq:.76rem }
  .stat .etq,
  .tabla th,
  .doc-grupo,
  .grupo-doc{ font-size:.72rem }
  .doc-icono{ font-size:.7rem }
  .pill.marca{ font-size:.68rem }

  .stats{
    display:block;gap:0;
    background:var(--blanco);border:1px solid var(--line);
    border-radius:var(--r-sm);box-shadow:var(--sombra);overflow:hidden
  }
  .stat{
    display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    background:transparent;border:0;border-radius:0;box-shadow:none;
    padding:.72rem .95rem;border-bottom:1px solid var(--line)
  }
  .stat:last-child{border-bottom:0}
  .stat .etq{font-size:.67rem;letter-spacing:.09em;margin:0}
  .stat .val{
    font-size:1.02rem;margin:0;white-space:nowrap;overflow-wrap:normal;flex:none
  }
}

@media(prefers-reduced-motion:reduce){
  .hamb,.hamb::before,.hamb::after,.velo,.cajon{transition:none}
  .pestanas a::after{transition:none}
}

/* --------------------------------------------- saltos dentro de Ajustes --- */
/* Ajustes es una pagina larga con cuatro secciones. Esta fila de atajos evita
   tener que bajar buscando. En telefono se puede arrastrar de lado, pero aqui
   si es correcto: son cuatro atajos opcionales, no la navegacion principal. */
.saltos{
  display:flex;gap:.4rem;flex-wrap:wrap;
  margin:0 0 1.6rem;padding-bottom:1rem;border-bottom:1px solid var(--line)
}
.saltos a{
  padding:.3rem .75rem;border-radius:999px;text-decoration:none;white-space:nowrap;
  font-size:.8rem;font-weight:500;color:var(--mute);background:var(--bone);
  border:1px solid transparent
}
.saltos a:hover{border-color:var(--line-strong);color:var(--ink)}
.envoltura h2[id]{scroll-margin-top:1.5rem}

/* ---------------------------------------------------------------- filtros ---
   Barra de filtros de las pantallas de cuentas.
   Se usan <select> de verdad y no listas de enlaces horizontales: en telefono
   el sistema los abre en su propia ruedita, asi que no hay que hacer scroll
   lateral ni caben mal. El font-size de 16px es obligatorio, si no el iPhone
   hace zoom solo al tocarlos. */
.filtros{
  background:var(--blanco);border:1px solid var(--line);border-radius:var(--r);
  padding:.85rem .9rem;margin:0 0 1.2rem;box-shadow:var(--sombra)
}
.filtros .campos{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.filtros .campo{min-width:0}
.filtros label{
  display:block;margin:0 0 .3rem;font-size:.68rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mute)
}
.filtros select,.filtros input[type=search]{
  width:100%;padding:.6rem .7rem;font-size:16px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--blanco);color:var(--ink);font-family:var(--sans)
}
.filtros select:focus,.filtros input[type=search]:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)
}
.filtros .pie{
  display:flex;align-items:center;justify-content:space-between;
  gap:.7rem;flex-wrap:wrap;margin-top:.7rem
}
.filtros button{width:auto;margin:0;padding:.55rem 1.15rem;font-size:.86rem}
.filtros .cuantos{color:var(--mute);font-size:.84rem}
.filtros .limpiar{color:var(--mute);font-size:.84rem;text-decoration:none}
.filtros .limpiar:hover{color:var(--ink)}

@media (max-width:560px){
  .filtros .campos{grid-template-columns:1fr}
}

/* --------------------------------------------------------- nota de pie ---
   Las explicaciones de cada pantalla van ABAJO, no arriba: quien entra viene
   a hacer algo, no a leer. La explicacion es para la primera vez. */
.nota-pie{
  margin:2.5rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line);
  color:var(--mute);font-size:.86rem;line-height:1.65
}
.nota-pie h4{
  margin:0 0 .4rem;font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute-2)
}
.nota-pie p{margin:.5rem 0}

/* ------------------------------------------------- propiedades visibles ---
   Casillas para decidir que propiedades ve cada inversionista. La fila que
   queda desmarcada se atenua para que se vea de un golpe, sin leer. */
.mini th.cen, .mini td.cen{text-align:center;width:5.5rem}
.mini td.cen input[type=checkbox]{width:1.05rem;height:1.05rem;accent-color:var(--blue);cursor:pointer}
.mini tr.oculta td{opacity:.42}
.mini tr.oculta td:first-child{opacity:1}

/* ------------------------------------------------------- barra de guardar ---
   Va arriba y abajo de la lista. Cuando hay cambios sin guardar se pone
   ambar: el color hace el trabajo de recordarlo, sin tener que leer. */
.guardar-barra{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--blanco);border:1px solid var(--line);border-radius:var(--r);
  padding:.75rem .9rem;margin:0 0 1.2rem
}
.guardar-barra.abajo{margin:1.4rem 0 0}
.guardar-barra span{color:var(--mute);font-size:.86rem}
.guardar-barra button{width:auto;margin:0;padding:.55rem 1.1rem;font-size:.86rem;white-space:nowrap}
.guardar-barra.sucia{border-color:var(--ambar);background:var(--ambar-bg)}
.guardar-barra.sucia span{color:var(--ambar);font-weight:600}
@media (max-width:560px){
  .guardar-barra{flex-direction:column;align-items:stretch;text-align:center}
  .guardar-barra button{width:100%}
}

/* ===========================================================================
   PORTAL DE INVERSIONISTAS: SECCIONES, DOCUMENTOS Y AVANCE DE OBRA
   =========================================================================== */

/* ------------------------------------------------------------- secciones --- */
/* Misma familia que .menu del portal de obra, para que se sienta el mismo
   producto. Lo que cambia es el telefono: aqui el area que se toca mide 44px
   de alto, que es el minimo con el que un dedo no falla, y la barra se
   desplaza de lado con imanes en cada boton. */
/* La numeracion 01 02 03 y el subrayado que crece son del menu de
   podiocapital.com. El contador lo lleva el CSS, no el PHP: asi cuenta
   exactamente las pestanas que de hecho se pintan.
   NO se pasan a mayusculas espaciadas: "Adolfo Prieto 1254" es demasiado
   largo con .08em de tracking, y ademas son nombres propios. */
.pestanas{
  counter-reset:pes;
  background:var(--blanco);border-bottom:1px solid var(--line);
  padding:0 1.25rem;display:flex;gap:.1rem;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity
}
.pestanas::-webkit-scrollbar{display:none}
.pestanas a{
  padding:.95rem .85rem .8rem;text-decoration:none;color:var(--mute);
  font-size:.88rem;font-weight:500;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  min-height:44px;display:flex;align-items:center;scroll-snap-align:start;
  position:relative;gap:6px
}
.pestanas a::before{
  counter-increment:pes;content:counter(pes,decimal-leading-zero);
  font-family:var(--serif);font-style:italic;font-size:9px;
  opacity:.55;align-self:flex-start;margin-top:.35rem
}
/* El subrayado crece con transform y no con width: width obliga al navegador
   a recalcular la fila entera en cada cuadro. */
.pestanas a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.55rem;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s
}
.pestanas a:hover::after{transform:scaleX(1)}
.pestanas a.activa::after{transform:scaleX(0)}
.pestanas a:hover{color:var(--ink)}
.pestanas a.activa{color:var(--ink);border-bottom-color:var(--blue);font-weight:600}
.pestanas a:focus-visible{
  outline:2px solid var(--blue);outline-offset:-3px;border-radius:var(--r-sm)
}

/* ------------------------------------------------------------ documentos --- */
.grupo-doc{
  font-family:var(--sans);font-size:.68rem;font-weight:600;color:var(--mute);
  text-transform:uppercase;letter-spacing:.12em;margin:0 0 .7rem
}
.docs{list-style:none;margin:0;padding:0}
.docs li{
  display:flex;align-items:center;gap:.5rem;
  border-top:1px solid var(--line)
}
.docs li:first-child{border-top:0}

.doc{
  flex:1;min-width:0;display:flex;align-items:center;gap:.75rem;
  padding:.7rem 0;text-decoration:none;color:inherit
}
.doc-icono{
  flex:none;width:38px;height:38px;border-radius:var(--r-sm);
  background:var(--bone);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:700;color:var(--mute);letter-spacing:.03em
}
.doc-txt{min-width:0}
.doc-txt b{display:block;font-weight:500;font-size:.9rem;line-height:1.35;overflow-wrap:anywhere}
.doc-txt small{display:block;color:var(--mute);font-size:.76rem;margin-top:.1rem}
.doc:hover .doc-txt b{text-decoration:underline}
.doc:hover .doc-icono{border-color:var(--line-strong);color:var(--ink)}

.doc-baja{
  flex:none;font-size:.76rem;color:var(--mute);text-decoration:none;
  padding:.55rem .9rem;border-radius:999px;border:1px solid var(--line);
  background:var(--blanco);white-space:nowrap;
  min-height:44px;display:flex;align-items:center
}
.doc-baja:hover{border-color:var(--line-strong);color:var(--ink)}

/* El contrato que vive en Google Docs: mismo renglon, acento azul, porque no
   es un archivo guardado sino un documento que puede cambiar. */
.doc-vivo{padding:.2rem 0}
.doc-vivo .doc-icono{background:var(--blue-bg);border-color:var(--borde-azul);color:var(--blue);font-size:1rem}

@media(max-width:480px){
  .doc-baja{padding:.5rem .55rem;font-size:.72rem}
}

/* -------------------------------------------------------- avance de obra --- */
.reporte{margin:0 0 1.6rem}
.fecha-reporte{
  font-family:var(--serif);font-size:1.15rem;font-weight:400;
  margin:0 0 .6rem;letter-spacing:-.01em
}
.volver{margin:0 0 .4rem}
.volver a{color:var(--mute);text-decoration:none;font-size:.84rem}
.volver a:hover{color:var(--ink)}

/* Las fotos llegan de camaras de telefono: unas de pie y otras acostadas.
   Con una proporcion fija y recorte al centro, la cuadricula no brinca ni
   deja huecos mientras cargan. */
.fotos{
  display:grid;gap:.35rem;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))
}
.tarjeta.plana .fotos{gap:2px}
.foto{
  position:relative;display:block;overflow:hidden;border-radius:var(--r-sm);
  background:var(--bone);aspect-ratio:4/3
}
.tarjeta.plana .foto{border-radius:0}
.foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s ease
}
.foto:hover img{transform:scale(1.03)}
.foto:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* El "+55" de la quinta miniatura. */
.foto.con-mas img{filter:brightness(.45)}
.mas{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--serif);font-size:1.5rem;letter-spacing:-.02em
}

.mas-reportes{text-align:center;margin:.2rem 0 1.6rem}
.mas-reportes a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.6rem 1.25rem;border-radius:999px;
  border:1px solid var(--line);background:var(--blanco);
  color:var(--mute);text-decoration:none;font-size:.84rem;font-weight:500
}
.mas-reportes a:hover{border-color:var(--line-strong);color:var(--ink)}

/* ------------------------------------------------------------ vista grande --- */
.visor{
  border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;
  width:100%;height:100%;overflow:hidden
}
.visor::backdrop{background:rgba(10,10,10,.92)}
.visor img{
  position:absolute;inset:0;margin:auto;display:block;
  max-width:calc(100% - 5rem);max-height:calc(100% - 6rem);
  object-fit:contain
}
.visor-cerrar,.visor-ir{
  position:absolute;z-index:2;border:0;cursor:pointer;
  background:rgba(255,255,255,.10);color:#fff;
  border-radius:999px;line-height:1;
  display:flex;align-items:center;justify-content:center
}
.visor-cerrar{top:.9rem;right:.9rem;width:44px;height:44px;font-size:1.6rem}
.visor-ir{top:50%;transform:translateY(-50%);width:44px;height:56px;font-size:2rem}
.visor-antes{left:.5rem}
.visor-despues{right:.5rem}
.visor-cerrar:hover,.visor-ir:hover{background:rgba(255,255,255,.22)}
.visor-cerrar:focus-visible,.visor-ir:focus-visible{outline:2px solid #fff;outline-offset:2px}
.visor-pie{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:1rem;
  text-align:center;color:rgba(255,255,255,.75);font-size:.8rem
}
.visor-pie span+span::before{content:" · "}

@media(max-width:480px){
  .fotos{grid-template-columns:repeat(2,1fr)}
  .visor img{max-width:100%;max-height:calc(100% - 5rem)}
  .visor-ir{background:transparent}
}

/* ------------------------------------------- revision de documentos (admin) --- */
/* El renglon entero se puede tocar: en una lista de 95 archivos, apuntarle a
   una casilla de 13px con el dedo es lo que hace que la revision se abandone. */
.revision{list-style:none;margin:.4rem 0 0;padding:0}
.revision li{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.6rem .55rem;border-top:1px solid var(--line);border-radius:var(--r-sm)
}
.revision li:first-child{border-top:0}
/* Un canto de color a la izquierda en vez del relleno fuerte: dice lo mismo
   -esto se publica, esto no- sin pintar el renglon entero. */
.revision li.no{background:var(--fila-no);box-shadow:inset 2px 0 0 var(--canto-no)}
.revision li.si{background:var(--fila-si);box-shadow:inset 2px 0 0 var(--canto-si)}
.revision input[type=checkbox]{
  flex:none;width:19px;height:19px;margin:.2rem 0 0;accent-color:var(--blue);cursor:pointer
}
.revision label{flex:1;min-width:0;cursor:pointer}
.revision label b{display:block;font-weight:500;font-size:.88rem;line-height:1.35;overflow-wrap:anywhere}
.revision label small{display:block;color:var(--mute);font-size:.75rem;margin-top:.12rem}
/* El nombre tal cual esta en SmartSuite. Se ensena solo cuando se limpio,
   porque a veces la basura del nombre es justo la pista de que es el archivo. */
.revision label small.crudo{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;color:var(--mute-2);overflow-wrap:anywhere;margin-top:.2rem
}
.revision .pill{flex:none;margin-top:.15rem}

.ir-a-docs{margin:0 0 .9rem}
.ir-a-docs a{
  display:inline-block;padding:.55rem 1rem;border-radius:999px;
  border:1px solid var(--line);background:var(--blanco);
  color:var(--blue);text-decoration:none;font-size:.84rem;font-weight:500
}
.ir-a-docs a:hover{border-color:var(--line-strong)}

/* -------------------------------------- resumen y secciones por proyecto --- */
/* La flecha de "entra a este proyecto". Vive en la esquina de la tarjeta y no
   como un boton aparte: la tarjeta entera es el enlace. */
.ver-mas{color:var(--mute);font-size:1.1rem;flex:none;line-height:1}
a.bloque:hover .ver-mas{color:var(--ink)}

/* El titulillo de cada grupo de papeles DENTRO de la tarjeta de documentos.
   Mas chico que .grupo-doc, que ahora encabeza la tarjeta completa. */
.doc-grupo{
  font-size:.66rem;font-weight:600;color:var(--mute);
  text-transform:uppercase;letter-spacing:.1em;
  margin:1rem 0 .1rem;padding-top:.7rem;border-top:1px solid var(--line)
}
.doc-vivo + .doc-grupo,
.grupo-doc + .doc-grupo,
.seccion + .doc-grupo{border-top:0;padding-top:0;margin-top:.6rem}

/* LAS TRES SECCIONES DE UN PROYECTO: estado de cuenta, documentos y avance.
   Van las tres con el mismo peso y en serif, como los numeros grandes del
   portal. Antes eran tres cosas distintas —un h3 normal, una etiqueta chica en
   mayusculas y un h2 en mayusculas— y ninguna se leia como el titulo de una
   seccion. El "text-transform:none" es para ganarle al h2, que va en
   mayusculas para las etiquetas de propiedad. */
.seccion{
  font-family:var(--serif);font-size:1.35rem;font-weight:400;
  text-transform:none;letter-spacing:-.01em;color:var(--ink);
  margin:0 0 .2rem;line-height:1.25
}
h2.seccion{margin:2.2rem 0 .8rem}
@media(max-width:480px){
  .pestanas a::before{display:none}
  .seccion{font-size:1.2rem}
}

/* ------------------------------- documentos de una propiedad (admin) --- */
/* Van plegados. Una ficha con cuatro propiedades y sus papeles abiertos es
   una pared de texto; asi se abre solo la que se esta revisando. */
.docs-prop{
  border:1px solid var(--line);border-radius:var(--r-sm);
  margin:0 0 .45rem;background:var(--paper)
}
/* La cabecera ya no abre nada: solo dice de que propiedad son los papeles y
   cuantos se publican. Antes era un <summary> con su flechita. */
.docs-prop .cab{
  margin:0;padding:.6rem .7rem;font-size:.84rem;color:var(--mute);
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  border-bottom:1px solid var(--line)
}
.docs-prop .cab b{font-weight:600;color:var(--ink)}
.docs-prop .cuantos{color:var(--mute);font-size:.78rem;margin-left:auto}
.docs-prop .revision{margin:0;padding:.3rem .55rem}
.docs-prop .revision li{padding:.5rem}

/* --------------------------------- una propiedad y SUS papeles (admin) --- */
/* Antes eran dos bloques separados -tabla de propiedades arriba, cajas de
   documentos abajo- y se leian como dos momentos distintos aunque son la misma
   decision. Ahora los papeles cuelgan de su propiedad. */
.quien-es{
  display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap;
  margin:0 0 .15rem;font-size:1.2rem;letter-spacing:-.01em;
  min-width:0;overflow-wrap:anywhere
}
.quien-es .correo{
  font-weight:600;font-size:1.02rem;color:var(--ink);
  padding-left:.65rem;border-left:1px solid var(--line-strong);
  min-width:0;overflow-wrap:anywhere
}
/* En telefono el correo baja de renglon: el filete vertical de al lado deja de
   tener sentido cuando ya no esta al lado. */
@media(max-width:560px){
  .quien-es{gap:.1rem .65rem;font-size:1.08rem}
  .quien-es .correo{padding-left:0;border-left:0;font-size:.92rem;color:var(--mute)}
  .pastillas{justify-content:flex-start}
}
.quien-es .correo.falta{color:var(--rojo);border-left-color:var(--borde-rojo)}
.pastillas{
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem;
  flex:0 1 auto;min-width:0
}

.unidad{
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--blanco);margin:0 0 .4rem;overflow:hidden
}
.unidad.apagada{background:var(--fila-no)}
.unidad.apagada .unidad-cab .que b{color:var(--mute)}

.unidad-titulo{border-bottom:1px solid var(--line)}
.unidad-cab{
  display:flex;align-items:center;gap:.65rem;padding:.5rem .8rem
}
.unidad-cab input[type=checkbox]{
  flex:none;width:19px;height:19px;margin:0;
  accent-color:var(--blue);cursor:pointer
}
.unidad-cab .que{flex:1 1 auto;min-width:0;cursor:pointer;display:block}
.unidad-cab .que b{font-weight:600;font-size:.95rem;display:block;line-height:1.35}
/* Ligas a SmartSuite. Solo existen en la administracion: son el atajo para ir
   del renglon al registro cuando algo no cuadra. */
/* Las dos ligas a SmartSuite -la de la venta y la de cada documento- se ven
   IGUAL a proposito: hacen lo mismo, llevar del renglon a la fuente. Antes la
   de la venta era una pastilla aparte y parecia otra cosa. */
.a-smartsuite,
.revision .a-archivo{color:inherit;text-decoration:none}
.a-smartsuite span,
.revision .a-archivo span{opacity:.35;font-size:.85em}
.a-smartsuite:hover,
.revision .a-archivo:hover{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.a-smartsuite:hover span,
.revision .a-archivo:hover span{opacity:.9}

.unidad-cab .cifras{
  flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:0;
  font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.3
}
.unidad-cab .precio{font-size:.88rem;font-weight:600}
.unidad-cab .saldo{font-size:.8rem;color:var(--mute)}

.unidad-titulo,
.unidad-papeles{
  margin:0;padding:.3rem .8rem .25rem;
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.12em;
  color:var(--mute);border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:.5rem
}
.unidad-papeles .cuantos{
  text-transform:none;letter-spacing:0;font-size:.78rem;margin-left:auto
}
.unidad .revision{margin:0;padding:.15rem .45rem .45rem}
.unidad .revision li{padding:.35rem .5rem;border-top:0;margin-top:.15rem}
.unidad .revision li:first-child{margin-top:0}
.unidad .revision label b{font-size:.86rem;line-height:1.3}
.unidad .revision label small{font-size:.73rem;margin-top:.02rem}
.unidad .revision input[type=checkbox]{margin:.1rem 0 0}

.unidad-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin:.2rem 0 0;padding:.5rem .85rem;font-size:.86rem;font-weight:600;
  border-top:1px solid var(--line-strong)
}
.unidad-total .cifras{
  display:flex;gap:1.1rem;font-variant-numeric:tabular-nums
}
.unidad-total .saldo{color:var(--mute);font-weight:400}

@media(max-width:560px){
  .unidad-cab{flex-wrap:wrap}
  /* Las dos cifras se ponen lado a lado si caben, y se apilan si no: en un
     telefono de 320px dos importes de siete digitos no entran en un renglon y
     empujaban la pagina 49px hacia fuera. */
  .unidad-cab .cifras{
    flex-direction:row;flex-wrap:wrap;gap:.1rem .8rem;width:100%;
    justify-content:flex-start;padding-left:1.6rem
  }
  /* El renglon del total tenia el mismo problema y se me habia pasado: en un
     telefono angosto la etiqueta y los dos importes no caben en una linea. */
  .unidad-total{flex-wrap:wrap}
  .unidad-total .cifras{flex-wrap:wrap;gap:.1rem .8rem}
}

/* ------------------------------------- estado de la cuenta (admin) --- */
/* La franja del canto izquierdo. En una lista de 31 fichas, encontrar la que
   esta en pausa leyendo 31 etiquetas es trabajo; ver una raya roja entre
   treinta verdes, no. */
/* ⚠️ EL MARCO DE CADA FICHA VA EN TINTA, NO EN EL BORDE SUAVE DE SIEMPRE.
   Esta pantalla es una lista larga de fichas, cada una con propiedades adentro
   y documentos dentro de esas: tres niveles de recuadros anidados. Con el
   borde claro de las demas tarjetas no se distinguia donde acababa una persona
   y empezaba la siguiente. Aqui el marco no es adorno, es lo que separa a una
   persona de otra, y por eso pesa. */
.tarjeta.cuenta{
  /* 2px y no 1.5: el navegador redondea los medios pixeles y se quedaba en 1,
     que es justo lo que no se distinguia. */
  border:2px solid var(--ink);box-shadow:none;
  margin-bottom:var(--e-4)
}
.tarjeta.cuenta,
.tarjeta.franja{position:relative;padding-left:1.45rem}
.tarjeta.cuenta::before,
.tarjeta.franja::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  border-radius:var(--r) 0 0 var(--r)
}
.cuenta-activa::before{background:var(--verde)}
.cuenta-pausa::before {background:var(--rojo)}
.cuenta-sin::before   {background:var(--line-strong)}

/* La misma franja para los proyectos de Ajustes. Verde = se ve en los dos
   portales; rojo = no se ve. "Terminada" es verde a proposito: SE SIGUE
   VIENDO, y confundirla con "oculta" le quitaria sus papeles a gente que
   todavia tiene derecho a verlos. */
.franja-verde::before{background:var(--verde)}
.franja-rojo::before {background:var(--rojo)}
.franja-rojo{background:var(--fila-alerta)}

/* Una ficha en pausa se ve apagada, no solo marcada: es lo que hace que se
   note al hojear sin tener que leer. */
.cuenta-pausa{background:var(--fila-alerta)}
.cuenta-pausa h3{color:var(--rojo)}

/* La direccion de calle, debajo del nombre de la propiedad. */
.direccion{
  display:block;color:var(--mute);font-size:.76rem;
  margin-top:.1rem;font-weight:400
}

/* La calle del edificio, debajo del saldo del proyecto. */
.direccion-obra{
  text-align:center;color:var(--mute);font-size:.84rem;
  margin:-.2rem 0 1.2rem
}

/* El aviso de una cuenta en pausa, dentro de su ficha. */
.aviso-pausa{
  background:var(--rojo-bg);border:1px solid var(--borde-rojo);border-radius:var(--r-sm);
  padding:.55rem .7rem;margin:.4rem 0 .2rem;color:var(--rojo)
}
.aviso-pausa b{color:var(--rojo)}

/* ------------------------------------- una hoja por obra (contratistas) --- */
/* CADA CONTRATO, EN SU PROPIO RECUADRO.
   Primero iban de corrido separados por una raya, y con tres o seis seguidos
   costaba ver donde acababa uno y empezaba el siguiente. Encerrado, la vista
   lo agarra de un golpe: esto es un contrato, y todo lo de adentro es suyo. */
.contrato{
  background:var(--blanco);border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem 1.4rem 1.5rem;margin:0 0 1.1rem;box-shadow:var(--sombra)
}
.contrato > .seccion{margin-top:0}
.contrato .stats{margin:.9rem 0 0}
.contrato .aviso{margin:.2rem 0 .6rem}

/* Lo de adentro pierde su propio marco: una caja dentro de otra caja dentro
   de otra se ve sucia y ya no dice nada. La del contrato es la unica. */
.contrato .tarjeta{
  border:0;box-shadow:none;background:transparent;
  padding:0;margin:0;border-radius:0
}
.contrato .tarjeta .vacio{
  background:var(--paper);border-radius:var(--r-sm);padding:1.4rem 1rem
}
.contrato .movs{border-top:1px solid var(--line)}

/* Los apartados de cada contrato: presupuestos, contrato y pagos.
   Mas grandes y en tinta, no en gris: son los tres letreros que se buscan
   con la vista al bajar por la pagina. */
.sub-seccion{
  font-size:.82rem;font-weight:600;color:var(--ink);
  text-transform:uppercase;letter-spacing:.1em;
  margin:1.7rem 0 .6rem
}

/* ------------------------------- un contrato dentro de la fila de su obra --- */
.linea-contrato{
  display:flex;align-items:flex-start;gap:.45rem;
  margin:.25rem 0 0;line-height:1.45
}
.linea-contrato input[type=checkbox]{
  flex:none;width:15px;height:15px;margin:.15rem 0 0;
  accent-color:var(--blue);cursor:pointer
}
.linea-contrato label{cursor:pointer;min-width:0}
/* Si la obra entera esta oculta, sus contratos ya no deciden nada. */
tr.oculta .linea-contrato{opacity:.45}

/* La columna de la casilla, angosta y centrada, para que la tabla respire. */
.mini .col-check{width:1%;white-space:nowrap;text-align:center}

/* --------------------------------------------- programa de obra (Gantt) --- */
/* El recuadro del calendario que sirve SmartSuite. Alto por pantalla y no en
   pixeles fijos: 600px en una laptop se ve bien y en un telefono ocupa mas de
   lo que hay. El minimo evita que en pantallas muy bajitas quede una rendija. */
.marco-gantt{padding:0;overflow:hidden;background:var(--blanco)}
.marco-gantt iframe{
  display:block;width:100%;height:72vh;min-height:420px;border:0
}
@media(max-width:640px){
  .marco-gantt iframe{height:66vh;min-height:360px}
}

/* ------------------------------ los dos interruptores de cada obra (admin) --- */
.interruptores{display:grid;gap:.5rem;margin-top:.9rem}
@media(min-width:700px){ .interruptores{grid-template-columns:1fr 1fr} }

.interruptor-puerta{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.75rem .85rem;border:1px solid var(--line);border-radius:var(--r-sm)
}
.interruptor-puerta.si{background:var(--verde-bg);border-color:var(--borde-verde)}
.interruptor-puerta.no{background:var(--rojo-bg); border-color:var(--borde-rojo)}
.interruptor-txt{min-width:0}
.interruptor-txt b{display:inline-block;margin-right:.4rem;font-size:.92rem}
.interruptor-txt small{
  display:block;color:var(--mute);font-size:.76rem;margin-top:.25rem;line-height:1.45
}
.interruptor-puerta form{flex:none}

/* ===========================================================================
   IMPRESION
   ===========================================================================
   Un inversionista que necesita llevarle su estado de cuenta a su contador, a
   su banco o a su pareja, lo imprime. Hasta hoy salia la pantalla entera: la
   barra negra, el menu, los botones y las fotos de obra.

   El portal promete "cuentas auditables". Una cuenta que no se puede sacar del
   portal no es auditable, asi que esto es funcionalidad, no acabado.

   La hoja impresa lleva membrete propio (ver .membrete-impresion en la
   plantilla), que en pantalla no existe.
   =========================================================================== */
@media print{
  /* Fuera todo lo que no es la cuenta. */
  .utilitaria, .barra, .pestanas, .menu, .hamb, .velo, .cajon, .interruptor,
  .suplantando, .frescura a, .mas-reportes, .visor, .ver-proyecto,
  .doc-baja, .volver, .saltos, .filtros, .guardar-barra, .acciones,
  button, .obras{ display:none !important }

  /* Las fotos de obra no van al papel: son decenas y el estado de cuenta se
     vuelve ilegible entre ellas. Quien quiera una foto la guarda aparte. */
  .reporte, .fotos{ display:none !important }

  html, body{
    background:#fff !important; color:#000 !important;
    font-size:11pt; line-height:1.45
  }
  .envoltura{ max-width:none; padding:0 }

  /* El membrete solo existe en papel. */
  .membrete-impresion{
    display:flex !important; align-items:flex-end; justify-content:space-between;
    gap:1rem; padding-bottom:.5rem; margin-bottom:1.2rem;
    border-bottom:1.5pt solid #000
  }
  .membrete-impresion img{ height:34pt; width:auto; filter:brightness(0) }
  .membrete-impresion .cuando{ font-size:8.5pt; color:#444; text-align:right }

  /* El saldo grande deja de ser un bloque negro que se come el toner. */
  .hero{
    background:#fff !important; color:#000 !important;
    box-shadow:none !important; border:1pt solid #000;
    border-radius:0; padding:10pt 12pt
  }
  .hero .ceja, .hero .etq, .hero .pie-hero, .hero .dato .etq{ color:#333 !important }
  .hero .ceja::before{ background:#666 !important }
  .hero .dato .val{ color:#000 !important }
  .hero .barra-pct{ background:#ddd !important }
  .hero .barra-pct span{ background:#666 !important }

  .tarjeta, .stat, .tarjeta.plana{
    box-shadow:none !important; border:.5pt solid #999 !important;
    border-radius:0 !important; background:#fff !important
  }
  .avance{ background:#ddd !important }
  .avance span{ background:#666 !important }

  /* Que no se parta una propiedad a la mitad entre dos hojas. */
  .propiedad, .tarjeta, table{ break-inside:avoid; page-break-inside:avoid }
  .propiedad{ break-before:auto }
  .cab-propiedad{ break-after:avoid; page-break-after:avoid }

  /* La tabla de movimientos es lo que de verdad se va a leer en papel. */
  .scroll-x{ overflow:visible !important }
  .tabla{ font-size:9.5pt; width:100% }
  .tabla th{ border-bottom:1pt solid #000 !important; color:#000 !important }
  .tabla td{ border-bottom:.5pt solid #bbb !important }
  .tabla tbody tr:hover{ background:transparent !important }
  .tabla tfoot td{ background:transparent !important; border-top:1pt solid #000 !important }
  .pill{ border:.5pt solid #999 !important; background:transparent !important; color:#000 !important }
  .pill::before{ display:none }

  /* Los documentos se listan, pero sin invitar a tocarlos. */
  .doc{ border:none !important; padding:2pt 0 !important; background:transparent !important }
  .doc-icono{ border:.5pt solid #999 !important; background:transparent !important }

  a{ color:#000 !important; text-decoration:none }
  .display em, .marcador b, .seccion em{ color:#000 !important; font-style:italic }
  .pie{ border-top:.5pt solid #999; margin-top:14pt; padding:8pt 0 0; color:#444 }
  .pie .romano{ color:#444 !important }

  @page{ margin:14mm 12mm }
}

/* ------------------------------------- los papeles dentro de la cuenta --- */
/* La escritura y el contrato son parte de la propiedad, igual que las cifras.
   Antes eran un apartado aparte, hasta abajo, despues de una tabla larga de
   movimientos: el papel que mas importa quedaba en el peor lugar de la
   pantalla. Ahora comparten tarjeta, separados por un filete. */
.papeles{
  margin-top:var(--e-4);padding-top:var(--e-3);
  border-top:1px solid var(--line)
}
.papeles .sub-seccion{margin:0 0 var(--e-2)}
.papeles .docs:first-child{margin-top:0}
.papeles .doc-grupo:first-of-type{border-top:0;padding-top:0;margin-top:0}
.papeles .docs{margin-bottom:0}
.papeles .docs li:last-child{border-bottom:0;padding-bottom:0}

/* --------------------------------------------------- portada de proyecto --- */
/* La foto del edificio, con el logo de la submarca encima. Es lo primero que
   ve quien entra a su proyecto, y es lo que amarra el portal con lo que ya
   conoce de la pagina publica: son las MISMAS fotos del portafolio. */
.portada-proyecto{
  position:relative;margin:0 0 var(--e-3);border-radius:var(--r);overflow:hidden;
  background:var(--ink);aspect-ratio:16/7
}
.portada-proyecto img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Oscurecida para que el texto de encima se lea sin depender de la foto. */
  filter:brightness(.62)
}
.portada-proyecto figcaption{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:.55rem;
  padding:var(--e-4) 1.35rem 1.15rem;
  background:linear-gradient(to top, rgba(10,10,10,.78), rgba(10,10,10,0))
}
/* ⚠️ align-self:flex-start NO es opcional. La figcaption es un flex en
   columna, y un flex item con width:auto se ESTIRA a todo el ancho: el
   logo salia de 977px de ancho por 20 de alto, aplastado. */
.portada-proyecto .logo-submarca{
  height:26px;width:auto;align-self:flex-start;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.95
}
.portada-proyecto .nombre{
  font-family:var(--serif);font-weight:300;color:#fff;
  font-size:clamp(1.5rem,4.6vw,2.1rem);line-height:1.1;letter-spacing:var(--tk-display)
}
.portada-proyecto .nombre em{font-style:italic;color:#cdd8ee}
/* El departamento, bajo el nombre del edificio. En serif, porque es parte de
   la identidad de la propiedad, no un dato suelto. */
/* ⚠️ .depto y NO .unidad: en la administracion .unidad es la CAJA BLANCA de
   cada propiedad, con borde y fondo. El departamento de la portada se llamaba
   igual y heredaba el recuadro: sobre la foto salia "Depto 301" metido en una
   cajita blanca, como si fuera un campo de formulario. Segunda colision de
   nombres de esta hoja, despues de la del pie. */
.portada-proyecto .depto{
  font-family:var(--serif);font-weight:300;color:#e6ebf6;
  font-size:clamp(1.05rem,2.8vw,1.35rem);line-height:1.2;margin-top:-.15rem
}
/* La direccion, sin la calle: la calle es el nombre que va justo encima. */
.portada-proyecto .donde{
  color:rgba(255,255,255,.7);font-size:.84rem;letter-spacing:.01em;margin-top:.2rem
}
@media(max-width:560px){
  .portada-proyecto{aspect-ratio:4/3}
  .portada-proyecto figcaption{padding:var(--e-3) 1.1rem 1rem}
}

/* ------------------------------------------------------- banda de la obra --- */
/* EL AVANCE DE OBRA VA SOBRE PAPEL, NO SOBRE TINTA.
 *
 * Primero se probo en oscuro, para separarlo del estado de cuenta. Separaba,
 * si, pero dejaba la pagina en tres franjas -barra negra, fotos negras, pie
 * negro- con el contenido claro atrapado en medio, y entre las fotos y el pie
 * quedaba una tira blanca que se veia como un error.
 *
 * Ahora el negro esta donde tiene sentido: arriba la barra y abajo el pie, con
 * TODO el contenido sobre papel en medio. La separacion entre la cuenta y las
 * fotos ya no la hace el color de fondo sino el aire y un filete de lado a
 * lado, que es como lo hace podiocapital.com.
 */
.banda-obra{
  margin:var(--e-6) 0 0;padding:var(--e-5) 0 0;
  border-top:1px solid var(--line)
}

/* ------------------------------------------------------- medidor de cuota --- */
.medidor{
  margin:var(--e-3) 0;padding:.9rem 1rem;
  background:var(--blanco);border:1px solid var(--line);border-radius:var(--r-sm)
}
.medidor.alto{border-color:var(--borde-rojo);background:var(--rojo-bg)}
.medidor-cab{
  display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  flex-wrap:wrap;margin-bottom:.55rem
}
.medidor-cab .etq{
  font-size:var(--t-micro);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--mute)
}
.medidor-cab .num{
  font-family:var(--serif);font-size:1rem;font-variant-numeric:tabular-nums
}
.medidor .sub{margin:.55rem 0 0;font-size:.82rem;color:var(--mute)}
.medidor.alto .sub{color:var(--rojo)}
.avance.rojo span{background:var(--rojo)}

/* ------------------------------------------------------------- pruebas --- */
.prueba{
  display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:baseline;
  padding:.6rem 1rem;border-bottom:1px solid var(--line);font-size:.9rem
}
.prueba:last-child{border-bottom:0}
.prueba .marca{font-weight:700}
.prueba.si{background:var(--fila-si)}
.prueba.si .marca{color:var(--verde)}
.prueba.no{background:var(--fila-no)}
.prueba.no .marca{color:var(--rojo)}
.prueba .detalle{
  grid-column:2;font-size:.8rem;color:var(--rojo);margin-top:.15rem
}
.prueba code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  background:var(--blanco);padding:.05em .3em;border-radius:2px
}