/* ============================================================
   Redesign v2 — SaaS operativo para gestorías
   ============================================================ */
:root {
  color-scheme: light;
  --bg: #f6f8fc;
  --bg-soft: #f8fafc;
  --surface: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-raised: #ffffff;
  --text: #182230;
  --muted: #667085;
  --muted-2: #98a2b3;
  --line: #d9e2ec;
  --line-soft: #edf2f7;
  --primary: #0b57d0;
  --primary-strong: #0842a0;
  --primary-soft: #d3e3fd;
  --on-primary: #ffffff;
  --success: #067647;
  --success-soft: #ecfdf3;
  --warning: #b54708;
  --warning-soft: #fffaeb;
  --danger: #b42318;
  --danger-soft: #fff1f3;
  --info: #026aa2;
  --info-soft: #f0f9ff;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 14px 34px rgba(16, 24, 40, .12);
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body-gradient: none;
  --header-bg: #f6f8fc;
  --header-border: transparent;
  --focus-ring: rgba(23, 92, 211, .22);
  --hover: #e9eef6;
  --tab-bg: transparent;
  --table-head-text: #475467;
  --dropzone-bg: linear-gradient(180deg, rgba(232, 241, 255, .84), rgba(255,255,255,.96));
  --dropzone-border: #9bb7d6;
  --line-hover: #c7d7ea;
  --danger-border: #f3c7c2;
  --danger-border-hover: #f0a8a0;
  --success-border: #75e0a7;
  --info-border: #7cd4fd;
  --fs-2xs: .72rem;
  --fs-xs: .78rem;
  --fs-sm: .85rem;
  --fs-base: .9rem;
  --fs-md: .95rem;
  --fs-lg: 1.05rem;
  --fs-xl: 1.3rem;
  --fs-display: 1.6rem;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --t-fast: .15s ease;
  --t-med: .2s ease;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f172a;
  --bg-soft: #111c31;
  --surface: #162033;
  --surface-subtle: #111c2e;
  --surface-raised: #1b2740;
  --text: #e5edf8;
  --muted: #9fb0c8;
  --muted-2: #74839a;
  --line: #2b3b56;
  --line-soft: #22314a;
  --primary: #6ea8ff;
  --primary-strong: #9bc2ff;
  --primary-soft: rgba(77, 139, 245, .16);
  --on-primary: #0c1d3d;
  --success: #6ce9a6;
  --success-soft: rgba(18, 183, 106, .14);
  --warning: #fdb022;
  --warning-soft: rgba(253, 176, 34, .14);
  --danger: #f97066;
  --danger-soft: rgba(240, 68, 56, .14);
  --info: #7cd4fd;
  --info-soft: rgba(14, 165, 233, .14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-md: 0 16px 42px rgba(0, 0, 0, .38);
  --body-gradient: none;
  --header-bg: var(--bg);
  --header-border: rgba(43, 59, 86, .86);
  --focus-ring: rgba(110, 168, 255, .28);
  --hover: #1d2b45;
  --tab-bg: #1d2b45;
  --table-head-text: #aab8cf;
  --dropzone-bg: linear-gradient(180deg, rgba(45, 78, 136, .32), rgba(22, 32, 51, .96));
  --dropzone-border: #46658f;
}

* { margin: 0; padding: 0; box-sizing: border-box; letter-spacing: 0; }
html { background: var(--bg); }
body {
  font-family: var(--font);
  background: var(--body-gradient), var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  padding: 0;
  line-height: 1.5;
  overflow-x: hidden;
}
.container {
  flex: 1;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0;
  padding: 8px 16px 8px 8px;
  background: var(--body-gradient), var(--header-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.header-row {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.brand-area {
  display: flex;
  align-items: center;
  min-height: 48px;
  min-width: 0;
  padding-left: 16px;
}
.brand-home {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.brand-logo {
  display: block;
  width: 180px;
  height: auto;
  color: var(--text);
}
.brand-logo .s0 {
  fill: currentColor;
}

/* Navbar estilo landing solo en la vista de login: el header se vuelve glass
   sticky y aparecen contacto + toggle de tema a la derecha (la user-bar va oculta). */
.login-nav-extras { display: none; }
body:has(#loginView.active) header {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
body:has(#loginView.active) .header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
}
body:has(#loginView.active) .login-nav-extras {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.login-nav-contact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-md);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.login-nav-contact:hover { color: var(--primary); background: var(--surface-subtle); }
.login-nav-contact svg { color: var(--primary); }
.login-nav-mail { padding: 8px; }
.login-theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.login-theme-toggle:hover { color: var(--primary); border-color: var(--primary); }
.login-theme-toggle .moon { display: none; }
:root[data-theme="dark"] .login-theme-toggle .sun { display: none; }
:root[data-theme="dark"] .login-theme-toggle .moon { display: block; }
@media (max-width: 560px) {
  .login-nav-contact:not(.login-nav-mail) { display: none; }
}
h1 {
  font-size: var(--fs-xl);
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: 500;
}
.user-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-self: end;
  justify-content: flex-end;
  color: var(--muted);
  font-size: var(--fs-base);
  gap: .45rem;
  min-width: 0;
  flex-wrap: nowrap;
}
.user-bar button {
  padding: .4rem .8rem;
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
}
#userEmail {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme="dark"] .cliente-selector {
  background: var(--hover);
  color: var(--muted);
}
:root[data-theme="dark"] .app-tab { color: var(--muted); }
:root[data-theme="dark"] .app-tab.active { color: var(--text); }
#userBar[style*="display: none"] { display: none !important; }
#userBar .user-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 3px !important;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}
#userBar .user-menu-button:hover,
#userBar .user-menu-button[aria-expanded="true"] {
  background: var(--hover);
}
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: linear-gradient(135deg, #1a73e8, #7c3aed);
  color: white;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .18);
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.user-avatar-large {
  width: 52px;
  height: 52px;
  border-width: 3px;
  font-size: var(--fs-xl);
}
.user-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: min(552px, calc(100vw - 24px));
  /* habilita animar el alto de las secciones <details> hacia/desde 'auto';
     acotado al menu para no afectar al resto del layout */
  interpolate-size: allow-keywords;
}
/* El header crea stacking context (z-index:30), asi que el user-menu (z-index:80) queda
   atrapado por debajo del asistente-drawer (z-index:90, en la raiz). Al desplegarse el menu,
   elevar el header por encima del drawer pero por debajo de los modales (100). */
header:has(.user-bar.user-menu-open),
header:has(.user-menu-button:focus),
header:has(.user-menu-panel:focus-within) {
  z-index: 95;
}
/* Foco acotado a boton/panel: el cliente-selector vive en .user-bar y no debe abrir el menu. */
.user-bar.user-menu-open .user-menu-panel,
.user-menu-button:focus + .user-menu-panel,
.user-menu-panel:focus-within {
  display: block;
}
.user-menu-card {
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: 0 18px 44px rgba(16, 24, 40, .18);
  /* el panel de certificado de gestoria puede alargar el menu */
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  /* reserva el hueco del scrollbar para que abrir/cerrar secciones no desplace
     el contenido en horizontal (el "salto sucio" del acordeon) */
  scrollbar-gutter: stable;
}
.user-menu-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.user-menu-identity {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.user-menu-identity #userEmail {
  max-width: none;
  color: var(--text);
  font-weight: 700;
}
.user-menu-identity #userRole {
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .74rem;
  font-weight: 800;
}
.user-menu-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.user-menu-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
}
#userBar .user-menu-actions > button {
  min-height: 40px;
}
#userBar .user-menu-actions #logoutBtn {
  flex: 1;
}
:root[data-theme="dark"] .user-menu-card {
  box-shadow: 0 20px 52px rgba(0, 0, 0, .46);
}
.theme-toggle {
  position: relative;
  min-width: 58px;
  width: 58px;
  height: 34px;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: var(--surface-subtle) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.theme-toggle::before {
  content: '';
  position: absolute;
  inset: 4px auto 4px 4px;
  width: 24px;
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: 0 1px 4px rgba(16, 24, 40, .28);
  transition: transform var(--t-med);
  z-index: 1;
}
/* Iconos sol (izq) y luna (der): el pulsador desliza sobre el del tema activo,
   asi se ve a simple vista que alterna claro/oscuro. */
.theme-toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2v2M12 20v2M4 4l1.5 1.5M18.5 18.5L20 20M2 12h2M20 12h2M4 20l1.5-1.5M18.5 5.5L20 4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='%23475467'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: left 9px center, right 9px center;
  background-size: 14px, 13px;
}
:root[data-theme="dark"] .theme-toggle {
  border-color: var(--line) !important;
  background: var(--hover) !important;
}
:root[data-theme="dark"] .theme-toggle::before {
  transform: translateX(24px);
}
:root[data-theme="dark"] .theme-toggle::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2v2M12 20v2M4 4l1.5 1.5M18.5 18.5L20 20M2 12h2M20 12h2M4 20l1.5-1.5M18.5 5.5L20 4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='%23cdd7e8'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
}
.cliente-selector {
  display: flex;
  gap: .35rem;
  align-items: center;
  background: #eef3fb;
  border: 0;
  border-radius: 999px;
  padding: 4px;
  box-shadow: none;
}
.cliente-select,
.form-row select,
.search-bar input,
.form-row input,
.form-row textarea,
.linea-row input,
.login-box input {
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}
.cliente-select {
  min-height: 34px;
  max-width: 280px;
  padding: .4rem .6rem;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
/* El popup nativo de <option> hereda colores del SO cuando el select es
   transparente: en SO oscuro + tema claro daba texto oscuro sobre fondo
   oscuro. Fijar fondo/texto explicitos garantiza contraste en ambos temas. */
.cliente-select option,
.form-row select option {
  background: var(--surface);
  color: var(--text);
}
.btn-new-cliente,
.user-bar button,
.btn-export,
.btn,
.bulk-actions button,
.linea-row button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn-new-cliente {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--primary);
  box-shadow: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-xl);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#userBar .btn-new-cliente {
  border-radius: 999px;
}
.btn-edit-cliente {
  width: auto;
  height: 34px;
  padding: 0 .7rem !important;
  border: 0 !important;
  color: var(--primary) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700;
  box-shadow: none !important;
  background: transparent !important;
}
.btn-edit-cliente:disabled {
  color: var(--muted-2) !important;
  cursor: not-allowed;
}
.cliente-selector .btn-import-cliente {
  position: relative;
  height: 34px;
  padding: 0 .7rem;
  border: 0;
  border-radius: var(--radius);
  color: var(--primary);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
/* Separador entre Editar e Importar; como pseudo-elemento del boton se oculta
   automaticamente con el (hidden para no-admin, display:none en movil). */
.cliente-selector .btn-import-cliente::before {
  content: "";
  position: absolute;
  left: calc(-.35rem / 2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--line);
}
.cliente-selector .btn-import-cliente:hover {
  background: transparent;
}
.user-bar button:hover,
.btn-export:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.bulk-actions button:hover,
.linea-row button:hover,
.btn-new-cliente:hover {
  background: var(--surface-subtle);
  border-color: var(--line-hover);
}
.btn-primary,
.login-box button {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(23, 92, 211, .28);
}
.btn-primary:hover:not(:disabled),
.login-box button:hover:not(:disabled) {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
}
.btn-danger {
  color: var(--danger);
  border-color: var(--danger-border);
}
.btn-danger:hover:not(:disabled),
.bulk-actions .btn-bulk-danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger-border-hover);
}

