/* Fincas — hoja de estilos única, sin frameworks ni compilación.
   Es una aplicación de tabla y de papel: por un lado hay que ver cuarenta
   propiedades de una vez, por otro casi todo acaba impreso (convocatorias,
   actas, certificados). Por eso la densidad manda en pantalla y hay un bloque
   de impresión de verdad al final, no un apaño. */

:root {
  --primary: #1d6d5a;          /* verde de administración: sobrio, no corporativo */
  --primary-dark: #17594a;
  --primary-soft: #eaf4f0;

  --ink: #16202e;              /* azul casi negro de la barra lateral */
  --ink-2: #1f2b3c;

  --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: #58c0a4; }
.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-label.comunidad {
  color: #cdd6e3; font-size: 12px; letter-spacing: 0; text-transform: none;
  font-weight: 650; padding-bottom: 6px; border-top: 1px solid #26364c;
  margin-top: 8px; padding-top: 12px;
}
.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: #c3e0d6; color: #17594a; }

/* 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 input.iban { width: 220px; font-family: var(--mono); font-size: 12.5px; }
.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); }

/* --------------------------------------------------------------- votación */
.recuento { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.recuento .caja {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
  background: var(--surface-2);
}
.recuento .caja .que { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.recuento .caja .cuanto { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.recuento .caja .coef { font-size: 12px; color: var(--muted); }
.recuento .favor { background: var(--green-soft); border-color: #bfe6cd; }
.recuento .contra { background: var(--red-soft); border-color: #f3c9c9; }
.recuento .abstencion { background: var(--amber-soft); border-color: #f0dcb4; }

.veredicto {
  padding: 14px 16px; border-radius: var(--radius); border: 2px solid;
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.veredicto .titulo { font-size: 18px; font-weight: 700; }
.veredicto .detalle { font-size: 13px; }
.veredicto.aprobado { background: var(--green-soft); border-color: #86c99f; color: #14532d; }
.veredicto.rechazado { background: var(--red-soft); border-color: #eda9a9; color: #7f1d1d; }
.veredicto.pendiente_ausentes { background: var(--amber-soft); border-color: #e8c384; color: #78350f; }

.votos-grupo { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 20px; overflow: hidden; }
.votos-grupo label {
  margin: 0; padding: 3px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--muted); background: var(--surface); border-right: 1px solid var(--border);
}
.votos-grupo label:last-child { border-right: none; }
.votos-grupo input { position: absolute; opacity: 0; pointer-events: none; }
.votos-grupo input:checked + span { color: #fff; }
.votos-grupo label:has(input:checked) { background: var(--muted); color: #fff; }
.votos-grupo label.v-favor:has(input:checked) { background: var(--green); }
.votos-grupo label.v-contra:has(input:checked) { background: var(--red); }
.votos-grupo label.v-abstencion:has(input:checked) { background: var(--amber); }
.votos-grupo label.v-nada:has(input:checked) { background: var(--faint); }

/* ------------------------------------------------------------------ gráficas */
.grafico { max-width: 100%; height: auto; }
.g-etiqueta { font-family: var(--font); font-size: 12px; fill: var(--muted); }
.g-valor { font-family: var(--font); font-size: 12px; font-weight: 650; fill: var(--text); }
.anillo-pct { font-family: var(--font); font-size: 26px; font-weight: 700; fill: var(--text); }
.anillo-pie { font-family: var(--font); font-size: 11px; fill: var(--muted); }
.leyenda { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.leyenda i { width: 14px; height: 8px; border-radius: 2px; display: inline-block; }
.leyenda .real { background: var(--primary); }
.leyenda .pasado { 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); }

/* ------------------------------------------------------------------- papel */
/* Convocatorias, actas, certificados y recibos: en pantalla se ven ya como
   saldrán impresos, para no descubrir el desastre al darle a imprimir. */
.papel {
  background: #fff; max-width: 760px; margin: 0 auto; padding: 42px 48px;
  border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow);
  font-size: 14px; line-height: 1.62;
}
.papel h1 { font-size: 20px; text-align: center; margin-bottom: 4px; }
.papel h2 { font-size: 15px; margin: 24px 0 8px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); font-size: 12px; }
.papel .membrete { border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 22px; }
/* El logo del despacho en el membrete. Se limita por altura y no por anchura
   porque los logotipos vienen apaisados o cuadrados sin avisar, y limitando
   sólo el ancho un logo alto se come media hoja. */
.logo-membrete { max-height: 56px; max-width: 200px; object-fit: contain; }
.papel .membrete .comunidad { font-size: 16px; font-weight: 700; }
.papel .membrete .datos { font-size: 12px; color: var(--muted); }
.papel .destinatario { margin: 22px 0; font-size: 13.5px; }
.papel ol.orden { padding-left: 22px; }
.papel ol.orden > li { margin-bottom: 12px; }
.papel ol.orden .mayoria { font-size: 12px; color: var(--muted); display: block; }
.papel .firma { margin-top: 46px; display: flex; gap: 40px; justify-content: space-between; }
.papel .firma div { flex: 1; text-align: center; font-size: 12.5px; color: var(--muted); }
.papel .firma .linea { border-top: 1px solid var(--border-strong); margin-bottom: 6px; padding-top: 40px; }
.papel .pie-legal { margin-top: 30px; font-size: 11px; color: var(--faint); border-top: 1px solid var(--border); padding-top: 10px; }
.papel table.tabla { font-size: 13px; }
.papel table.tabla thead th { position: static; }
.papel .total-grande {
  border: 2px solid var(--ink); border-radius: 6px; padding: 12px 16px; text-align: center;
  margin: 18px 0;
}
.papel .total-grande .que { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.papel .total-grande .cuanto { font-size: 28px; font-weight: 700; }

/* ------------------------------------------------------------------ impresión */
@media print {
  .sidebar, .topbar, .barra-guardar, .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; }
  .papel { border: none; box-shadow: none; padding: 0; max-width: none; }
  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; }
  .veredicto { border-width: 1px; -webkit-print-color-adjust: exact; }
  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: el nombre de la comunidad ya sale en el
     menú lateral y en el título de la página, y 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; }
  .papel { padding: 22px 18px; }
}

/* ==========================================================================
   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 vecino) ------------- */
.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; }
}