/* Firmata — hoja de estilos única, sin frameworks ni compilación.
   Dos públicos con la misma hoja: la oficina, que trabaja con tablas en un
   ordenador, y el comprador, que mira su vivienda desde el móvil. */

:root {
  --primary: #9c7a2d;          /* el oro del logo */
  --primary-dark: #7e6121;
  --primary-soft: #f4eedf;

  --ink: #24262a;              /* el carbón del logo: la barra lateral */
  --ink-2: #2f3236;

  --bg: #f2f5f8;
  --surface: #ffffff;
  --surface-2: #f8fafb;
  --border: #e2e8ee;
  --border-strong: #cbd5df;

  --text: #1b2430;
  --muted: #5f6c7b;
  --faint: #93a0ae;

  --green: #15803d;
  --green-soft: #e8f7ee;
  --amber: #b45309;
  --amber-soft: #fdf3e3;
  --red: #dc2626;
  --red-soft: #fdecec;
  --blue: #1d4ed8;
  --blue-soft: #eaf1fe;
  --violet-soft: #f1ecfd;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(21, 32, 46, .07);
  --shadow: 0 4px 14px rgba(21, 32, 46, .09);

  --sidebar-w: 230px;
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font); font-size: 14.5px; line-height: 1.5;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 23px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 1em; }