main { display: contents; }
.view { display: none; }
.view.active { display: block; animation: fadeIn .18s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-screen { display: none; }
.login-screen.active {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.boot-screen { display: none; }
.boot-screen.active {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 700;
}
#appView.active {
  display: grid;
  flex: 1;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-height: calc(100vh - 64px);
  padding: 0 16px 16px 0;
}
.login-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  gap: 28px;
  align-items: stretch;
}
.login-copy,
.login-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.login-copy {
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
  overflow: hidden;
  position: relative;
}
.hero-text {
  text-align: left;
  max-width: 620px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .28rem .55rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line-hover);
  border-radius: 999px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.hero-headline {
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--text);
  margin-bottom: .85rem;
}
.hero-accent {
  background: linear-gradient(120deg, var(--primary), #4f93ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  color: var(--muted);
  max-width: 58ch;
  font-size: var(--fs-lg);
}
.login-chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.login-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.login-chip svg { color: var(--primary); flex-shrink: 0; }
.login-trust {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.login-box {
  max-width: none;
  margin: 0;
  padding: 32px;
  text-align: left;
  align-self: center;
}
.login-box h2 { font-size: var(--fs-xl); color: var(--text); margin-bottom: .5rem; }
.login-box p { color: var(--muted); font-size: var(--fs-md); margin-bottom: 1.5rem; }
.login-box form { display: flex; flex-direction: column; gap: .75rem; }
.login-box input {
  width: 100%;
  min-height: 44px;
  border-radius: var(--radius);
  padding: .68rem .82rem;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.login-box input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}
.login-box button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: .75rem 1rem;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--primary) 32%, transparent);
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.login-box button:hover:not(:disabled) {
  background: var(--primary-strong);
  box-shadow: 0 14px 30px -8px color-mix(in srgb, var(--primary) 32%, transparent);
  transform: translateY(-2px);
}
.login-box button:active:not(:disabled) { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .login-box button:hover:not(:disabled) { transform: none; }
}
.login-status {
  margin-top: 1rem;
  min-height: 1.4rem;
  color: var(--muted);
  font-size: var(--fs-base);
}
.login-status.success { color: var(--success); }
.login-status.error { color: var(--danger); }
.login-foot {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.login-foot a { color: var(--primary); font-weight: 600; text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }

.app-menu-toggle { display: none; }
.app-tabs {
  position: sticky;
  top: 72px;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-self: start;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 8px 8px 0 0;
  margin: 0;
  box-shadow: none;
}
.app-tab {
  flex: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  min-height: 32px;
  border: none;
  border-radius: 0 999px 999px 0;
  padding: 0 18px 0 28px;
  background: transparent;
  color: var(--table-head-text);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.app-tab::before {
  content: '';
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: currentColor;
  -webkit-mask: var(--tab-icon) center / contain no-repeat;
  mask: var(--tab-icon) center / contain no-repeat;
  opacity: .82;
}
#tabDashboard { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3Zm10 0h8v5h-8V3ZM3 13h8v8H3v-8Zm10-3h8v11h-8V10Z'/%3E%3C/svg%3E"); }
#tabRecibidas { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 2v8h4l1.5 2h3L15 14h4V6H5Z'/%3E%3C/svg%3E"); }
#tabEmitidas { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20V4l19 8-19 8Zm2.5-3.75L16.1 12 5.5 7.75v3.05L11 12l-5.5 1.2v3.05Z'/%3E%3C/svg%3E"); }
#tabCobros { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 4h16V7H4v2Zm2 5v2h6v-2H6Z'/%3E%3C/svg%3E"); }
#tabConciliacion { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 5L21 9L17 13L17 10L4 10L4 8L17 8Z M7 11L3 15L7 19L7 16L20 16L20 14L7 14Z'/%3E%3C/svg%3E"); }
#tabModelo303 { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12v20l-3-2-3 2-3-2-3 2V2Zm3 5v2h6V7H9Zm0 4v2h6v-2H9Zm0 4v2h4v-2H9Z'/%3E%3C/svg%3E"); }
#tabModelo347 { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6l1 2h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3l1-2Zm0 4h6V4H9v2Zm-2 5h10V9H7v2Zm0 4h10v-2H7v2Zm0 4h7v-2H7v2Z'/%3E%3C/svg%3E"); }
#tabModelo390 { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2Zm12 8H5v10h14V10ZM5 8h14V6H5v2Zm2 5h3v3H7v-3Zm5 0h3v3h-3v-3Z'/%3E%3C/svg%3E"); }
#tabCalendario { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2Zm12 8H5v10h14V10ZM5 8h14V6H5v2Z'/%3E%3C/svg%3E"); }
#modelosToggle { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l3 3v3H6V2Zm-2 8h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2Zm4 4v2h8v-2H8Z'/%3E%3C/svg%3E"); }
.app-tab[hidden] { display: none; }
.app-tab-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.app-tab-group[hidden] { display: none; }
.app-subtabs {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.app-subtabs[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .app-tab-group:hover .app-subtabs,
  .app-tab-group:focus-within .app-subtabs { display: flex; }
  .app-tab-group:hover .app-tab-toggle::after,
  .app-tab-group:focus-within .app-tab-toggle::after { transform: rotate(180deg); }
}
.app-tab-toggle::after {
  content: '';
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-left: auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9 12 15.5Z'/%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'%3E%3Cpath d='M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9 12 15.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .7;
  transition: transform var(--t-fast);
}
.app-tab-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.app-tab-toggle.in-section { font-weight: 700; color: var(--text); }
.app-tab-toggle.in-section::before { opacity: 1; }
.app-subtab { padding-left: 66px; }
.app-subtab::before { display: none; }
@media (hover: hover) and (pointer: fine) {
  .app-tab:hover {
    background: var(--hover);
    color: var(--text);
  }
}
.app-tab.active {
  background: var(--primary-soft);
  color: var(--text);
  font-weight: 800;
  box-shadow: none;
}
.app-tab.active::before {
  opacity: 1;
}
.app-content {
  display: block;
  grid-column: 2;
  min-width: 0;
  width: 100%;
  padding: 0;
  min-height: clamp(520px, 62vh, 760px);
}
.pane {
  display: block;
  width: 100%;
  min-height: inherit;
  padding: 0;
}
.pane[hidden] { display: none; }
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 240px));
  justify-content: start;
  gap: 14px;
  margin-bottom: 16px;
}
.dashboard-card,
.dashboard-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.dashboard-card {
  padding: 16px;
}
.dashboard-card span,
.dashboard-period {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.dashboard-card strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.1;
}
.dashboard-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 16px;
}
.dashboard-panel {
  padding: 16px;
}
.dashboard-panel h3 {
  margin: 0 0 14px;
  font-size: var(--fs-md);
}
.dashboard-chart {
  display: grid;
  gap: 12px;
}
.dashboard-bar-row {
  display: grid;
  grid-template-columns: 84px 1fr 92px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.dashboard-bar-track {
  height: 10px;
  background: var(--surface-subtle);
  border-radius: 999px;
  overflow: hidden;
}
.dashboard-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
}
.dashboard-bar-fill.recibidas { background: var(--warning); }
.dashboard-legend {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.dashboard-legend span::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--primary);
}
.dashboard-legend .recibidas::before { background: var(--warning); }
.dashboard-alerts {
  display: grid;
  gap: 10px;
}
.dashboard-alert {
  padding: 12px;
  border-radius: var(--radius);
  background: var(--warning-soft);
  color: var(--warning);
}
.dashboard-alert[data-alert-action] {
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
  .dashboard-alert[data-alert-action]:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
}
.dashboard-alert.info {
  background: var(--info-soft);
  color: var(--info);
}
.dashboard-alert.ok {
  background: var(--success-soft);
  color: var(--success);
}
.dashboard-alert strong {
  display: block;
  font-size: var(--fs-base);
}
.dashboard-alert span {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
/* Aviso de vencimiento (F4): alerta navegable + boton hermano "marcar visto" */
.dashboard-alert-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.dashboard-alert-group .dashboard-alert { flex: 1; }
.aviso-visto-btn {
  flex: 0 0 auto;
  align-self: center;
  padding: 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
  .aviso-visto-btn:hover {
    background: var(--surface-subtle);
    border-color: var(--line);
  }
}

/* Calendario fiscal (F3 motor de obligaciones) */
.calendario-disclaimer {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.calendario-grupo { margin-bottom: 22px; }
.calendario-grupo h3 {
  margin: 0 0 8px;
  font-size: var(--fs-base);
}
.calendario-table-wrap { overflow-x: auto; }
.calendario-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
/* anchos fijos para que todas las tablas (una por cliente) queden alineadas entre si */
.calendario-table th:nth-child(1), .calendario-table td:nth-child(1) { width: 20%; }
.calendario-table th:nth-child(2), .calendario-table td:nth-child(2) { width: 12%; }
.calendario-table th:nth-child(3), .calendario-table td:nth-child(3) { width: 18%; }
.calendario-table th:nth-child(4), .calendario-table td:nth-child(4) { width: 18%; }
.calendario-table th:nth-child(5), .calendario-table td:nth-child(5) { width: 32%; }
.calendario-table th,
.calendario-table td {
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}
.calendario-table tr:last-child > td { border-bottom: none; }
.calendario-table thead th {
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
.semaforo {
  display: inline-block;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
}
.semaforo-cerrado { background: var(--success-soft); color: var(--success); }
.semaforo-borrador { background: var(--info-soft); color: var(--info); }
.semaforo-sin-snapshot { background: var(--danger-soft); color: var(--danger); }
.semaforo-solo-detectable,
.semaforo-no-aplica { background: var(--surface-subtle); color: var(--muted); }
.row-action-btn {
  padding: .32rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.row-action-btn.danger { color: var(--danger); }
.row-action-btn:hover { background: var(--surface-subtle); }
.dropzone {
  display: block;
  border: 1.5px dashed var(--dropzone-border);
  border-radius: var(--radius-lg);
  background:
    var(--dropzone-bg),
    var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 42px 24px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--t-med), background var(--t-med);
}
.dropzone strong {
  display: block;
  color: var(--text);
  font-size: var(--fs-lg);
}
.dropzone p { color: var(--muted); margin-top: .35rem; font-size: var(--fs-base); }
input[type="file"] { display: none; }
.dropzone.drag {
  border-color: var(--primary);
  background: var(--primary-soft);
}
@media (hover: hover) and (pointer: fine) {
  .dropzone:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
  }
}
.btn-camera {
  display: none;
  width: 100%;
  max-width: 280px;
  margin: .75rem auto 0;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
  transition: background var(--t-fast);
}
.btn-camera:hover { background: var(--surface-subtle); }
.btn-camera::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: .5rem;
  vertical-align: -3px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M9 2L7.17 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2h-3.17L15 2H9zm3 15a5 5 0 110-10 5 5 0 010 10zm0-2a3 3 0 100-6 3 3 0 000 6z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M9 2L7.17 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2h-3.17L15 2H9zm3 15a5 5 0 110-10 5 5 0 010 10zm0-2a3 3 0 100-6 3 3 0 000 6z"/></svg>') center/contain no-repeat;
}
@media (pointer: coarse), (max-width: 640px) {
  .btn-camera { display: block; }
}
.status {
  margin-top: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-md);
  min-height: 1.5rem;
}
.status.loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  text-align: left;
  animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75%, 100% { content: '...'; }
}
.mobile-select-all-label { display: none; }
#output {
  display: grid;
  gap: 14px;
}
#output > .result,
#output > .error,
#output > .advertencias,
#output > .review-prompt {
  margin-top: 0;
}
.notice {
  position: relative;
  padding-right: 46px;
}
.notice-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: .72;
}
.notice-close:hover,
.notice-close:focus-visible {
  opacity: 1;
  background: rgba(255,255,255,.12);
}
.notice-open,
.notice-open-item {
  cursor: pointer;
}
.notice-open:hover .notice-open-label,
.notice-open-item:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.notice-open-label {
  display: inline-block;
  margin-top: .45rem;
  font-weight: 700;
}

