/* Los cinco escalones de avance de un estatus (#315): rojo → verde brillante. */
.e0, .tx-pago-e0 {
  --etapa: #b42318;
  --etapa-tx: #ffffff;
}
.e1, .tx-pago-e1 {
  --etapa: #e8590c;
  --etapa-tx: #1a1a1c;
}
.e2, .tx-pago-e2 {
  --etapa: #f08c00;
  --etapa-tx: #1a1a1c;
}
.e3, .tx-pago-e3 {
  --etapa: #8bc34a;
  --etapa-tx: #1a1a1c;
}
.e4, .tx-pago-e4 {
  --etapa: #2ee07a;
  --etapa-tx: #1a1a1c;
}

/* Estilos de la Plataforma Madre.
   Vivían dentro de index.html (issue #26): con el CSS y el JS ahí dentro,
   el archivo llegaba a 5,210 líneas y ver la estructura de una tabla
   obligaba a navegar entre miles de líneas que no eran HTML. */

  /* Diseño nuevo (issue #199): los colores, la tipografía y las medidas
     vienen de la marca de la instalación, frontend/marcas/<marca>/marca.css
     (Taxpace o Solutions). Aquí solo se traducen a los nombres que la app ya
     usaba en cientos de lugares; --surface, --ink y --line ya llegan de la
     marca con el mismo nombre y significado. El tema oscuro lo trae la marca
     (:root[data-theme="dark"]) y estos nombres lo siguen solos. */
  :root {
    --bg: var(--surface-page);
    --surface-2: var(--neutral-bg);
    --surface-3: var(--surface-hover);
    --ink-soft: var(--ink-muted);
    --ink-faint: var(--line-strong);
    --accent: var(--brand);
    --accent-soft: var(--brand-tint);
    --accent-ink: var(--brand-text);
    --warn: var(--warning-text);
    --warn-soft: var(--warning-bg);
    --crit: var(--danger-text);
    --crit-soft: var(--danger-bg);
    --sidebar-bg: var(--surface);
    --sidebar-ink: var(--ink);
    --sidebar-ink-soft: var(--ink-muted);
    --sidebar-active: var(--brand);
    --sidebar-active-ink: var(--on-brand);
    --sidebar-hover: var(--surface-hover);
    --sidebar-line: var(--line);
    /* Lo que entra y lo que sale (#256): verde y rojo apagado de la marca. */
    --entra: var(--success-text);
    --sale: color-mix(in srgb, var(--danger-text) 78%, var(--ink-muted));
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
  }
  button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
  code, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

  .app {
    display: grid;
    grid-template-columns: 252px 1fr;
    gap: 20px;
    padding: 16px;
    height: 100vh;
    width: 100%;
    background: var(--bg);
  }

  /* ---- menú lateral ---- */
  .sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-ink);
    padding: 22px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: calc(100vh - 32px);
    overflow-y: auto;
    border-radius: var(--radius-lg);
  }
  .brand { padding: 0 14px 16px; }
  .brand-logo { display: block; }
  .brand-logo img { display: block; height: 34px; width: auto; max-width: 100%; }
  .brand-simbolo { display: none; }
  .brand-simbolo img { display: block; width: 44px; height: auto; margin: 0 auto; }
  /* Cada logo tiene su versión para fondo claro y para fondo oscuro. */
  .en-oscuro { display: none !important; }
  :root[data-theme="dark"] .en-claro { display: none !important; }
  :root[data-theme="dark"] .en-oscuro { display: block !important; }
  .navitem {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 9px 16px;
    border-radius: var(--radius-full);
    cursor: pointer;
    color: var(--sidebar-ink);
    font-size: 14.5px;
    font-weight: 600;
    user-select: none;
  }
  .navitem .ic, .btn-logout .ic {
    width: 20px; height: 20px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  }
  .navitem .ic { color: var(--sidebar-ink-soft); }
  .navitem:hover { background: var(--sidebar-hover); }
  .navitem.active { background: var(--sidebar-active); color: var(--sidebar-active-ink); }
  .navitem.active .ic { color: var(--sidebar-active-ink); }
  .navitem.hidden { display: none; }
  .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--sidebar-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .session-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--sidebar-ink-soft); padding: 0 10px; font-weight: 700; }
  .session-user { display: flex; align-items: center; gap: 10px; padding: 2px 10px; }
  .session-who { flex: 1; min-width: 0; }
  #userName { font-weight: 700; font-size: 13px; color: var(--sidebar-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #userRol { font-size: 11.5px; color: var(--sidebar-ink-soft); }
  .btn-logout { width: 100%; justify-content: center; }
  .session-hint { font-size: 11px; color: var(--sidebar-ink-soft); padding: 0 10px; line-height: 1.5; }
  .session-hint:empty { display: none; }

  /* ---- contenido ---- */
  .main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 32px);
    overflow: hidden;
  }
  .topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 16px;
    flex: 0 0 auto;
    flex-wrap: wrap;
  }
  .search-wrap { flex: 1; position: relative; max-width: 440px; min-width: 200px; }
  .search-wrap input {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px 10px 40px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--ink);
    outline: none;
    font-size: 14.5px;
  }
  .search-wrap input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
  .search-wrap::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background: var(--ink-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* Botones píldora del design system; 40px de alto para que el dedo atine en
     iPad y celular. */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--ink-strong);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
  }
  .btn:hover { border-color: var(--ink-faint); background: var(--surface-hover); }
  .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
  .btn.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
  .btn.ghost { border-color: transparent; background: transparent; color: var(--brand-text); }
  .btn.ghost:hover { background: var(--brand-tint); }
  .btn.small { min-height: 32px; padding: 5px 13px; font-size: 12.5px; }
  .btn.ok { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
  .btn:disabled { opacity: .45; cursor: not-allowed; }

  .content { padding: 4px 4px 60px; overflow-x: hidden; overflow-y: auto; flex: 1 1 auto; }
  .view { display: none; }
  .view.active { display: block; }

  h1.page-title {
    font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 600;
    letter-spacing: -0.015em; color: var(--ink-strong); margin: 0 0 4px;
  }
  p.page-sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 18px; max-width: 62ch; }
  .view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }

  /* ---- stat tiles ---- */
  .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
  .stat-tile {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
  }
  .stat-tile .lbl { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
  .stat-tile .val {
    font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 500;
    letter-spacing: -0.02em; color: var(--ink-strong); margin-top: 6px; font-variant-numeric: tabular-nums;
  }
  .stat-tile .sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

  .panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 20px 22px 22px;
    margin-bottom: 18px;
  }
  .panel h2 { font-family: var(--font-display); font-size: 17px; line-height: 24px; margin: 0 0 12px; font-weight: 600; color: var(--ink-strong); }
  .panel .h2row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
  /* Los botones del título bajan de renglón en celular en vez de empujar la página. */
  .panel .h2row > div { flex-wrap: wrap; }
  .panel .h2row h2 { margin: 0; }

  .bar-row { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12.5px; }
  .bar-row .bname { color: var(--ink-soft); }
  .bar-track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
  .bar-fill { height: 100%; border-radius: 4px; background: var(--accent); }
  .bar-row .bval { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; color: var(--ink); }

  /* ---- gráfica de barras verticales cronológica (día/semana/mes) ---- */
  .vbar-chart { display: flex; align-items: flex-end; gap: 5px; height: 170px; overflow-x: auto; padding: 4px 4px 28px; position: relative; }
  .vbar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 16px; height: 100%; flex: 1 0 auto; cursor: default; position: relative; }
  .vbar-fill { width: 68%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; transition: opacity .1s; }
  .vbar-col:hover .vbar-fill { opacity: .75; }
  .vbar-value { font-size: 9px; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-bottom: 2px; white-space: nowrap; line-height: 1; }
  .vbar-label {
    font-size: 9.5px; color: var(--ink-faint); margin-top: 6px; white-space: nowrap;
    /* Debajo de la barra, no encima: sobre el color de la barra no se leía (#289). */
    position: absolute; bottom: -24px; transform: rotate(-40deg) translateX(-6px); transform-origin: top left;
  }
  /* El botón de "elegir archivo" lo pinta el navegador en gris claro, aun en
     tema oscuro: aquí toma los colores de la marca (#289). */
  input[type="file"] { color: var(--ink-soft); }
  input[type="file"]::file-selector-button {
    background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-full);
    padding: 4px 12px; margin-right: 10px; font: inherit; font-weight: 600; cursor: pointer;
  }
  input[type="file"]::file-selector-button:hover { background: var(--surface-hover); }
  /* El botón propio de "Elegir archivos" (#446): el nativo dice "Choose Files"
     aunque la pantalla esté en español. El input queda oculto a la vista pero
     sigue recibiendo el foco; el anillo se le pinta al botón. */
  .archivo-propio { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
  .archivo-propio .archivo-input {
    position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-width: 0; min-height: 0; opacity: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: 0;
  }
  .archivo-propio .archivo-boton { margin: 0; color: var(--brand-text); border-color: var(--brand); }
  .archivo-propio .archivo-boton:hover { background: var(--brand-tint); }
  .archivo-propio .archivo-input:focus-visible + .archivo-boton { outline: 2px solid var(--focus); outline-offset: 2px; }
  .archivo-nombre { color: var(--ink-soft); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }

  /* ---- segmented control ---- */
  .segmented { display: inline-flex; border-radius: var(--radius-full); padding: 4px; background: var(--surface); gap: 2px; flex-wrap: wrap; }
  .segmented button {
    border: none; background: transparent; min-height: 34px; padding: 6px 14px; border-radius: var(--radius-full);
    font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  }
  .segmented button:hover { color: var(--ink-strong); background: var(--surface-hover); }
  .segmented button.active { background: var(--brand); color: var(--on-brand); }

  /* ---- table ---- */
  table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
  th { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  tr.row-click { cursor: pointer; }
  tr.row-click:hover td { background: var(--surface-3); }
  .ctb-clasif-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
  @media (max-width: 1023px) { .ctb-clasif-grid { grid-template-columns: minmax(0, 1fr); } }
  .ctb-mes-h { font-weight: 700; font-size: 13px; color: var(--accent); margin: 14px 0 4px; }
  .ctb-mes-h:first-child { margin-top: 0; }
  .ctb-com-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
  .ctb-com-row:last-child { border-bottom: none; }
  .table-wrap { overflow-x: auto; border-radius: var(--radius-lg); background: var(--surface); padding: 6px 12px; }
  .table-wrap table { overflow: hidden; }
  .table-wrap tr:last-child td { border-bottom: none; }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  /* Ícono canónico por estado — mismo glifo (y color) para el mismo estado en toda la plataforma. */
  .pill::before { font-size: 10px; font-weight: 800; line-height: 1; }
  .pill.ok::before { content: "\2713"; }       /* ✓ */
  .pill.warn::before { content: "\25CF"; }      /* ● */
  .pill.crit::before { content: "\2715"; }      /* ✕ */
  .pill.neutral::before { content: "\2013"; }   /* – */
  .pill.ok { background: var(--success-bg); color: var(--success-text); }
  .pill.warn { background: var(--warn-soft); color: var(--warn); }
  .pill.crit { background: var(--crit-soft); color: var(--crit); }
  .pill.e0, .pill.e1, .pill.e2, .pill.e3, .pill.e4 { background: var(--etapa); color: var(--etapa-tx); }
  .pill.neutral { background: var(--surface-2); color: var(--ink-soft); }

  .status-select {
    border: none; border-radius: 20px; padding: 3px 22px 3px 10px; font-size: 11px; font-weight: 600;
    cursor: pointer; appearance: none; -webkit-appearance: none;
    background-repeat: no-repeat; background-position: right 7px center; background-size: 9px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%238590a6' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  }
  /* Estatus y Estatus de pago se leen de un golpe, sin detenerse a leer el
     texto: color lleno. Cinco escalones con sentido de avance (#315), de rojo
     (atorado) a verde brillante (terminado), cada uno más claro que el
     anterior; la letra es blanca solo sobre el rojo y oscura en los demás,
     para que siempre pase contraste AA. Son los mismos en las dos marcas y en
     los dos temas. */
  .status-select.e0, .status-select.e1, .status-select.e2, .status-select.e3, .status-select.e4 {
    background-color: var(--etapa); color: var(--etapa-tx);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%231a1a1c' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  }
  .status-select.e0 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  }
  .status-select.neutral { background-color: var(--surface-2); color: var(--ink-soft); }
  .status-select[class*=" e"] option {
    /* El desplegable abierto lo pinta el sistema: ahí sí hace falta el color
       normal, o las opciones salen del color del escalón. */
    background: var(--surface); color: var(--ink);
  }
  .inline-date { border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 11px; color: var(--ink-soft); background: var(--surface); }
  .icon-btn {
    background: none; border: 1px solid var(--line); border-radius: var(--radius-full); cursor: pointer;
    min-width: 32px; min-height: 32px; padding: 4px 8px; font-size: 13px; color: var(--ink-soft); line-height: 1;
  }
  .icon-btn:hover { background: var(--surface-3); color: var(--ink); }

  .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--brand-tint); color: var(--brand-text);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; flex: 0 0 auto;
  }
  .avatar.emp { background: var(--surface-2); color: var(--ink-soft); border-radius: 8px; }
  .cell-name { display: flex; align-items: center; gap: 10px; }
  .cell-name .nm { font-weight: 600; }
  .cell-name .sub { font-size: 11.5px; color: var(--ink-faint); }

  /* ---- profile ---- */
  .profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .profile-id { display: flex; gap: 14px; align-items: center; }
  .profile-id .avatar { width: 52px; height: 52px; font-size: 17px; border-radius: 16px; }
  .profile-id h1 { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; color: var(--ink-strong); }
  .profile-id .meta-line { color: var(--ink-soft); font-size: 12.5px; margin-top: 3px; }
  /* minmax(0, …): la columna no crece con la tabla de servicios; la tabla se desliza dentro de su tarjeta. */
  .profile-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
  .profile-grid > * { min-width: 0; }
  .kv { display: flex; flex-direction: column; gap: 10px; }
  .kv .row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
  .kv .row:last-child { border-bottom: none; }
  .kv .row .k { color: var(--ink-soft); }
  .kv .row .v { font-weight: 600; text-align: right; }
  .ssn-mask { font-family: ui-monospace, monospace; }
  .reveal-link { font-size: 11px; color: var(--accent); cursor: pointer; font-weight: 600; margin-left: 6px; }

  .file-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
  .file-row:last-child { border-bottom: none; }
  .file-ic { width: 26px; height: 26px; border-radius: 6px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-soft); flex: 0 0 auto; }
  .file-row .fname { font-weight: 600; flex: 1; }
  .file-row .fmeta { color: var(--ink-faint); font-size: 11px; }

  /* ---- modal ---- */
  .overlay {
    position: fixed; inset: 0; background: rgba(8,14,30,0.45);
    display: none; align-items: flex-start; justify-content: center;
    padding: 20px 16px; overflow-y: auto; z-index: 50;
  }
  .overlay.open { display: flex; }
  #overlayCliente.open { z-index: 60; }
  /* El límite del plan sale encima de la ventana que lo provocó (#358). */
  #overlayLimitePlan.open { z-index: 70; }
  .modal {
    background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 580px;
    box-shadow: var(--shadow-md);
  }
  .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 14px; border-bottom: 1px solid var(--line); }
  .modal-head h2 { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 600; color: var(--ink-strong); }
  .modal-body { padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; max-height: 78vh; overflow-y: auto; }
  .modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 24px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label { font-size: 13px; font-weight: 600; color: var(--ink-strong); }
  .field input, .field select, .field textarea, .comision-row input, .comision-row select {
    min-height: 42px; padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); outline: none;
  }
  .field textarea { min-height: 84px; }
  /* En una fila de dos o tres campos, cada uno cabe en su columna: sin esto
     un desplegable con texto largo empujaba la fila fuera de la ventana en iPad. */
  .field input, .field select, .field textarea { width: 100%; min-width: 0; }
  .field-row > *, .field-row3 > * { min-width: 0; }
  .field input:focus, .field select:focus, .field textarea:focus, .comision-row input:focus, .comision-row select:focus {
    border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px;
  }
  .field-fixed {
    padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); font-weight: 600;
  }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .field-row3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
  .divider-lbl {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent);
    font-weight: 700; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line);
  }
  .comision-row { display: grid; grid-template-columns: 1.6fr 0.9fr 1.1fr auto; gap: 8px; align-items: center; }
  .sub-nombre { font-size: 13px; color: var(--ink); }
  .sufijo-comision { color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }

  /* Configuración de un trabajador: una tarjeta por tipo de servicio. La
     casilla da el acceso —completo, con todas sus subcategorías— y adentro
     cada formulario lleva su propia comisión. */
  .cat-config { border: 1px solid var(--line); border-radius: 9px; margin-top: 8px; background: var(--surface-3); }
  .cat-config.activa { border-color: var(--accent); background: var(--surface); }
  .cat-config-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; }
  .cat-config-head input { width: 15px; height: 15px; flex: none; }
  .cat-config-nombre { font-weight: 700; font-size: 13.5px; flex: 1; }
  .cat-config-body { padding: 4px 12px 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
  .cat-config-body .bulk-row { padding-bottom: 7px; margin-bottom: 3px; border-bottom: 1px dashed var(--line); }
  /* Un campo que quedó en blanco al intentar guardar. */
  .comision-row input.falta { border-color: var(--crit); background: var(--crit-soft); }
  .rm-btn { color: var(--crit); background: none; border: none; cursor: pointer; font-size: 16px; padding: 6px; line-height: 1; }
  .hint { font-size: 11px; color: var(--ink-faint); }

  /* ---- pestañas horizontales secundarias (ej. línea dentro de Seguimiento) ---- */
  .subtabs {
    display: flex; width: fit-content; max-width: 100%; gap: 4px; padding: 4px; margin: 4px 0 14px;
    flex-wrap: wrap; background: var(--surface); border-radius: var(--radius-lg);
  }
  .subtab {
    min-height: 36px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
    cursor: pointer; border-radius: var(--radius-full); user-select: none; white-space: nowrap;
  }
  .subtab:hover { color: var(--ink-strong); background: var(--surface-hover); }
  .subtab.active { background: var(--brand); color: var(--on-brand); }

  /* ---- alternar granularidad de una gráfica (día/semana/mes) ---- */
  .chart-toggle { display: flex; gap: 4px; }
  .chart-toggle button {
    padding: 5px 13px; font-size: 12px; font-weight: 600; border: 1px solid var(--line);
    background: var(--surface); border-radius: var(--radius-full); cursor: pointer; color: var(--ink-soft);
  }
  .chart-toggle button.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

  /* ---- tiles comparativo (dos periodos lado a lado) ---- */
  .compare-tile { border-radius: var(--radius-md); padding: 14px 16px; background: var(--surface); }
  .compare-tile .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
  .compare-tile .row { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
  .compare-tile .valA, .compare-tile .valB { font-size: 18px; font-weight: 700; }
  .compare-tile .delta { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
  .compare-tile .delta.up { background: var(--accent-soft); color: var(--accent-ink); }
  .compare-tile .delta.down { background: var(--crit-soft); color: var(--crit); }

  /* ---- multi-select desplegable (ej. tipo de servicio en Estadísticas) ---- */
  .multiselect { position: relative; }
  .ms-toggle { width: 100%; justify-content: space-between; display: flex; text-align: left; }
  .ms-panel {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16); max-height: 220px; overflow-y: auto; padding: 6px;
  }
  .ms-panel.open { display: block; }
  .ms-panel label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 12.5px; cursor: pointer; border-radius: 5px; }
  .ms-panel label:hover { background: var(--surface-3); }

  /* ---- attach files / camera ---- */
  .attach-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .upload-menu-wrap { position: relative; }
  .upload-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16); padding: 4px; min-width: 160px;
  }
  .upload-menu.open { display: block; }
  .upload-menu button {
    display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 7px 8px; font-size: 12.5px; border-radius: 5px; color: var(--ink);
  }
  .upload-menu button:hover { background: var(--surface-3); }
  .attach-chip {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface-3); font-size: 12px;
  }
  .attach-chip img { width: 26px; height: 26px; object-fit: cover; border-radius: 4px; }

  /* ---- workers ---- */
  .worker-card { background: var(--surface); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 10px; }
  .worker-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .worker-name { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13.5px; }
  .config-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface-3); border: 1px solid var(--line); border-radius: 20px;
    padding: 4px 10px 4px 6px; font-size: 11.5px; margin: 6px 6px 0 0;
  }
  .config-chip .pct { font-family: ui-monospace, monospace; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border-radius: 10px; padding: 1px 7px; }
  .perm-chip { font-size: 10.5px; font-family: ui-monospace, monospace; padding: 2px 7px; border-radius: 10px; background: var(--surface-2); color: var(--ink-faint); margin-left: 6px; }
  .perm-chip.on { background: var(--accent-soft); color: var(--accent-ink); }

  /* ---- nomina ---- */
  /* El resumen de nómina se lee de un vistazo: filas apretadas y solo lo que
     hace falta para decidir a quién le toca pago. El desglose se despliega. */
  .tabla-compacta th, .tabla-compacta td { padding: 4px 8px; font-size: 12px; line-height: 1.3; }
  .tabla-compacta tbody tr { cursor: pointer; }
  .tabla-compacta tbody tr:hover { background: var(--accent-soft); }
  .desglose td { background: var(--surface-hover); font-size: 12px; color: var(--ink-soft); }
  .semana-nomina { border: 1px solid var(--line, #e3e3e3); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
  .semana-nomina > .cab { display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding: 7px 12px; background: var(--accent-soft, #f2f6ff); font-weight: 700; font-size: 13px; }
  .pill-confirmado { font-size: 11.5px; font-weight: 700; border-radius: var(--radius-full); padding: 1px 9px;
    background: var(--success-bg); color: var(--success-text); }
  .pill-abierto { font-size: 11.5px; font-weight: 700; border-radius: var(--radius-full); padding: 1px 9px;
    background: var(--warning-bg); color: var(--warning-text); }

  .payee-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .payee-row:last-child { border-bottom: none; }
  .payee-left { display: flex; align-items: center; gap: 12px; }
  .payee-amt { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .payee-sub { font-size: 11px; color: var(--ink-faint); }

  .locked-box {
    text-align: center; padding: 60px 20px; color: var(--ink-soft);
  }
  .locked-box .ic { font-size: 30px; margin-bottom: 10px; }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }

  /* Andrés (2026-10-05): todo tiene que verse bien en iPad, de pie y
     acostado, además de escritorio y celular. Las mismas medidas que las
     pantallas del design system (docs/diseno/):
       escritorio      >= 1280  menú de 252
       iPad acostado   1024-1279  menú de 216
       iPad de pie     768-1023  solo íconos (72) y columnas apiladas
       celular         < 768     barra de íconos abajo */
  @media (max-width: 1279px) {
    .app { grid-template-columns: 216px 1fr; gap: 14px; padding: 12px; }
    .sidebar, .main { height: calc(100vh - 24px); }
    .brand-logo img { height: 28px; }
    .navitem { padding: 9px 14px; font-size: 14px; }
  }
  @media (max-width: 1023px) {
    .app { grid-template-columns: 72px 1fr; }
    .sidebar { padding: 16px 8px 12px; align-items: stretch; }
    .brand { padding: 0 0 12px; }
    .brand-logo { display: none; }
    .brand-simbolo { display: block; }
    .nav-label, .session-lbl, .session-who, .session-hint { display: none; }
    .navitem { justify-content: center; padding: 11px 0; gap: 0; }
    .session-user { justify-content: center; padding: 0; }
    .btn-logout { padding: 0; min-height: 40px; }
    .stat-row, .kpi-row { grid-template-columns: 1fr 1fr; }
    .profile-grid { grid-template-columns: minmax(0, 1fr); }
    .topbar .search-wrap { flex-basis: 100%; max-width: none; }
  }
  @media (max-width: 767px) {
    /* Una sola columna (el JS deja .app en display:grid al entrar). */
    .app { grid-template-columns: minmax(0, 1fr); padding: 10px 10px 84px; height: auto; min-height: 100vh; }
    .main { height: auto; overflow: visible; }
    .content { overflow: visible; padding: 4px 2px 24px; }
    /* El menú se vuelve la barra de abajo, como en una app del teléfono. */
    .sidebar {
      position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 45;
      flex-direction: row; align-items: center; gap: 2px;
      height: 64px; padding: 6px 8px; overflow-x: auto; overflow-y: hidden;
      border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    }
    .brand { display: none; }
    .navitem { flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 2px; min-width: 64px; min-height: 52px; padding: 4px 6px; border-radius: var(--radius-md); }
    .navitem .nav-label { display: block; font-size: 10.5px; font-weight: 600; max-width: 76px; }
    .sidebar-foot { flex-direction: row; margin: 0 0 0 4px; padding: 0 0 0 8px; border-top: 0; border-left: 1px solid var(--sidebar-line); gap: 6px; align-items: center; }
    .btn-logout { width: auto; min-width: 40px; }
    .field-row, .field-row3 { grid-template-columns: 1fr; }
    h1.page-title { font-size: 22px; line-height: 28px; }
    .overlay { padding: 10px 8px; }
    .by-twenty { display: none; }
  }

/* Vista lite del co-preparador: él no le cobra al cliente por nuestra
   plataforma, así que nada de dinero le aplica. Las columnas se ocultan por
   clase compartida entre <th> y <td>, no por posición: así no se pueden
   desalinear, que es el error clásico de esta tabla. */
.vista-lite .col-dinero { display: none !important; }

/* Resumen de nómina en dos columnas: la lista de trabajadores crece hacia
   abajo y robaba pantalla. En móvil vuelve a una sola, donde partirla no
   ayudaría. */
.resumen-dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 22px; }
@media (max-width: 900px) { .resumen-dos-columnas { grid-template-columns: minmax(0, 1fr); } }

/* El botón que despliega los recibos de un plan: antes era un triangulito
   suelto que se perdía entre los iconos del renglón. */
.btn-recibos { white-space: nowrap; font-weight: 700; }
.btn-recibos.abierto { background: var(--accent-soft, #e8eefc); border-color: var(--accent, #2b56c9); }

/* Resumen del recorte que se está viendo en Seguimiento: una sola línea, para
   no robarle espacio a la tabla, que es lo que se viene a ver. */
.seg-resumen {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-top: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-3);
  font-size: 12.5px; color: var(--ink-soft);
}
.seg-resumen strong { color: var(--ink); font-weight: 700; }
/* ============ Dashboard de análisis del cliente (issue #88) ============
   Se lee de arriba abajo: primero las cifras del año contra el año pasado,
   luego la tendencia, y solo entonces el detalle. Todo con las variables del
   tema, para que las gráficas no queden blancas en modo oscuro. */

.dash-head {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: flex-end; justify-content: space-between; margin-bottom: 12px;
}
.dash-aviso {
  display: flex; gap: 8px; align-items: baseline;
  padding: 9px 13px; margin-bottom: 12px; border-radius: 8px;
  background: var(--warn-soft); color: var(--warn);
  border: 1px solid var(--warn); font-size: 13px;
}

/* Las cuatro cifras del año. */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .kpi-row { grid-template-columns: 1fr; } }
.kpi-card {
  background: var(--surface);
  border-radius: var(--radius-lg); padding: 18px 22px;
}
.kpi-card .lbl {
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
}
.kpi-card .val {
  font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink-strong);
  margin-top: 3px; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.kpi-card .cmp { margin-top: 5px; font-size: 12px; color: var(--ink-faint); }
/* El color dice si el cambio es BUENO, no si el número subió: que bajen los
   gastos es una buena noticia. */
.delta { font-weight: 700; }
.delta.bien { color: var(--entra); }
.delta.mal  { color: var(--crit); }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 1023px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
.dash-chart { width: 100%; overflow-x: auto; }
.dash-chart svg { display: block; width: 100%; height: auto; }

/* Ranking horizontal: la barra es la comparación, el número es el dato. */
.rank-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 7px 0; }
.rank-row + .rank-row { border-top: 1px solid var(--line); }
.rank-nombre { font-size: 13px; color: var(--ink); }
.rank-nombre .hint { font-size: 11.5px; }
.rank-monto { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rank-pct { font-size: 11.5px; color: var(--ink-faint); text-align: right; }
.rank-barra { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.rank-barra > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
/* Las categorías de control (pagos a tarjetas, ATM, personal) no son gasto del
   negocio: se listan, pero apagadas. */
.rank-row.control .rank-barra > i { background: var(--ink-faint); }
.rank-row.control .rank-nombre { color: var(--ink-soft); }
/* Un nombre de la tabla que se puede editar: se ve como texto, no como botón,
   pero invita a hacerle clic (paso de nombres del reporte, issue #87). */
.link-btn {
  background: none; border: 0; padding: 0; font: inherit; color: var(--ink);
  text-align: left; cursor: pointer; border-bottom: 1px dashed var(--ink-faint);
}
.link-btn:hover { color: var(--accent); border-bottom-color: var(--accent); }
.fila-editor > td { background: var(--surface-3); }

/* El botón de cuadre de un estado de cuenta: en rojo cuando no cuadra, para que
   no se pase de largo entre una lista de estados que sí cuadran (issue #86). */
.btn-recibos.descuadrado { color: var(--crit); border-color: var(--crit); }
.fila-cuadre > td { background: var(--surface-3); }

/* Un comercio con gastos sin categoría: no entran en ninguna cifra del
   entregable, así que tienen que saltar a la vista (issue de clasificación por
   comercio agrupado). */
.fila-editor > td, tr.pendiente > td { background: var(--surface-3); }
tr.pendiente .rank-nombre, tr.pendiente .link-btn { font-weight: 700; }
select.status-select.falta { border-color: var(--crit); background: var(--crit-soft); }

/* ============ Los cinco pasos de una contabilidad ============
   Antes había pestañas arriba y botones numerados hasta abajo, y ninguno decía
   si el mes ya se había subido al histórico. El proceso ahora se ve como lo que
   es: cinco pasos, cada uno con su estado. */
.pasos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 14px 0 16px; }
@media (max-width: 1100px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .pasos { grid-template-columns: 1fr; } }
.paso {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 12px 14px; border: 1.5px solid transparent; border-radius: var(--radius-md);
  background: var(--surface); cursor: pointer;
}
.paso:hover { border-color: var(--accent); }
.paso.activo { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.paso-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--surface-2); color: var(--ink-soft);
}
.paso.listo .paso-num { background: var(--success-text); color: var(--surface); }
.paso.atencion .paso-num { background: var(--warn); color: #fff; }
.paso.bloqueado { opacity: 0.55; }
.paso-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paso-txt strong { font-size: 12.5px; }
.paso-txt .hint { font-size: 11.5px; line-height: 1.35; }

/* La segunda fila de pestañas: los formularios dentro de una categoría. Se ve
   subordinada a la de arriba para que se lea como un nivel más, no como otra
   barra independiente. */
.subtabs-hijas { margin-top: -6px; background: transparent; padding: 0 0 0 6px; }
.subtabs-hijas .subtab { font-size: 12.5px; min-height: 30px; padding: 5px 12px; }
.subtabs-hijas .subtab.active { background: var(--brand-tint); color: var(--brand-text); }

/* Calendario de meses para un servicio de Contabilidad (issue #108): 4x3
   meses del año elegido. Gris = ya registrado en otro servicio de este
   cliente (no se puede volver a pedir); azul = elegido para este servicio. */
.calendario-meses-anio {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.calendario-meses-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.mes-celda {
  padding: 9px 4px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-align: center;
}
.mes-celda:hover { border-color: var(--accent); }
.mes-celda.elegido {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.mes-celda.registrado {
  background: var(--surface-2); color: var(--ink-soft); border-color: var(--line);
  cursor: not-allowed; opacity: 0.75;
}

/* Pantalla de entrada: una tarjeta con el logo de la marca sobre el fondo de
   la marca. */
.login-gate {
  display: flex; position: fixed; inset: 0; z-index: 100;
  align-items: center; justify-content: center; padding: 20px;
  background: var(--bg);
}
.login-card {
  width: 100%; max-width: 400px; padding: 32px 32px 28px;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.login-logo { margin-bottom: 22px; }
/* Taxpace con registro abierto (#193): Google arriba y "Crear cuenta" abajo. */
.login-google { width: 100%; justify-content: center; padding: 10px 20px; border-radius: var(--radius-full); }
.login-g { font-weight: 800; color: var(--brand-text); }
.login-o { text-align: center; margin: 12px 0 4px; }
.login-crear { text-align: center; margin: 14px 0 0; }
.login-crear a { color: var(--brand-text); font-weight: 600; }

/* Inicio de una cuenta nueva (#193, #194): los ejemplos y la bienvenida que falta. */
.ini-cuenta-nueva {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 14px 18px; border-radius: var(--radius-md);
  background: var(--brand-tint); color: var(--ink-strong);
}
.ini-cuenta-nueva p { margin: 0; }
.ini-cuenta-nueva p + p { margin-top: 4px; }
.ini-cuenta-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767px) { .ini-cuenta-acciones, .ini-cuenta-acciones .btn { width: 100%; justify-content: center; } }
.login-logo img { display: block; height: 40px; width: auto; max-width: 100%; }
.by-twenty {
  position: fixed; right: 14px; bottom: 10px; z-index: 40; pointer-events: none;
  font-size: 11px; color: var(--ink-faint);
}

/* `hidden` tiene que ganarle a cualquier display de una clase (una pestaña
   oculta con display:grid seguía viéndose). */
[hidden] { display: none !important; }

/* ============ Documentos del cliente (issue #218) ============
   Diseño: docs/diseno/pantallas/*-perfil-documentos.png y *-subir-documento.png. */
.profile-acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tab-cuenta { font-size: 12px; opacity: .75; margin-left: 2px; }
.tab-cuenta:empty { display: none; }
.overline {
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}

/* Chips: filtros por persona, tipos de documento y "¿de quién es?". */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 34px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-full);
  background: var(--surface); color: var(--ink-strong); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.chip:hover { background: var(--surface-hover); }
.chip.activo { background: var(--ink-strong); border-color: var(--ink-strong); color: var(--surface); }
#subirTipos .chip.activo { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.chip-agregar { border-style: dashed; color: var(--brand-text); }
.chip-sm {
  display: inline-flex; align-items: center; padding: 1px 9px; border-radius: var(--radius-full);
  font-size: 11.5px; font-weight: 600; background: var(--neutral-bg); color: var(--neutral-text); white-space: nowrap;
}
.pill.info { background: var(--info-bg); color: var(--info-text); }
.pill.info::before { content: "i"; font-style: italic; }
.select-pill {
  min-height: 42px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 14px;
}

.docs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.docs-side { display: flex; flex-direction: column; gap: 16px; }
.docs-side .panel { margin-bottom: 0; }
.docs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }

.doc-grupo { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin: 18px 0 2px; }
.doc-grupo .hint { flex-basis: 100%; margin: 2px 0 0; }
.doc-grupo-n { font-size: 13px; color: var(--ink-soft); }
.doc-fila { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); position: relative; }
.doc-fila:last-child { border-bottom: 0; }
.doc-fila.pendiente .doc-titulo { color: var(--ink-soft); }
.doc-fila.papelera .doc-titulo { color: var(--ink-soft); text-decoration: line-through; }
.doc-papelera-btn { display: block; margin: 16px 4px 4px; }
.doc-ic {
  width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-text);
}
.doc-fila.suelto .doc-ic { background: var(--neutral-bg); color: var(--neutral-text); }
.doc-ic .ic, .doc-acciones .ic, .subir-vacio .ic, .aviso-ok .ic, .dot-ok .ic, .dot-bad .ic {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.doc-txt { flex: 1; min-width: 0; }
.doc-titulo { font-weight: 600; color: var(--ink-strong); font-size: 14.5px; }
.doc-sub { font-size: 13px; color: var(--ink-soft); }
.doc-etiquetas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.doc-acciones { display: flex; gap: 4px; align-items: center; position: relative; }
.doc-acciones .icon-btn { display: grid; place-items: center; border-color: transparent; }
.doc-menu { right: 0; left: auto; min-width: 230px; }
.doc-menu button.peligro { color: var(--crit); }
.docs-vacio { text-align: center; padding: 36px 12px; color: var(--ink-soft); }
.docs-vacio p { margin: 0 0 12px; }

.docs-avance { display: flex; justify-content: space-between; margin: 10px 0 6px; font-size: 14px; }
.progress { height: 8px; border-radius: var(--radius-full); background: var(--brand-tint); overflow: hidden; margin-bottom: 12px; }
.progress > i { display: block; height: 100%; background: var(--brand); border-radius: var(--radius-full); }
.falta-fila { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.falta-fila.listo .falta-titulo { color: var(--ink-soft); }
.falta-titulo { font-weight: 600; color: var(--ink-strong); font-size: 14px; }
.dot-ok, .dot-bad, .dot-wait { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.dot-ok { background: var(--success-bg); color: var(--success-text); }
.dot-bad { background: var(--danger-bg); color: var(--danger-text); }
.dot-wait { border: 1.5px dashed var(--line-strong); }
.dot-ok .ic, .dot-bad .ic { width: 13px; height: 13px; stroke-width: 2.5; }

.familiar-fila {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; background: none;
  border-radius: var(--radius-sm); text-align: left; cursor: pointer; color: inherit;
}
.familiar-fila:hover { background: var(--surface-hover); }
.familiar-fila > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.familiar-nombre { font-weight: 600; color: var(--ink-strong); }

/* Ventana de subir documento: el archivo a la izquierda, la ficha a la derecha. */
.modal.modal-ancho { max-width: 940px; }
.subir-cuerpo { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; }
.subir-archivo {
  background: var(--surface-hover); border-radius: var(--radius-md); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.subir-vista {
  min-height: 200px; border-radius: var(--radius-sm); background: var(--surface); display: grid; place-items: center;
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.subir-vista img { width: 100%; max-height: 300px; object-fit: contain; display: block; }
.subir-vacio { text-align: center; color: var(--ink-soft); padding: 16px; }
.subir-vacio .ic { width: 32px; height: 32px; }
.subir-vacio p { margin: 6px 0 0; font-size: 13px; word-break: break-word; }
.subir-archivo-nombre { font-size: 12.5px; color: var(--ink-soft); word-break: break-word; }
.subir-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.subir-ficha { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.subir-buscar { max-width: none; }
.field .subir-buscar input { background: var(--surface-hover); padding-left: 42px; border-color: var(--line); }
.subir-ayuda { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.subir-ayuda:empty { display: none; }
.subir-ayuda strong { color: var(--ink-strong); }
.aviso-ok {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--success-bg); color: var(--success-text); font-size: 13.5px;
}
.aviso-ok strong { font-weight: 700; }
.aviso-error { color: var(--crit); min-height: 0; margin: 0; }
.aviso-error:empty { display: none; }
.modal-foot-botones { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 1279px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1023px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .subir-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* En iPad de pie y celular el archivo va en una franja: miniatura y botones. */
  .subir-archivo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 12px; }
  .subir-vista { min-height: 96px; height: 96px; grid-row: span 3; }
  .subir-vista img { max-height: 96px; object-fit: cover; height: 96px; }
  .subir-vacio { padding: 6px; }
  .subir-vacio .ic { width: 24px; height: 24px; }
  .subir-vacio p { font-size: 11.5px; }
}
@media (max-width: 767px) {
  .profile-head { flex-direction: column; }
  .profile-acciones { justify-content: flex-start; }
  /* Dos renglones: ícono, nombre y acciones arriba; las etiquetas abajo. */
  .doc-fila {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px;
    grid-template-areas: "ic txt acc" ". tags tags";
  }
  .doc-ic { grid-area: ic; }
  .doc-txt { grid-area: txt; }
  .doc-acciones { grid-area: acc; }
  .doc-etiquetas { grid-area: tags; justify-content: flex-start; }
}

/* Lo que se espera de cada declaración (issue #218). */
.docs-faltan-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.docs-faltan-acciones:empty { display: none; }
.falta-propuesta { margin: 4px 0 8px; font-size: 14px; color: var(--ink); }

/* Ilustraciones (issue #235): solo en vacíos, celebraciones y ayuda. */
.ilus { display: block; width: 160px; height: 160px; margin: 0 auto; }
.vacio-ilustrado { text-align: center; padding: 18px 12px 8px; color: var(--ink-soft); }
.vacio-ilustrado p { margin: 6px 0 12px; font-size: 14.5px; }
.subir-vacio .ilus { width: 130px; height: 130px; }
.falta-celebra { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 4px 0 10px; font-weight: 600; color: var(--success-text); }
.falta-celebra .ilus { width: 110px; height: 110px; }
@media (max-width: 1023px) { .subir-vacio .ilus { width: 72px; height: 72px; } }

/* ============ Pestaña Contabilidad del perfil (issue #241) ============
   Diseño: docs/diseno/pantallas/*-perfil-contabilidad.png. */
.conta-perfil { display: flex; flex-direction: column; gap: 16px; }
.conta-perfil .panel { margin-bottom: 0; }
.conta-barra { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.conta-cifras { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 16px; }
.conta-hero {
  background: var(--brand); color: var(--on-brand); border-radius: var(--radius-lg); padding: 22px 26px;
  display: flex; flex-direction: column; gap: 6px;
}
.conta-hero .overline { color: inherit; opacity: .78; }
.conta-hero-num { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 52px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.conta-hero-sub { font-size: 14px; opacity: .88; }
.conta-variacion {
  width: fit-content; padding: 2px 10px; border-radius: var(--radius-full);
  background: var(--on-brand); color: var(--brand); font-weight: 700; font-size: 13px;
}
.conta-tile { background: var(--surface); border-radius: var(--radius-lg); padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.conta-tile-lbl { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.conta-tile-num { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 38px; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.conta-tile .progress { margin: 2px 0 0; }
.conta-leyenda { display: flex; gap: 14px; font-size: 13px; color: var(--ink-soft); }
.conta-leyenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.conta-leyenda .entro::before { background: var(--success-text); }
.conta-leyenda .salio::before { background: var(--danger-text); opacity: .45; }
.conta-mes-fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: 4px 0 16px; }
.conta-mes { border-radius: var(--radius-sm); padding: 8px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.conta-mes strong { font-size: 12.5px; }
.conta-mes span { font-size: 11px; line-height: 14px; }
.conta-mes.cerrado { background: var(--success-bg); color: var(--success-text); }
.conta-mes.proceso { background: var(--info-bg); color: var(--info-text); }
.conta-mes.falta { background: var(--warning-bg); color: var(--warning-text); }
.conta-mes.contratado { background: var(--brand-tint); color: var(--brand-text); }
.conta-mes.nada { background: var(--neutral-bg); color: var(--neutral-text); opacity: .7; }
.conta-abajo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.conta-categorias .hint { margin: 0 0 6px; }
.conta-servicio-nombre { margin: 0; font-weight: 700; color: var(--ink-strong); }
.conta-servicio .hint { margin: 2px 0 0; }
.conta-sub { font-size: 14px; margin: 16px 0 4px; color: var(--ink-strong); }
.conta-pdf { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.conta-pdf:last-child { border-bottom: 0; }
.conta-pdf:hover .conta-pdf-nombre { color: var(--brand-text); }
.conta-pdf > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.conta-pdf-ic {
  width: 38px; height: 46px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: var(--danger-bg); color: var(--danger-text); font-size: 11px; font-weight: 700;
}
.conta-pdf-nombre { font-weight: 600; color: var(--ink-strong); }
.conta-vacio { text-align: center; padding: 34px 28px 30px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.conta-vacio .ilus { width: 190px; height: 190px; }
.conta-vacio h2 { font-family: var(--font-display); font-size: 22px; margin: 0; color: var(--ink-strong); }
.conta-vacio p { margin: 0; color: var(--ink-soft); max-width: 520px; }
.conta-vacio-botones { margin-top: 8px; }
.conta-incluye { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; width: 100%; max-width: 760px; text-align: left; }
.conta-incluye > div { background: var(--surface-hover); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--ink-soft); }
.conta-incluye strong { color: var(--ink-strong); font-size: 14.5px; }
@media (max-width: 1279px) {
  .conta-cifras { grid-template-columns: 1fr 1fr; }
  .conta-hero { grid-column: 1 / -1; }
  .conta-abajo { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1023px) {
  .conta-mes-fila { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .conta-abajo { grid-template-columns: minmax(0, 1fr); }
  .conta-incluye { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .conta-cifras { grid-template-columns: minmax(0, 1fr); }
  .conta-hero-num { font-size: 40px; line-height: 44px; }
  .conta-mes-fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* El escáner de documentos vive en css/escaner.css (también lo usa el link del cliente). */

/* ============ Visor de documentos: copiar el texto para TaxSlayer ============ */
.modal.visor-modal { max-width: 1240px; }
.visor-acciones { display: flex; gap: 8px; align-items: center; }
.visor-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; max-height: 76vh; }
.visor-doc { background: var(--surface-hover); border-radius: var(--radius-md); padding: 12px; overflow: auto; max-height: 72vh; }
.visor-lienzo { position: relative; width: 100%; line-height: 0; }
.visor-lienzo img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: var(--shadow-sm); }
.visor-capa { position: absolute; inset: 0; }
/* El texto va encima de la imagen, invisible, en su lugar: se ilumina al pasar el cursor. */
.visor-pieza {
  position: absolute; color: transparent; font-size: 10px; line-height: 1; overflow: hidden;
  border-radius: 3px; cursor: copy; white-space: nowrap;
}
.visor-pieza::selection { background: rgba(1, 81, 204, .35); color: transparent; }
.visor-pieza.encendida, .visor-pieza:hover { background: rgba(1, 81, 204, .16); outline: 2px solid var(--brand); outline-offset: 1px; }
.visor-pdf { width: 100%; height: 70vh; border: 0; border-radius: 6px; background: #fff; }
.visor-texto { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.visor-texto-cab { display: flex; flex-direction: column; gap: 2px; }
.visor-texto-cab strong { color: var(--ink-strong); font-size: 15px; }
.visor-opcion { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.visor-buscar { max-width: none; }
.field .visor-buscar input, .visor-buscar input { background: var(--surface-hover); }
.visor-lista { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: 54vh; padding-right: 2px; }
.visor-fila {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; border-radius: var(--radius-sm); padding: 7px 10px; text-align: left;
  cursor: copy; color: var(--ink); font-size: 14px;
}
.visor-fila-texto { min-width: 0; word-break: break-word; }
.visor-fila-copiar { flex: none; font-size: 12px; font-weight: 700; color: var(--brand-text); opacity: 0; }
.visor-fila:hover, .visor-fila.encendida { background: var(--brand-tint); }
.visor-fila:hover .visor-fila-copiar, .visor-fila.encendida .visor-fila-copiar { opacity: 1; }
.visor-fila:focus-visible { outline: 2px solid var(--focus); }
.visor-cargando { padding: 18px 4px; }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 90;
  background: var(--ink-strong); color: var(--surface); padding: 10px 18px; border-radius: var(--radius-full);
  font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
  max-width: calc(100vw - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1023px) {
  .visor-cuerpo { grid-template-columns: minmax(0, 1fr); max-height: none; }
  .visor-doc { max-height: 52vh; }
  .visor-lista { max-height: 40vh; }
}
@media (max-width: 767px) { .toast { bottom: 92px; } }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* Efectivo que anota el cliente (issue #242). */
.conta-efectivo .hint { margin: 2px 0 10px; }
.conta-efectivo-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.conta-mov { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.conta-mov-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; flex: none; }
.conta-mov-ic.ingreso { background: var(--success-bg); color: var(--success-text); }
.conta-mov-ic.gasto { background: var(--danger-bg); color: var(--danger-text); }
.conta-mov-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conta-mov-txt strong { color: var(--ink-strong); }
.conta-mov-txt .hint { margin: 0; }
.conta-mov-monto { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conta-mov-monto.ingreso { color: var(--success-text); }

/* ============ Pedir documentos al cliente por un link (issue #219) ============ */
.docs-link-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.docs-link-acciones a.btn, #pedirWhatsapp { text-decoration: none; }
.docs-link-vence { margin: 0; }
.pedir-lista { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 4px 12px; max-height: 280px; overflow-y: auto; }
.pedir-fila { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.pedir-fila:last-child { border-bottom: 0; }
.pedir-fila input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.pedir-fila > span { display: flex; flex-direction: column; min-width: 0; }
.pedir-fila strong { color: var(--ink-strong); font-size: 14.5px; }
.pedir-agregar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) 90px auto; gap: 8px; align-items: center; }
.pedir-agregar input[hidden] { display: none; }
.pedir-mensaje { margin: 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-hover); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; color: var(--ink); }
.pedir-falta-fecha { padding: 10px 14px; border-radius: var(--radius-md); background: var(--danger-bg); color: var(--danger-text); font-size: 13.5px; }
@media (max-width: 767px) {
  .pedir-agregar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ============ Efectivo del cliente en la contabilidad (issue #243) ============ */
.ctb-ent-efectivo { background: var(--success-bg); color: var(--success-text); }
.ctb-ent-efectivo.pendiente { background: var(--warning-bg); color: var(--warning-text); }
.ctb-ent-efectivo p { margin: 0; font-size: 14px; font-weight: 600; }
.conta-mov-categoria { max-width: 180px; min-height: 32px; padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 12.5px; }
.conta-mov-cat { font-size: 12px; }
@media (max-width: 767px) {
  /* En celular la categoría y el botón bajan a su propio renglón. */
  .conta-mov:has(.conta-mov-categoria) { flex-wrap: wrap; }
  .conta-mov:has(.conta-mov-categoria) .conta-mov-txt { flex: 1 1 0; min-width: 0; }
  .conta-mov-categoria { flex: 1 1 55%; max-width: none; margin-left: 48px; }
}

/* ============ Tus ingresos en el perfil (issue #258) ============ */
.conta-ingresos .overline { margin: 12px 0 6px; }
.conta-ing-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.rank-barra.ingreso > i { background: var(--success-text); }
.conta-ing-meses { margin: 8px 0 0; font-size: 14px; }
.conta-ing-periodo { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.conta-ing-periodo > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.conta-ing-periodo strong { color: var(--ink-strong); font-size: 14px; }
.conta-ing-apartar { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-strong); }
.conta-ing-estrategia { margin: 10px 0 6px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink); }
.ctb-ent-apartar { margin-top: 12px; }
.ctb-ent-apartar input { width: 80px; min-height: 38px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; }
@media (max-width: 1023px) {
  .conta-ing-columnas { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ============ Expediente de un tax (issue #228) ============
   Diseño: docs/diseno/pantallas/*-expediente*.png. */
.exp-migas { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-soft); margin-bottom: 4px; flex-wrap: wrap; }
.exp-migas a { color: var(--brand-text); font-weight: 600; text-decoration: none; }
.exp-cabeza { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.exp-cabeza .page-sub { margin-bottom: 0; }
.exp-cabeza-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.exp-etapas { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; padding: 16px 20px; }
.exp-etapa { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--ink-soft); min-width: 0; }
.exp-etapa i { display: block; height: 5px; border-radius: var(--radius-full); background: var(--line); }
.exp-etapa.hecha i { background: var(--brand); }
.exp-etapa.actual i { background: var(--acento); }
.exp-etapa.actual span { color: var(--ink-strong); font-weight: 700; }
.exp-paso { display: flex; gap: 16px; align-items: center; background: var(--acento-tint); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 16px; }
.exp-paso.listo { background: var(--success-bg); }
.exp-paso-ic { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--acento); color: var(--on-acento); display: grid; place-items: center; font-size: 22px; font-weight: 700; }
.exp-paso-txt { flex: 1; min-width: 0; }
.exp-paso-txt .overline { margin-bottom: 2px; }
.exp-paso-txt strong { display: block; font-size: 17px; color: var(--ink-strong); }
.exp-paso-txt p { margin: 2px 0 0; color: var(--ink-soft); font-size: 14px; }
.exp-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.exp-rejilla .panel { margin-bottom: 0; }
.exp-docs-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.exp-docs-lista .falta-fila { align-items: center; }
.exp-docs-lista .falta-fila > div { flex: 1; min-width: 0; }
.exp-contacto { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.exp-contacto:last-child { border-bottom: 0; }
.exp-contacto p { margin: 2px 0; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.exp-contacto strong { color: var(--ink-strong); font-size: 14.5px; }
.exp-contacto .hint { margin: 0; font-size: 12.5px; }
.exp-contacto-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--brand-tint); color: var(--brand-text); display: grid; place-items: center; }
.exp-contacto-ic .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Envío y respuesta (#338): la federal y la del estado, lado a lado. */
.exp-decls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 12px; }
.exp-decl-titulo { font-size: 14px; margin: 0 0 4px; color: var(--ink-strong); }
.envio-decl { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 4px; margin: 0 0 12px; min-width: 0; }
.envio-decl legend { font-weight: 700; padding: 0 6px; color: var(--ink-strong); }
.envio-estado { text-transform: uppercase; }
.envio-decl .field-row, .envio-decl .field-row3 { margin-bottom: 10px; }
/* En dos columnas, el cobro ocupa el alto de revisión, seguimiento y envío: así no queda hueco. */
@media (min-width: 1024px) {
  .exp-rejilla .exp-docs { grid-column: 1; grid-row: 1; }
  .exp-rejilla .exp-cita { grid-column: 2; grid-row: 1; }
  .exp-rejilla .exp-revision { grid-column: 1; grid-row: 2; }
  .exp-rejilla .exp-seguimiento { grid-column: 1; grid-row: 3; }
  .exp-rejilla .exp-envio { grid-column: 1; grid-row: 4; }
  .exp-rejilla .exp-cobro { grid-column: 2; grid-row: 2 / span 3; }
  /* Con el disclaimer del cliente (#349), va debajo de los documentos. */
  .exp-rejilla.con-disclaimer .exp-disclaimer { grid-column: 1; grid-row: 2; }
  .exp-rejilla.con-disclaimer .exp-revision { grid-row: 3; }
  .exp-rejilla.con-disclaimer .exp-seguimiento { grid-row: 4; }
  .exp-rejilla.con-disclaimer .exp-envio { grid-row: 5; }
  .exp-rejilla.con-disclaimer .exp-cobro { grid-row: 2 / span 4; }
}
/* La segunda revisión (#228): cuatro puntos para marcar, con quién y cuándo. */
.exp-revision { transition: box-shadow .3s; }
.exp-revision.resaltado { box-shadow: 0 0 0 3px var(--acento); }
.exp-revision-hint { margin: -4px 0 10px; }
.exp-revision-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.exp-rev-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; min-width: 0; }
.exp-rev-item.hecho { border-color: var(--brand); background: var(--brand-tint); }
.exp-rev-item input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--brand); }
.exp-rev-item strong { display: block; color: var(--ink-strong); font-size: 14px; }
.exp-rev-item .hint { margin: 2px 0 0; font-size: 12.5px; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .exp-revision { transition: none; } }
/* La declaración de TaxSlayer (#366): subirla de un clic y verla desde la revisión. */
.exp-docs-declaracion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line); }
.exp-docs-declaracion .hint { margin: 0; flex: 1 1 220px; min-width: 0; }
.exp-revision-declaracion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; }
.exp-revision-declaracion .hint { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.exp-revision-declaracion > p.hint { flex: 1 1 220px; }
/* Lo obligatorio del tax (#366), en la ventana de nuevo servicio y en la del expediente. */
.svc-datos-tax { margin-top: 14px; }
.svc-datos-tax > .hint { margin: 4px 0 12px; }
.datos-tax-ayuda { margin: 4px 0 0; }
#datosTaxCampos .field-row, #svcDatosTaxCampos .field-row { margin-bottom: 10px; }
.exp-disc-opcional { background: var(--brand-tint); color: var(--ink-strong); }
.exp-disc-opcional-hint { margin: 0 0 10px; }
.cita-obligatorios { margin-bottom: 4px; }
/* Cerrar el expediente: cómo se le entregó su copia al cliente. */
.cierre-titulo { font-size: 13px; font-weight: 600; color: var(--ink-strong); margin-bottom: 8px; }
.cierre-copias { display: flex; flex-wrap: wrap; gap: 8px; }
.cierre-copia { display: inline-flex; gap: 8px; align-items: center; min-height: 42px; padding: 8px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-full); font-size: 14px; color: var(--ink); cursor: pointer; }
.cierre-copia input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand); }
.cierre-copia:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); color: var(--ink-strong); font-weight: 600; }
/* El disclaimer del cliente (#349): cómo va y qué se puede hacer. */
.exp-disclaimer { transition: box-shadow .3s; }
.exp-disclaimer.resaltado { box-shadow: 0 0 0 3px var(--acento); }
.exp-disc-estado { display: flex; gap: 12px; align-items: flex-start; }
.exp-disc-estado strong { color: var(--ink-strong); font-size: 15px; }
.exp-disc-estado .hint { margin: 2px 0 0; }
.exp-disc-punto { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--line-strong); }
.exp-disc-estado.listo .exp-disc-punto { background: var(--acento); }
.exp-disc-estado.enviado .exp-disc-punto { background: var(--brand); }
.exp-disc-estado.firmado .exp-disc-punto { background: var(--success-text); }
.exp-disc-falta { margin: 10px 0 0; padding-left: 42px; color: var(--ink); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.exp-disc-anulados { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.exp-disc-anulados .hint { margin: 4px 0 0; overflow-wrap: anywhere; }
.exp-disc-estado.impreso .exp-disc-punto { background: var(--brand); }
.exp-disclaimer .exp-tarjeta-botones a.btn, .exp-disc-opcion a.btn { text-decoration: none; }
/* Las tres formas de firmar (#360): iPad, papel y link, un renglón cada una. */
.exp-disc-opciones { display: flex; flex-direction: column; margin-top: 12px; border-top: 1px solid var(--line); }
.exp-disc-opcion { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.exp-disc-opcion-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.exp-disc-opcion .hint { margin: 0; flex: 1 1 180px; }
@media (prefers-reduced-motion: reduce) { .exp-disclaimer { transition: none; } }
.exp-cobro-fila { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; color: var(--ink-soft); font-size: 14px; }
.exp-cobro-fila strong { color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.exp-cobro-fila.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; color: var(--ink-strong); font-weight: 700; }
.exp-cobro-fila .debe { color: var(--danger-text); }
.exp-cobro-boton { width: 100%; justify-content: center; margin-top: 12px; }
/* Cobro con tarjeta (#215): link de cobro o cobro en la terminal. */
.exp-tarjeta { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.exp-tarjeta .hint { margin: 4px 0 0; }
.exp-tarjeta-estado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-strong); font-size: 14px; }
.exp-tarjeta-estado .hint { margin: 0; }
.exp-tarjeta-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: none; animation: exp-tarjeta-latido 1.4s ease-in-out infinite; }
@keyframes exp-tarjeta-latido { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .exp-tarjeta-punto { animation: none; } }
.exp-tarjeta-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.exp-tarjeta-idioma-lbl { display: inline-flex; align-items: center; gap: 6px; }
.exp-tarjeta-idioma-lbl .hint { margin: 0; }
.exp-tarjeta-idioma { width: auto; min-width: 0; }
.exp-tarjeta-prueba { font-style: italic; }
.exp-tarjeta a.btn, .exp-recibo a.btn { text-decoration: none; }
.exp-recibo { margin-top: 12px; }
.cob-subtitulo { font-size: 15px; margin: 14px 0 6px; color: var(--ink-strong); }
.cob-codigo { display: inline-block; margin: 6px 0; padding: 10px 18px; border: 1px dashed var(--brand); border-radius: 10px;
  font: 700 28px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; color: var(--ink-strong); background: var(--surface); }
.cob-terminal-lista { margin: 0 0 4px; }
.btn-expediente { margin-right: 6px; }
.cita-cambios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.cita-check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink); cursor: pointer; }
.cita-check input { width: 17px; height: 17px; accent-color: var(--brand); }
@media (max-width: 1279px) {
  .exp-rejilla { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1023px) {
  .exp-rejilla { grid-template-columns: minmax(0, 1fr); }
  .exp-etapa { font-size: 11px; }
}
@media (max-width: 767px) {
  .exp-etapas { grid-template-columns: repeat(9, 1fr); gap: 3px; padding: 12px; }
  .exp-etapa span { display: none; }
  .exp-etapa.actual span { display: block; position: absolute; }
  .exp-etapas { position: relative; padding-bottom: 30px; }
  .exp-etapa.actual span { left: 12px; bottom: 8px; }
  .exp-paso { flex-direction: column; align-items: flex-start; padding: 16px; }
  .exp-docs-lista { grid-template-columns: minmax(0, 1fr); }
  .exp-decls { grid-template-columns: minmax(0, 1fr); }
  .cita-cambios { grid-template-columns: minmax(0, 1fr); }
  .exp-revision-lista { grid-template-columns: minmax(0, 1fr); }
  .cierre-copia { flex: 1 1 100%; }
}
.exp-docs-lista > p { grid-column: 1 / -1; }

/* ============ Datos clave de la forma en el visor (issue #264) ============ */
.visor-campos { display: flex; flex-direction: column; gap: 2px; background: var(--brand-tint); border-radius: var(--radius-md); padding: 10px; max-height: 30vh; overflow-y: auto; }
.visor-campos-cab { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 6px; }
.visor-campos-cab strong { color: var(--ink-strong); }
.visor-campo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius-sm); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.visor-campo.fijo { cursor: default; }
.visor-campo.fijo .visor-fila-copiar { visibility: hidden; }
.visor-campo:hover, .visor-campo.encendida { background: var(--surface); }
.visor-campo:hover .visor-fila-copiar, .visor-campo.encendida .visor-fila-copiar { opacity: 1; }
.visor-campo:focus-visible { outline: 2px solid var(--focus); }
.visor-campo-nombre { font-size: 13px; color: var(--ink); min-width: 0; }
.visor-campo-nombre b { color: var(--ink-strong); }
.visor-campo-valor { font-weight: 700; color: var(--ink-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.visor-marco { pointer-events: none; }
.visor-marco.encendida { background: color-mix(in srgb, var(--acento) 22%, transparent); outline: 2px solid var(--acento); outline-offset: 2px; }

/* ============ Taxes de la temporada: lista y tablero (issues #214 y #267) ============ */
.tx-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tx-cabeza .page-sub { margin-bottom: 0; }
.tx-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tx-filtro select { min-height: 40px; border-radius: var(--radius-full); padding: 6px 14px; }
.tx-chips { margin-bottom: 16px; }
.tx-chips .chip small { color: inherit; opacity: .7; margin-left: 2px; }
.tx-vacio { padding: 20px 8px; }
.tx-tabla td { vertical-align: middle; }
/* Una línea donde empieza cada semana, en Servicios y en Taxes (#316). */
tr.semana-nueva > td { border-top: 2px solid var(--brand); }
@media (max-width: 767px) {
  .tx-tabla tr.semana-nueva { border-top: 2px solid var(--brand); }
  .tx-tabla tr.semana-nueva > td { border-top: 0; }
}
.tx-quien { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.tx-quien strong { display: block; color: var(--ink-strong); font-size: 14.5px; }
.tx-quien span:not(.avatar) { display: block; color: var(--ink-soft); font-size: 12.5px; }
.tx-estatus .pill, .tx-pago .pill { white-space: nowrap; }
.tx-mini { display: flex; gap: 4px; width: 84px; padding: 4px 0; }
.tx-mini i { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--line); }
.tx-mini i.hecha { background: var(--brand); }
.tx-mini i.actual { background: var(--acento); }
.tx-mini i.actual.ok { background: var(--success-text); }
.tx-mini i.actual.crit { background: var(--crit); }
.tx-estatus .tx-mini { margin-bottom: 4px; }
.tx-estatus-propio { display: block; margin: 4px 0 0; color: var(--ink-soft); font-size: 12px; }
.tx-paso { color: var(--ink); max-width: 40ch; }
.tx-docs { display: block; width: max-content; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--warn-soft); color: var(--warn); }
.tx-docs.completo { background: var(--success-bg); color: var(--success-text); }
.tx-debe-monto { color: var(--crit); font-weight: 700; font-variant-numeric: tabular-nums; }

.tx-tablero { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; scroll-snap-type: x proximity; }
.tx-grupo { flex: none; display: flex; flex-direction: column; gap: 6px; }
.tx-grupo-cab { box-sizing: border-box; height: 24px; padding: 0 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid transparent; }
.tx-grupo.con-grupo .tx-grupo-cab { border-bottom-color: var(--line-strong); }
.tx-grupo-cols { display: flex; gap: 12px; align-items: flex-start; }
.tx-col { flex: none; width: 244px; background: var(--surface-2); border-radius: var(--radius-lg); padding: 10px; scroll-snap-align: start; min-height: 180px; outline: 2px dashed transparent; outline-offset: -2px; transition: outline-color .1s, background .1s; }
.tx-col.encima { outline-color: var(--brand); background: var(--brand-tint); }
.tx-col-cab { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 6px 10px; }
.tx-col-cab strong { color: var(--ink-strong); font-size: 14px; }
.tx-col-cab span { color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.tx-col-cuerpo { display: flex; flex-direction: column; gap: 8px; }
.tx-col-vacia { color: var(--ink-faint); font-size: 13px; text-align: center; padding: 18px 0; margin: 0; }
.tx-tarjeta { background: var(--surface); border-radius: var(--radius-md); padding: 12px; box-shadow: var(--shadow-sm); cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.tx-tarjeta[draggable="true"] { cursor: grab; }
.tx-tarjeta.arrastrando { opacity: .5; }
.tx-tarjeta:hover { box-shadow: var(--shadow-md, var(--shadow-sm)); }
.tx-tarjeta:focus-visible { outline: 2px solid var(--focus); }
.tx-tarjeta-cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tx-tarjeta-cab strong { color: var(--ink-strong); font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.tx-tarjeta-sub { margin: 0; color: var(--ink-soft); font-size: 12.5px; }
.tx-tarjeta .tx-estatus-propio { margin: 0; }
.tx-tarjeta-paso { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.4; }
.tx-tarjeta-pie { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.tx-menu { min-height: 32px; font-size: 12.5px; padding: 4px 10px; border-radius: var(--radius-full); max-width: 100%; }
/* El pago se lee de un vistazo por su color, igual que las píldoras. */
.tx-pago-menu { font-weight: 700; border-color: transparent; }
.tx-pago-e0, .tx-pago-e1, .tx-pago-e2, .tx-pago-e3, .tx-pago-e4 { background-color: var(--etapa); color: var(--etapa-tx); }
.tx-toast { white-space: normal; text-align: center; }

@media (max-width: 1023px) {
  /* iPad de pie: sin la columna del preparador, para que quepa lo que debe. */
  .tx-tabla .tx-prep { display: none; }
  .tx-quien { min-width: 0; }
  .tx-paso { max-width: 28ch; }
}
@media (max-width: 767px) {
  .tx-filtros { width: 100%; }
  .tx-filtro { flex: 1 1 40%; }
  .tx-filtro select { width: 100%; }
  .tx-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .tx-chips .chip { flex: none; }
  /* La lista se vuelve tarjetas: una fila por tax, sin columnas. */
  .tx-lista { padding: 4px 10px; }
  .tx-tabla thead { display: none; }
  .tx-tabla, .tx-tabla tbody, .tx-tabla tr, .tx-tabla td { display: block; width: 100%; }
  .tx-tabla tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
  .tx-tabla tr:last-child { border-bottom: 0; }
  .tx-tabla td { border: 0; padding: 0; width: auto; }
  .tx-tabla .tx-cliente { grid-column: 1; min-width: 0; }
  .tx-tabla .tx-quien { min-width: 0; }
  .tx-tabla .tx-debe { grid-column: 2; grid-row: 1; align-self: center; }
  .tx-tabla .tx-estatus { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .tx-tabla .tx-estatus .tx-estatus-propio { margin: 0; }
  .tx-tabla .tx-estatus .tx-mini { margin: 0 calc(100% - 84px) 0 0; }
  .tx-tabla .tx-pago { grid-column: 2; align-self: start; padding-top: 19px; }
  .tx-tabla .tx-paso { grid-column: 1 / -1; max-width: none; font-size: 13.5px; }
  .tx-tabla .tx-prep { display: none; }
  /* El tablero, una columna a la vez: la eligen los estatus de arriba. */
  .tx-tablero.una { display: block; overflow: visible; }
  .tx-tablero.una .tx-grupo { display: none; }
  .tx-tablero.una .tx-grupo:has(.tx-col.visible) { display: flex; }
  .tx-tablero.una .tx-grupo-cols { display: block; }
  .tx-tablero.una .tx-col { display: none; width: auto; }
  .tx-tablero.una .tx-col.visible { display: block; }
  .tx-tablero.una .tx-grupo:not(.con-grupo) .tx-grupo-cab { display: none; }
  .tx-tablero.una .tx-grupo-cab { height: auto; margin-bottom: 4px; }
}
#view-taxes [hidden] { display: none !important; }

/* ============ Buscador único de clientes (issue #208) ============ */
.search-wrap input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-atajo { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 600 12px var(--font-mono, ui-monospace, monospace); color: var(--ink-soft); background: var(--surface-2); border-radius: 6px; padding: 2px 7px; pointer-events: none; }
.search-wrap input:focus ~ .search-atajo, .search-wrap input:not(:placeholder-shown) ~ .search-atajo { display: none; }
.busqueda-rapida { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md, var(--shadow-sm)); padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow-y: auto; }
.busqueda-rapida[hidden] { display: none; }
.rapida-fila { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.rapida-fila:hover, .rapida-fila.activa { background: var(--brand-tint); }
.rapida-fila:focus-visible { outline: 2px solid var(--focus); }
.rapida-fila .avatar { width: 34px; height: 34px; font-size: 12px; flex: none; }
.rapida-txt { display: flex; flex-direction: column; min-width: 0; }
.rapida-txt strong { color: var(--ink-strong); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rapida-txt span { color: var(--ink-soft); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rapida-todos { border: 0; background: none; font: inherit; font-weight: 600; color: var(--brand-text); padding: 10px; border-top: 1px solid var(--line); margin-top: 4px; cursor: pointer; text-align: left; }
.rapida-vacia { margin: 0; padding: 12px 10px; color: var(--ink-soft); font-size: 13.5px; }
.cli-coincidencia { color: var(--brand-text); font-weight: 600; }
.cli-mas td { text-align: center; border-bottom: 0; }
@media (max-width: 1023px) { .search-atajo { display: none; } }

/* ============ Clientes recurrentes (issue #213) ============ */
#view-taxes .tx-oculto { display: none !important; }
.rc { display: flex; flex-direction: column; gap: 16px; }
.rc-cabeza { display: flex; gap: 8px; }
.rc-anio { min-height: 40px; border-radius: var(--radius-full); padding: 6px 14px; }
.rc-tasa { display: flex; gap: 24px; align-items: center; margin: 0; }
.rc-tasa-num { display: flex; flex-direction: column; align-items: center; min-width: 96px; }
.rc-tasa-num strong { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--brand-text); }
.rc-tasa-num span { color: var(--ink-soft); font-size: 13px; margin-top: 4px; }
.rc-tasa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rc-tasa-txt p { margin: 0; }
.rc-tasa-titulo { color: var(--ink-strong); font-weight: 600; }
.rc-barra { height: 10px; border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; }
.rc-barra i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.rc-lista { margin: 0; }
.rc-lista-cab { gap: 12px; flex-wrap: wrap; }
.rc-ayuda { margin: 0 0 10px; }
.rc-todos { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-soft); padding: 6px 4px; cursor: pointer; }
.rc-filas { display: flex; flex-direction: column; }
.rc-fila { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--line); cursor: pointer; }
.rc-fila.fija { cursor: default; opacity: .75; }
.rc-fila input { width: 18px; height: 18px; }
.rc-quien { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rc-quien strong { display: block; color: var(--ink-strong); font-size: 14.5px; }
.rc-quien span:not(.avatar) { display: block; color: var(--ink-soft); font-size: 12.5px; }
.rc-contacto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.rc-tel { color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-accion { color: var(--brand-text); font-weight: 600; text-decoration: none; }
.rc-accion:hover { text-decoration: underline; }
.rc-precio { font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; min-width: 64px; }
@media (max-width: 767px) {
  .rc-tasa { gap: 14px; }
  .rc-tasa-num { min-width: 72px; }
  .rc-tasa-num strong { font-size: 32px; }
  .rc-fila { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rc-fila .rc-contacto { grid-column: 2 / -1; grid-row: 2; }
  .rc-fila .rc-precio { grid-column: 3; grid-row: 1; }
  .rc-lista-cab .btn { width: 100%; }
}

/* ============ Inicio (issue #196) ============ */
.ini-cabeza { margin-bottom: 18px; }
.ini-cabeza .page-title { margin-bottom: 2px; }
.ini-cabeza .page-sub { margin: 0; }
.ini-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.ini-tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; border: 0; font: inherit; cursor: pointer;
  background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); padding: 20px 22px; min-height: 150px; box-shadow: var(--shadow-sm); transition: transform .12s; }
.ini-tarjeta:hover { transform: translateY(-2px); }
.ini-tarjeta:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ini-tarjeta-titulo { font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.ini-tarjeta-num { font-family: var(--font-display); font-size: 40px; line-height: 1.05; color: var(--ink-strong); }
.ini-tarjeta-pie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ink-soft); margin-top: auto; }
.ini-tarjeta.principal { background: var(--brand); color: var(--on-brand); }
.ini-tarjeta.principal .ini-tarjeta-titulo, .ini-tarjeta.principal .ini-tarjeta-num, .ini-tarjeta.principal .ini-tarjeta-pie { color: var(--on-brand); }
.ini-tarjeta.suave { background: var(--brand-tint); }
.ini-tarjeta-accion { font-family: var(--font-display); font-size: 24px; line-height: 1.15; color: var(--on-brand); }
.ini-chip { background: var(--surface); color: var(--brand-text) !important; font-weight: 700; border-radius: var(--radius-full); padding: 3px 10px; }
.ini-dif { font-weight: 700; border-radius: var(--radius-full); padding: 2px 8px; }
.ini-dif.sube { background: var(--success-bg); color: var(--success-text); }
.ini-dif.baja { background: var(--crit-soft); color: var(--crit); }
.ini-dif.igual { background: var(--surface-2); color: var(--ink-soft); }
.ini-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.ini-rejilla .panel { margin: 0; }
.ini-columna { display: grid; gap: 16px; min-width: 0; }
/* Sin Taxes (Pacekeeping, #438): solo las fechas del IRS, debajo de las tarjetas. */
.ini-sin-taxes .ini-columna { display: none; }
.ini-sin-taxes .ini-rejilla { grid-template-columns: minmax(0, 560px); }
.ini-cobrar-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: -4px 0 10px; color: var(--ink-soft); }
.ini-cobrar-total strong { font-size: 28px; color: var(--danger-text); font-variant-numeric: tabular-nums; }
.ini-debe { color: var(--danger-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ini-fechas .hint { margin: -6px 0 12px; }
.ini-tabla td { vertical-align: middle; }
.ini-cliente strong { display: block; color: var(--ink-strong); font-size: 14.5px; }
.ini-cliente span { display: block; color: var(--ink-soft); font-size: 12.5px; }
.ini-cuando { color: var(--ink-soft); }
.ini-fecha { display: flex; gap: 14px; align-items: center; padding: 10px 0; }
.ini-fecha-dia { width: 54px; height: 54px; flex: none; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ini-fecha-dia strong { font-family: var(--font-display); font-size: 21px; }
.ini-fecha-dia span { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; margin-top: 3px; }
.ini-fecha.pronto .ini-fecha-dia { background: var(--acento); color: var(--on-acento); }
.ini-fecha-txt { min-width: 0; }
.ini-fecha-txt strong { display: block; color: var(--ink-strong); font-size: 14.5px; }
.ini-fecha-txt span { display: block; color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
@media (max-width: 1279px) {
  .ini-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ini-rejilla { grid-template-columns: minmax(0, 1fr) 320px; }
  .ini-tabla .ini-prep { display: none; }
}
@media (max-width: 1023px) {
  .ini-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ini-tarjetas { gap: 10px; }
  .ini-tarjeta { min-height: 0; padding: 14px 16px; }
  .ini-tarjeta-num { font-size: 32px; }
  .ini-tarjeta-titulo { font-size: 13px; }
  .ini-tarjeta-pie { font-size: 12.5px; gap: 6px; }
  .ini-tabla .ini-cuando, .ini-tabla thead { display: none; }
}

/* ============ Historial de actividad (issue #212) ============ */
.hist-panel { max-width: 860px; }
.hist-dia { margin: 18px 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
.hist-dia:first-child { margin-top: 4px; }
.hist-fila { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.hist-fila:last-of-type { border-bottom: 0; }
.hist-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700;
  background: var(--brand-tint); color: var(--brand-text); }
.hist-ssn .hist-ic { background: var(--warn-soft); color: var(--warn); }
.hist-servicio .hist-ic { background: var(--success-bg); color: var(--success-text); }
.hist-txt { min-width: 0; }
.hist-que { margin: 0; color: var(--ink-strong); font-size: 14px; overflow-wrap: anywhere; }
.hist-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.hist-etiqueta { background: var(--surface-2); color: var(--ink); border-radius: var(--radius-full); padding: 2px 10px; font-size: 12.5px; }
.hist-etiqueta b { color: var(--ink-strong); font-weight: 700; }
.hist-pie { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 12.5px; }
.hist-cliente { font-size: 12.5px; }
.hist-mas { margin-top: 12px; }
#panelActividadEquipo .h2row { gap: 12px; flex-wrap: wrap; }
#actEquipoLista { max-height: 520px; overflow-y: auto; }

/* ============ Avisos: la campana (issue #210) ============ */
.campana-wrap { position: relative; margin-left: auto; }
.campana { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink-strong);
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); }
.campana:hover { background: var(--surface-hover); }
.campana:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.campana .ic { width: 20px; height: 20px; }
.campana b { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--acento); color: var(--on-acento); font-size: 11.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface-page, var(--surface)); }
.panel-avisos { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: 400px; max-width: calc(100vw - 32px);
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md, var(--shadow-sm)); padding: 18px; }
.panel-avisos[hidden], .campana b[hidden] { display: none; }
.avisos-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.avisos-cab h2 { margin: 0; font-family: var(--font-display); font-size: 19px; color: var(--ink-strong); }
.avisos-filtro { margin-bottom: 12px; background: var(--surface-2); }
.avisos-lista { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.avisos-vacio { padding: 18px 4px; text-align: center; }
.aviso { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer;
  background: none; border-radius: var(--radius-md); padding: 12px; }
.aviso:hover { background: var(--surface-hover); }
.aviso.nuevo { background: var(--brand-tint); }
.aviso:focus-visible { outline: 2px solid var(--focus); }
.aviso-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--brand-text); }
.aviso:not(.nuevo) .aviso-ic { background: var(--brand-tint); }
.aviso-ic .ic { width: 18px; height: 18px; }
.aviso-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aviso-txt strong { color: var(--ink-strong); font-size: 14px; }
.aviso-txt span { color: var(--ink); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.aviso-txt small { color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
@media (max-width: 767px) {
  .campana-wrap { position: static; }
  .panel-avisos { position: fixed; left: 12px; right: 12px; top: 12px; width: auto; max-width: none; max-height: calc(100vh - 110px); overflow-y: auto; }
}
.campana .ic, .aviso-ic .ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* ============ Servicios por categoría en el menú (issue #198) ============ */
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: -2px 0 6px 38px; padding-left: 10px; border-left: 2px solid var(--sidebar-line, var(--line)); }
.nav-sub[hidden] { display: none; }
.nav-subitem { border: 0; background: none; font: inherit; font-size: 13.5px; text-align: left; color: var(--sidebar-ink-soft, var(--ink-soft));
  padding: 6px 10px; border-radius: var(--radius-md); cursor: pointer; }
.nav-subitem:hover { background: var(--sidebar-hover, var(--surface-hover)); color: var(--sidebar-ink, var(--ink-strong)); }
.nav-subitem.active { color: var(--brand-text); font-weight: 700; background: var(--brand-tint); }
.nav-subitem:focus-visible { outline: 2px solid var(--focus); }
/* En el menú de iconos (iPad de pie) y en el celular no caben: Servicios abre
   la pantalla con sus categorías en pestañas. */
@media (max-width: 1023px) { .nav-sub { display: none !important; } }

/* ============ Dashboard de Contabilidad con el diseño nuevo (issue #256) ============ */
.ana-resumen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.ana-hero .overline { margin: 0 0 4px; }
.ana-hero h2 { margin: 0; font-size: 20px; }
.ana-cifra { font-family: var(--font-display); font-size: 52px; line-height: 1.05; font-weight: 700; margin: 6px 0; font-variant-numeric: tabular-nums; }
.ana-cifra.entra, .ana-chica strong.entra { color: var(--entra); }
.ana-cifra.sale, .ana-chica strong.sale { color: var(--sale); }
.ana-frase { margin: 0; color: var(--ink-soft); font-size: 15px; max-width: 60ch; }
.ana-chicas { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ana-chica { background: var(--surface-2); border-radius: var(--radius-md); padding: 12px 16px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.ana-chica span { color: var(--ink-soft); font-size: 13px; grid-column: 1; }
.ana-chica strong { font-size: 22px; color: var(--ink-strong); font-variant-numeric: tabular-nums; grid-column: 1; }
.ana-chica .delta { grid-column: 2; grid-row: 1 / span 2; font-size: 13px; font-weight: 700; }
.ana-medio { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.ana-puntos { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.ana-puntos li { color: var(--ink); font-size: 14.5px; line-height: 1.45; }
#ctbAnaDash .rank-barra > i { background: var(--sale); }
.ent-resumen { margin-bottom: 12px; }
@media (max-width: 1279px) { .ana-medio { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1023px) {
  .ana-resumen { grid-template-columns: minmax(0, 1fr); }
  .ana-chicas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ana-chica { grid-template-columns: 1fr; }
  .ana-chica .delta { grid-column: 1; grid-row: auto; }
}
@media (max-width: 767px) {
  .ana-cifra { font-size: 40px; }
  .ana-chicas { grid-template-columns: minmax(0, 1fr); }
  .ana-chica { grid-template-columns: 1fr auto; }
  .ana-chica .delta { grid-column: 2; grid-row: 1 / span 2; }
}

/* ============ Idioma (issue #189) ============
   El selector EN | ES: en el renglón de "Sesión iniciada como" y en la
   tarjeta de entrada. */
.session-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 6px; }
.session-top .session-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idioma-sel {
  display: inline-flex; flex: none; gap: 2px; padding: 2px;
  border-radius: var(--radius-full); background: var(--sidebar-hover);
}
.idioma-sel button {
  border: 0; background: transparent; cursor: pointer; min-width: 30px; min-height: 24px; padding: 0 6px;
  border-radius: var(--radius-full); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--sidebar-ink-soft);
}
.idioma-sel button:hover { color: var(--sidebar-ink); }
.idioma-sel button.active { background: var(--sidebar-active); color: var(--sidebar-active-ink); }
.idioma-sel button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.login-card .idioma-sel { display: flex; width: max-content; margin: 18px auto 0; padding: 3px; background: var(--surface-hover); }
.login-card .idioma-sel button { min-width: 36px; min-height: 30px; font-size: 12px; color: var(--ink-soft); }
.login-card .idioma-sel button:hover { color: var(--ink-strong); }
.login-card .idioma-sel button.active { background: var(--brand); color: var(--on-brand); }
@media (max-width: 1023px) {
  .session-top { justify-content: center; padding: 0; }
  .sidebar-foot .idioma-sel button { min-width: 24px; padding: 0 3px; }
}
@media (max-width: 767px) {
  .session-top { flex: none; }
  .sidebar-foot .idioma-sel button { min-height: 32px; }
}

/* ============ Pago aparte del estatus del tax ============
   Por banco se paga solo del reembolso: se ve tranquilo, no como deuda. */
.tx-por-banco { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.exp-por-banco { margin: 4px 0 10px; }

/* ============ Importar clientes desde Excel (issue #204) ============
   Diseño: docs/diseno/pantallas/*-clientes-importar.png. */
.cli-cabeza, .imp-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cli-cabeza > div, .imp-cabeza > div { min-width: 0; }
.cli-cabeza .btn { margin-top: 6px; }
.imp-cabeza .link-btn { margin-top: 10px; font-weight: 600; color: var(--brand-text); }
.imp-pasos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; padding: 0; }
.imp-pasos li { padding: 8px 14px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink-muted); }
.imp-pasos li.actual { background: var(--ink-strong); border-color: var(--ink-strong); color: var(--surface); }
.imp-pasos li.hecho { color: var(--ink); }
.imp-pasos li.hecho span::before { content: "✓ "; }
.imp-subir { display: grid; gap: 10px; max-width: 720px; }
.imp-soltar { display: grid; justify-items: center; gap: 6px; padding: 32px 20px; border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); text-align: center; cursor: pointer; background: var(--surface-hover); }
.imp-soltar:hover, .imp-soltar.encima { border-color: var(--brand); background: var(--brand-tint); }
.imp-soltar strong { font-size: 16px; color: var(--ink-strong); }
.imp-ilus svg { width: 96px; height: 96px; }
.imp-nota { margin: 0; }
.imp-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.imp-columnas h2, .imp-antes h2, .imp-lista h2 { margin: 0 0 4px; }
.imp-columnas > .hint { margin: 0 0 14px; }
.imp-fila { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 92px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.imp-fila:last-child { border-bottom: 0; }
.imp-origen { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); min-width: 0; }
.imp-encabezado { font-family: var(--font-mono); font-size: 13px; color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-ejemplos { font-size: 11.5px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-flecha .ic { width: 18px; height: 18px; fill: none; stroke: var(--ink-muted); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.imp-campo { width: 100%; min-height: 44px; }
.imp-estado { justify-self: start; white-space: nowrap; }
.imp-antes { display: grid; gap: 12px; position: sticky; top: 0; }
.imp-cuentas { display: grid; }
.imp-cuenta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-muted); }
.imp-cuenta strong { font-size: 16px; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.imp-seguro { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 14px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-text); font-size: 13px; line-height: 1.5; }
.imp-seguro .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.imp-antes .btn.primary { justify-content: center; }
.imp-antes .aviso-error:empty { display: none; }
.imp-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.imp-revision { display: grid; gap: 20px; }
.imp-revision > div:empty { display: none; }
.imp-lista { display: grid; gap: 4px; }
.imp-lista > .hint { margin: 0 0 6px; }
.imp-lista-fila { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.imp-num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); padding-top: 2px; }
.imp-lista-txt { display: grid; gap: 2px; min-width: 0; }
.imp-lista-txt span { font-size: 13px; color: var(--ink-muted); }
.imp-todo-bien svg { width: 96px; height: 96px; }
.imp-hecho { display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 560px; margin: 24px auto 0; padding-block: 32px; }
.imp-hecho h2 { margin: 6px 0 0; }
.imp-hecho-botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
/* La importación inteligente (#359): lo que dijo la IA, las hojas, y en la
   revisión cada cliente con su decisión. */
.imp-izquierda { display: grid; gap: 14px; min-width: 0; }
.imp-ia { display: grid; gap: 8px; }
.imp-ia.usada, .imp-ia.plan { padding: 14px 16px; border-radius: var(--radius-lg); background: var(--brand-tint); color: var(--brand-text); }
.imp-ia > .hint { margin: 0; }
.imp-ia-cabeza { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.5; }
.imp-ia-cabeza > div { display: grid; gap: 2px; }
.imp-ia-cabeza strong { font-size: 15px; color: var(--ink-strong); }
.imp-ia-cabeza span { color: var(--ink); }
.imp-ia .ic, .imp-marca-ia .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.imp-ia-notas { margin: 0; padding: 0 0 0 52px; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink); }
.imp-hojas h2 { margin: 0 0 4px; }
.imp-hojas > .hint { margin: 0 0 10px; }
.imp-hojas-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.imp-hoja { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); font-size: 14px; cursor: pointer; }
.imp-hoja:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.imp-hoja-n { color: var(--ink-muted); font-size: 12.5px; }
.imp-estado-caja { display: grid; gap: 4px; justify-items: start; }
.imp-marca-ia { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--brand-tint); color: var(--brand-text); font-size: 11.5px; font-weight: 700; }
.imp-marca-ia[hidden] { display: none; }
.imp-marca-ia .ic { width: 14px; height: 14px; }
.imp-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.imp-filtro { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.imp-filtro.activo { background: var(--ink-strong); border-color: var(--ink-strong); color: var(--surface); }
.imp-todos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; }
.imp-todos .hint { margin: 0 4px 0 0; }
.imp-grupos { display: grid; gap: 10px; }
.imp-grupos h2 { margin: 0; }
.imp-grupos > .hint { margin: -6px 0 0; }
.imp-grupo { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.imp-grupo.omitido { opacity: .6; }
.imp-grupo-cabeza { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imp-grupo-nombre { font-size: 15.5px; color: var(--ink-strong); }
.imp-grupo-filas { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.imp-grupo-taxes { display: flex; flex-wrap: wrap; gap: 6px; }
.imp-grupo-avisos { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.imp-grupo-avisos li { position: relative; padding-left: 16px; color: var(--ink); }
.imp-grupo-avisos li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--info-text); }
.imp-grupo-avisos li.warn::before { background: var(--warn); }
.imp-grupo-existe { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-2); font-size: 13.5px; }
.imp-grupo-existe span { color: var(--ink-muted); }
.imp-grupo > .hint { margin: 0; font-size: 12.5px; }
.imp-decision { display: flex; flex-wrap: wrap; gap: 6px; }
.imp-opcion { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.imp-opcion:hover { background: var(--surface-hover); }
.imp-opcion.activa { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-text); }
.imp-mas { justify-self: start; }
@media (max-width: 1279px) {
  .imp-rejilla { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 1023px) {
  .imp-rejilla { grid-template-columns: minmax(0, 1fr); }
  .imp-antes { position: static; }
  /* En la revisión, primero las cuentas y el botón; abajo cada cliente. */
  #impPaso3 .imp-antes { order: -1; }
}
@media (max-width: 767px) {
  .imp-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .imp-flecha { display: none; }
  .imp-origen { grid-column: 1 / -1; }
  .imp-pasos li { font-size: 12.5px; padding: 6px 10px; }
  .imp-ia-notas { padding-left: 18px; }
  .imp-opcion { flex: 1 1 auto; }
}

/* ============ Configuración por secciones y Mi perfil (issue #206) ============
   Diseño: docs/diseno/pantallas/*-config-mi-perfil.png. */
.cfg-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 16px; }
.cfg-menu { display: grid; gap: 4px; padding: 10px; border-radius: var(--radius-lg); background: var(--surface); position: sticky; top: 0; }
.cfg-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 500; text-align: left; cursor: pointer; }
.cfg-menu-item:hover { background: var(--surface-hover); }
.cfg-menu-item.activo { background: var(--brand-tint); color: var(--brand-text); font-weight: 600; }
.cfg-menu-item .ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cfg-secciones { min-width: 0; }
.cfg-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cfg-sec > .panel { margin: 0; }
.cfg-yo-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.cfg-yo-cab > div { display: grid; gap: 2px; min-width: 0; }
.cfg-yo-cab strong { font-size: 18px; color: var(--ink-strong); }
.cfg-avatar { width: 64px; height: 64px; font-size: 22px; }
.cfg-guardar-nombre { justify-content: flex-end; align-items: flex-start; }
.cfg-guardar-nombre .btn { width: auto; }
#perfilNombreEstado:empty { display: none; }
.cfg-renglon { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; flex-wrap: wrap; }
.cfg-etiqueta { display: block; margin: 8px 0 10px; }
.cfg-temas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cfg-tema { display: grid; gap: 10px; padding: 10px; border: 1.5px solid var(--line); border-radius: var(--radius-md); cursor: pointer; font-weight: 600; }
.cfg-tema.activo { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.cfg-tema > span:last-child { display: flex; align-items: center; gap: 8px; }
.cfg-muestra { display: grid; grid-template-columns: 1fr 2.2fr; gap: 6px; height: 72px; padding: 8px; border-radius: 10px; }
.cfg-muestra i { border-radius: 6px; }
.cfg-muestra.claro { background: #e9eee4; }
.cfg-muestra.claro i { background: #ffffff; }
.cfg-muestra.oscuro { background: #0c0e14; }
.cfg-muestra.oscuro i { background: #1f2430; }
.cfg-muestra.sistema { background: linear-gradient(90deg, #e9eee4 50%, #0c0e14 50%); }
.cfg-muestra.sistema i:first-child { background: #ffffff; }
.cfg-muestra.sistema i:last-child { background: linear-gradient(90deg, #ffffff 30%, #1f2430 30%); }
.cfg-aviso { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.cfg-aviso:last-child { border-bottom: 0; }
/* Tu plan (#188, #358): cuánto lleva de cada cosa, con su barra si tiene tope. */
.plan-uso { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 28px; margin-bottom: 12px; }
.plan-fila { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.plan-fila .hint { margin: 0; font-size: 12px; }
.plan-fila-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plan-fila-cabeza strong { color: var(--ink-strong); font-weight: 600; }
.plan-cifra { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-barra { height: 8px; border-radius: var(--radius-full); background: var(--brand-tint); overflow: hidden; }
.plan-barra > i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.plan-barra.lleno > i { background: var(--warn); }
/* La ventana de "Llegaste al límite de tu plan": amable, con su dibujo. */
.limite-plan .modal-body { text-align: center; }
.limite-plan-ilus { display: flex; justify-content: center; }
.limite-plan-ilus .ilus { width: 132px; height: 132px; }
.limite-plan-texto { font-size: 16px; color: var(--ink-strong); margin: 4px 0 10px; line-height: 1.45; }
.cfg-aviso-txt { display: grid; gap: 2px; min-width: 0; flex: 1; cursor: pointer; }
/* El resumen por correo (#210): cada cuándo, y en cada aviso si va en el correo. */
.cfg-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--line); }
.cfg-resumen label { font-weight: 600; color: var(--ink-strong); }
.cfg-resumen select { min-height: 38px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.cfg-resumen .hint { flex-basis: 100%; margin: 0; }
.cfg-aviso-correo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
.cfg-aviso-correo input:disabled + span { opacity: .45; }
#perfilAvisos.sin-resumen .cfg-aviso-correo { display: none; }
.cfg-aviso-txt strong { color: var(--ink-strong); font-weight: 600; }
.cfg-interruptor { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.cfg-interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
.cfg-interruptor:checked { background: var(--brand); }
.cfg-interruptor:checked::after { transform: translateX(18px); }
.cfg-interruptor:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cfg-interruptor, .cfg-interruptor::after { transition: none; } }
@media (max-width: 1279px) {
  .cfg-layout { grid-template-columns: 210px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .cfg-layout { grid-template-columns: minmax(0, 1fr); }
  .cfg-menu { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
  .cfg-menu-item { width: auto; flex: none; white-space: nowrap; }
}
/* En iPad de pie caben todas las secciones en dos renglones; en el celular se desliza. */
@media (min-width: 768px) and (max-width: 1023px) {
  .cfg-menu { flex-wrap: wrap; overflow-x: visible; }
}
@media (max-width: 767px) {
  .cfg-temas { grid-template-columns: minmax(0, 1fr); }
  .cfg-muestra { height: 52px; }
}

/* Configuración → Tus datos (#207): exportar todo el despacho. */
.exp-lista { display: grid; margin: 6px 0 4px; }
.exp-item { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.exp-item:last-child { border-bottom: 0; }
.exp-item strong { color: var(--ink-strong); font-weight: 600; }
.exp-item .hint { margin: 0; }
.exp-cuidado { margin: 8px 0 4px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--ink-strong); font-size: 14px; line-height: 1.45; }
.exp-estado { display: grid; gap: 10px; margin-top: 14px; }
.exp-estado-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.exp-detalle { color: var(--ink-soft); font-size: 14px; }
.exp-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.exp-acciones .btn { width: auto; }
.exp-acciones a.btn { text-decoration: none; }
.exp-nota, .exp-mensaje { margin: 0; }
.exp-mensaje:empty { display: none; }
.exp-mensaje { color: var(--danger-text); }
.exp-faltan { margin: 0; color: var(--warn); font-size: 14px; }
@media (max-width: 767px) {
  .exp-acciones .btn { width: 100%; justify-content: center; text-align: center; }
}

/* Pregúntale a tus datos (#308): el chat de Reportes. */
.asis-chat { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; margin: 4px 0 10px; }
.asis-chat:empty { display: none; }
.asis-msg { max-width: min(640px, 92%); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.asis-msg.usuario { align-self: flex-end; background: var(--brand); color: var(--on-brand); }
.asis-msg.asistente { align-self: flex-start; background: var(--surface-hover); color: var(--ink); border: 1px solid var(--line); width: min(640px, 92%); }
.asis-msg.pensando { color: var(--ink-muted); font-style: italic; width: auto; }
.asis-msg.error { color: var(--danger-text); background: var(--danger-bg); border-color: transparent; width: auto; }
.asis-texto { margin: 0; white-space: pre-wrap; }
.asis-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.asis-sugerencias:empty { display: none; }
.asis-sug { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius-full); padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.asis-sug:hover { background: var(--surface-hover); }
.asis-form { display: flex; gap: 8px; }
.asis-form input { flex: 1; min-width: 0; min-height: 42px; padding: 9px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font: inherit; outline: none; }
.asis-form input:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
.asis-grafica { margin: 10px 0 0; }
.asis-grafica-titulo { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); margin-bottom: 4px; }
.asis-svg { width: 100%; height: auto; display: block; }
.asis-base { stroke: var(--line-strong); stroke-width: 1; }
.asis-rejilla { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.asis-eje { fill: var(--ink-muted); font-size: 11px; font-family: var(--font-sans); }
.asis-marca:hover, .asis-punto:hover { opacity: .8; }
.asis-punto { stroke: var(--surface-hover); stroke-width: 2; }
.asis-leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 12.5px; color: var(--ink); }
.asis-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.asis-tabla { margin-top: 6px; font-size: 13px; }
.asis-tabla summary { cursor: pointer; color: var(--brand-text); }
.asis-tabla table { margin-top: 6px; width: 100%; }
@media (max-width: 767px) {
  .asis-form { flex-direction: column; }
  .asis-msg, .asis-msg.asistente { max-width: 100%; width: 100%; }
}

/* Invitación y "¿Olvidaste tu contraseña?" (#210). */
.trb-invitar { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; font-size: 14px; color: var(--ink); cursor: pointer; }
.login-olvide { margin-top: 10px; align-self: center; }
/* Documentos legales de Taxpace (#237). */
.login-legal { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--ink-soft); }
.login-legal[hidden] { display: none; }
.login-legal a { color: var(--ink-soft); }
.legal-lista { margin: 4px 0 14px; padding-left: 20px; line-height: 1.9; }
.legal-lista a { color: var(--brand); }
.legal-check { align-items: flex-start; }
.legal-check input { margin-top: 3px; flex: none; }
.acceso-titulo { font-size: 20px; margin: 0 0 6px; color: var(--ink-strong); text-align: center; }
.login-card form[hidden], .login-card button[hidden] { display: none !important; }
/* Verificación en dos pasos (#190): el código que llegó al correo. */
.login-codigo-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.login-codigo-form .btn.primary { padding: 10px 20px; justify-content: center; }
.login-codigo { font-family: var(--font-mono); font-size: 24px !important; letter-spacing: .4em; text-align: center; }
.login-codigo-texto, .login-codigo-nota { text-align: center; margin: 0; }
.login-recordar { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink); cursor: pointer; }
.login-recordar input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--brand); }
.login-recordar .hint { display: block; margin-top: 2px; }
.login-codigo-pie { margin: 0; text-align: center; font-size: 13px; color: var(--ink-soft); }
.login-card.en-codigo #loginGoogle, .login-card.en-codigo #loginO, .login-card.en-codigo #loginCrear { display: none !important; }
/* Mi perfil → Seguridad de tu cuenta (#190). */
.cfg-seguridad-estado { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; color: var(--ink); }
.cfg-seguridad-estado .ic { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--success-text);
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cfg-seguridad-acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Solo el admin borra (#314): a los demás no se les enseñan los botones de borrar. */
body.sin-borrar .solo-admin { display: none !important; }
/* Taxpace no usa Google Drive (#367): lo de Drive se esconde y sale lo que lo reemplaza. */
body.sin-drive .solo-drive { display: none !important; }
body:not(.sin-drive) .solo-sin-drive { display: none !important; }

/* ---------- La suscripción (#195) ---------- */
/* El aviso de pago fallido, arriba de todo. Ámbar en la gracia; rojo en solo lectura. */
.aviso-suscripcion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn);
}
.aviso-suscripcion.grave { background: var(--crit-soft); color: var(--crit); border-color: var(--crit); }
.aviso-suscripcion p { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.45; }
.aviso-suscripcion[hidden] { display: none; }
@media (max-width: 767px) { .aviso-suscripcion .btn { width: 100%; justify-content: center; } }

/* ---------- Cerrar la cuenta (#398) ---------- */
/* El letrero de arriba usa el del pago (rojo); aquí solo sus dos botones. */
.aviso-cierre-botones { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767px) { .aviso-cierre-botones { width: 100%; } .aviso-cierre-botones .btn { flex: 1 1 140px; } }
/* El botón de lo que no tiene vuelta: rojo, con los colores de la marca para el peligro. */
.btn.peligro { background: var(--crit); border-color: var(--crit); color: var(--surface); }
.btn.peligro:hover { background: var(--crit); border-color: var(--crit); filter: brightness(.92); }
.btn.peligro:disabled { filter: none; }
.cierre-panel .exp-lista { margin-bottom: 8px; }
.cierre-estado { display: grid; gap: 10px; justify-items: start; margin-top: 6px; }
.cierre-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cierre-nota { margin: 0; }
.cierre-modal-intro { margin: 0 0 8px; color: var(--ink-strong); font-weight: 600; }
.cierre-pasos { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; color: var(--ink); font-size: 14px; line-height: 1.45; }
.cierre-campo { margin-top: 14px; }
.cierre-campo label { overflow-wrap: anywhere; }
.cierre-codigo-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.cierre-codigo-fila input { flex: 1 1 140px; width: auto; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.cierre-codigo-fila .btn { flex: none; }
.cierre-campo .hint { margin: 4px 0 0; }
.cierre-error { margin: 12px 0 0; color: var(--crit); font-size: 14px; }
.cierre-error:empty { display: none; }
@media (max-width: 767px) {
  .modal.cerrar-cuenta .modal-foot-botones { flex-direction: column-reverse; width: 100%; }
  .modal.cerrar-cuenta .modal-foot-botones .btn { width: 100%; justify-content: center; }
}

/* Tu plan: cómo va la suscripción y sus botones. */
.plan-suscripcion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--brand-tint);
}
.plan-suscripcion[hidden] { display: none; }
.plan-suscripcion-texto { flex: 1 1 280px; min-width: 0; }
.plan-suscripcion-texto p { margin: 0; }
.plan-suscripcion-estado { font-weight: 600; color: var(--ink-strong); }
.plan-suscripcion-texto .hint { margin-top: 4px; }
.plan-suscripcion-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-regreso { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-strong); }
@media (max-width: 767px) {
  .plan-suscripcion-botones, .plan-suscripcion-botones .btn { width: 100%; justify-content: center; }
}

/* Elegir un plan: tres bloques (Taxes, Pacekeeping, Bundles) lado a lado en
   escritorio y iPad acostado; en iPad de pie un bloque por renglón con sus
   dos tarjetas lado a lado; en celular, todo en una columna. */
.modal.elegir-plan { max-width: 1040px; }
.elegir-cabeza { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.elegir-cabeza .segmented { background: var(--surface-2); }
.elegir-cabeza .hint { margin: 0; }
.elegir-lanzamiento {
  margin: 0; padding: 8px 12px; border-radius: var(--radius-md);
  background: var(--brand-tint); color: var(--brand-text); font-weight: 600; font-size: 13.5px;
}
.elegir-lanzamiento[hidden] { display: none; }
.elegir-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.elegir-grupo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.elegir-grupo-cabeza h3 { margin: 0; font-size: 15px; color: var(--ink-strong); }
.elegir-grupo-cabeza p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.elegir-grupo-tarjetas { display: grid; gap: 10px; }
.elegir-tarjeta {
  display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 16px;
  border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  color: var(--ink); font: inherit; cursor: pointer;
}
.elegir-tarjeta:hover { border-color: var(--brand); }
.elegir-tarjeta:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.elegir-tarjeta.activa { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; background: var(--brand-tint); }
.elegir-tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.elegir-tarjeta-cabeza strong { font-size: 16px; color: var(--ink-strong); }
.elegir-precio { display: flex; align-items: baseline; gap: 6px; }
.elegir-monto { font-size: 28px; font-weight: 700; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
/* Falta el precio en Stripe: en vez del número, a quién escribir. */
.elegir-sin-precio { font-size: 14px; font-weight: 600; color: var(--ink-muted); line-height: 1.35; }
.elegir-sin-precio a { color: var(--brand-text); overflow-wrap: anywhere; }
.elegir-por { color: var(--ink-soft); font-size: 13px; }
.elegir-antes { margin: -4px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.elegir-incluye { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; line-height: 1.4; color: var(--ink); }
.elegir-extras {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md);
}
.elegir-extras[hidden] { display: none; }
.elegir-extras .hint { margin: 2px 0 0; }
.elegir-contador { display: flex; align-items: center; gap: 6px; }
.elegir-contador input { width: 64px; text-align: center; }
.elegir-resumen { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 4px; font-size: 15px; }
.elegir-resumen strong { font-size: 18px; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.elegir-legal { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.elegir-acepto { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ink-strong); cursor: pointer; }
.elegir-acepto input { margin-top: 3px; flex: none; }
.elegir-acepto a { color: var(--brand-text); }
.elegir-stripe { font-size: 12px; }
@media (max-width: 1279px) { .modal.elegir-plan { max-width: 920px; } }
@media (max-width: 1023px) {
  .elegir-planes { grid-template-columns: minmax(0, 1fr); }
  .elegir-grupo-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .elegir-grupo-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .elegir-monto { font-size: 24px; }
  .elegir-plan .modal-foot-botones { width: 100%; }
  .elegir-plan .modal-foot-botones .btn { flex: 1; justify-content: center; }
}

/* ---------- Primeros pasos (#392, solo Taxpace) ----------
   Diseño: docs/diseno/pantallas/taxpace-primeros-pasos*.png. El paso elegido
   en grande con su ilustración y, al lado, la lista de los siete. */
.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;
}
.pp { padding: 24px 26px 26px; }
.pp-cabeza { display: flex; align-items: flex-start; gap: 20px 24px; }
.pp-cabeza-texto { flex: 1; min-width: 0; }
.pp-overline { font: 700 11px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.panel.pp h2 { font-size: 22px; line-height: 28px; margin: 2px 0 4px; }
.pp h2:focus { outline: none; }
.pp-ayuda { margin: 0; color: var(--ink-muted); font-size: 14px; }
.pp-avance { width: 240px; flex: none; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.pp-cuenta { font-size: 14px; color: var(--ink-muted); }
.pp-cuenta strong { font: 600 22px var(--font-display); color: var(--ink-strong); }
.pp-barra { height: 8px; border-radius: var(--radius-full); background: var(--brand-tint); overflow: hidden; }
.pp-barra i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--brand); transition: width .4s ease; }
.pp-cerrar {
  width: 40px; height: 40px; flex: none; margin: -4px -6px 0 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: transparent; color: var(--ink-muted); cursor: pointer;
}
.pp-cerrar:hover { background: var(--surface-hover); color: var(--ink-strong); }
.pp-cerrar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pp-cerrar .ic, .recorrido-cerrar .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pp-cuerpo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; margin-top: 20px; align-items: stretch; }
.pp-destacado { display: flex; gap: 24px; align-items: center; background: var(--brand-tint); border-radius: 24px; padding: 22px 26px; }
.pp-dibujo { flex: none; }
.pp-dibujo .ilus { width: 168px; height: 168px; margin: 0; }
.pp-destacado-texto { min-width: 0; flex: 1; }
.pp-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-pill { font-size: 12px; }
.pp-destacado h3 { font-family: var(--font-display); font-size: 21px; line-height: 27px; font-weight: 600; color: var(--ink-strong); margin: 6px 0 0; }
.pp-destacado p { color: var(--ink); margin: 6px 0 0; font-size: 14.5px; }
.pp-botones { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.pp-nota { font-size: 13px; color: var(--ink-muted); flex: 1; min-width: 150px; }
.pp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-fila {
  width: 100%; display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 7px 12px;
  border: 0; border-radius: 16px; background: transparent; color: var(--ink-strong); text-align: left;
  font: inherit; cursor: pointer;
}
.pp-fila:hover { background: var(--surface-hover); }
.pp-fila:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pp-fila.elegido { background: var(--surface-page); }
.pp-num {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none;
  display: grid; place-items: center; font: 700 13px var(--font-mono); color: var(--ink-muted);
}
.pp-num .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pp-fila.hecho .pp-num { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pp-fila.sigue .pp-num { border-color: var(--brand); color: var(--brand-text); }
.pp-fila.no-aplica .pp-num { border-style: dashed; }
.pp-fila-texto { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; }
.pp-fila.hecho .pp-fila-texto { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.pp-fila.no-aplica .pp-fila-texto { color: var(--ink-muted); }
.pp-fila-nota { font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
.pp-chevron { color: var(--ink-muted); font-size: 20px; line-height: 1; }
.pp-fila.hecho .pp-chevron { visibility: hidden; }
/* Al terminar: la celebración, una sola vez. */
.pp.pp-fin { display: flex; align-items: center; gap: 28px; position: relative; overflow: hidden; }
.pp-fin .pp-dibujo .ilus { width: 150px; height: 150px; }
.pp-fin-texto { position: relative; flex: 1; }
.panel.pp.pp-fin h2 { font-size: 26px; line-height: 32px; }
.pp-confeti i {
  --giro: 0deg;  /* cuánto queda girado cada papelito */
  position: absolute; width: 10px; height: 16px; border-radius: 3px; background: var(--acento); animation: pp-cae 1.6s ease-out both;
}
.pp-confeti i:nth-child(1) { left: 3%; top: 10%; --giro: 20deg; }
.pp-confeti i:nth-child(2) { left: 2%; top: 70%; background: var(--brand); --giro: -30deg; animation-delay: .1s; }
.pp-confeti i:nth-child(3) { left: 30%; top: 4%; background: var(--brand-tint); --giro: 50deg; animation-delay: .2s; }
.pp-confeti i:nth-child(4) { left: 62%; top: 5%; --giro: -12deg; animation-delay: .05s; }
.pp-confeti i:nth-child(5) { left: 95%; top: 62%; background: var(--brand); --giro: 35deg; animation-delay: .15s; }
.pp-confeti i:nth-child(6) { left: 92%; top: 8%; background: var(--brand-tint); --giro: -40deg; animation-delay: .25s; }
.pp-confeti i:nth-child(7) { left: 96%; top: 34%; --giro: 70deg; animation-delay: .3s; }
.pp-confeti i:nth-child(8) { left: 2%; top: 40%; background: var(--brand); --giro: 10deg; animation-delay: .12s; }
.pp-confeti i:nth-child(9) { left: 78%; top: 3%; background: var(--acento-tint); --giro: -60deg; animation-delay: .22s; }
.pp-confeti i:nth-child(10) { left: 46%; top: 2%; background: var(--brand-tint); --giro: 80deg; animation-delay: .18s; }
@keyframes pp-cae {
  from { opacity: 0; transform: translateY(-24px) rotate(0deg); }
  to { opacity: 1; transform: translateY(0) rotate(var(--giro, 0deg)); }
}
/* El menú: "Guía de inicio" va abajo, sobre la sesión. */
.nav-guia { margin-top: auto; }
.nav-guia:not([hidden]) + .sidebar-foot { margin-top: 8px; }
.nav-guia .ic { color: var(--acento); }

@media (max-width: 1279px) {
  .pp-dibujo .ilus { width: 128px; height: 128px; }
  .pp-destacado { gap: 18px; padding: 20px; }
  .pp-cuerpo { gap: 16px; }
}
@media (max-width: 1023px) {
  .pp-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pp-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 2px 8px; }
  .pp-avance { width: 200px; }
}
@media (max-width: 767px) {
  .pp { padding: 18px 16px 18px; }
  .pp-cabeza { flex-wrap: wrap; position: relative; }
  .pp-cabeza-texto { flex-basis: calc(100% - 48px); }
  .pp-cerrar { position: absolute; right: 0; top: 0; margin: -8px -8px 0 0; }
  .pp-avance { width: 100%; padding: 0; }
  .panel.pp h2 { font-size: 20px; line-height: 26px; }
  .pp-destacado { flex-direction: column; align-items: stretch; gap: 10px; padding: 18px 16px; }
  .pp-dibujo { align-self: center; }
  .pp-dibujo .ilus { width: 112px; height: 112px; }
  .pp-botones .btn { flex: 1; justify-content: center; }
  .pp-lista { display: flex; }
  .pp-fila { padding: 6px 6px; }
  .pp.pp-fin { flex-direction: column; text-align: center; gap: 12px; }
  .pp-fin .pp-dibujo .ilus { width: 120px; height: 120px; }
  .nav-guia { margin-top: 0; }
  .nav-guia:not([hidden]) + .sidebar-foot { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-confeti i { animation: none; transform: rotate(var(--giro, 0deg)); }
  .pp-barra i { transition: none; }
}

/* ---------- El recorrido guiado (#392) ----------
   Diseño: docs/diseno/pantallas/taxpace-recorrido*.png. La sombra alrededor
   no recibe clics: el recorrido nunca tapa la app. */
.recorrido-foco {
  position: fixed; z-index: 70; pointer-events: none; border-radius: 16px;
  box-shadow: 0 0 0 3px var(--acento), 0 0 0 9999px rgba(8,14,30,0.45);
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
.recorrido-foco[hidden] { display: none; }
.recorrido-globo {
  position: fixed; z-index: 71; background: var(--surface); color: var(--ink); border-radius: 22px;
  padding: 16px 18px 16px; box-shadow: 0 24px 60px -12px rgba(8,14,30,0.45);
}
.recorrido-globo:focus { outline: none; }
.recorrido-flecha {
  position: absolute; width: 18px; height: 18px; margin-left: -9px; background: var(--surface);
  transform: rotate(45deg); border-radius: 3px;
}
.recorrido-globo[data-lado="abajo"] .recorrido-flecha { top: -7px; }
.recorrido-globo[data-lado="arriba"] .recorrido-flecha { bottom: -7px; }
.recorrido-flecha[hidden] { display: none; }
.recorrido-arriba { position: relative; display: flex; align-items: center; justify-content: space-between; }
.recorrido-cuenta { font: 700 11px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-text); }
.recorrido-cerrar {
  width: 36px; height: 36px; margin: -8px -10px -8px 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: transparent; color: var(--ink-muted); cursor: pointer;
}
.recorrido-cerrar:hover { background: var(--surface-hover); color: var(--ink-strong); }
.recorrido-cerrar:focus-visible { outline: 2px solid var(--focus); }
.recorrido-titulo { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink-strong); margin: 4px 0 0; }
.recorrido-texto { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; }
.recorrido-pie { display: flex; align-items: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.recorrido-puntos { display: flex; gap: 5px; margin-right: auto; }
.recorrido-puntos[hidden] { display: none; }
.recorrido-puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.recorrido-puntos i.activo { width: 20px; border-radius: var(--radius-full); background: var(--brand); }
.recorrido-pie .btn { min-height: 40px; }
@media (prefers-reduced-motion: reduce) { .recorrido-foco { transition: none; } }

/* Movimientos internos (#391): transferencias entre cuentas del cliente y
   pagos de su tarjeta, que no cuentan en ningún total. */
.int-resumen {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  padding: 10px 13px; margin-bottom: 12px; border-radius: 8px;
  background: var(--surface-2); color: var(--ink); font-size: 13px;
}
.int-resumen strong { color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.int-sugerencias-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 4px 0 4px; }
.int-sugerencias-cabeza h3 { margin: 0; font-size: 14px; color: var(--ink-strong); }
.int-lista { border-top: 1px solid var(--line); }
.int-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.int-cuerpo { display: grid; gap: 4px; min-width: 0; }
.int-cuerpo .pill { justify-self: start; }
.int-lado { display: flex; gap: 8px; align-items: baseline; font-size: 13px; min-width: 0; }
.int-dir { flex: none; width: 52px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .02em; }
.int-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.int-txt .hint { margin-left: 6px; }
.int-monto { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-strong); }
.int-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.int-seccion { margin-top: 14px; }
.int-seccion > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; padding: 6px 0; color: var(--ink-strong); }
tr.interno td { color: var(--ink-soft); }
tr.interno td.num { text-decoration: line-through; }
.int-btn { white-space: nowrap; }
@media (max-width: 1023px) {
  .int-txt { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 767px) {
  .int-fila { grid-template-columns: minmax(0, 1fr); }
  .int-acciones { justify-content: flex-start; }
  .int-dir { width: 40px; }
}

/* ---------- Ayuda (#209, solo Taxpace) ----------
   Diseño: docs/diseno/pantallas/taxpace-ayuda.png. Los artículos a la
   izquierda; a la derecha, Escríbenos y la guía de inicio (en lugar del chat,
   que queda para después). En iPad de pie y en celular, una sola columna. */
.nav-ayuda { margin-top: auto; }
.nav-guia:not([hidden]) ~ .nav-ayuda { margin-top: 0; }
.nav-ayuda:not(.hidden) + .sidebar-foot { margin-top: 8px; }
.ayuda-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 18px; align-items: start; }
.ayuda-principal { padding: 24px; }
.ayuda-buscar { position: relative; }
.ayuda-buscar .ic {
  position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%);
  fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
.ayuda-buscar input {
  width: 100%; min-height: 46px; padding: 10px 18px 10px 46px; border: 1.5px solid transparent;
  border-radius: var(--radius-full); background: var(--surface-hover); color: var(--ink-strong); font-size: 15px;
}
.ayuda-buscar input:focus { outline: none; border-color: var(--focus); background: var(--surface); }
.ayuda-secciones { margin: 16px 0 6px; }
.ayuda-items { list-style: none; margin: 0; padding: 0; }
.ayuda-items li + li { border-top: 1px solid var(--line); }
.ayuda-item {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 6px; border: 0; background: none;
  text-align: left; cursor: pointer; border-radius: var(--radius-md); color: inherit;
}
.ayuda-item:hover { background: var(--surface-hover); }
.ayuda-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ayuda-burbuja {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-text);
  display: grid; place-items: center;
}
.ayuda-burbuja .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ayuda-item-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ayuda-item-texto strong { font-size: 15px; color: var(--ink-strong); }
.ayuda-item-texto span { font-size: 13.5px; color: var(--ink-muted); }
.ayuda-vacio { color: var(--ink-muted); padding: 18px 4px; margin: 0; }
.ayuda-volver { margin-bottom: 10px; }
.ayuda-articulo-titulo { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink-strong); margin: 4px 0 12px; }
.ayuda-articulo-titulo:focus { outline: none; }
.ayuda-texto { font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 68ch; }
.ayuda-texto p { margin: 0 0 12px; }
.ayuda-texto ul, .ayuda-texto ol { margin: 0 0 14px; padding-left: 22px; }
.ayuda-texto li { margin-bottom: 6px; }
.ayuda-texto strong { color: var(--ink-strong); }
.ayuda-texto a { color: var(--brand-text); }
.ayuda-pie { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; }
.ayuda-lado { display: flex; flex-direction: column; }
.ayuda-contacto form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ayuda-contacto form .btn { align-self: flex-start; }
.ayuda-correo { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-hover); }
.ayuda-correo-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ayuda-correo a { color: var(--brand-text); font-weight: 600; word-break: break-all; user-select: all; }
.ayuda-privado { margin: 0; }
.ayuda-estado { margin: 0; min-height: 18px; }
.ayuda-estado.ayuda-error { color: var(--crit); }
.ayuda-guia .btn { margin-top: 4px; }
.ayuda-recorridos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ayuda-recorridos .link-btn { text-align: left; }
@media (max-width: 1279px) {
  .ayuda-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
}
@media (max-width: 1023px) {
  .ayuda-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ayuda-principal { padding: 18px 16px; }
  .nav-ayuda { margin-top: 0; }
  .nav-ayuda:not(.hidden) + .sidebar-foot { margin-top: 0; }
  .ayuda-contacto form .btn { align-self: stretch; justify-content: center; }
}

/* El efectivo del cliente al categorizar (#443). */
#ctbEfectivoPanel { margin-top: 16px; }
.ctb-ef-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; align-items: end; padding: 12px; margin-bottom: 12px; background: var(--surface-page); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ctb-ef-form[hidden] { display: none; }
.ctb-ef-form .field { margin: 0; }
.ctb-ef-form .ctb-ef-desc { grid-column: span 2; }
.ctb-ef-form .field[hidden] { display: none; }
.ctb-ef-form select, .ctb-ef-form input { width: 100%; }
.ctb-ef-botones { display: flex; gap: 8px; grid-column: 1 / -1; }
.ctb-ef-error { grid-column: 1 / -1; margin: 0; color: var(--danger-text); font-size: 13px; }
.ctb-ef-error:empty { display: none; }
.ctb-ef-resumen { font-size: 13px; font-weight: 600; color: var(--ink-strong); margin-bottom: 6px; }
.ctb-ef-resumen:empty { display: none; }
.ctb-ef-quien { color: var(--ink-muted); font-size: 13px; white-space: nowrap; }
.ctb-ef-pendiente { margin-left: 6px; }
@media (max-width: 1023px) {
  .ctb-ef-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .ctb-ef-form { grid-template-columns: 1fr; }
  .ctb-ef-form .ctb-ef-desc { grid-column: auto; }
}

/* Contabilidad apagada en el menú (#443): se ve, opaca y con candado, y al
   tocarla ofrece el bundle. */
.navitem.bloqueada { opacity: .5; }
.navitem.bloqueada .nav-candado { display: inline-flex; }
.nav-candado { display: none; margin-left: auto; color: var(--sidebar-ink-soft); }
.nav-candado svg { width: 14px; height: 14px; }
.oferta-contas { max-width: 440px; }
.oferta-contas .oferta-icono { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--brand-tint, var(--accent-soft)); color: var(--brand-text, var(--accent)); margin-bottom: 10px; }
.oferta-contas .modal-body p { margin: 0; }
.oferta-contas .oferta-precio { display: flex; align-items: baseline; gap: 8px; }
.oferta-contas .oferta-precio strong { font-size: 28px; color: var(--ink-strong); }
.oferta-contas .oferta-antes { color: var(--ink-muted); font-size: 13px; margin: 0; }
.oferta-contas .oferta-aviso { background: var(--info-bg); color: var(--info-text); border-radius: var(--radius-md); padding: 10px 12px; font-size: 14px; margin: 12px 0 0; }
.elegir-tarjeta.resaltada { box-shadow: 0 0 0 3px var(--focus); }
@media (max-width: 1023px) {
  .navitem.bloqueada { position: relative; }
  .navitem.bloqueada .nav-candado { position: absolute; top: 4px; right: 8px; margin: 0; }
}