:root{
    --paper:#EFEAE0;
    --paper-2:#E7E1D3;
    --ink:#1E2A22;
    --ink-soft:#4B5A4F;
    --rule:#B9CBB9;
    --rule-strong:#8FA98F;
    --cover:#16211B;
    --cover-2:#1E2E24;
    --gold:#A87C3F;
    --gold-texto:#856021;      /* dorado oscurecido para TEXTO sobre fondo claro (AA 4.7:1) */
    --surface:#ffffff;         /* fondo de tarjetas y paneles */
    --surface-2:#F7F4EC;       /* filas alternas y realce al pasar el cursor */      /* dorado oscurecido para TEXTO sobre fondo claro (AA 4.7:1) */
    --gold-light:#C9A05F;
    --green:#2F5D45;
    --green-soft:#DCE7DA;
    --red:#8B3A3A;
    --red-soft:#F0DBD6;
    --amber:#7E5316;
    --amber-soft:#F1E3C7;
    --shadow: 0 2px 10px rgba(20,26,20,0.10);
    --radius: 3px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces',Georgia,serif;
    color:var(--ink);
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .mono{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
  a{color:inherit;}
  button{font-family:inherit;cursor:pointer;}
  ::selection{background:var(--gold-light);color:var(--cover);}

  /* ---------- Layout shell ---------- */
  #app{ display:flex; min-height:100vh; }
  .sidebar{
    width:236px;
    flex-shrink:0;
    background:linear-gradient(180deg,var(--cover),var(--cover-2));
    color:#DCE3D9;
    display:flex;
    flex-direction:column;
    padding:22px 0 16px;
    position:sticky;
    top:0;
    height:100vh;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 20px 20px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    margin-bottom:10px;
  }
  .stamp{
    width:46px;height:46px;border-radius:50%;
    border:2px solid var(--gold-light);
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:700;font-size:15px;
    color:var(--gold-light);
    position:relative;
    flex-shrink:0;
    box-shadow: inset 0 0 0 3px rgba(201,160,95,0.18);
  }
  .stamp::after{
    content:'';
    position:absolute; inset:-6px;
    border-radius:50%;
    border:1px dashed rgba(201,160,95,0.35);
  }
  .brand-text .name{ font-family:'Fraunces',serif; font-size:15.5px; line-height:1.18; color:#F2EFE6; font-weight:600;}
  .brand-text .sub{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-light); margin-top:3px;}
  .stamp-sm{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    border:2px solid var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces',serif; font-weight:700; font-size:12px;
    color:var(--gold); background:var(--paper-2);
    align-self:center; margin-right:2px;
  }

  nav.tabs{
    display:flex; flex-direction:column; gap:2px; padding:6px 12px;
    flex:1 1 auto; min-height:0;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.28) transparent;
  }
  nav.tabs::-webkit-scrollbar{ width:6px; }
  nav.tabs::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.28); border-radius:3px; }
  nav.tabs::-webkit-scrollbar-track{ background:transparent; }
  /* El pie de la barra no se encoge, para que el menú tenga su propio espacio de desplazamiento */
  .sidebar .sidebar-foot, .sidebar .tema-btn{ flex:0 0 auto; }
  nav.tabs button{
    all:unset;
    display:flex; align-items:center; gap:10px;
    padding:11px 14px;
    border-radius:2px;
    color:#C7D0C3;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    border-left:2px solid transparent;
    transition:background .15s;
  }
  nav.tabs button .folio{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:rgba(220,227,217,0.42); width:16px;}
  nav.tabs button:hover{ background:rgba(255,255,255,0.05); }
  nav.tabs button.active{
    background:rgba(201,160,95,0.10);
    border-left:2px solid var(--gold-light);
    color:#F5F1E6;
  }
  nav.tabs button.active .folio{ color:var(--gold-light); }
  #busqueda-global-resultados{
    position:absolute; top:100%; left:16px; right:16px; z-index:50;
    background:var(--surface); border-radius:2px; box-shadow:0 8px 24px rgba(0,0,0,0.35);
    max-height:320px; overflow-y:auto;
  }
  #busqueda-global-resultados:empty{ display:none; }
  .busqueda-resultado-grupo{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding:8px 12px 4px; }
  .busqueda-resultado-item{ display:block; width:100%; text-align:left; padding:8px 12px; border:none; background:none; font:inherit; cursor:pointer; border-bottom:1px solid var(--rule); }
  .busqueda-resultado-item:hover{ background:var(--paper-2); }
  .busqueda-resultado-item .nombre{ font-size:13px; color:var(--ink); font-weight:600; }
  .busqueda-resultado-item .detalle{ font-size:11px; color:var(--ink-soft); }
  .busqueda-sin-resultados{ padding:12px; font-size:12.5px; color:var(--ink-soft); }
  .sidebar-foot{
    padding:14px 20px 0;
    border-top:1px solid rgba(255,255,255,0.08);
    font-size:11px;
    color:rgba(220,227,217,0.45);
  }

  main{ flex:1; min-width:0; padding:32px 40px 60px; max-width:1180px; }
  .page-head{ margin-bottom:26px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;}
  .page-head h1{ font-size:26px; margin:0 0 4px; }
  .page-head .eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-texto); font-weight:600; margin-bottom:6px;}
  .page-head p.desc{ margin:0; color:var(--ink-soft); font-size:13.5px; }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 16px;
    border-radius:2px;
    border:1px solid var(--ink);
    background:var(--ink);
    color:var(--paper);
    font-size:13px; font-weight:600;
    white-space:nowrap;
  }
  .btn:hover{ background:#2C3B30; }
  .btn.secondary{ background:transparent; color:var(--ink); border:1px solid var(--rule-strong); }
  .btn.secondary:hover{ background:var(--paper-2); }
  .btn.gold{ background:#916A2C; border-color:#916A2C; color:#fff; }
  .btn.gold:hover{ background:#93692F; }
  .btn.danger{ background:transparent; border:1px solid var(--red); color:var(--red); }
  .btn.danger:hover{ background:var(--red-soft); }
  .btn.whatsapp{ background:#25D366; border-color:#25D366; color:#fff; }
  .btn.whatsapp:hover{ background:#1EBE5A; }
  .btn.small{ padding:6px 11px; font-size:12px; }
  .btn:disabled{ opacity:.45; cursor:not-allowed; }
  .link-btn{ all:unset; cursor:pointer; color:var(--gold-texto); font-weight:600; font-size:12.5px; }
  .link-btn:hover{ text-decoration:underline; }

  /* ---------- Cards / stat grid ---------- */
  .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(186px,1fr)); gap:14px; margin-bottom:30px; }
  @media (max-width:700px){ .stat-grid{ grid-template-columns:repeat(2,1fr);} }
  .charts-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-bottom:24px; align-items:stretch; }
  .charts-grid .panel{ margin-bottom:0; }
  @media (max-width:820px){ .charts-grid{ grid-template-columns:1fr; } }
  .stat-card{
    background:var(--surface);
    border:1px solid var(--rule);
    border-top:3px solid var(--gold);
    border-radius:var(--radius);
    padding:16px 18px;
    box-shadow:var(--shadow);
  }
  .stat-card .label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:600; margin-bottom:8px;}
  .stat-card .value{ font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600; color:var(--ink); }
  .stat-card .value.red{ color:var(--red); }
  .stat-card .foot{ margin-top:6px; font-size:11.5px; color:var(--ink-soft); }

  .panel{
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    margin-bottom:24px;
  }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--rule); gap:12px; flex-wrap:wrap;}
  .panel-head h3{ margin:0; font-size:16px; }
  .panel-body{ padding:18px 20px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .panel-body.pad0{ padding:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.ledger{ min-width:520px; }

  /* ---------- Ledger table ---------- */
  table.ledger{ width:100%; border-collapse:collapse; font-size:13px; }
  table.ledger thead th{
    text-align:left;
    font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-soft);
    padding:9px 14px;
    background:var(--paper-2);
    border-bottom:1px solid var(--rule-strong);
    font-weight:600;
    white-space:nowrap;
  }
  table.ledger tbody td{
    padding:10px 14px;
    border-bottom:1px solid var(--rule);
    vertical-align:middle;
  }
  table.ledger tbody tr:nth-child(even){ background:rgba(201,178,125,0.045); }
  table.ledger tbody tr:hover{ background:rgba(168,124,63,0.07); }
  table.ledger td.num{ font-family:'IBM Plex Mono',monospace; text-align:right; font-variant-numeric:tabular-nums; }
  table.ledger td.ingreso{ color:var(--green); font-family:'IBM Plex Mono',monospace; text-align:right; }
  table.ledger td.egreso{ color:var(--red); font-family:'IBM Plex Mono',monospace; text-align:right; }
  table.ledger tr.row-atrasada{ background:var(--red-soft) !important; }
  table.ledger tr.row-pagada td{ color:var(--ink-soft); }

  .pill{ display:inline-block; padding:2.5px 9px; border-radius:20px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
  .pill.pendiente{ background:var(--amber-soft); color:var(--amber); }
  .pill.pagada{ background:var(--green-soft); color:var(--green); }
  .pill.atrasada{ background:var(--red-soft); color:var(--red); }
  .pill.activo{ background:var(--green-soft); color:var(--green); }
  .pill.cancelado{ background:#e4e4e0; color:#67675f; }
  .pill.refinanciado{ background:#E4EDF3; color:#2F5D74; }
  .pill.parcial{ background:#E4EDF3; color:#2F5D74; }
  .pill.cancelada{ background:#e4e4e0; color:#67675f; }
  .pill.solvente{ background:var(--green-soft); color:var(--green); }
  .pill.mora{ background:var(--red-soft); color:var(--red); }
  .pill.sin-credito{ background:#e4e4e0; color:#67675f; }
  .pill.disponible{ background:var(--green-soft); color:var(--green); }
  .pill.en-promesa{ background:var(--amber-soft); color:var(--amber); }
  .pill.vendida{ background:#e4e4e0; color:#67675f; }
  .pill.alquilada{ background:#E4EDF3; color:#2F5D74; }
  .pill.hipotecada{ background:var(--red-soft); color:var(--red); }

  .filter-chips{ display:flex; gap:6px; flex-wrap:wrap; }
  .filter-chips button{
    all:unset; cursor:pointer; padding:6px 12px; border-radius:20px; font-size:12px; font-weight:600;
    border:1px solid var(--rule-strong); color:var(--ink-soft);
  }
  .filter-chips button.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

  .empty{ text-align:center; padding:46px 20px; color:var(--ink-soft); }
  .empty .display{ font-size:18px; margin-bottom:6px; color:var(--ink); }
  .empty p{ font-size:13px; margin:0 0 16px; }

  /* ---------- Forms ---------- */
  form.stack{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 16px; }
  form.stack .full{ grid-column:1/-1; }
  @media (max-width:640px){ form.stack{ grid-template-columns:1fr; } }
  .field label{ display:block; font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
  .field input, .field select, .field textarea{
    width:100%;
    padding:9px 11px;
    border:1px solid var(--rule-strong);
    border-radius:2px;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:13.5px;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:2px solid var(--gold-light); outline-offset:1px; background:var(--surface);
  }
  .field .hint{ font-size:11px; color:var(--ink-soft); margin-top:4px;}
  .form-actions{ grid-column:1/-1; display:flex; gap:10px; margin-top:4px; }

  .toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .toolbar input[type=search], .toolbar input[type=month]{
    padding:8px 11px; border:1px solid var(--rule-strong); border-radius:2px; background:var(--paper); font-size:13px; min-width:190px;
  }

  .credito-card{
    border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow);
    color:var(--ink);
    padding:16px 18px; margin-bottom:12px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center;
  }
  .credito-card .cinfo .codigo{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gold-texto); font-weight:600; letter-spacing:.03em;}
  .credito-card .cinfo .nombre{ font-family:'Fraunces',serif; font-size:16.5px; font-weight:600; margin:2px 0 4px;}
  .credito-card .cinfo .meta{ font-size:12.5px; color:var(--ink-soft); }
  body.tema-oscuro .credito-card .cinfo .nombre{ color:#F1F5F0; }
  body.tema-oscuro .credito-card .cinfo .meta,
  body.tema-oscuro .credito-card .cnums .n label{ color:#B9C9BC; }
  body.tema-oscuro .credito-card .cnums .n span{ color:#F1F5F0; }
  body.tema-oscuro .credito-card .cinfo .codigo{ color:var(--gold-light); }
  .credito-card .cnums{ display:flex; gap:26px; }
  .credito-card .cnums .n label{ display:block; font-size:10px; text-transform:uppercase; color:var(--ink-soft); letter-spacing:.05em; margin-bottom:2px;}
  .credito-card .cnums .n span{ font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; }
  .cactions{ display:flex; gap:8px; flex-wrap:wrap; }
  .credito-card .cactions{ display:flex; gap:8px; }

  .banner{ padding:10px 16px; border-radius:2px; font-size:13px; margin-bottom:18px; border:1px solid; display:flex; justify-content:space-between; gap:12px; align-items:center;}
  .banner.warn{ background:var(--amber-soft); border-color:var(--amber); color:#6E4A18; }
  .banner.err{ background:var(--red-soft); border-color:var(--red); color:var(--red); }
  .banner.ok{ background:var(--green-soft); border-color:var(--green); color:var(--green); }

  .detail-back{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); margin-bottom:14px;}
  .detail-back button{ all:unset; cursor:pointer; color:var(--gold-texto); font-weight:600; }

  .kv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:6px;}
  @media (max-width:800px){ .kv-grid{ grid-template-columns:repeat(2,1fr);} }
  .kv-grid .kv label{ display:block; font-size:10.5px; text-transform:uppercase; color:var(--ink-soft); letter-spacing:.05em; margin-bottom:4px;}
  .kv-grid .kv .v{ font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:600;}

  .inline-pay-form{ background:var(--paper-2); border-top:1px solid var(--rule); padding:12px 14px; display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;}
  .inline-pay-form .field{ min-width:140px; }

  footer.brandfoot{ margin-top:30px; padding-top:16px; border-top:1px solid var(--rule); font-size:11px; color:var(--ink-soft); display:flex; justify-content:space-between; }

  @media (prefers-reduced-motion:reduce){ *{transition:none !important;} }

  /* ---------- Recibo de pago ---------- */
  .recibo-backdrop{
    position:fixed; inset:0; background:rgba(20,26,20,0.55);
    display:flex; align-items:flex-start; justify-content:center;
    padding:36px 16px; overflow-y:auto; z-index:200;
  }
  .recibo-card{
    background:#fff; width:100%; max-width:420px; border-radius:4px;
    box-shadow:0 12px 40px rgba(0,0,0,0.28);
    border:1px solid var(--rule);
    overflow:hidden;
  }
  .recibo-head{
    background:linear-gradient(180deg,var(--cover),var(--cover-2));
    color:#F2EFE6; padding:20px 24px; text-align:center;
  }
  .recibo-head .stamp{ margin:0 auto 8px; }
  .recibo-head .titulo{ font-family:'Fraunces',serif; font-size:16px; font-weight:600; }
  .recibo-head .sub{ font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--gold-light); margin-top:3px; }
  .recibo-num{ text-align:center; padding:10px 24px 0; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); }
  .recibo-body{ padding:14px 24px 22px; }
  .recibo-row{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed var(--rule); font-size:13px; }
  .recibo-row .k{ color:var(--ink-soft); }
  .recibo-row .v{ font-family:'IBM Plex Mono',monospace; font-weight:600; text-align:right; }
  .recibo-sep{ border:none; border-top:1px solid var(--rule-strong); margin:12px 0; }
  .recibo-total{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; }
  .recibo-total .k{ font-family:'Fraunces',serif; font-size:15px; font-weight:600; }
  .recibo-total .v{ font-family:'IBM Plex Mono',monospace; font-size:19px; font-weight:700; color:var(--green); }
  .recibo-saldo{ background:var(--paper-2); border-radius:2px; padding:10px 14px; margin-top:6px; display:flex; justify-content:space-between; align-items:center; }
  .recibo-saldo .k{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
  .recibo-saldo .v{ font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:700; }
  .recibo-firma{ margin-top:20px; padding-top:14px; border-top:1px dashed var(--rule); font-size:12px; color:var(--ink-soft); }
  .recibo-firma .nombre{ font-family:'Fraunces',serif; color:var(--ink); font-size:14px; font-weight:600; margin-top:2px; }
  .recibo-enviar{ padding:14px 24px 4px; border-top:1px dashed var(--rule); margin-top:4px; display:flex; flex-direction:column; gap:10px; }
  .recibo-enviar .titulo-envio{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:600; }
  .recibo-enviar-row{ display:flex; gap:8px; }
  .recibo-enviar-row input{ flex:1; min-width:0; padding:8px 10px; border:1px solid var(--rule-strong); border-radius:2px; background:var(--paper); font-family:'Inter',sans-serif; font-size:13px; }
  .recibo-enviar-row input:focus{ outline:2px solid var(--gold-light); outline-offset:1px; background:var(--surface); }
  .recibo-enviar-row .btn{ white-space:nowrap; flex-shrink:0; }
  .recibo-actions{ display:flex; flex-wrap:wrap; gap:10px; padding:0 24px 22px; }
  .recibo-actions .btn{ flex:1 1 120px; justify-content:center; }
  .recibo-actions .btn.whatsapp{ flex-basis:100%; }

  @media print{
    @page{ size: auto; margin: 8mm 14mm; }
    body *{ visibility:hidden; }
    #recibo-root, #recibo-root *{ visibility:visible; }
    #recibo-root{ position:absolute; top:0; left:0; width:100%; }
    .recibo-backdrop{ position:static; background:none; padding:0; display:block; }
    .recibo-card{
      box-shadow:none; border:1px solid #999; max-width:340px; width:340px; margin:0 auto;
      font-size:12px; page-break-inside:avoid;
    }
    .recibo-head{ padding:12px 16px; }
    .recibo-head .titulo{ font-size:14px; }
    .recibo-num{ padding:6px 16px 0; font-size:10.5px; }
    .recibo-body{ padding:8px 16px 12px; }
    .recibo-row{ padding:4px 0; font-size:11px; }
    .recibo-total{ padding:6px 0; }
    .recibo-total .k{ font-size:13px; }
    .recibo-total .v{ font-size:15px; }
    .recibo-saldo{ padding:7px 11px; margin-top:4px; }
    .recibo-saldo .v{ font-size:13px; }
    .recibo-firma{ margin-top:10px; padding-top:8px; font-size:10.5px; }
    .recibo-firma .nombre{ font-size:12px; }
    .recibo-actions{ display:none; }
    .no-print, .doc-actions{ display:none !important; }
    /* Impresión rápida: se oculta la aplicación completa y solo se imprime la copia preparada */
    body.tema-oscuro{
      --paper:#EFEAE0; --paper-2:#E7E1D3; --ink:#1E2A22; --ink-soft:#4B5A4F;
      --rule:#B9CBB9; --rule-strong:#8FA98F; --cover:#16211B; --cover-2:#1E2E24; --gold-texto:#856021;
      --surface:#ffffff; --surface-2:#F4F1E8;
      --green:#2F5D45; --green-soft:#DCE7DA; --red:#8B3A3A; --red-soft:#F0DBD6;
      --amber:#7E5316; --amber-soft:#F1E3C7;
      background:#fff; color:#1E2A22;
    }
    body.imprimiendo > *{ display:none !important; }
    body.imprimiendo > #print-root{ display:block !important; position:static; }
    body.imprimiendo #print-root, body.imprimiendo #print-root *{ visibility:visible !important; }
    #print-root .recibo-card{ box-shadow:none; border:1px solid #999; width:340px; max-width:340px; margin:0 auto; font-size:12px; }
    #print-root .doc-card{ box-shadow:none; border:none; max-width:100%; width:100%; }
    #print-root .recibo-actions, #print-root .recibo-enviar, #print-root .doc-actions, #print-root .no-print{ display:none !important; }
    .print-copia{ page-break-inside:avoid; break-inside:avoid; padding-bottom:4mm; }
    .print-etiqueta{ text-align:center; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#555; margin:0 0 4px; }
    .print-corte{ border-top:1px dashed #9a9a9a; width:92%; margin:4mm auto; }
    /* Las dos copias del recibo deben caber en una sola hoja */
    #print-root.print-escalado{ transform:scale(var(--print-escala,1)); transform-origin:top center; }
    #print-root .recibo-head{ padding-top:10px; padding-bottom:8px; }
    #print-root .recibo-body{ padding-top:8px; padding-bottom:8px; }
    #print-root .recibo-row{ padding:2.5px 0; }
    #print-root .recibo-firma{ margin-top:12px; }
    @page{ margin:10mm; }
    .recibo-enviar{ display:none; }
    #estadocuenta-root, #estadocuenta-root *{ visibility:visible; }
    #estadocuenta-root{ position:absolute; top:0; left:0; width:100%; }
    .doc-backdrop{ position:static; background:none; padding:0; display:block; }
    .doc-card{ box-shadow:none; border:none; max-width:100%; margin:0 auto; }
    .doc-actions{ display:none; }
    #reporte-root, #reporte-root *{ visibility:visible; }
    #reporte-root{ position:absolute; top:0; left:0; width:100%; }
    #contrato-root, #contrato-root *{ visibility:visible; }
    #contrato-root{ position:absolute; top:0; left:0; width:100%; }
  }

  /* ---------- Estado de cuenta ---------- */
  .doc-backdrop{ position:fixed; inset:0; background:rgba(20,26,20,0.55); display:flex; align-items:flex-start; justify-content:center; padding:36px 16px; overflow-y:auto; z-index:200; }
  .doc-card{ background:#fff; width:100%; max-width:640px; border-radius:4px; box-shadow:0 12px 40px rgba(0,0,0,0.28); border:1px solid var(--rule); overflow:hidden; }
  .doc-body{ padding:20px 26px; }
  .doc-credito-block{ border:1px solid var(--rule); border-radius:3px; margin-bottom:16px; overflow:hidden; }
  .doc-credito-head{ background:var(--paper-2); padding:10px 14px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
  .doc-actions{ display:flex; gap:10px; padding:0 26px 22px; }
  .doc-actions .btn{ flex:1; justify-content:center; }

  /* ---------- Autenticación ---------- */
  /* La pantalla de acceso ocupa la ventana completa y queda centrada, sin
     depender de cómo esté maquetado el contenedor de la aplicación. */
  .auth-shell{
    position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:200;
    width:100%; min-height:100vh; min-height:100dvh;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper); padding:24px;
    overflow-y:auto;
  }
  .auth-shell > .auth-card{ margin:auto; }
  .auth-card{ width:100%; max-width:400px; background:var(--surface); border:1px solid var(--rule); border-radius:4px; box-shadow:var(--shadow); overflow:hidden; }
  .auth-head{ background:linear-gradient(180deg,var(--cover),var(--cover-2)); color:#F2EFE6; padding:28px 24px; text-align:center; }
  .auth-head .stamp{ margin:0 auto 10px; }
  .auth-head .titulo{ font-family:'Fraunces',serif; font-size:17px; font-weight:600; line-height:1.25; }
  .auth-head .sub{ font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--gold-light); margin-top:4px; }
  .auth-body{ padding:24px; }
  .auth-body .field{ margin-bottom:14px; }
  .auth-body .field label{ display:block; font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
  .auth-body .field input, .auth-body .field select{
    width:100%; padding:10px 12px; border:1px solid var(--rule-strong); border-radius:2px; background:var(--paper); font-family:'Inter',sans-serif; font-size:14px;
  }
  .auth-body .field input:focus, .auth-body .field select:focus{ outline:2px solid var(--gold-light); outline-offset:1px; background:var(--surface); }
  .auth-body .btn{ width:100%; justify-content:center; margin-top:4px; }
  .auth-links{ text-align:center; margin-top:16px; font-size:12.5px; }
  .auth-error{ background:var(--red-soft); color:var(--red); border:1px solid var(--red); border-radius:2px; padding:9px 12px; font-size:12.5px; margin-bottom:14px; }
  .auth-hint{ background:var(--paper-2); border-radius:2px; padding:10px 12px; font-size:12.5px; color:var(--ink-soft); margin-bottom:14px; }
  .rol-badge{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-left:6px; }
  .rol-badge.administrador{ background:var(--gold-light); color:#3B2A0F; }
  .rol-badge.invitado{ background:#e4e4e0; color:#5a5a52; }

  @media (max-width:820px){
    #app{ flex-direction:column; }
    .sidebar{ position:relative; height:auto; width:100%; flex-direction:row; align-items:center; padding:12px 14px; overflow-x:auto;}
    .brand{ border:none; padding:0 14px 0 0; margin:0;}
    .sidebar-foot{ display:none; }
    nav.tabs{ flex-direction:row; padding:0; }
    nav.tabs button{ white-space:nowrap; border-left:none; border-bottom:2px solid transparent;}
    nav.tabs button.active{ border-left:none; border-bottom:2px solid var(--gold-light);}
    main{ padding:22px 16px 50px; }
    .stat-grid{ grid-template-columns:1fr 1fr; }
    .stat-card .value{ font-size:19px; }
    /* Evita que iOS haga zoom automático al enfocar un campo (ocurre con font-size menor a 16px) */
    .field input, .field select, .field textarea,
    .toolbar input[type=search], .toolbar input[type=month],
    .recibo-enviar-row input{ font-size:16px; }
    /* Área táctil más cómoda para botones en pantallas táctiles */
    .btn{ padding:11px 16px; min-height:44px; }
    .btn.small{ padding:8px 13px; min-height:38px; }
    .link-btn{ padding:6px 2px; display:inline-block; }
    .toolbar{ gap:8px; }
    .toolbar input[type=search], .toolbar input[type=month]{ min-width:0; flex:1 1 160px; }
    .page-head > .btn{ flex:1 1 100%; }
    .page-head > div:last-child{ width:100%; }
    .page-head > div:last-child .btn{ flex:1; }
  }
  @media (max-width:460px){
    .stat-grid{ grid-template-columns:1fr; }
  }

  /* ---------- Accesibilidad: estados de enfoque visibles ---------- */
  button:focus-visible, a:focus-visible, .link-btn:focus-visible,
  input:focus-visible, select:focus-visible, textarea:focus-visible,
  .filter-chips button:focus-visible, nav.tabs button:focus-visible,
  .credito-card:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  .sidebar *:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 2px;
  }

  /* ---------- Ordenamiento de columnas y paginación ---------- */
  .th-sort{ background:none; border:none; font:inherit; font-weight:inherit; color:inherit; cursor:pointer; padding:0; text-align:left; white-space:nowrap; }
  .th-sort:hover{ color:var(--gold-texto); }
  .paginacion{ display:flex; align-items:center; justify-content:center; gap:16px; padding:14px 20px; font-size:12.5px; color:var(--ink-soft); }

  /* ---------- Diálogos propios (reemplazan alert/confirm/prompt) ---------- */
  .dialogo-backdrop{ position:fixed; inset:0; background:rgba(20,26,20,0.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:300; }
  .dialogo-card{ background:var(--surface); width:100%; max-width:420px; border-radius:4px; box-shadow:0 12px 40px rgba(0,0,0,0.3); border:1px solid var(--rule); padding:22px 24px; }
  .dialogo-mensaje{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink); white-space:pre-line; }
  .dialogo-acciones{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
  .dialogo-acciones .btn{ min-width:90px; justify-content:center; }

#print-root{ display:none; }

  /* ================= Tema oscuro ================= */
  body.tema-oscuro{
    --paper:#131A15;
    --paper-2:#1C261F;
    --ink:#E7EDE6;
    --ink-soft:#A6B6A9;
    --rule:#2F3F34;
    --rule-strong:#4A6150;
    --cover:#0D1410;
    --cover-2:#151F19;
    --gold:#C9A05F;
    --gold-texto:#DEBD82;
    --gold-light:#DEBD82;
    --green:#7FC49C;
    --green-soft:#1D3A2B;
    --red:#E29393;
    --red-soft:#3B2222;
    --amber:#DFB365;
    --amber-soft:#3A2E17;
    --surface:#1B241D;
    --surface-2:#222E25;
    --shadow: 0 2px 12px rgba(0,0,0,0.45);
  }
  /* Cualquier tarjeta con fondo propio sigue la superficie del tema */
  body.tema-oscuro .credito-card,
  body.tema-oscuro .cuota-card,
  body.tema-oscuro .cliente-card,
  body.tema-oscuro .prop-card,
  body.tema-oscuro .kv,
  body.tema-oscuro .empty{ background:var(--surface); }
  body.tema-oscuro table.ledger thead th{ background:var(--surface-2); }
  body.tema-oscuro table.ledger tbody tr:nth-child(even){ background:rgba(255,255,255,0.02); }
  body.tema-oscuro .credito-card:hover,
  body.tema-oscuro .panel .cuota-card:hover{ background:var(--surface-2); }
  body.tema-oscuro .field input:focus,
  body.tema-oscuro .field select:focus,
  body.tema-oscuro .field textarea:focus,
  body.tema-oscuro .auth-body .field input:focus,
  body.tema-oscuro .auth-body .field select:focus,
  body.tema-oscuro .recibo-enviar-row input:focus{ background:var(--paper-2); }
  body.tema-oscuro .field input, body.tema-oscuro .field select, body.tema-oscuro .field textarea,
  body.tema-oscuro .auth-body .field input, body.tema-oscuro .auth-body .field select{ background:var(--paper-2); color:var(--ink); }
  body.tema-oscuro table.ledger tbody tr:hover{ background:rgba(201,160,95,0.10); }
  body.tema-oscuro .pill.cancelado, body.tema-oscuro .pill.cancelada,
  body.tema-oscuro .pill.sin-credito, body.tema-oscuro .pill.vendida,
  body.tema-oscuro .rol-badge.invitado{ background:#2C3730; color:#B9C6BB; }
  body.tema-oscuro .pill.refinanciado, body.tema-oscuro .pill.parcial,
  body.tema-oscuro .pill.alquilada{ background:#1F3340; color:#9CC6DD; }
  body.tema-oscuro .btn:hover{ background:#2C3B30; }
  body.tema-oscuro .btn.gold{ background:#C9A05F; border-color:#C9A05F; color:#16211B; }
  body.tema-oscuro ::selection{ background:var(--gold); color:#0D1410; }
  body.tema-oscuro input[type="date"], body.tema-oscuro input[type="month"]{ color-scheme:dark; }
  /* Los documentos (recibos, contratos, estados de cuenta) siempre se ven como papel */
  body.tema-oscuro .recibo-card, body.tema-oscuro .doc-card, body.tema-oscuro #print-root{
    --paper:#EFEAE0; --paper-2:#E7E1D3; --ink:#1E2A22; --ink-soft:#4B5A4F; --gold-texto:#856021;
    --surface:#ffffff; --surface-2:#F4F1E8;
    --rule:#B9CBB9; --rule-strong:#8FA98F; --green:#2F5D45; --green-soft:#DCE7DA;
    --red:#8B3A3A; --red-soft:#F0DBD6; --amber:#7E5316; --amber-soft:#F1E3C7;
    background:#fff; color:#1E2A22;
  }
  /* Botón para cambiar de tema */
  .tema-btn{
    all:unset; cursor:pointer; display:flex; align-items:center; gap:7px;
    padding:7px 12px; margin:6px 16px 0; border-radius:20px;
    border:1px solid rgba(255,255,255,0.18); color:#D7DFD5;
    font-size:11.5px; font-weight:600; letter-spacing:.04em;
  }
  .tema-btn:hover{ background:rgba(255,255,255,0.08); }
  @media (max-width:820px){ .tema-btn{ margin:0 8px; padding:6px 10px; white-space:nowrap; } }

  /* Aviso flotante cuando llegan datos de otro dispositivo y hay un formulario abierto */
  #aviso-datos-nuevos{
    position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
    z-index:300; display:flex; align-items:center; gap:12px;
    background:var(--cover); color:#F2EFE6; border:1px solid var(--gold);
    border-radius:24px; padding:10px 16px; font-size:12.5px;
    box-shadow:0 8px 28px rgba(0,0,0,0.3); max-width:92vw;
  }
  #aviso-datos-nuevos button{
    all:unset; cursor:pointer; color:var(--gold-light); font-weight:700; white-space:nowrap;
  }
  @media print{ #aviso-datos-nuevos{ display:none !important; } }

  /* ---------- Accesibilidad ---------- */
  :focus-visible{ outline:2px solid var(--gold-texto); outline-offset:2px; border-radius:2px; }
  body.tema-oscuro :focus-visible{ outline-color:var(--gold-light); }
  .solo-lectores{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  #globo-ayuda{
    position:fixed; z-index:400; max-width:260px; padding:8px 11px; border-radius:4px;
    background:var(--cover); color:#F2EFE6; font-size:12px; line-height:1.45; pointer-events:none;
    box-shadow:0 6px 20px rgba(0,0,0,0.28);
  }
  #globo-ayuda[hidden]{ display:none; }
  #atajos-backdrop{ position:fixed; inset:0; z-index:420; background:rgba(11,18,14,0.55); display:flex; align-items:center; justify-content:center; padding:20px; }
  #atajos-card{ background:var(--paper); color:var(--ink); border:1px solid var(--rule-strong); border-radius:4px; padding:22px 24px; max-width:460px; width:100%; box-shadow:var(--shadow); }
  #atajos-card h3{ margin:0 0 14px; font-family:'Fraunces',serif; font-size:17px; }
  #atajos-card table{ width:100%; border-collapse:collapse; font-size:13px; }
  #atajos-card td{ padding:5px 0; border-bottom:1px solid var(--rule); }
  #atajos-card kbd{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; background:var(--paper-2); border:1px solid var(--rule-strong); border-radius:3px; padding:2px 6px; }
  @media print{ #globo-ayuda, #atajos-backdrop{ display:none !important; } }

  /* ---------- Ajustes finos de color (tema claro y oscuro) ---------- */
  table.ledger tbody tr:nth-child(even){ background:var(--surface-2); }
  table.ledger thead th{ background:var(--surface-2); }
  .credito-card{ transition:background .12s ease, border-color .12s ease; }
  .credito-card:hover{ background:var(--surface-2); border-color:var(--rule-strong); }
  .stat-card{ transition:border-color .12s ease; }
  .stat-card:hover{ border-color:var(--rule-strong); }
  body.tema-oscuro .stat-card{ border-top-color:var(--gold); }
  body.tema-oscuro .banner.ok{ background:rgba(127,196,156,0.12); border-color:var(--green); color:#CDE8D8; }
  body.tema-oscuro .banner.err{ background:rgba(226,147,147,0.12); border-color:var(--red); color:#F0D2D2; }
  body.tema-oscuro .banner.warn{ background:rgba(223,179,101,0.12); border-color:var(--amber); color:#F0DCB8; }
  body.tema-oscuro .pill{ border:1px solid rgba(255,255,255,0.08); }
  body.tema-oscuro input::placeholder, body.tema-oscuro textarea::placeholder{ color:#7E8F82; }
  body.tema-oscuro .th-sort{ color:var(--ink-soft); }
  body.tema-oscuro hr, body.tema-oscuro .sep{ border-color:var(--rule); }

  .rol-badge.cobrador{ background:var(--amber-soft); color:var(--amber); }
  body.tema-oscuro .rol-badge.cobrador{ background:#3A2E17; color:#DFB365; }