.history,
.result {
  margin-top: 18px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.result { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.app-content .pane > .history:first-child,
.app-content .pane > .result:first-child {
  margin-top: 0;
}
.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.history-title { display: flex; gap: .75rem; align-items: baseline; }
.history-header h2,
.result h2 {
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.result h2 { margin-bottom: 1rem; }
.result h2,
.history-header h2,
.form-row > label { letter-spacing: 0; }
.history-header .count { color: var(--muted); font-size: var(--fs-sm); }
.history-header-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.history-actions-menu {
  position: relative;
}
.history-actions-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: .48rem .78rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  list-style: none;
  user-select: none;
}
.history-actions-menu summary::-webkit-details-marker { display: none; }
.history-actions-menu summary::marker { content: ''; }
.history-actions-menu summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast);
}
.history-actions-menu[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}
.history-actions-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  display: grid;
  gap: 6px;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
}
.history-actions-list .btn-export {
  justify-content: flex-start;
  width: 100%;
  border: 0;
  box-shadow: none;
  text-align: left;
}
.btn-export {
  min-height: 36px;
  padding: .48rem .78rem;
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.search-bar { margin-bottom: .75rem; position: relative; }
.search-bar input {
  width: 100%;
  min-height: 40px;
  border-radius: var(--radius);
  padding: .55rem .85rem .55rem 2.25rem;
  font-size: var(--fs-base);
  font-family: inherit;
}
.search-bar::before {
  content: '';
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: var(--muted-2);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') center/contain no-repeat;
}
.history-table {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  padding: .68rem .75rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}
.data-table tr:last-child > td { border-bottom: none; }
.data-table thead th {
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
.data-table .col-num { text-align: right; }
.data-table .cell-missing { color: var(--danger); }
.arr-inmueble-row[hidden] { display: none; }
.arr-inmueble-form {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
}
.arr-inmueble-head {
  display: grid;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.arr-inmueble-hint {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.45;
}
.arr-inmueble-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 14px;
  align-items: end;
}
.arr-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--table-head-text);
}
.arr-field-cat { max-width: 460px; }
.arr-inmueble-form input,
.arr-inmueble-form select {
  width: 100%;
  min-height: 38px;
  padding: .5rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
  box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}