.ico { width: 17px; height: 17px; flex: 0 0 17px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.tiny { font-size: 11.5px; }
.small { font-size: 12.5px; }
.strong { font-weight: 650; }
.mono { font-family: var(--mono); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.rojo { color: var(--red); }
.verde { color: var(--green); }
.ambar { color: var(--amber); }
.mt0 { margin-top: 0; } .mt1 { margin-top: 8px; } .mt2 { margin-top: 16px; } .mt3 { margin-top: 26px; }
.mb0 { margin-bottom: 0; } .mb1 { margin-bottom: 8px; } .mb2 { margin-bottom: 16px; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-top { align-items: flex-start; }
.hidden { display: none !important; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.principal-lateral { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
/* Una casilla de rejilla mide por defecto lo que mida su contenido más ancho,
   así que una tarjeta con una cabecera larga estira la columna y saca la
   página de la pantalla del móvil. Con esto la casilla manda sobre el
   contenido, y lo de dentro se parte o hace su propio scroll. */
.dos-columnas > *, .principal-lateral > * { min-width: 0; }

/* ------------------------------------------------------------------ layout */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--ink); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: block; padding: 18px 16px 14px; color: #fff; }
.brand:hover { text-decoration: none; }
.wordmark { font-size: 20px; line-height: 1; letter-spacing: -.02em; }
.wordmark .a { font-weight: 300; color: #fff; }
.wordmark .b { font-weight: 700; color: #c9a24a; }
.brand .sede {
  font-size: 10px; color: #9a9fa6; letter-spacing: .12em;
  text-transform: uppercase; margin-top: 4px;
}

.nav { padding: 4px 8px 10px; flex: 1; }
.nav-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: #9a9fa6; font-weight: 700; padding: 14px 10px 5px;
}
.nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: #d5d8dc; font-size: 14px; font-weight: 500; margin-bottom: 1px;
}
.nav a:hover { background: #33363b; color: #fff; text-decoration: none; }
.nav a.active { background: var(--primary); color: #fff; font-weight: 650; }
.nav a .ico { opacity: .75; }
.nav a:hover .ico, .nav a.active .ico { opacity: 1; }
.nav a .count {
  margin-left: auto; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--red); border-radius: 20px; padding: 0 6px; min-width: 18px; text-align: center;
}

.sidebar-foot { border-top: 1px solid #3a3d42; padding: 10px; }
.usuario {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px;
  border-radius: var(--radius-sm); color: #d5d8dc;
}
.usuario .nombre { display: block; font-size: 13px; font-weight: 600; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario .rol { display: block; font-size: 11px; color: #9a9fa6; }
.avatar {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--primary); color: #fff; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.salir {
  width: 100%; margin-top: 8px; background: #33363b; color: #d5d8dc;
  border: 1px solid #45494f; border-radius: var(--radius-sm);
  padding: 6px; font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.salir:hover { background: #3d4147; color: #fff; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 54px; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  position: sticky; top: 0; z-index: 40;
}
.topbar .titulo { font-weight: 650; font-size: 15px; }
.topbar .migas { color: var(--faint); font-size: 13px; }
.topbar .spacer { flex: 1; }
.topbar .acciones { display: flex; align-items: center; gap: 8px; }
.menu-movil { display: none; }

/* Tira de acciones del móvil: repite los botones de la barra de arriba, que
   ahí no caben. Vacía cuando la página no tiene botones. */
.acciones-movil {
  display: none; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.content { padding: 20px 22px 60px; width: 100%; }
.page-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head .sub { color: var(--muted); font-size: 13.5px; margin: 2px 0 0; }

/* ------------------------------------------------------------------ botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 13px; font-size: 14px; font-weight: 550; font-family: inherit;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: background .12s, border-color .12s; white-space: nowrap; line-height: 1.4;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-ok { background: var(--green); border-color: var(--green); color: #fff; }
.btn-ok:hover { background: #126b33; color: #fff; }
.btn-danger { color: var(--red); border-color: #f0c9c9; }
.btn-danger:hover { background: var(--red-soft); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 4px 9px; font-size: 12.5px; }
.btn-lg { padding: 11px 20px; font-size: 15.5px; font-weight: 650; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.botonera { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------- formularios */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=search], input[type=file], select, textarea {
  width: 100%; padding: 7px 10px; font-size: 14px; font-family: inherit; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
textarea { min-height: 80px; resize: vertical; }
.campo { margin-bottom: 12px; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.campos-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.check { display: flex; align-items: center; gap: 7px; font-weight: 500; color: var(--text); font-size: 13.5px; }
.check input { width: auto; }
.ayuda { font-size: 12px; color: var(--muted); margin-top: 4px; }
input.dinero, input.num { text-align: right; font-variant-numeric: tabular-nums; }
.con-sufijo { position: relative; }
.con-sufijo .sufijo {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  color: var(--faint); font-size: 12.5px; pointer-events: none;
}
.con-sufijo input { padding-right: 30px; }

/* ------------------------------------------------------------------ tarjetas */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card + .card { margin-top: 16px; }
.card-head { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-head h3 { margin: 0; }
.card-body { padding: 14px 16px; }
.card-body.sin-relleno { padding: 0; }
.card-foot { padding: 11px 16px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.alert { padding: 10px 13px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 10px; border: 1px solid; }
.alert-success { background: var(--green-soft); border-color: #bfe6cd; color: #14532d; }
.alert-error   { background: var(--red-soft);   border-color: #f3c9c9; color: #7f1d1d; }
.alert-warning { background: var(--amber-soft); border-color: #f0dcb4; color: #78350f; }
.alert-info    { background: var(--blue-soft);  border-color: #c9dcfb; color: #1e3a8a; }
.flashes { padding: 12px 22px 0; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 20px; font-size: 11.5px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.chip-ok { background: var(--green-soft); border-color: #bfe6cd; color: #14532d; }
.chip-aviso { background: var(--amber-soft); border-color: #f0dcb4; color: #78350f; }
.chip-mal { background: var(--red-soft); border-color: #f3c9c9; color: #7f1d1d; }
.chip-info { background: var(--blue-soft); border-color: #c9dcfb; color: #1e3a8a; }
.chip-suave { background: var(--primary-soft); border-color: #e2d3a8; color: #6a5118; }

/* Avisos del panel: lo que impide fiarse de los números */
.avisos { display: grid; gap: 8px; margin-bottom: 16px; }
.aviso {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px;
  border: 1px solid; border-radius: var(--radius-sm); font-size: 13.5px;
}
.aviso .ico { flex: 0 0 17px; }
.aviso.error { background: var(--red-soft); border-color: #f3c9c9; color: #7f1d1d; }
.aviso.warning { background: var(--amber-soft); border-color: #f0dcb4; color: #78350f; }
.aviso.info { background: var(--blue-soft); border-color: #c9dcfb; color: #1e3a8a; }
.aviso a { margin-left: auto; font-weight: 650; white-space: nowrap; color: inherit; text-decoration: underline; }

/* --------------------------------------------------------------- indicadores */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cifra { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; }
.cifra .que { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.cifra .cuanto { font-size: 24px; font-weight: 680; letter-spacing: -.02em; margin-top: 3px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cifra .cuanto .unidad { font-size: 14px; font-weight: 550; color: var(--muted); margin-left: 3px; }
.cifra .pie { font-size: 12px; color: var(--muted); margin-top: 3px; }
.cifra.destacada { background: var(--ink); border-color: var(--ink); }
.cifra.destacada .que { color: #b9bec6; }
.cifra.destacada .cuanto { color: #fff; }
.cifra.destacada .cuanto .unidad, .cifra.destacada .pie { color: #b9bec6; }
.cifra.mal .cuanto { color: var(--red); }
.cifra.bien .cuanto { color: var(--green); }

/* ------------------------------------------------------------------- tablas */
.tabla-wrap { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabla th, table.tabla td { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tabla thead th {
  background: var(--surface-2); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); font-weight: 700; white-space: nowrap;
  /* `top: 0` y no la altura de la barra superior, a propósito. La tabla vive
     dentro de .tabla-wrap, y un `overflow-x: auto` obliga al navegador a
     calcular `overflow-y: auto`: eso convierte el contenedor en el marco de
     referencia del sticky. Con cualquier `top` mayor que cero la cabecera se
     desplaza hacia abajo dentro de la tarjeta y se planta encima de la primera
     fila. */
  position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border-strong);
}
table.tabla tbody tr:hover { background: var(--primary-soft); }
/* `nowrap` en las cifras: sin esto el símbolo del euro se queda solo en la
   línea de abajo en cuanto la columna se estrecha, y una tabla de importes
   partidos por la mitad es ilegible. */
table.tabla td.num, table.tabla th.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.tabla tr.grupo td {
  background: var(--surface-2); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
table.tabla tfoot td { font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--border-strong); }
table.tabla tr.apagada td { opacity: .5; }
table.tabla tr.debe td.num { color: var(--red); font-weight: 650; }
table.tabla.compacta th, table.tabla.compacta td { padding: 5px 8px; font-size: 13px; }

/* Celdas de edición dentro de la tabla: sin bordes hasta que se tocan, para
   que cuarenta filas no parezcan cuarenta formularios. */
.tabla input[type=text], .tabla input[type=number], .tabla input[type=date], .tabla select {
  padding: 3px 5px; font-size: 13px; border-color: transparent;
  background: transparent; border-radius: 4px;
}
.tabla input:hover, .tabla select:hover { border-color: var(--border-strong); background: var(--surface); }
.tabla input:focus, .tabla select:focus { background: var(--surface); }
.tabla input.mini { width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.tabla td.codigo { font-family: var(--mono); font-weight: 650; white-space: nowrap; }
.tabla td.ref { font-weight: 650; white-space: nowrap; }
.fila-sucia { background: #fffdf0 !important; }

/* Barra de filtros */
.filtros {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 12px;
}
.filtros select, .filtros input { width: auto; min-width: 140px; }
.filtros .sep { width: 1px; height: 24px; background: var(--border); }

/* Barra de guardar, siempre visible al fondo */
.barra-guardar {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--surface); border-top: 1px solid var(--border-strong);
  padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 -4px 14px rgba(21, 32, 46, .07);
}

/* Pestañas de ejercicio */
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.pestanas a {
  padding: 6px 13px; border-radius: 20px; font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.pestanas a:hover { text-decoration: none; border-color: var(--border-strong); }
.pestanas a.activa { background: var(--ink); border-color: var(--ink); color: #fff; }
.pestanas a .cerrado { opacity: .6; font-weight: 400; }

/* --------------------------------------------------------- barra de progreso */
.barra { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; min-width: 70px; }
.barra i { display: block; height: 100%; background: var(--primary); border-radius: 4px; }
.barra.pasada i { background: var(--amber); }

/* ------------------------------------------------------------------- listas */
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li {
  padding: 9px 0; border-bottom: 1px solid var(--border);
  display: flex; gap: 10px; align-items: center;
}
.lista-simple li:last-child { border-bottom: none; }

.vacio { text-align: center; padding: 42px 20px; color: var(--muted); }
.vacio .grande { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 6px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 20px; border-left: 2px solid var(--border); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--primary); border: 2px solid var(--surface);
}
.timeline li.interna::before { background: var(--faint); }
.timeline .cabecera { font-size: 12px; color: var(--muted); margin-bottom: 3px; }

/* ------------------------------------------------------------------- entrada */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--ink); }
.login-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: 14px;
  padding: 30px 28px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.login-card .wordmark { font-size: 26px; text-align: center; margin-bottom: 4px; }
.login-card .wordmark .a { color: var(--ink); }
.login-card .wordmark .b { color: var(--primary); }
.login-card .sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 22px; }

/* ------------------------------------------------------------------- portal */
.portal { max-width: 940px; margin: 0 auto; padding: 0 16px 60px; }
.portal-top {
  background: var(--ink); color: #fff; padding: 18px 0 26px; margin-bottom: -12px;
}
.portal-top .dentro { max-width: 940px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.portal-top .wordmark { font-size: 19px; }
.portal-top .quien { margin-left: auto; font-size: 13px; color: #d5d8dc; text-align: right; }
.portal-top .quien b { display: block; color: #fff; }
.portal-saldo {
  background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.portal-saldo .importe { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.portal-saldo.debe .importe { color: var(--red); }
.portal-saldo.corriente .importe { color: var(--green); }

/* ----------------------------------------------------------------- documentos */
.doc-lista { display: grid; gap: 8px; }
.doc {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.doc .ico { color: var(--muted); }
/* En bloque, cada uno en su línea: si no, el nombre del documento y su fecha
   se leen como una sola frase. */
.doc .nombre { display: block; font-weight: 600; }
.doc .meta { display: block; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ impresión */
@media print {
  .sidebar, .topbar, .acciones-movil, .flashes, .no-print, .filtros, .pestanas, .avisos,
  .portal-top { display: none !important; }
  .app { display: block; }
  .content { padding: 0; }
  body { background: #fff; font-size: 11.5px; }
  .card { border: none; box-shadow: none; page-break-inside: avoid; }
  table.tabla thead th { position: static; background: #eee !important; -webkit-print-color-adjust: exact; }
  table.tabla { page-break-inside: auto; }
  table.tabla tr { page-break-inside: avoid; }
  .cifra { border: 1px solid #ccc; }
  .cifra.destacada { background: #fff; }
  .cifra.destacada .cuanto, .cifra.destacada .que, .cifra.destacada .pie { color: #000; }
  a { color: #000; text-decoration: none; }
  .salto { page-break-before: always; }
}

/* ------------------------------------------------------------------- móvil */
@media (max-width: 1000px) {
  .principal-lateral, .dos-columnas { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; left: -100%; z-index: 60; transition: left .2s; }
  .sidebar.abierta { left: 0; }
  .menu-movil { display: block; background: none; border: none; cursor: pointer; padding: 6px; }
  .menu-movil span { display: block; width: 20px; height: 2px; background: var(--text); margin: 4px 0; }
  /* La miga de pan sobra en el móvil: aquí sólo desborda la barra. */
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar .migas { display: none; }
  .topbar .titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .content { padding: 14px; }
  .topbar .acciones { display: none; }
  .acciones-movil { display: flex; }
  .acciones-movil:empty { display: none; }
  /* Sin esto el título se encoge hasta partirse en una palabra por línea:
     los botones no ceden ancho porque no parten. Que se lleve la línea entera
     y los botones bajen debajo. */
  .page-head > .grow { flex: 1 0 100%; }
  /* Los filtros dejan de exigir 140 px cada uno y se reparten el ancho. */
  .filtros { padding: 10px; }
  .filtros select, .filtros input { min-width: 0; flex: 1 1 150px; }
  .filtros .sep { display: none; }
  .velo { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55; }
  .velo.visible { display: block; }
}

/* ==========================================================================
   Aplicación instalable en el móvil
   ==========================================================================
   Tres cosas que en un iPhone no se pueden dejar al azar:

   1. Las zonas seguras. Con `viewport-fit=cover` el contenido llega al borde,
      y sin `env(safe-area-inset-*)` la muesca se come la cabecera y la barra
      del gesto de inicio tapa los botones de abajo.
   2. El tamaño de letra de los campos. Safari hace zoom automático al enfocar
      un campo de menos de 16 px, y la página se queda torcida. Por eso en
      móvil los campos suben a 16 px aunque el resto no.
   3. El área de toque. Un botón de 26 px de alto se falla con el pulgar. */

:root {
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-izq: env(safe-area-inset-left, 0px);
  --seguro-der: env(safe-area-inset-right, 0px);
  --barra-inferior: 62px;
}

/* Sin el resaltado azul al tocar: delata que esto es una página web. */
a, button, label, .btn { -webkit-tap-highlight-color: transparent; }

/* --- Barra inferior de navegación (sólo el portal del cliente) ------------ */
.barra-inferior {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: var(--seguro-abajo);
  box-shadow: 0 -2px 12px rgba(21, 32, 46, .08);
}
.barra-inferior .pestanas-movil { display: flex; }
.barra-inferior a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  padding: 9px 4px 7px; min-height: 54px;
  color: var(--muted); font-size: 10.5px; font-weight: 600;
  text-decoration: none; letter-spacing: .01em;
}
.barra-inferior a .ico { width: 21px; height: 21px; flex: 0 0 21px; }
.barra-inferior a.activa { color: var(--primary); }
.barra-inferior a.activa .ico { stroke-width: 2.1; }
.barra-inferior a:active { background: var(--surface-2); }

/* --- Cabecera del portal, pegada y respetando la muesca ------------------- */
.portal-top { padding-top: calc(18px + var(--seguro-arriba)); }

@media (max-width: 900px) {
  /* Los campos, a 16 px: es el mínimo que no dispara el zoom de Safari. */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=time], input[type=search], input[type=tel],
  select, textarea { font-size: 16px; padding: 10px 12px; }
  .tabla input[type=text], .tabla input[type=number], .tabla input[type=date],
  .tabla select { font-size: 16px; padding: 6px 7px; }

  /* Botones que se puedan tocar con el pulgar. */
  .btn { min-height: 42px; padding: 9px 15px; }
  .btn-sm { min-height: 36px; padding: 7px 12px; font-size: 13px; }
  .check { min-height: 34px; }

  .topbar { padding-top: var(--seguro-arriba); height: calc(54px + var(--seguro-arriba)); }
  .sidebar { padding-top: var(--seguro-arriba); }
  .content { padding-left: calc(14px + var(--seguro-izq));
             padding-right: calc(14px + var(--seguro-der)); }
  .acciones-movil { padding-left: calc(14px + var(--seguro-izq));
                    padding-right: calc(14px + var(--seguro-der)); }
  .barra-guardar { padding-bottom: calc(10px + var(--seguro-abajo)); }
}

/* --- El portal en el móvil: barra abajo y tarjetas grandes ---------------- */
@media (max-width: 780px) {
  .barra-inferior { display: block; }
  .portal { padding-bottom: calc(var(--barra-inferior) + var(--seguro-abajo) + 20px); }
  .portal-top .quien { margin-left: 0; text-align: left; width: 100%; margin-top: 10px; }
  .portal-saldo { padding: 20px; }
  .portal-saldo .importe { font-size: 34px; }
  .portal-saldo .right { text-align: left; width: 100%; }

  /* Las tablas del portal dejan de ser tablas: en un móvil una tabla de cinco
     columnas obliga a hacer scroll lateral para leer una fila. Cada fila pasa
     a ser una ficha con sus etiquetas delante. */
  .portal table.tabla thead { display: none; }
  .portal table.tabla, .portal table.tabla tbody,
  .portal table.tabla tr, .portal table.tabla td { display: block; width: 100%; }
  .portal table.tabla tr {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin-bottom: 9px; padding: 10px 12px; background: var(--surface);
  }
  .portal table.tabla tr:hover { background: var(--surface); }
  .portal table.tabla td {
    border: none; padding: 3px 0; text-align: left;
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  }
  .portal table.tabla td::before {
    content: attr(data-etiqueta);
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 700; flex: 0 0 auto;
  }
  .portal table.tabla td.num { text-align: right; }
  .portal .doc { padding: 14px 12px; }
}

@media (display-mode: standalone) {
  /* Instalado en la pantalla de inicio: el enlace de «añadir a inicio» sobra. */
  .solo-navegador { display: none !important; }
}

/* ==========================================================================
   Lo propio de Firmata
   ========================================================================== */

/* --- La marca: el logo si lo hay, y si no, el nombre ---------------------- */
/* El logo va sobre una pastilla blanca porque no se sabe de qué color viene:
   uno oscuro desaparecería sobre la barra lateral azul marino. */
.logo-marca {
  display: inline-block; background: #fff; border-radius: 8px; padding: 6px 10px; line-height: 0;
}
/* Alto fijo y ancho automático: un SVG sin ancho declarado dentro de una
   caja en línea se queda a cero en algunos sitios; con el alto puesto, no. */
.logo-marca img { display: block; height: 62px; width: auto; max-width: 190px; object-fit: contain; }
.login-card .logo-marca { display: block; text-align: center; padding: 0; margin-bottom: 6px; }
.login-card .logo-marca img { height: 120px; max-width: 300px; margin: 0 auto; }
.wordmark .c { display: block; font-size: 10px; letter-spacing: .34em; color: #9a9fa6;
  text-transform: uppercase; margin-top: 5px; font-weight: 600; }
.login-card .wordmark .c { color: var(--muted); text-align: center; }

/* --- Dibujo de la vivienda ------------------------------------------------ */
.dibujo { display: block; width: 100%; height: 100%; }
.marco-dibujo {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  aspect-ratio: 2 / 1; background: var(--surface-2);
}
.marco-dibujo.mini { width: 74px; flex: 0 0 74px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.marco-dibujo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Tarjetas de promoción ------------------------------------------------ */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.rejilla > .card + .card { margin-top: 0; }
.promo { display: block; color: inherit; overflow: hidden; }
.promo:hover { text-decoration: none; box-shadow: var(--shadow); }
.promo .marco-dibujo { border: none; border-radius: 0; border-bottom: 1px solid var(--border); }
.promo .cuerpo { padding: 13px 15px 15px; }
.promo .nombre { font-size: 16px; font-weight: 680; }
.promo .reparto { display: flex; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.promo .reparto b { color: var(--text); font-size: 15px; display: block; }

/* --- Estados ---------------------------------------------------------------- */
.chip-libre { background: var(--surface-2); color: var(--muted); }
.chip-reservada { background: var(--amber-soft); border-color: #f0dcb4; color: #78350f; }
.chip-vendida { background: var(--green-soft); border-color: #bfe6cd; color: #14532d; }
.chip-entregada { background: var(--blue-soft); border-color: #c9dcfb; color: #1e3a8a; }

/* --- Ficha de datos: etiqueta a la izquierda, valor a la derecha ----------- */
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 5px 18px; margin: 0; font-size: 13.5px; }
.ficha dt { color: var(--muted); }
.ficha dd { margin: 0; font-weight: 550; }

/* --- Carpetas de documentos ------------------------------------------------ */
.carpeta { border-bottom: 1px solid var(--border); }
.carpeta:last-child { border-bottom: none; }
.carpeta > summary {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer;
  font-weight: 600; list-style: none;
}
.carpeta > summary::-webkit-details-marker { display: none; }
.carpeta > summary:hover { background: var(--surface-2); }
.carpeta > summary .ico:first-child { color: var(--primary); }
.carpeta > summary .chevron { margin-left: auto; color: var(--faint); transition: transform .15s; }
.carpeta[open] > summary .chevron { transform: rotate(180deg); }
.carpeta .dentro { padding: 2px 16px 12px; }
.carpeta.vacia > summary { color: var(--faint); font-weight: 500; }
.doc.oculto { background: var(--surface-2); border-style: dashed; }
.doc .pdf {
  flex: 0 0 34px; height: 40px; border-radius: 4px; background: #e5484d; color: #fff;
  font-size: 9.5px; font-weight: 800; display: grid; place-items: center; letter-spacing: .04em;
}
.doc .pdf.img { background: #2f855a; } .doc .pdf.otro { background: #64748b; }
.doc .acciones-doc { display: flex; gap: 4px; align-items: center; }
.doc .acciones-doc form { margin: 0; }
a.doc { color: inherit; } a.doc:hover { text-decoration: none; border-color: var(--border-strong); }

/* --- Expediente ------------------------------------------------------------ */
.requisito { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13.5px; }
.requisito .punto {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--border-strong); color: transparent;
}
.requisito .punto .ico { width: 12px; height: 12px; flex: 0 0 12px; stroke-width: 3; }
.requisito.ok .punto { background: var(--green); border-color: var(--green); color: #fff; }
.requisito.falta { color: var(--amber); font-weight: 600; }

/* --- Fases de obra --------------------------------------------------------- */
.fases { list-style: none; margin: 0; padding: 0; }
.fase { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.fase:last-child { border-bottom: none; }
.fase .marca {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--border-strong); color: transparent; background: var(--surface); margin-top: 1px;
}
.fase .marca .ico { width: 14px; height: 14px; flex: 0 0 14px; stroke-width: 3; }
.fase.completado .marca { background: var(--green); border-color: var(--green); color: #fff; }
.fase.en_curso .marca { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.fase .nombre { font-weight: 650; }
.fase.pendiente .nombre { color: var(--muted); font-weight: 550; }
.fase .cuando { font-size: 12.5px; color: var(--muted); }
.avance { display: flex; align-items: center; gap: 10px; }
.avance .barra { flex: 1; height: 9px; }
.avance b { font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.galeria figure { margin: 0; }
.galeria .marco-dibujo { aspect-ratio: 4 / 3; }
.galeria figcaption { font-size: 12.5px; margin-top: 5px; }
.galeria figcaption .cuando { display: block; color: var(--muted); font-size: 11.5px; }
.galeria form { margin: 4px 0 0; }

/* --- Cuadro de obra: una fila por vivienda, una columna por fase ----------- */
.cuadro-obra th.fase-col { text-align: center; min-width: 86px; }
.cuadro-obra .fase-acciones { display: flex; justify-content: center; gap: 0; margin-top: 2px; }
.cuadro-obra .fase-acciones .btn { padding: 1px 4px; min-height: 0; }
.cuadro-obra .fase-acciones .ico { width: 13px; height: 13px; }
.cuadro-obra td.casilla { text-align: center; padding: 4px 6px; }
.cuadro-obra td.casilla form { margin: 0; display: inline; }
.celda {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border-strong);
  background: var(--surface); color: transparent; cursor: pointer; display: inline-grid;
  place-items: center; padding: 0; transition: transform .08s;
}
.celda:hover { transform: scale(1.08); border-color: var(--primary); }
.celda .ico { width: 16px; height: 16px; stroke-width: 3; }
.celda.completado { background: var(--green); border-color: var(--green); color: #fff; }
.celda.en_curso { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.celda .punto-vacio { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }

/* --- Pagos ----------------------------------------------------------------- */
table.tabla tr.vencido td { background: var(--red-soft); }
table.tabla tr.cobrado td.concepto { color: var(--muted); }
.cobro-rapido { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.cobro-rapido form { margin: 0; display: flex; gap: 4px; }
.reparto-dinero { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--border); }
.reparto-dinero i { display: block; height: 100%; }
.reparto-dinero .c { background: var(--green); } .reparto-dinero .v { background: var(--red); }

/* --- Factura en papel ------------------------------------------------------ */
.factura {
  background: #fff; color: #333; font-family: Georgia, "Times New Roman", serif;
  max-width: 800px; margin: 0 auto; border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow);
}
.factura .hoja { padding: 26px 30px 8px; }
.factura .cabecera { display: flex; justify-content: space-between; gap: 24px; }
.factura .titulo { font-size: 26px; font-weight: bold; margin-bottom: 4px; }
.factura .numero { font-size: 15px; }
.factura .emisor { width: 320px; text-align: center; }
.factura .emisor img { display: block; height: 96px; width: auto; max-width: 280px; margin: 0 auto 6px; }
.factura .emisor .nombre { font-weight: bold; font-size: 20px; margin-bottom: 2px; }
.factura .emisor .datos { font-size: 13.5px; line-height: 1.4; }
.factura .rectifica { margin-top: 8px; padding: 6px 9px; border: 1px solid #b06a00; background: #fff6e8; font-size: 12px; line-height: 1.45; max-width: 400px; }
.factura h3 { font-size: 16px; font-weight: bold; margin: 14px 0 5px; }
.factura .cliente { font-size: 14px; line-height: 1.45; }
.factura table.lineas { width: 100%; border-collapse: collapse; margin-top: 8px; }
.factura table.lineas th, .factura table.lineas td { border: 1px solid #aaa; padding: 7px 8px; font-size: 13.5px; vertical-align: top; }
.factura table.lineas th { background: #dfe8f3; font-weight: bold; text-align: center; }
.factura table.lineas td.c { text-align: center; white-space: nowrap; }
.factura table.lineas td.d { text-align: right; white-space: nowrap; }
.factura .cierre { display: flex; gap: 20px; align-items: flex-start; margin-top: 16px; }
.factura .verificacion { flex: 1 1 auto; font-size: 11px; display: flex; gap: 12px; align-items: flex-start; }
.factura .verificacion .qr { border: 1px solid #ccc; padding: 4px; background: #fff; line-height: 0; }
.factura table.totales { flex: 0 0 auto; margin-left: auto; width: 320px; border-collapse: collapse; font-size: 13px; }
.factura table.totales td { padding: 6px 12px; text-align: right; border-bottom: 1px solid #e0e0e0; white-space: nowrap; }
.factura table.totales td:first-child { text-align: left; color: #555; }
.factura table.totales tr.destacada td { border-bottom: none; border-top: 2px solid #333; padding-top: 8px; font-size: 14px; background: #f7f7f7; font-weight: bold; }
.factura .pie { font-size: 11px; text-align: center; padding: 14px 30px 20px; }
.factura .pie .transferencia { font-size: 13px; font-weight: bold; margin-bottom: 9px; }
.factura .pie .legal { border-top: 1px solid #ccc; padding-top: 9px; }

/* --- Banco y fiscalidad ---------------------------------------------------- */
table.tabla td.num.positivo { color: var(--green); }
table.tabla td.num.negativo { color: var(--red); }
table.tabla tr.no_aplica td { opacity: .55; }
.sugerencia { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--border); font-size: 13px; }
.sugerencia:first-child { border-top: none; }
.sugerencia .btn { margin-left: auto; }
.cotejo-chip { font-size: 11px; }
.regla { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--border); }
.regla:last-child { border-bottom: none; }
.regla .punto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; margin-top: 6px; background: var(--faint); }
.regla.ok .punto { background: var(--green); }
.regla.aviso .punto { background: var(--amber); }
.regla.error .punto { background: var(--red); }
.regla .detalle { font-size: 12.5px; color: var(--muted); }
.modelo { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-size: 13.5px; }
.modelo .casilla { color: var(--muted); }
.modelo .importe { text-align: right; font-variant-numeric: tabular-nums; }
.modelo .total { border-top: 2px solid var(--ink); padding-top: 6px; font-weight: 700; font-size: 15px; }

/* --- Portal del cliente ---------------------------------------------------- */
.portal-top .logo-marca img { height: 46px; }
.portal-nav { display: flex; gap: 4px; flex-wrap: wrap; margin: 26px 0 16px; }
.portal-nav a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  font-size: 13.5px; font-weight: 600;
}
.portal-nav a:hover { text-decoration: none; border-color: var(--border-strong); }
.portal-nav a.activa { background: var(--ink); border-color: var(--ink); color: #fff; }
.globo {
  background: var(--red); color: #fff; border-radius: 20px; font-size: 11px; font-weight: 700;
  padding: 0 6px; min-width: 18px; text-align: center; line-height: 18px;
}
.barra-inferior a { position: relative; }
.barra-inferior .globo { position: absolute; top: 5px; left: 50%; margin-left: 6px; }
.mi-vivienda { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; overflow: hidden; }
.mi-vivienda .marco-dibujo { border: none; border-radius: 0; height: 100%; aspect-ratio: auto; min-height: 210px; }
.mi-vivienda .texto { padding: 18px 20px; }
.mi-vivienda h2 { font-size: 22px; margin-bottom: 2px; }
.aviso-portal { padding: 13px 0; border-bottom: 1px solid var(--border); }
.aviso-portal:last-child { border-bottom: none; }
.aviso-portal.nuevo .titulo::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); margin-right: 7px; vertical-align: 1px;
}
.aviso-portal .titulo { font-weight: 650; }
.solo-lectura {
  display: flex; gap: 10px; align-items: center; padding: 11px 14px; font-size: 13px;
  background: var(--blue-soft); border: 1px solid #c9dcfb; color: #1e3a8a; border-radius: var(--radius-sm);
}

@media (max-width: 780px) {
  .portal-nav { display: none; }
  .mi-vivienda { grid-template-columns: 1fr; }
  .mi-vivienda .marco-dibujo { min-height: 0; aspect-ratio: 2 / 1; }
  .factura .cabecera, .factura .cierre { flex-direction: column; }
  .factura .emisor { width: auto; text-align: left; }
  .factura table.totales { width: 100%; }
  .factura .hoja { padding: 18px 14px 6px; }
}
@media print {
  .portal-nav, .barra-inferior, .solo-lectura { display: none !important; }
  .factura { border: none; box-shadow: none; max-width: none; }
  .factura .hoja { padding: 0; }
  .portal { padding: 0; max-width: none; }
}

/* --- Factura anulada ------------------------------------------------------- */
.factura { position: relative; }
.factura .anulada-marca {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-22deg);
  font-size: 76px; font-weight: bold; letter-spacing: .14em; color: rgba(180, 30, 30, .16);
  border: 6px solid rgba(180, 30, 30, .16); padding: 4px 26px; pointer-events: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
table.tabla tr.anulada td { opacity: .55; }
table.tabla tr.anulada td .chip { opacity: 1; }
.factura .prueba { color: #b00020; font-weight: bold; margin-top: 6px; letter-spacing: .02em;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* --- Firma electrónica ------------------------------------------------------ */
.firma-body { background: var(--ink); }
.firma-wrap { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start;
  padding: 22px 14px calc(26px + var(--seguro-abajo)); }
.firma-card { width: 100%; max-width: 560px; background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 20px 18px; }
.firma-marca { margin-bottom: 14px; }
.firma-titulo { font-size: 22px; margin: 0 0 8px; }
.firma-doc { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 6px 0 10px;
  background: var(--primary-soft); border: 1px solid #e6d9b8; border-radius: var(--radius-sm); }
.firma-mensaje { font-style: italic; color: var(--muted); margin: 0 0 10px; }
.firma-paso { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); }
.firma-paso .n { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.firma-paso .cuerpo { flex: 1 1 auto; min-width: 0; }
.firma-pad { position: relative; border: 2px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: #fff; touch-action: none; }
.firma-pad canvas { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; }
.firma-pista { position: absolute; left: 16px; right: 16px; bottom: 44px; text-align: center;
  border-top: 1px solid var(--border); padding-top: 4px; color: var(--faint); font-size: 13px;
  pointer-events: none; }
.firma-acepto { align-items: flex-start; line-height: 1.4; font-size: 14px; }
.firma-acepto input { margin-top: 3px; }
.firma-acepto span { font-weight: 400; }
#firma-abierto { display: block; margin-top: 6px; }
#firma-abierto[hidden] { display: none; }
.firma-otros { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; }
.firma-codigo input { width: 100%; font-size: 32px; letter-spacing: .45em; text-align: center;
  font-family: var(--mono); padding: 12px 8px; border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm); }
.firma-codigo input:focus { outline: none; border-color: var(--primary); }
.firma-codigo .btn { width: 100%; justify-content: center; }
.firma-ayuda { display: flex; flex-wrap: wrap; gap: 8px; }
.firma-demo { background: var(--amber-soft); border: 1px solid #f0d9aa; color: var(--amber);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 14px; font-size: 14px; }
.firma-demo-codigo { font-size: 22px; letter-spacing: .25em; color: var(--text); margin-left: 6px; }
.firma-ok { width: 64px; height: 64px; margin: 6px auto 10px; border-radius: 50%;
  background: var(--green-soft); color: var(--green); display: flex; align-items: center;
  justify-content: center; }
.firma-ok svg { width: 34px; height: 34px; }
.firma-ko { background: var(--amber-soft); color: var(--amber); }
.firma-card .btn-lg { width: 100%; justify-content: center; }
/* En el móvil se firma con el dedo: el recuadro aprovecha todo el ancho, también
   el hueco que deja el número del paso, y la tarjeta pierde márgenes. */
@media (max-width: 520px) {
  .firma-wrap { padding: 10px 8px calc(18px + var(--seguro-abajo)); }
  .firma-card { padding: 18px 14px 14px; }
  .firma-paso .firma-pad { margin-left: -40px; }
}
.por-firmar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
form.en-linea { display: inline-block; margin: 0; }

/* --- Tablas de la oficina como fichas en el móvil -------------------------------
   Una tabla de seis columnas en un móvil obliga a deslizar de lado, y los botones
   (Cobrado, Enviar por WhatsApp, Cambiar clave…) quedan fuera de la pantalla. Por
   debajo de 780 px cada fila pasa a ser una ficha con la etiqueta de cada dato
   encima, que pone app.js desde los títulos de la tabla. El cuadro de obra no: es
   una cuadrícula de viviendas por fases y se entiende mejor deslizándolo. */
@media (max-width: 780px) {
  .app .tabla-wrap { padding: 10px 12px 2px; }
  .app table.tabla:not(.cuadro-obra) { min-width: 0; }
  .app table.tabla:not(.cuadro-obra) thead { display: none; }
  .app table.tabla:not(.cuadro-obra),
  .app table.tabla:not(.cuadro-obra) tbody,
  .app table.tabla:not(.cuadro-obra) tr,
  .app table.tabla:not(.cuadro-obra) td { display: block; width: 100%; }
  .app table.tabla:not(.cuadro-obra) tr {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin: 0 0 10px; padding: 8px 12px; background: var(--surface);
  }
  .app table.tabla:not(.cuadro-obra) tr:hover { background: var(--surface); }
  .app table.tabla:not(.cuadro-obra) td {
    border: none; padding: 4px 0; text-align: left; white-space: normal;
  }
  .app table.tabla:not(.cuadro-obra) td[data-etiqueta]::before {
    content: attr(data-etiqueta); display: block; margin-bottom: 1px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 700;
  }
  .app table.tabla:not(.cuadro-obra) td[data-etiqueta=""]::before { display: none; }
  .app table.tabla:not(.cuadro-obra) td.num,
  .app table.tabla:not(.cuadro-obra) td.right { text-align: left; }
  .app table.tabla:not(.cuadro-obra) td .cobro-rapido { justify-content: flex-start; flex-wrap: wrap; }
  .app table.tabla:not(.cuadro-obra) td input[type="text"] { width: 100%; min-width: 0 !important; }
}

/* El cuadro de obra se desliza de lado en el móvil: la columna de la vivienda se queda
   fija, para no perder de vista de quién es cada fila al llegar a las últimas fases. */
@media (max-width: 780px) {
  .app table.cuadro-obra thead th:first-child,
  .app table.cuadro-obra tbody td:first-child,
  .app table.cuadro-obra tbody th:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }
}
@media (max-width: 780px) { .app .tabla-wrap.cuadro-wrap { padding: 0; } }