/* ============================================================================
   Quimiapan Inmobiliaria — v2. CSS limpio, escrito a mano.
   Paleta de marca: crema marfil de fondo, ébano de texto, cobre como acento.
   Tema claro fijo (sin dark mode). Server-rendered, sin frameworks.
   ============================================================================ */

:root {
  --bg:        #f4f2eb;   /* crema marfil */
  --surface:   #fbfaf6;   /* tarjeta casi blanca cálida */
  --surface-2: #efece2;   /* franjas / hover suave */
  --ink:       #2b2620;   /* ébano (texto principal) */
  --ink-soft:  #6b6155;   /* texto secundario */
  --line:      #ddd6c9;   /* bordes */
  --copper:    #a66b46;   /* cobre (acento, botones primarios) */
  --copper-d:  #8a5636;   /* cobre oscuro (hover) */
  --ok:        #2f7d5d;   /* verde */
  --ok-bg:     #e5f2ea;
  --danger:    #b23b3b;   /* rojo */
  --danger-bg: #f6e6e6;
  --amber:     #b7791f;   /* ámbar (en proceso) */
  --amber-bg:  #f7efdd;
  --radius:    10px;
  --shadow:    0 1px 2px rgba(43, 38, 32, .06), 0 1px 3px rgba(43, 38, 32, .04);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; margin: 0; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
a  { color: inherit; text-decoration: none; }

/* ── Layout general ────────────────────────────────────────────────────── */
/* En desktop aprovecha el ancho (hasta 1700px) con buen padding; en móvil usa
   TODO el ancho sin padding lateral. Los breakpoints ajustan el padding. */
.wrap { width: 100%; max-width: 1700px; margin: 0 auto; padding: 24px 28px; }

/* ── Barra superior ────────────────────────────────────────────────────── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar .inner {
  max-width: 1500px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 24px; height: 60px;
}
.topbar .logo { display: flex; align-items: center; gap: 10px; }
.topbar .logo img { height: 34px; width: auto; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px; color: var(--ink-soft);
  font-size: .92rem; font-weight: 500; transition: background .12s, color .12s;
}
.topbar nav a:hover { background: var(--surface-2); color: var(--ink); }
.topbar nav a.active { background: var(--copper); color: #fff; }
.topbar .spacer { flex: 1; }
.topbar .user { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: .9rem; }
.topbar .user a.logout { display: inline-flex; align-items: center; padding: 7px; border-radius: 8px; }
.topbar .user a.logout:hover { background: var(--surface-2); color: var(--ink); }

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: .9rem; font-weight: 500;
  cursor: pointer; transition: background .12s, border-color .12s; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--copper); border-color: var(--copper); color: #fff; }
.btn-primary:hover { background: var(--copper-d); border-color: var(--copper-d); }
.btn-sm { padding: 6px 11px; font-size: .85rem; }
/* Celda de acciones de la tabla de propiedades: botones alineados a la derecha. */
.acciones-cel { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ── Tarjetas ──────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-pad { padding: 20px; }
.card-head {
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* ── KPIs ──────────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.kpi .label { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: .85rem; margin-bottom: 6px; }
.kpi .value { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .value.ok { color: var(--ok); }
.kpi .value.danger { color: var(--danger); }
.kpi .value.amber { color: var(--amber); }

/* ── Tablas ────────────────────────────────────────────────────────────── */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .94rem; table-layout: auto; }
table.data th:not(:first-child), table.data td:not(:first-child) { white-space: nowrap; }
/* La 1ª columna (nombre) absorbe el sobrante pero con un tope: así en pantallas
   anchas no deja un hueco enorme entre el nombre y las columnas de datos. */
table.data td:first-child, table.data th:first-child { width: 40%; }
table.data td:first-child { min-width: 200px; }
table.data thead th {
  text-align: left; padding: 11px 16px; background: var(--surface-2);
  color: var(--ink-soft); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line);
}
table.data tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
/* .num alinea a la derecha TANTO en encabezado como en celda. El selector
   incluye thead th para ganarle a la regla `thead th { text-align:left }`. */
.num, table.data thead th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* La última columna suele ser de acciones (botones): alinéala a la derecha y
   evita que se estire de más. */
table.data th:last-child, table.data td:last-child { text-align: right; white-space: nowrap; }
.muted { color: var(--ink-soft); }
.strong { font-weight: 600; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; line-height: 1.4;
}
.badge-ok      { background: var(--ok-bg);     color: var(--ok); }
.badge-danger  { background: var(--danger-bg); color: var(--danger); }
.badge-amber   { background: var(--amber-bg);  color: var(--amber); }
.badge-muted   { background: var(--surface-2); color: var(--ink-soft); }
.badge-copper  { background: var(--copper);    color: #fff; }

/* ── Formularios ───────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: 5px; }
.input, select.input, textarea.input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); font-size: .92rem; font-family: inherit;
}
.input:focus { outline: 2px solid var(--copper); outline-offset: -1px; border-color: var(--copper); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Flash / alertas ───────────────────────────────────────────────────── */
.flash { padding: 11px 16px; border-radius: 8px; margin-bottom: 18px; font-size: .9rem; }
.flash-ok    { background: var(--ok-bg);     color: var(--ok);    border: 1px solid #b9dcc8; }
.flash-error { background: var(--danger-bg); color: var(--danger); border: 1px solid #e3c2c2; }
.alert-inline { font-size: .8rem; color: var(--amber); margin-top: 4px; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 100%; max-width: 380px; }
.login-card .brand { text-align: center; margin-bottom: 22px; }
.login-card .brand img { height: 64px; width: auto; }
.login-card .brand .sub { margin-top: 8px; font-size: .78rem; letter-spacing: .3em; color: var(--ink-soft); }
.login-card h1 { text-align: center; font-size: 1.2rem; margin-bottom: 4px; }
.login-card .hint { text-align: center; color: var(--ink-soft); font-size: .88rem; margin-bottom: 18px; }
.pass-wrap { position: relative; }
.pass-wrap .toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; padding: 6px; color: var(--ink-soft); }

/* ── Utilidades ────────────────────────────────────────────────────────── */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .desc { color: var(--ink-soft); font-size: .92rem; margin-top: 3px; }
.grid-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: .92rem; }
.dl dt { color: var(--ink-soft); }
.dl dd { margin: 0; }
.section { margin-top: 28px; }
.section > h2 { margin-bottom: 12px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: .9rem; margin-bottom: 12px; }
.back-link:hover { color: var(--ink); }
.empty { padding: 40px 20px; text-align: center; color: var(--ink-soft); }
.actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.spacer { flex: 1; }

/* Pestañas de tipo de reporte (contadora): pagos / depósitos / facturas. */
.rep-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.rep-tab {
  padding: 9px 18px; color: var(--ink-soft); font-weight: 600; font-size: .92rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s, border-color .12s;
}
.rep-tab:hover { color: var(--ink); }
.rep-tab.active { color: var(--copper-d); border-bottom-color: var(--copper); }

/* Acordeón de pagos por año (contadora): tabla anualizada, expandible/contraíble. */
.pagos-anio { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 10px; overflow: hidden; }
.pagos-anio-head {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; user-select: none; transition: background .12s;
}
.pagos-anio-head::-webkit-details-marker { display: none; }
.pagos-anio-head:hover { background: var(--surface-2); }
.pagos-anio-caret { color: var(--copper); font-size: .8rem; transition: transform .15s; }
.pagos-anio[open] > .pagos-anio-head .pagos-anio-caret { transform: rotate(90deg); }
.pagos-anio-year { font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; font-weight: 600; }
.pagos-anio-meta { margin-left: auto; font-size: .9rem; font-variant-numeric: tabular-nums; }
.pagos-anio-meta strong { color: var(--ok); }
.pagos-anio .table-wrap { border-top: 1px solid var(--line); }
.mt-0 { margin-top: 0; }
.hidden { display: none; }

/* ── Modal (dialog nativo) ─────────────────────────────────────────────── */
dialog.modal-pago, dialog.modal {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  width: calc(100% - 24px);
  max-width: 460px;
  box-shadow: 0 10px 40px rgba(43, 38, 32, .18);
  background: var(--surface);
  color: var(--ink);
}
dialog.modal-pago::backdrop, dialog.modal::backdrop { background: rgba(43, 38, 32, .45); }
dialog.modal.modal-ancho { max-width: 640px; }
/* Desglose "por conciliar": encabezado FIJO + filas scrolleables (sin sticky ni
   tabla anidada, así el header nunca se cruza con las filas). Grid de 4 columnas
   alineadas entre header, filas y total. */
.conc-wrap { display: flex; flex-direction: column; }
.conc-head, .conc-row, .conc-total {
  display: grid; grid-template-columns: 1fr 88px 88px 92px; gap: 8px;
  align-items: center; padding: 9px 18px;
}
.conc-head {
  background: #efece2; border-bottom: 1px solid var(--line);
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft);
}
.conc-body { max-height: 55vh; overflow-y: auto; overflow-x: hidden; }
.conc-row { border-bottom: 1px solid var(--line); }
.conc-row:last-child { border-bottom: 0; }
.conc-total { border-top: 2px solid var(--line); background: var(--surface); }
.conc-head .c2, .conc-head .c3, .conc-head .c4,
.conc-row .c2, .conc-row .c3, .conc-row .c4,
.conc-total .c2, .conc-total .c3, .conc-total .c4 {
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ── Switch / toggle ───────────────────────────────────────────────────── */
.switch {
  position: relative; width: 44px; height: 24px; border-radius: 999px;
  border: 0; background: var(--line); cursor: pointer; padding: 0; transition: background .15s;
}
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s;
}
.switch.on { background: var(--copper); }
.switch.on .knob { left: 22px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  font-family: 'Playfair Display', Georgia, serif;
}
.modal-x { background: none; border: 0; cursor: pointer; font-size: 1.1rem; color: var(--ink-soft); padding: 4px 8px; }
.modal-x:hover { color: var(--ink); }
.modal-body { padding: 18px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 18px; border-top: 1px solid var(--line);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Tablet: padding lateral menor. */
@media (max-width: 1024px) {
  .wrap { padding: 20px 16px; }
  .topbar .inner { padding: 0 16px; }
}

/* Móvil: usa TODO el ancho, sin padding lateral. Las tablas hacen scroll
   horizontal dentro de su tarjeta (que ocupa el 100%). */
@media (max-width: 720px) {
  .wrap { padding: 14px 0; }
  .topbar .inner { padding: 0 12px; gap: 12px; height: 54px; }
  .topbar nav { gap: 0; overflow-x: auto; }
  .topbar nav a { padding: 8px 10px; font-size: .85rem; }

  /* El contenido con padding propio (títulos, kpis) recupera un pequeño margen,
     pero las tarjetas/tablas van de borde a borde. */
  .page-head, .kpis, .section > h2, .back-link { padding-left: 12px; padding-right: 12px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Tarjetas y tablas a ancho completo, sin bordes redondeados laterales. */
  .table-wrap, .card { border-radius: 0; border-left: 0; border-right: 0; }
  .grid-detail { grid-template-columns: 1fr; gap: 0; }
  table.data { font-size: .85rem; }
  table.data thead th, table.data tbody td { padding: 10px 12px; }

  h1 { font-size: 1.35rem; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Detalle: en pantallas medianas las 2 tarjetas (generales/contrato) siguen
   lado a lado; solo en móvil se apilan. */
@media (min-width: 721px) {
  .grid-detail { grid-template-columns: 1fr 1fr; }
}

/* ── Acceso rápido en login (SOLO desarrollo local, rentas.local) ─────────── */
.devlogin {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.devlogin-title {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 10px;
}
.devlogin-btns {
  display: flex;
  gap: 8px;
}
.btn-dev {
  flex: 1;
  padding: 9px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn-dev:hover {
  background: #fff;
  border-color: var(--copper);
  color: var(--copper-d);
}

/* ── Detalle de propiedad: CTAs, KPIs de 4 y grid de 3 tarjetas ──────────── */
.cta-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.kpis-detalle { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kpi-sub {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: .78rem;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* Fila en alerta (ej. mes sin factura registrada). */
.row-danger td { background: var(--danger-bg); }
.row-danger td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* Links de entidad dentro de tablas y listas de datos: deben VERSE como enlaces
   (color de acento + subrayado al hover), no confundirse con texto plano. No aplica
   a los que son .btn. */
table.data td a:not(.btn),
.dl dd a:not(.btn) {
  color: var(--copper-d);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .12s;
}
table.data td a:not(.btn):hover,
.dl dd a:not(.btn):hover {
  border-bottom-color: var(--copper-d);
}

/* ── Tarjetas de contrato en el detalle de propiedad ─────────────────────── */
.dl-cols { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px 16px; align-items: baseline; }
@media (max-width: 700px) { .dl-cols { grid-template-columns: auto 1fr; } }

.contrato-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.contrato-card {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; transition: border-color .12s, box-shadow .12s;
}
.contrato-card:hover { border-color: var(--copper); box-shadow: var(--shadow); }
.contrato-card.is-actual { border-left: 3px solid var(--copper); }
.contrato-card.is-salido { opacity: .82; }
.cc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cc-inquilino { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.cc-badges { display: flex; gap: 5px; flex-shrink: 0; }
.cc-body { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--ink); }
.cc-label { color: var(--ink-soft); display: inline-block; min-width: 78px; }
.cc-foot { margin-top: 12px; color: var(--copper-d); font-weight: 600; font-size: .9rem; }

/* Encabezado de sección dentro de formularios largos. */
.form-sec {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--copper-d); margin: 22px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.form-sec:first-of-type { margin-top: 0; }

.kpi .value.copper { color: var(--copper-d); }

/* Monto clicable (abre modal). Se ve como link de acento, no como botón. */
.link-num {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--copper-d); font-weight: 600; border-bottom: 1px solid transparent;
}
.link-num:hover { border-bottom-color: var(--copper-d); }

/* Líneas del modal "por conciliar". */
.conc-line { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.conc-line.conc-sub { padding: 6px 0 6px 14px; border-bottom: 0; font-size: .92rem; color: var(--ink-soft); }
.conc-line.conc-total { font-size: 1.05rem; }
.conc-line.conc-pbv { border-bottom: 0; border-top: 2px solid var(--line); margin-top: 6px; padding-top: 12px; }
.conc-line .ok { color: var(--ok); }
.conc-line .amber { color: var(--amber); }
.conc-line .danger { color: var(--danger); }

.conc-h3 { font-size: .95rem; margin: 18px 0 4px; color: var(--ink); }


/* Desglose por año del modal por conciliar: acordeón expandible, sin scroll horizontal. */
.conc-anios { display: flex; flex-direction: column; gap: 8px; }
.conc-anio { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.conc-anio > .ca-head { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.conc-anio > .ca-head::-webkit-details-marker { display: none; }
.conc-anio .ca-year { font-weight: 700; font-size: 1.02rem; }
.conc-anio .ca-caret { display: inline-block; transition: transform .12s; color: var(--ink-soft); font-size: .8rem; }
.conc-anio[open] .ca-caret { transform: rotate(90deg); }
.conc-anio .ca-monto { font-weight: 700; color: var(--danger); font-variant-numeric: tabular-nums; }
.conc-anio .ca-detalle { margin-top: 8px; font-size: .85rem; color: var(--ink-soft); }
.ca-meses { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .85rem; }
.ca-meses th, .ca-meses td { padding: 5px 6px; text-align: left; border-bottom: 1px solid var(--line); }
.ca-meses th.num, .ca-meses td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ca-meses th { color: var(--ink-soft); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.ca-meses td.ca-dif { color: var(--danger); font-weight: 600; }

/* Modal amplio (por conciliar): ~60% del ancho de pantalla, no fijo. */
dialog.modal.modal-60 { max-width: 60vw; width: 60vw; }
@media (max-width: 900px) { dialog.modal.modal-60 { max-width: calc(100% - 24px); width: calc(100% - 24px); } }

/* Banner de sustento contractual del modal por conciliar. */
.conc-sustento {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; font-size: .86rem; line-height: 1.5; margin: 0 0 14px; color: var(--ink);
}
.conc-clausula { color: var(--copper-d); cursor: help; border-bottom: 1px dotted var(--copper-d); white-space: nowrap; }

/* Etiquetas de causa (omisión PBV / sin factura / debe inquilino). */
.tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.tag + .tag { margin-left: 5px; }
.tag-amber  { background: var(--amber-bg); color: var(--amber); }
.tag-danger { background: var(--danger-bg); color: var(--danger); }
.tag-ok     { background: var(--ok-bg); color: var(--ok); }
.tag-muted  { background: var(--surface-2); color: var(--ink-soft); }


/* Nota del dictamen de auditoría en el modal por conciliar. */
.conc-notas {
  background: var(--amber-bg); border-left: 3px solid var(--amber); border-radius: 6px;
  padding: 9px 12px; font-size: .85rem; line-height: 1.5; margin: 0 0 14px; color: var(--ink);
}

/* Cláusula del contrato: bloque expandible con clic, SIEMPRE legible (no tooltip). */
.conc-clausula-det { margin-top: 8px; }
.conc-clausula-det > summary { cursor: pointer; color: var(--copper-d); font-weight: 600; font-size: .85rem; list-style: none; }
.conc-clausula-det > summary::-webkit-details-marker { display: none; }
.conc-clausula-det > summary::before { content: '▸ '; }
.conc-clausula-det[open] > summary::before { content: '▾ '; }
.conc-clausula-det blockquote {
  margin: 8px 0 0; padding: 10px 14px; background: var(--surface); border-left: 3px solid var(--copper);
  border-radius: 6px; font-style: italic; font-size: .88rem; line-height: 1.55; color: var(--ink);
}

/* Calculador de mora en el detalle de contrato. */
.mora-result { margin-top: 14px; max-width: 380px; }
.mr-line { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.mr-line.mr-total { border-bottom: 0; border-top: 2px solid var(--line); margin-top: 4px; padding-top: 10px; font-weight: 700; font-size: 1.05rem; }
.mr-line.mr-total span:last-child { color: var(--copper-d); }


/* Tooltip GLOBAL (#tip-layer): position fixed, no lo recorta ningún overflow. */
[data-tip] { cursor: help; }
#tip-layer {
  position: fixed; z-index: 9999; display: none; pointer-events: none;
  max-width: 320px; white-space: normal; text-align: left;
  background: var(--ink); color: #fff; padding: 9px 12px; border-radius: 8px;
  font-size: .8rem; line-height: 1.5; font-weight: 400;
  box-shadow: 0 8px 30px rgba(43,38,32,.32);
  opacity: 0; transition: opacity .12s;
}
#tip-layer.on { opacity: 1; }

/* ── Perfil del usuario ───────────────────────────────────────────────────── */
/* El nombre en la topbar es un enlace a "Mi perfil": debe leerse como tal. */
.topbar .user a.user-name {
  color: var(--ink-soft); font-weight: 500; padding: 6px 10px; border-radius: 8px;
  border-bottom: 1px solid transparent;
}
.topbar .user a.user-name:hover { background: var(--surface-2); color: var(--ink); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.card-title { font-size: 1.05rem; margin: 0 0 14px; color: var(--ink); }

dl.datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; align-items: baseline; }
dl.datos dt { color: var(--ink-soft); font-size: .9rem; }
dl.datos dd { margin: 0; color: var(--ink); font-weight: 500; }

/* ── Estado de cuenta del portal del cliente ─────────────────────────────────
   Tabla de meses vs pagos, agrupada por año, cada mes expandible con su desglose
   de mora y sus pagos registrados. Diseño con jerarquía y color, no plano. */
.edoc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.edoc-adeudo {
  text-align: right; background: var(--danger-bg); border: 1px solid #e9cfcf;
  border-radius: var(--radius); padding: 9px 16px; line-height: 1.25;
}
.edoc-adeudo-lbl { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--danger); font-weight: 600; }
.edoc-adeudo-val { display: block; font-size: 1.3rem; font-weight: 700; color: var(--danger); font-variant-numeric: tabular-nums; }
.edoc-adeudo.edoc-adeudo-ok { background: var(--ok-bg); border-color: #cfe6d8; }
.edoc-adeudo.edoc-adeudo-ok .edoc-adeudo-lbl,
.edoc-adeudo.edoc-adeudo-ok .edoc-adeudo-val { color: var(--ok); }

/* Acordeón por año */
.edoc-anio { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden; }
.edoc-anio-head {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; user-select: none; transition: background .12s;
}
.edoc-anio-head::-webkit-details-marker { display: none; }
.edoc-anio-head:hover { background: var(--surface-2); }
.edoc-anio-caret { color: var(--copper); font-size: .8rem; transition: transform .15s; }
.edoc-anio[open] > .edoc-anio-head .edoc-anio-caret { transform: rotate(90deg); }
.edoc-anio-year { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; font-weight: 600; }
.edoc-anio-meta { margin-left: auto; font-size: .9rem; font-variant-numeric: tabular-nums; }
.edoc-anio-meta strong { color: var(--ok); }

/* Cuerpo: lista de meses. Cabecera de columnas implícita por alineación. */
.edoc-meses { border-top: 1px solid var(--line); }

/* Una fila-mes: grid de 5 columnas (dot, nombre, renta, pagado, estado) + caret. */
.edoc-mes-row, .edoc-mes-plano {
  display: grid;
  grid-template-columns: 14px 1.4fr 1fr 1fr 1.5fr 16px;
  align-items: center; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.edoc-mes:last-child .edoc-mes-row, .edoc-mes-plano:last-child { border-bottom: 0; }
details.edoc-mes { border-bottom: 1px solid var(--line); }
details.edoc-mes:last-child { border-bottom: 0; }
details.edoc-mes > .edoc-mes-row { border-bottom: 0; }
.edoc-mes-row { list-style: none; cursor: pointer; transition: background .12s; }
.edoc-mes-row::-webkit-details-marker { display: none; }
.edoc-mes-row:hover { background: var(--surface-2); }

.edoc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); justify-self: center; }
.edoc-mes.is-pagado  .edoc-dot { background: var(--ok); }
.edoc-mes.is-mora    .edoc-dot { background: var(--danger); }
.edoc-mes.is-parcial .edoc-dot { background: var(--amber); }
.edoc-mes.is-plazo   .edoc-dot { background: var(--amber); }
.edoc-mes.is-proximo .edoc-dot,
.edoc-mes.is-gracia  .edoc-dot { background: var(--line); }

.edoc-mes-nombre { font-weight: 600; }
.edoc-mes-renta, .edoc-mes-pagado { text-align: right; font-variant-numeric: tabular-nums; }
.edoc-mes-pagado { font-weight: 600; }
.edoc-mes-estado { text-align: right; }
.edoc-mes-caret { color: var(--ink-soft); font-size: .75rem; text-align: center; transition: transform .15s; }
details.edoc-mes[open] > .edoc-mes-row .edoc-mes-caret { transform: rotate(90deg); }

/* Franja de acento al borde izquierdo según severidad. */
.edoc-mes.is-mora    { box-shadow: inset 3px 0 0 var(--danger); }
.edoc-mes.is-parcial { box-shadow: inset 3px 0 0 var(--amber); }

/* Detalle expandido del mes: desglose de adeudo + pagos registrados. */
.edoc-mes-detalle { padding: 4px 18px 18px 44px; background: var(--surface-2); }
.edoc-desglose { max-width: 420px; margin-bottom: 4px; }
.edoc-dl { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.edoc-dl small { font-weight: 400; }
.edoc-dl .ok { color: var(--ok); }
.edoc-dl .danger { color: var(--danger); }
.edoc-dl-total { border-bottom: 0; border-top: 2px solid var(--line); margin-top: 2px; padding-top: 10px; font-weight: 700; font-size: 1.05rem; }
.edoc-tip { color: var(--copper-d); cursor: help; font-size: .85em; }

.edoc-pagos { margin-top: 14px; }
.edoc-pagos-titulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 600; margin-bottom: 8px; }
.edoc-pago {
  display: grid; grid-template-columns: 1.2fr 1fr auto auto; align-items: center; gap: 12px;
  padding: 9px 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; margin-bottom: 6px; font-size: .9rem;
}
.edoc-pago-fecha { font-weight: 600; }
.edoc-pago-metodo { color: var(--ink-soft); }
.edoc-pago-monto { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ok); }
.edoc-nopagos { margin: 6px 0 0; font-size: .88rem; }

@media (max-width: 640px) {
  .edoc-mes-row, .edoc-mes-plano { grid-template-columns: 12px 1fr auto 16px; }
  .edoc-mes-renta, .edoc-mes-estado { display: none; }   /* en móvil: nombre + pagado; el resto se ve al abrir */
  .edoc-mes-detalle { padding-left: 18px; }
  .edoc-pago { grid-template-columns: 1fr auto; row-gap: 4px; }
  .edoc-pago-metodo, .edoc-pago-estado { grid-column: 1; }
}

/* ── Sección "Tu contrato" del portal ────────────────────────────────────── */
/* Texto legal dentro del modal: solo lectura, respeta saltos de línea. */
.contrato-texto {
  white-space: pre-wrap; font-size: .9rem; line-height: 1.65; color: var(--ink);
  max-height: 65vh; overflow: auto;
}

/* Datos del contrato en tarjetas horizontales (inicio / fin / renta firma / renta actual). */
.dl-contrato { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; }
.dl-contrato > div { display: flex; flex-direction: column; gap: 3px; }
.dl-contrato dt { color: var(--ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.dl-contrato dd { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.dl-contrato dd.dd-actual { color: var(--copper-d); display: flex; align-items: center; flex-wrap: wrap; }
@media (max-width: 720px) { .dl-contrato { grid-template-columns: 1fr 1fr; gap: 14px; } }

/* Subtítulo de bloque dentro de una sección. */
.edoc-subtitulo { font-size: 1rem; margin: 4px 0 10px; color: var(--ink); }

/* Cláusula de aumento + fórmula matemática. */
.clausula-aumento { margin-top: 16px; }
.clausula-aumento .ca-titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--copper-d); font-weight: 700; margin-bottom: 10px; }
.clausula-aumento .ca-clausula {
  margin: 0 0 12px; padding: 12px 16px; background: var(--surface-2);
  border-left: 3px solid var(--copper); border-radius: 6px;
  font-style: italic; font-size: .9rem; line-height: 1.6; color: var(--ink);
}
.clausula-aumento .ca-formula { display: flex; flex-direction: column; gap: 6px; }
.clausula-aumento .ca-formula-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 600; }
.clausula-aumento .ca-formula code {
  display: block; padding: 12px 16px; background: var(--ink); color: #f4ede2;
  border-radius: 8px; font-size: .9rem; line-height: 1.5;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap;
}

/* ── Subidor de archivos: peso + barra de progreso ── */
.upload-meta { margin-top: 8px; font-size: .85rem; color: var(--muted, #667); }
.upload-meta .upload-size { font-weight: 600; }
.upload-bar {
  margin-top: 10px; height: 10px; border-radius: 999px;
  background: var(--line, #e5e5ea); overflow: hidden; position: relative;
}
.upload-bar-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: var(--copper, #b06a3b); transition: width .15s ease;
}
.upload-pct {
  display: inline-block; margin-top: 6px; font-size: .8rem;
  color: var(--muted, #667); font-variant-numeric: tabular-nums;
}