.arr-inmueble-form select option {
  background: var(--surface);
  color: var(--text);
}
.arr-cat-group { display: flex; gap: 8px; align-items: stretch; }
.arr-cat-group input { flex: 1 1 auto; min-width: 0; }
.arr-cat-group .btn-export { flex: 0 0 auto; white-space: nowrap; }
.arr-inmueble-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.col-check { width: 28px; }
.col-fecha { width: 95px; }
.col-doc { width: 200px; }
.col-cliente { width: 130px; }
.col-estado { width: 110px; }
.col-estado-lg { width: 150px; }
.col-total { width: 90px; }
.col-actions { width: 90px; }
.data-table tbody tr.clickable {
  cursor: pointer;
  transition: background var(--t-fast);
}
.data-table tr[tabindex]:focus-visible,
.data-table td[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.data-table .fecha,
.data-table .cliente-col { color: var(--muted); }
.data-table .fecha {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-base);
  white-space: nowrap;
}
.data-table .cliente-col { font-size: var(--fs-sm); white-space: nowrap; }
.data-table .proveedor { color: var(--text); font-weight: 500; word-break: break-word; }
.data-table .estado-col { white-space: nowrap; }
.data-table .total {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
}
.data-table .subtext {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.data-table .row-checkbox-cell { text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .data-table tbody tr.clickable:hover { background: var(--hover); }
}
@media (min-width: 901px) {
  .data-table td.doc-col,
  .data-table td.doc-col .subtext { white-space: nowrap; }
}
.history-empty {
  padding: 18px;
  color: var(--muted);
  font-size: var(--fs-base);
  min-height: 118px;
  display: flex;
  align-items: center;
}
.row-checkbox-cell { text-align: center; vertical-align: middle; }
.row-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
}
.estado-badge {
  display: inline-block;
  border-radius: 999px;
  padding: .18rem .55rem;
  font-size: var(--fs-2xs);
  font-weight: 800;
  border: 1px solid transparent;
}
.estado-badge.pendiente,
.estado-badge.borrador {
  background: #f2f4f7;
  color: #344054;
  border-color: #eaecf0;
}
.estado-badge.validada,
.estado-badge.cobrada {
  background: var(--success-soft);
  color: var(--success);
  border-color: #abefc6;
}
.estado-badge.exportada,
.estado-badge.emitida {
  background: var(--info-soft);
  color: var(--info);
  border-color: #b9e6fe;
}
.estado-badge.anulada {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: #fecdca;
}
.estado-badge.vencida {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: #fecdca;
}
.estado-badge.proxima {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: #fedf89;
}
.estado-badge.conciliado {
  background: var(--success-soft);
  color: var(--success);
  border-color: #abefc6;
}
.estado-badge.descartado {
  background: #f2f4f7;
  color: var(--muted);
  border-color: #eaecf0;
}
.estado-badge.sin_asignar {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: #fedf89;
}
.sin-asignar {
  border: 1px solid var(--warning);
  background: var(--warning-soft);
  border-radius: 12px;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}
.sin-asignar-head {
  font-weight: 800;
  color: var(--warning);
  margin-bottom: .25rem;
}
.sin-asignar-help {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0 0 .75rem;
}
.sin-asignar-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  border-top: 1px solid #fedf89;
  flex-wrap: wrap;
}
.sin-asignar-prov { font-weight: 700; flex: 1 1 8rem; min-width: 0; }
.sin-asignar-total { font-variant-numeric: tabular-nums; }
.sin-asignar-select { flex: 1 1 10rem; min-width: 0; }
.conciliacion-hint {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0 0 .75rem;
}
.conc-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  align-items: center;
}
.data-table td.conc-haber { color: var(--success); font-weight: 700; }
.data-table td.conc-debe { color: var(--muted); }
.confianza-badge {
  display: inline-block;
  margin-left: .35rem;
  padding: .12rem .4rem;
  border-radius: 100px;
  font-size: .65rem;
  font-weight: 600;
  background: var(--hover);
  color: var(--muted);
}
.confianza-badge.baja { background: var(--danger-soft); color: var(--danger); }
.confianza-badge.media { background: var(--warning-soft); color: var(--warning); }
.bulk-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .85rem;
  background: var(--primary-soft);
  border: 1px solid var(--line-hover);
  border-radius: var(--radius);
  margin-bottom: .75rem;
  font-size: var(--fs-base);
  flex-wrap: wrap;
  color: var(--text);
}
.bulk-actions[hidden] { display: none; }
.bulk-count { color: var(--text); font-weight: 500; margin-right: auto; }
.bulk-actions button {
  padding: .35rem .75rem;
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}
.bulk-actions button:hover {
  background: var(--surface-subtle);
}
.bulk-actions .btn-bulk-danger {
  color: var(--danger);
  border-color: var(--danger-border);
}
.bulk-actions .btn-bulk-danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger-border-hover);
}
.bulk-actions .btn-bulk-clear {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-xl);
  padding: .1rem .5rem;
  line-height: 1;
}
.bulk-actions .btn-bulk-clear:hover {
  color: var(--text);
  background: transparent;
}
:root[data-theme="dark"] .bulk-actions {
  background: rgba(110, 168, 255, .18);
  border-color: #46658f;
}
:root[data-theme="dark"] .bulk-actions button {
  background: #1b2740;
  border-color: #3a4d6f;
  color: #e5edf8;
}
:root[data-theme="dark"] .bulk-actions button:hover {
  background: #233653;
  border-color: #5776a5;
}
:root[data-theme="dark"] .bulk-actions .btn-bulk-danger {
  color: #ffb4ab;
  border-color: #7a332f;
}
:root[data-theme="dark"] .bulk-actions .btn-bulk-danger:hover {
  background: rgba(240, 68, 56, .2);
  border-color: #b94a42;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 100;
  overflow-y: auto;
  background: rgba(15, 23, 42, .52);
  padding: 28px;
}
.modal-backdrop.active { display: flex; }
#destinatarioModalBackdrop {
  z-index: 120;
  background: rgba(15, 23, 42, .66);
}
#dialogBackdrop {
  z-index: 140;
  background: rgba(15, 23, 42, .66);
  align-items: center;
}
.modal-dialog { max-width: 440px; }
.dialog-body {
  display: grid;
  gap: .9rem;
  margin: 18px 20px 0;
}
.dialog-message {
  color: var(--text);
  font-size: var(--fs-md);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.dialog-message[hidden],
#dialogInputRow[hidden],
#dialogSlot[hidden],
#dialogCancelBtn[hidden] { display: none; }
.modal {
  width: 100%;
  max-width: 580px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 0;
  overflow: hidden;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin: 0;
  padding: 18px 20px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--line);
}
.modal-title {
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
}
.modal-actions { display: flex; gap: .5rem; align-items: center; }
.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 1.5rem;
  font-family: inherit;
  line-height: 1;
}
.modal-close:hover {
  background: var(--surface-subtle);
}
.modal .advertencias,
.modal form,
.modal > .readonly {
  margin: 18px 20px 0;
}
.form-grid { display: grid; gap: .9rem; }
.form-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}
.form-row.align-top { align-items: flex-start; }
.form-row > label {
  color: var(--table-head-text);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  min-height: 40px;
  border-radius: var(--radius);
  padding: .58rem .72rem;
  font-size: var(--fs-md);
  font-family: inherit;
}
.form-row input[type="checkbox"],
.form-row input[type="radio"] {
  width: auto;
  min-height: 0;
  padding: 0;
  box-shadow: none;
  accent-color: var(--primary);
}
.form-row input:disabled,
.form-row select:disabled,
.form-row textarea:disabled,
.linea-row input:disabled {
  opacity: 1;
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  background: var(--surface-subtle);
  border-color: var(--line-soft);
}
.form-row select:disabled {
  color: var(--muted);
}
.form-row textarea { min-height: 84px; resize: vertical; }
.form-row .readonly {
  padding: .5rem 0;
  font-size: var(--fs-base);
  color: var(--text);
}
.form-card {
  display: grid;
  gap: .6rem;
  padding: .8rem .9rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-subtle);
}
.form-card[hidden] { display: none; }
.form-card-title {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--table-head-text);
}
.form-card .subtext { margin: 0; }
/* El bloque PJ vive dentro de la tarjeta del 390: sus filas heredan el gap de la rejilla. */
#c_pj_fields { display: contents; }
#c_pj_fields[hidden] { display: none; }
.desglose-editor { display: grid; gap: .4rem; }
#d_desglose { display: grid; gap: .4rem; }
#d_desglose:empty { display: none; }
.desglose-edit-row {
  display: grid;
  grid-template-columns: 70px 1fr 1fr 32px;
  gap: .4rem;
  align-items: center;
}
.desglose-edit-row input { font-variant-numeric: tabular-nums; }
.dg-remove {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: var(--fs-lg);
  line-height: 1;
  padding: .35rem 0;
  cursor: pointer;
}
.dg-remove:hover { background: var(--danger-soft); }
.btn-link {
  align-self: start;
  background: none;
  border: none;
  color: var(--primary);
  font-size: var(--fs-base);
  padding: .2rem 0;
  cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }
