/* Interland — 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: #1d4f8c;          /* azul de la marca */
  --primary-dark: #173f70;
  --primary-soft: #e9f0f9;

  --ink: #14263d;              /* azul marino de la barra lateral */
  --ink-2: #1c3352;

  --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: #7fb4ea; }
.brand .sede {
  font-size: 10px; color: #7d8aa0; 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: #7d8aa0; 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: #cdd6e3; font-size: 14px; font-weight: 500; margin-bottom: 1px;
}
.nav a:hover { background: #223043; 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 #26364c; padding: 10px; }
.usuario {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px;
  border-radius: var(--radius-sm); color: #cdd6e3;
}
.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: #7d8aa0; }
.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: #223043; color: #cdd6e3;
  border: 1px solid #2f4159; border-radius: var(--radius-sm);
  padding: 6px; font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.salir:hover { background: #2b3c53; 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: #c5d7ee; color: #173f70; }

/* 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: #8fa3bd; }
.cifra.destacada .cuanto { color: #fff; }
.cifra.destacada .cuanto .unidad, .cifra.destacada .pie { color: #8fa3bd; }
.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: #cdd6e3; 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 Interland
   ========================================================================== */

/* --- 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;
}
.logo-marca img { max-height: 38px; max-width: 170px; object-fit: contain; }
.login-card .logo-marca { display: block; text-align: center; padding: 0; margin-bottom: 6px; }
.login-card .logo-marca img { max-height: 70px; max-width: 240px; }
.wordmark .c { display: block; font-size: 10px; letter-spacing: .34em; color: #9fb4cf;
  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; }

/* --- 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 { max-height: 90px; max-width: 280px; object-fit: contain; margin-bottom: 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; }

/* --- Portal del cliente ---------------------------------------------------- */
.portal-top .logo-marca img { max-height: 34px; }
.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; }
}