.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin: 18px 0 0;
  padding: 16px 20px;
  background: var(--surface-subtle);
  border-top: 1px solid var(--line);
}
.modal-footer-right { display: flex; gap: .5rem; }
.modal-received {
  max-width: 980px;
}
.modal-backdrop.modal-backdrop-flush { padding: 0; }
.modal-received.modal-has-doc {
  display: flex;
  align-items: stretch;
  width: 100vw;
  max-width: none;
  height: 100vh;
  border: 0;
  border-radius: 0;
}
.modal-received.modal-has-doc .modal-main {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
}
.modal-received.modal-has-doc .modal-main .modal-header { position: sticky; top: 0; z-index: 1; }
.modal-received.modal-has-doc .modal-main .modal-footer {
  position: sticky;
  bottom: 0;
  margin-top: auto;
}
.modal-received.modal-has-doc .modal-doc {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface-subtle);
}
.modal-doc > iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
}
.modal-doc-bar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: .5rem;
}
.modal-doc-bar .btn {
  padding: .3rem .7rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.modal-doc-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  /* safe center: centra cuando cabe, pero alinea al inicio (sin recortar) cuando el zoom desborda */
  align-items: safe center;
  justify-content: safe center;
  overflow: auto;
  padding: 8px;
}
.modal-doc-stage.pannable {
  cursor: grab;
}
.modal-doc-stage.panning {
  cursor: grabbing;
}
.modal-doc-canvas {
  position: relative;
  flex: 0 0 auto;
}
.modal-doc-stage img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}
.modal-doc-msg {
  margin: auto;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.received-form {
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  align-items: start;
  gap: 14px;
}
.received-section {
  display: grid;
  gap: .85rem;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-subtle);
}
.received-section h3 {
  margin: 0 0 .1rem;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.received-section-main {
  grid-column: 1;
}
.received-section-money {
  grid-column: 2;
  grid-row: 1;
}
.received-form .form-row {
  grid-template-columns: 130px minmax(0, 1fr);
  gap: .75rem;
}
.form-row-stack,
.received-form .form-row-stack { grid-template-columns: 1fr; gap: .35rem; }
.received-section-money .readonly {
  width: 100%;
}
.received-section-money .desglose-table {
  width: 100%;
}
.btn {
  min-height: 38px;
  padding: .55rem 1rem;
  font-size: var(--fs-base);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.btn:active:not(:disabled),
.btn-export:active:not(:disabled),
.btn-camera:active:not(:disabled),
.estado-pill:active:not(:disabled),
.app-tab:active {
  transform: translateY(1px);
}
.estado-pills { display: flex; gap: .35rem; flex-wrap: wrap; }
.estado-pill {
  padding: .35rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.estado-pill.selected[data-estado="pendiente"] {
  background: var(--surface-subtle);
  color: var(--text);
  border-color: var(--muted-2);
}
.estado-pill.selected[data-estado="validada"] {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success-border);
}
.estado-pill.selected[data-estado="exportada"] {
  background: var(--info-soft);
  color: var(--info);
  border-color: var(--info-border);
}
.estado-pill:hover { background: var(--surface-subtle); }

.fnmt-panel {
  display: grid;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
}
.fnmt-panel[hidden] { display: none; }
.fnmt-panel-header {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: center;
}
.fnmt-panel h3 {
  font-size: .8rem;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fnmt-status {
  display: grid;
  gap: .25rem;
  color: var(--text);
  word-break: break-word;
}
.fnmt-status code { font-size: var(--fs-xs); }
.fnmt-panel input[type="file"] { display: block; }
.fnmt-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.fnmt-panel .subtext { color: var(--muted); font-size: var(--fs-sm); }
/* Paneles del modal de cliente desplegables como las secciones del menu de usuario */
.fnmt-panel-details > summary { cursor: pointer; list-style: none; }
.fnmt-panel-details > summary::-webkit-details-marker { display: none; }
.fnmt-panel-details > summary .estado-badge { margin-left: auto; }
.fnmt-panel-details > summary::after {
  content: '\25B8';
  color: var(--muted);
  font-size: .8rem;
  flex-shrink: 0;
}
.fnmt-panel-details[open] > summary::after { content: '\25BE'; }
.fnmt-panel-body { display: grid; gap: .85rem; }
.form-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--table-head-text);
  cursor: pointer;
}
.form-check input[type="checkbox"] { width: auto; min-height: 0; margin: 0; cursor: pointer; }

/* Representacion fiscal (fase34): cert gestoria en menu usuario, autorizaciones y credencial */
.gestoria-cert-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-base);
  list-style: none;
}
.gestoria-cert-details summary::-webkit-details-marker { display: none; }
.gestoria-cert-details summary .estado-badge { margin-left: auto; }
/* En el menu de usuario el estado "validada" se muestra en azul (no verde) para
   unificar las secciones con el badge de equipo. */
.gestoria-cert-details summary .estado-badge.validada {
  background: var(--info-soft);
  color: var(--info);
  border-color: #b9e6fe;
}
/* el display:flex elimina el marcador nativo de <details>; indicador propio */
.gestoria-cert-details summary::after {
  content: '\25B8';
  color: var(--muted);
  font-size: .8rem;
}
.gestoria-cert-details[open] summary::after { content: '\25BE'; }
/* alto animado al abrir/cerrar para suavizar el redimensionado del menu */
.gestoria-cert-details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .22s ease, content-visibility .22s allow-discrete;
}
.gestoria-cert-details[open]::details-content { block-size: auto; }
.gestoria-cert-body { display: grid; gap: .6rem; padding-top: .75rem; }
.gestoria-cert-body .fnmt-status { font-size: var(--fs-sm); }
.gestoria-cert-field {
  display: grid;
  grid-template-columns: 8rem 1fr;
  align-items: center;
  gap: .3rem .7rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.gestoria-cert-field input,
.gestoria-cert-field select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .45rem .6rem;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}
.gestoria-cert-field input:disabled,
.gestoria-cert-field select:disabled {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  background: var(--surface-subtle);
  border-color: var(--line-soft);
}
/* input[type=file] esta oculto globalmente: aqui se muestra con un boton propio
   coherente con el resto del sistema (antes era invisible y poco intuitivo). */
.gestoria-cert-field input[type="file"] {
  display: block;
  min-height: 0;
  padding: .3rem .45rem;
  color: var(--muted);
  cursor: pointer;
}
.gestoria-cert-field input[type="file"]::file-selector-button {
  margin-right: .6rem;
  padding: .35rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.gestoria-cert-field input[type="file"]::file-selector-button:hover {
  background: var(--hover);
}
@media (pointer: coarse) {
  .gestoria-cert-field { grid-template-columns: 1fr; align-items: stretch; }
}
.gestoria-cert-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}
.gestoria-cert-toggle input { width: auto; cursor: pointer; }
.gestoria-cert-toggle:has(input:disabled) { cursor: default; opacity: .6; }
.gestoria-cert-body .subtext { color: var(--muted); font-size: .8rem; }

/* Equipo (fase64 F3): lista de miembros en el menu de usuario */
.equipo-lista { display: grid; gap: .4rem; }
.equipo-vacio { color: var(--muted); font-size: var(--fs-sm); }
.equipo-miembro-wrap {
  display: grid;
  gap: .35rem;
  padding: .4rem .5rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.equipo-miembro {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.equipo-miembro-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.equipo-miembro-email { font-weight: 600; font-size: var(--fs-sm); color: var(--text); word-break: break-word; }
.equipo-miembro-rol { color: var(--muted); font-size: .8rem; }
/* El badge va al extremo derecho (order), como los badges de seccion del menu. */
.equipo-miembro .estado-badge { flex-shrink: 0; order: 1; }
.equipo-miembro .equipo-accion { flex-shrink: 0; padding: .3rem .6rem; }
.equipo-asignar-toggle {
  justify-self: start;
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font-family: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.equipo-asignar-toggle:hover { text-decoration: underline; }
.equipo-admin-note { margin: 0; color: var(--muted); font-size: .8rem; }
.equipo-asignaciones { display: grid; gap: .4rem; }
.equipo-asignaciones[hidden] { display: none; }
.equipo-asignacion-items {
  display: grid;
  gap: .15rem;
  max-height: 220px;
  overflow-y: auto;
  padding: .35rem .45rem;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}
.equipo-asignacion-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
}
.equipo-asignacion-item input { flex-shrink: 0; cursor: pointer; }
.equipo-asignacion-item span { min-width: 0; word-break: break-word; }
.equipo-asignaciones-hint { color: var(--muted); font-size: .8rem; }
.equipo-invitar { display: grid; gap: .6rem; }
.rep-aviso { margin-top: .35rem; color: var(--warning); font-size: var(--fs-sm); }

.rep-aut-list { display: grid; gap: .6rem; }
.rep-aut-list:empty { display: none; }
.rep-aut-item {
  display: grid;
  gap: .3rem;
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.rep-aut-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rep-aut-meta { font-size: var(--fs-sm); color: var(--muted); word-break: break-word; }
.rep-aut-actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.rep-aut-nueva summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.rep-aut-revocadas > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.rep-aut-revocadas-list { display: grid; gap: .6rem; padding-top: .6rem; }
.rep-aut-revocadas-list .rep-aut-item { opacity: .72; }
.rep-aut-form { display: grid; gap: .75rem; padding-top: .75rem; }
.rep-alcances { display: grid; gap: .35rem; }
.rep-alcances label { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); }

.credencial-opciones { display: grid; gap: .5rem; }
.credencial-opcion {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.credencial-opcion input { margin-top: .2rem; }
.credencial-opcion span { display: grid; gap: .15rem; }
.credencial-opcion small { color: var(--muted); }
.credencial-opcion.no-disponible { opacity: .6; cursor: not-allowed; }
.credencial-pin { font-size: var(--fs-sm); color: var(--muted); }
.credencial-error { margin-top: .5rem; color: var(--danger); font-size: var(--fs-sm); }
.credencial-error[hidden] { display: none; }

.emitidas-toolbar {
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.emitidas-search {
  flex: 1;
  margin-bottom: 0;
}
.emitidas-toolbar .search-bar { min-width: 260px; }
.modal-wide { max-width: 980px; }
.modal-narrow { max-width: 440px; }

/* MFA (2FA) — F3 de docs/seguridad-2fa-plan.md */
.mfa-modal-body { margin: 18px 20px 20px; display: grid; gap: 1rem; }
.mfa-modal-body .subtext { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
/* Los pasos son contenedores: su contenido necesita su propio ritmo vertical,
   si no los hijos (descripcion, QR, clave, input, error, botones) quedan pegados. */
#mfaEnrollStep, #mfaBackupStep, .mfa-recover { display: grid; gap: 1.15rem; }
/* El display:grid con selector de ID gana al [hidden] del navegador: sin esto el paso oculto
   (backup en el QR, o el bloque de recuperacion en el login) se cuela visible. */
#mfaEnrollStep[hidden], #mfaBackupStep[hidden], .mfa-recover[hidden] { display: none; }
.mfa-qr { display: flex; justify-content: center; margin: .25rem 0; }
.mfa-qr-img {
  width: 188px;
  height: 188px;
  /* Fondo blanco fijo: el QR debe leerse igual en tema claro y oscuro. */
  background: #fff;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.mfa-secret {
  display: block;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-md);
  letter-spacing: .12em;
  word-break: break-all;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
}
.mfa-backup-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.mfa-backup-codes code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-md);
  letter-spacing: .08em;
  text-align: center;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .4rem;
}
.mfa-error { color: var(--danger); font-size: var(--fs-sm); }
.mfa-error:empty { display: none; }
@media (pointer: coarse), (max-width: 600px) {
  .mfa-backup-codes { grid-template-columns: 1fr; }
}
#clienteModalBackdrop .modal { max-width: 1176px; }
.importar-body { margin: 18px 20px 0; display: grid; gap: 1rem; }
#importarUploadStep { display: grid; gap: 1rem; }
.importar-plantillas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.importar-plantillas .subtext { margin: 0; }
/* input[type=file] esta oculto globalmente (boton propio); aqui se muestra. */
#importarFile {
  display: block;
  min-height: 0;
  padding: .3rem .45rem;
  color: var(--muted);
  cursor: pointer;
}
#importarFile::file-selector-button {
  margin-right: .6rem;
  padding: .35rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
#importarFile::file-selector-button:hover { background: var(--hover); }
.importar-mapeo {
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  font-size: var(--fs-sm);
}
.importar-mapeo-head { font-weight: 700; margin-bottom: .45rem; }
.importar-mapeo-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .15rem; }
.importar-mapeo-list code,
.importar-mapeo-ignoradas code {
  background: var(--hover);
  padding: 0 .25rem;
  border-radius: 4px;
}
.importar-mapeo-ignoradas { margin: .55rem 0 0; color: var(--muted); }
.importar-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin: .6rem 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.importar-report-table {
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.status.error { color: var(--danger); }
.cliente-form {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: start;
  gap: 14px;
}
.cliente-form .cliente-form-col:first-child .form-row {
  grid-template-columns: 110px minmax(0, 1fr);
}
.cliente-form-col {
  display: grid;
  gap: .9rem;
  min-width: 0;
}
@media (max-width: 760px) {
  .cliente-form { grid-template-columns: 1fr; }
}
.destinatario-control {
  display: flex;
  gap: .5rem;
}
.destinatario-control select { flex: 1; }
.lineas-editor {
  display: grid;
  gap: .5rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-subtle);
}
.linea-head {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) repeat(5, minmax(66px, .58fr)) 34px;
  gap: .4rem;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 800;
  padding: 0 .1rem .25rem;
}
.linea-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) repeat(5, minmax(66px, .58fr)) 34px;
  gap: .4rem;
  align-items: center;
}
.linea-row input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: .45rem .42rem .45rem .62rem;
  background: var(--surface);
  font-family: inherit;
  font-size: var(--fs-base);
}
.linea-row button {
  height: 32px;
  cursor: pointer;
  box-shadow: none;
  color: var(--danger);
}
#addLineaBtn { margin-top: .55rem; }
.totals-box {
  display: grid;
  gap: .25rem;
  justify-content: end;
  font-variant-numeric: tabular-nums;
  margin-top: 10px;
  margin-left: auto;
  padding: 10px 12px;
  width: fit-content;
  min-width: 190px;
  max-width: 100%;
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.totals-box div {
  display: flex;
  justify-content: space-between;
  min-width: 170px;
  gap: 1.6rem;
}
.totals-box div { color: var(--muted); }
.totals-box strong { color: var(--text); }
.totals-box .grand {
  color: var(--text);
  font-weight: 700;
  padding-top: .25rem;
  border-top: 1px solid var(--line);
}

.field {
  display: flex;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.field:last-child { border-bottom: none; }
.field .label { flex: 0 0 160px; color: var(--muted); font-size: var(--fs-base); font-weight: 600; }
.field .value { flex: 1; color: var(--text); font-weight: 500; word-break: break-word; }
.field .value.empty { color: var(--muted-2); font-weight: 400; }
.desglose-table .head {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line-soft);
}
.desglose-table {
  display: grid;
  grid-template-columns: auto max-content max-content;
  column-gap: 1.5rem;
  row-gap: .35rem;
  width: fit-content;
  max-width: 100%;
}
.desglose-table .tipo { font-weight: 500; }
.desglose-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.error {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid #fecdca;
  border-radius: var(--radius-lg);
  font-size: var(--fs-md);
}
.advertencias {
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  background: var(--warning-soft);
  border: 1px solid #fedf89;
  border-radius: var(--radius-lg);
  color: var(--warning);
  font-size: var(--fs-base);
}
.advertencias-title {
  color: var(--warning);
  font-weight: 600;
  margin-bottom: .35rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.advertencias ul { color: inherit; padding-left: 1.25rem; margin: 0; }
.advertencias li { margin-bottom: .15rem; }
.advertencias-title::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--warning);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="black"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="black"/></svg>') center/contain no-repeat;
}
.row-warn-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  margin-right: .4rem;
  vertical-align: 1px;
}
.review-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--primary-soft);
  border: 1px solid var(--line-hover);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.review-prompt-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.review-prompt-text strong { font-size: 1rem; }
.review-prompt-text span { font-size: var(--fs-base); color: var(--muted); }
.review-prompt-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: white;
  padding: .85rem 1.5rem;
  border-radius: var(--radius);
  font-size: var(--fs-base);
  z-index: 200;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.page-footer {
  width: 100%;
  max-width: 1180px;
  margin: 28px auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(217, 226, 236, .9);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.page-footer a { color: var(--muted); text-decoration: none; margin: 0 .35rem; }
.page-footer .sep { margin: 0 .35rem; color: var(--muted-2); }
@media (hover: hover) and (pointer: fine) {
  .page-footer a:hover { color: var(--primary); text-decoration: underline; }
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: .55rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }
/* El skip-link solo tiene destino visible con la app activa; en login/boot #appContent
   esta display:none, asi que se retira del orden de tabulacion para no saltar a un vacio. */
body:not(:has(#appView.active)) .skip-link { display: none; }
#appContent:focus { outline: none; }
:where(button, input, select, textarea, a, summary, .dropzone):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
:disabled {
  opacity: .55;
  cursor: not-allowed !important;
}
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  /* el selector universal no alcanza a ::details-content */
  .gestoria-cert-details::details-content { transition-duration: .01ms !important; }
}
@media (pointer: coarse) {
  .login-box input { font-size: 16px; }
  .desglose-edit-row { grid-template-columns: 60px 1fr 1fr 36px; }
  .btn,
  .btn-export,
  .btn-camera,
  .estado-pill,
  .user-bar button:not(.user-menu-button),
  .bulk-actions button,
  .row-action-btn {
    min-height: 44px;
  }
  .dropzone:hover {
    border-color: var(--dropzone-border);
    background: var(--dropzone-bg), var(--surface);
  }
  .user-bar button:hover,
  .btn-export:hover:not(:disabled),
  .btn-secondary:hover:not(:disabled),
  .bulk-actions button:hover,
  .linea-row button:hover,
  .btn-new-cliente:hover,
  .row-action-btn:hover,
  .btn-camera:hover,
  .estado-pill:not(.selected):hover {
    background: var(--surface);
  }
  .modal-close:hover {
    background: transparent;
    color: #6e6e73;
  }
  .data-table tbody tr.clickable:hover {
    background: transparent;
  }
  .notice-open:hover .notice-open-label,
  .notice-open-item:hover {
    color: inherit;
    text-decoration: none;
  }
}

@media (max-width: 900px) {
  body { padding: 0; }
  header { margin: 0; padding: 8px 12px; }
  .login-shell { grid-template-columns: 1fr; min-height: 0; }
  .hero-headline { font-size: 1.85rem; }
  .header-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .user-bar {
    grid-column: auto;
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .cliente-select { max-width: clamp(140px, 28vw, 280px); }
  #appView.active {
    display: block;
    min-height: calc(100vh - 64px);
    padding: 0 12px 16px;
  }
  .app-menu-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    margin-bottom: 12px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 800;
    cursor: pointer;
  }
  body.app-menu-open .app-menu-toggle {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 60;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
  }
  body.app-menu-open #appMenuLabel { display: none; }
  .app-menu-icon,
  .app-menu-icon::before,
  .app-menu-icon::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform var(--t-fast), opacity var(--t-fast);
  }
  .app-menu-icon {
    position: relative;
    flex: 0 0 18px;
  }
  .app-menu-icon::before,
  .app-menu-icon::after {
    content: '';
    position: absolute;
    left: 0;
  }
  .app-menu-icon::before { transform: translateY(-6px); }
  .app-menu-icon::after { transform: translateY(6px); }
  body.app-menu-open .app-menu-icon { background: transparent; }
  body.app-menu-open .app-menu-icon::before { transform: rotate(45deg); }
  body.app-menu-open .app-menu-icon::after { transform: rotate(-45deg); }
  body.app-menu-open #appView.active::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 23, 42, .42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .app-tabs {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(82vw, 320px);
    max-width: 320px;
    height: 100vh;
    background: var(--surface);
    border-radius: 0 20px 20px 0;
    padding: 18px 12px;
    overflow-y: auto;
    transform: translateX(calc(-100% - 16px));
    transition: transform var(--t-med);
    box-shadow: var(--shadow-md);
  }
  body.app-menu-open .app-tabs { transform: translateX(0); }
  .app-tab { min-height: 44px; }
  .app-content { grid-column: auto; }
}

@media (max-width: 640px) {
  body { padding: 0; }
  header {
    position: sticky;
    margin: 0;
    padding: 8px 10px;
  }
  .container { max-width: none; }
  .login-screen.active { padding: 12px; }
  .header-row { gap: 8px; }
  h1 { font-size: var(--fs-lg); }
  .brand-area { padding-left: 4px; }
  .brand-logo { width: clamp(96px, 28vw, 150px); }
  .user-bar {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
  }
  .user-menu-panel {
    position: fixed;
    top: 62px;
    right: 10px;
    width: calc(100vw - 20px);
  }
  .user-menu-actions button:not(.theme-toggle) { width: 100%; max-width: none; }
  .cliente-selector {
    gap: .25rem;
    padding: 3px;
  }
  .cliente-selector .cliente-select {
    max-width: clamp(84px, 30vw, 200px);
    min-width: 0;
    padding: .4rem .4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cliente-selector .btn-edit-cliente { padding: 0 .45rem !important; }
  /* Importar CSV es accion de escritorio (el fichero vive en un ordenador) y el pill
     va justo a 360px: se oculta en movil; el alta individual (+) sigue disponible. */
  .cliente-selector .btn-import-cliente { display: none; }
  .cliente-selector .btn-new-cliente {
    width: 30px;
    max-width: 30px;
    height: 30px;
    padding: 0;
  }
  .user-bar .theme-toggle {
    width: 54px;
    min-width: 54px;
    justify-self: start;
  }
  .login-copy,
  .login-box { padding: 22px; }
  .hero-headline { font-size: 1.85rem; }
  .hero-sub { font-size: var(--fs-md); }
  .app-tabs { width: min(88vw, 310px); }
  .app-tab { width: 100%; }
  .dashboard-grid,
  .dashboard-columns {
    grid-template-columns: 1fr;
  }
  .dashboard-bar-row {
    grid-template-columns: 72px 1fr;
  }
  .dashboard-bar-row > :last-child {
    grid-column: 2;
  }
  #appView.active { padding: 0 10px 14px; }
  #appView .app-content,
  #appView .pane { min-height: 0; }
  .dropzone { padding: 30px 16px; }
  .history,
  .result { padding: 14px; }
  .field { flex-direction: column; align-items: flex-start; gap: .15rem; padding: .55rem 0; }
  .field .label { flex: none; }
  .desglose-table { column-gap: .75rem; font-size: var(--fs-base); }
  .history-header { align-items: stretch; flex-wrap: wrap; }
  .history-title { width: 100%; justify-content: space-between; }
  .btn-export { width: 100%; }
  .confianza-badge { font-size: .6rem; margin-left: .25rem; padding: .1rem .3rem; }
  .history-header-actions,
  .emitidas-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .history-table {
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .history-empty { min-height: 128px; }
  .data-table,
  .data-table tbody,
  .data-table thead { display: block; }
  /* thead accesible pero invisible en cards; la fila select-all de recibidas si se muestra */
  .data-table thead tr:not(.bulk-select-row),
  .data-table thead tr.bulk-select-row th:not(.col-check) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  .data-table thead tr.bulk-select-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    margin-bottom: 8px;
    padding: 12px;
    background: var(--surface);
  }
  .data-table thead tr.bulk-select-row .col-check {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .data-table thead .mobile-select-all-label {
    display: block;
    color: var(--muted);
    font-size: var(--fs-sm);
    text-transform: none;
    letter-spacing: 0;
  }
  .data-table tbody tr {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) minmax(74px, auto);
    grid-auto-rows: auto;
    align-items: center;
    gap: 6px 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    margin-bottom: 8px;
    padding: 12px;
    background: var(--surface);
  }
  .data-table tbody tr.no-select {
    grid-template-columns: minmax(0, 1fr) minmax(74px, auto);
  }
  .data-table tbody td {
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .data-table td.row-checkbox-cell {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
  }
  .data-table td.proveedor {
    grid-column: 2;
    grid-row: 1;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .data-table td.fecha {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--fs-sm);
  }
  .data-table td.cliente-col {
    grid-column: 2 / 4;
    grid-row: 3;
    justify-self: end;
    font-size: var(--fs-xs);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .data-table td.estado-col {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .data-table td.total {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    white-space: nowrap;
    text-align: right;
  }
  .data-table td.doc-col {
    grid-column: 2 / 4;
    grid-row: 3;
    color: var(--muted);
    font-size: var(--fs-xs);
    overflow-wrap: anywhere;
  }
  .data-table tr.no-select td.proveedor {
    grid-column: 1;
    grid-row: 1;
  }
  #cobrosTable tr.no-select td.proveedor { font-size: var(--fs-xs); }
  .data-table tr.no-select td.fecha {
    grid-column: 1;
    grid-row: 2;
  }
  .data-table tr.no-select td.cliente-col,
  .data-table tr.no-select td.doc-col {
    grid-column: 1 / 3;
    grid-row: 3;
  }
  .data-table tr.no-select td.estado-col {
    grid-column: 2;
    grid-row: 1;
  }
  .data-table tr.no-select td.total {
    grid-column: 2;
    grid-row: 2;
  }
  .data-table tr.no-select td.modelo303-actions {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
  }
  .data-table tbody tr.clickable { border-radius: var(--radius); }
  .estado-badge { white-space: nowrap; }
  .bulk-actions {
    display: grid;
    grid-template-columns: 1fr;
    padding: .55rem;
    gap: .35rem;
    font-size: var(--fs-sm);
  }
  .bulk-actions button { padding: .3rem .55rem; font-size: .8rem; }
  .bulk-count { margin-right: 0; }
  .modal-backdrop { padding: 10px; align-items: flex-start; }
  .modal { max-width: 100%; }
  .modal-received.modal-has-doc { flex-direction: column; height: auto; }
  .modal-received.modal-has-doc .modal-main { height: auto; overflow: visible; }
  .modal-received.modal-has-doc .modal-doc {
    height: auto;
    min-height: 50vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .modal-received.modal-has-doc .modal-main .modal-header,
  .modal-received.modal-has-doc .modal-main .modal-footer { position: static; }
  .received-form,
  .received-section-main,
  .received-section-money {
    grid-template-columns: 1fr;
    grid-column: 1;
    grid-row: auto;
  }
  .modal-header,
  .modal-footer { padding: 14px; }
  .modal .advertencias,
  .modal form { margin: 14px; }
  .modal-footer,
  .modal-footer-right {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .form-row,
  .received-form .form-row { grid-template-columns: 1fr; }
  .form-row > label {
    font-size: var(--fs-xs);
    text-transform: none;
    letter-spacing: 0;
  }
  .linea-row {
    grid-template-columns: 1fr 1fr;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
  }
  .linea-head { display: none; }
  .linea-row input:first-child { grid-column: 1 / -1; }
  .linea-row button { grid-column: 1 / -1; width: 100%; }
  .totals-box {
    width: 100%;
    justify-self: stretch;
  }
  .totals-box div { min-width: 0; }
}

.modelo303-toolbar {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(110px, .7fr) auto auto;
  gap: .6rem;
  align-items: end;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.modelo-annual-toolbar {
  grid-template-columns: minmax(120px, 1fr) auto auto;
}
.modelo303-toolbar label {
  display: grid;
  gap: .25rem;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.modelo303-toolbar input,
.modelo303-toolbar select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  color: var(--text);
  padding: .45rem .65rem;
  font: inherit;
  font-size: var(--fs-sm);
}
#modelo115ArrendadoresPanel .modelo303-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .6rem;
}
#modelo115ArrendadoresPanel .modelo303-toolbar label { flex: 0 0 200px; }
#modelo115ArrendadoresPanel .modelo303-toolbar label:nth-of-type(2) { flex-basis: 240px; }
#modelo115ArrendadoresPanel .modelo303-toolbar input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.modelo130-ajustes {
  margin: 0 0 1rem;
  padding: .65rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-subtle);
}
.modelo130-ajustes > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.modelo130-ajustes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .6rem;
  margin-top: .75rem;
}
.modelo130-ajustes-grid label {
  display: grid;
  gap: .25rem;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.modelo130-ajustes-grid input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: .45rem .65rem;
  font: inherit;
  font-size: var(--fs-sm);
}
.modelo130-ajustes-hint {
  margin: .6rem 0 .75rem;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.modelo303-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.modelo303-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem;
  background: var(--surface);
}
.modelo303-card span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-bottom: .35rem;
}
.modelo303-card strong {
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
}
.modelo303-review {
  display: grid;
  gap: .45rem;
  margin-bottom: 1rem;
}
.modelo303-review-item {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: .6rem .75rem;
  color: var(--muted);
  background: var(--surface-subtle);
  font-size: var(--fs-sm);
}
.modelo303-review-item strong {
  color: var(--text);
}
.modelo303-review-item.warn {
  color: #fdb022;
  border-color: rgba(253, 176, 34, .42);
  background: rgba(253, 176, 34, .08);
}
.modelo303-review-item.ok {
  color: var(--success);
  border-color: rgba(108, 233, 166, .38);
  background: var(--success-soft);
}
.modelo303-sections {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr);
  gap: 1rem;
}
.modelo303-panel {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: .9rem;
  background: var(--surface-subtle);
}
.modelo303-panel h3 {
  margin: 0 0 .65rem;
  font-size: var(--fs-md);
}
.casillas-table {
  display: grid;
  gap: .35rem;
}
.casilla-row {
  display: grid;
  grid-template-columns: 60px 1fr 100px;
  gap: .65rem;
  align-items: center;
  padding: .45rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-base);
}
.casilla-row .code {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.casilla-row .amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.audit-list {
  display: grid;
  gap: .45rem;
}
.audit-row {
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  gap: .6rem;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.audit-row .muted { color: var(--muted); }
.audit-row .amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.audit-row.excluded {
  grid-template-columns: 90px 1fr 1fr;
}
.modelo303-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .15rem .55rem;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.modelo303-status.cerrado {
  color: var(--success);
  border-color: rgba(108, 233, 166, .5);
  background: var(--success-soft);
}
.modelo303-saved {
  margin-top: 1rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 1rem;
}
.modelo303-saved h3 {
  margin: 0 0 .65rem;
  font-size: var(--fs-md);
}
.modelo303-saved-list {
  width: 100%;
}

@media (max-width: 760px) {
  .modelo303-toolbar,
  .modelo303-summary,
  .modelo303-sections {
    grid-template-columns: 1fr;
  }
  #modelo115ArrendadoresPanel .modelo303-toolbar label,
  #modelo115ArrendadoresPanel .modelo303-toolbar label:nth-of-type(2) { flex-basis: 100%; }
  .audit-row,
  .audit-row.excluded {
    flex-wrap: wrap;
    height: auto;
    min-height: 34px;
    row-gap: .35rem;
  }
  .audit-row .amount {
    text-align: left;
  }
}

/* Asistente conversacional (Capa IA F4) */
.asistente-disclaimer {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.asistente-thread {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-height: 52vh;
  min-height: 220px;
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-1);
}
.asistente-msg {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 82%;
}
.asistente-msg.user { align-self: flex-end; align-items: flex-end; }
.asistente-msg.bot { align-self: flex-start; align-items: flex-start; }
.asistente-burbuja {
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: var(--fs-base);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.asistente-msg.user .asistente-burbuja {
  background: var(--primary-soft);
  color: var(--text);
  border-bottom-right-radius: var(--radius-sm);
}
.asistente-msg.bot .asistente-burbuja {
  background: var(--surface-subtle);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: var(--radius-sm);
}
.asistente-msg.error .asistente-burbuja {
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger);
}
.asistente-citas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.asistente-citas-label { font-size: var(--fs-2xs); color: var(--muted); }
.asistente-cita {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--primary);
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.asistente-cita:hover { background: var(--hover); border-color: var(--line-hover); }
.asistente-cita:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.asistente-aviso { margin: 0; font-size: var(--fs-2xs); color: var(--muted-2); }
.asistente-trunc { margin: 0; font-size: var(--fs-xs); color: var(--warning); }
.asistente-form {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-end;
  margin-top: var(--sp-3);
}
.asistente-form textarea {
  flex: 1;
  min-height: 44px;
  max-height: 160px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.4;
}
.asistente-form textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--primary);
}
.asistente-form textarea:disabled {
  background: var(--surface-subtle);
  color: var(--muted-2);
  cursor: not-allowed;
}
.asistente-form button { flex-shrink: 0; }
@media (max-width: 600px) {
  .asistente-msg { max-width: 92%; }
  .asistente-form { flex-direction: column; align-items: stretch; }
  .asistente-form button { width: 100%; }
}

/* Asistente IA: drawer lateral disparado desde el navbar (sustituye a la antigua tab). */
:root { --asistente-drawer-w: clamp(360px, 30vw, 440px); }

/* #userBar para superar a `.user-bar button` (linea 409), que si no le reimpone
   border + border-radius:var(--radius) y rompe el aspecto circular. Mismo patron que .user-menu-button. */
#userBar .asistente-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
#userBar .asistente-toggle:hover,
#userBar .asistente-toggle[aria-expanded="true"] { background: var(--hover); color: var(--text); }
#userBar .asistente-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Columna fija a la derecha, por debajo del header (sticky, z-index:30);
   z-index 90 = sobre el contenido, bajo los modales (100). El user-menu, al desplegarse,
   eleva el header a 95 para quedar por encima de este drawer. */
.asistente-drawer {
  position: fixed;
  top: 64px;
  right: 0;
  bottom: 0;
  width: var(--asistente-drawer-w);
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border-radius: var(--radius-lg) 0 0 0;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-med), visibility var(--t-med);
}
body.asistente-drawer-open .asistente-drawer {
  transform: translateX(0);
  visibility: visible;
}

/* Empuje (push): solo el contenido (#appView) cede el ancho del drawer; el navbar
   (header, fuera de #appView) y la sidebar fija mantienen su tamano. El margin-right
   no pisa el padding responsive de #appView y deja ceder solo la columna de contenido. */
#appView.active { transition: margin-right var(--t-med); }
body.asistente-drawer-open #appView.active { margin-right: var(--asistente-drawer-w); }

.asistente-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 14px 16px;
}
.asistente-drawer-header h2 { margin: 0; font-size: var(--fs-lg); }
.asistente-drawer-actions { display: flex; align-items: center; gap: var(--sp-2); }
.asistente-drawer-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.asistente-drawer-close:hover { background: var(--hover); color: var(--text); }
.asistente-drawer-close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* El hilo es elastico en el drawer de altura completa (ya no max-height: 52vh). */
.asistente-drawer .history {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 14px 16px 16px;
  margin-top: 0;
  border-radius: 0;
}
.asistente-drawer .asistente-thread { flex: 1; min-height: 0; max-height: none; }

/* Realce de la fila citada desde el chat (sin abrir el modal). */
.row-cita-highlight { animation: cita-flash 1.6s ease; }
@keyframes cita-flash {
  0%, 30% { background: var(--primary-soft); }
  100% { background: transparent; }
}

/* Movil: el drawer cubre la pantalla (sin push) y se comporta como modal. */
@media (pointer: coarse), (max-width: 600px) {
  .asistente-drawer { top: 0; width: 100vw; border-left: 0; box-shadow: none; }
  body.asistente-drawer-open #appView.active { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .asistente-drawer,
  #appView.active { transition: none; }
  .row-cita-highlight { animation: none; }
}