/* Bella Vida — plataforma interna de gestión */

:root {
  --app-sidebar: 236px;
  --app-topbar: 57px;
  --app-card: #FFFFFF;
  --app-muted: #F7F4EC;
  --app-shadow: 0 1px 2px rgba(28, 61, 34, 0.05);
}

html, body { min-height: 100%; max-width: 100%; overflow-x: clip; }
body { background: var(--bv-fondo-op); color: var(--bv-tinta); }
/* Con un modal abierto el fondo no se desplaza. El `overflow: hidden` iba en
   el <body> y eso dejaba sin scrollport al `position: sticky` del menú
   lateral: la barra se despegaba y reaparecía media pantalla más arriba,
   asomando por detrás del modal. En el <html> el scroll se traba igual y el
   sticky se queda donde estaba. */
html.app-bloqueada { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.shell { min-height: 100vh; max-width: 100%; display: flex; align-items: stretch; overflow-x: clip; }
.zona { flex: 1; min-width: 0; max-width: 100%; display: flex; flex-direction: column; }
#principal { min-width: 0; max-width: 100%; overflow-x: clip; }

/* Sesión */
.sesion-pantalla { min-height: 100vh; display: grid; place-items: center; padding: 22px; }
.sesion-card { width: min(100%, 410px); padding: 34px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: #FFF; text-align: center; box-shadow: var(--app-shadow); }
.sesion-titulo { margin: 0; font-family: var(--bv-serif); color: var(--bv-verde-profundo); font-size: 28px; font-weight: 400; }
.sesion-card p { color: var(--bv-gris); line-height: 1.6; font-size: 14px; }

/* Sidebar */
.sidebar { width: var(--app-sidebar); flex: 0 0 var(--app-sidebar); height: 100vh; position: sticky; top: 0; z-index: 80; display: flex; flex-direction: column; color: var(--bv-marfil); background: var(--bv-verde-profundo); border-right: 1px solid rgba(250, 247, 241, 0.12); }
.sidebar-cab { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(250, 247, 241, 0.12); }
.sidebar-cab .bv-lockup { color: var(--bv-marfil); min-width: 0; }
.sidebar-cab .bv-lockup:hover { color: var(--bv-marfil); }
.sidebar-cab .bv-lockup-nombre { font-size: 15px; }
.sidebar-cab .bv-lockup-firma { font-size: 6.5px; }
#btn-cerrar-drawer { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--bv-marfil); cursor: pointer; border-radius: var(--bv-radio-s); }
/* R7: buscador de funcionalidades en el menú */
.nav-busca { padding: 8px 12px 2px; }
.nav-busca-input { width: 100%; box-sizing: border-box; background: rgba(250, 247, 241, 0.07); border: 1px solid rgba(250, 247, 241, 0.16); border-radius: 7px; color: #faf7f1; font: inherit; font-size: 12.5px; padding: 7px 10px; outline: none; }
.nav-busca-input::placeholder { color: rgba(250, 247, 241, 0.42); }
.nav-busca-input:focus { border-color: rgba(250, 247, 241, 0.38); background: rgba(250, 247, 241, 0.11); }
.nav-busca-input::-webkit-search-cancel-button { filter: invert(1) opacity(0.6); }
.sidebar.es-colapsada .nav-busca { display: none; }
.nav-sin-resultados { padding: 12px 6px; font-size: 12px; color: rgba(250, 247, 241, 0.55); line-height: 1.55; }
.sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 18px; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar-nav::-webkit-scrollbar { width: 0; }
.sidebar-nav:hover { scrollbar-width: thin; scrollbar-color: rgba(250, 247, 241, 0.22) transparent; }
.sidebar-nav:hover::-webkit-scrollbar { width: 6px; }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(250, 247, 241, 0.22); border-radius: 3px; }
.nav-grupo { margin-top: 14px; }
.nav-grupo-titulo { padding: 0 10px 6px; font-size: 9.5px; line-height: 1.2; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250, 247, 241, 0.45); }
.nav-enlace { min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--bv-radio-s); color: rgba(250, 247, 241, 0.78); font-size: 12.5px; transition: background var(--bv-transicion), color var(--bv-transicion); }
.nav-enlace:hover { color: var(--bv-marfil); background: rgba(250, 247, 241, 0.08); }
/* El módulo abierto se reconoce por el ícono dorado, no por una barra al
   costado: el trazo del ícono ya es la señal y la lista queda más limpia. */
.nav-enlace.es-activo { color: var(--bv-marfil); background: rgba(250, 247, 241, 0.13); }
.nav-enlace.es-activo svg { color: var(--bv-dorado); opacity: 1; }
.nav-enlace svg { width: 16px; height: 16px; flex: none; opacity: .9; }
.nav-enlace .nav-contador { margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(210, 180, 106, .18); color: var(--bv-dorado); font-size: 9.5px; font-weight: 700; }
.sidebar-pie { padding: 11px 14px; border-top: 1px solid rgba(250, 247, 241, 0.12); font-size: 9.5px; line-height: 1.55; color: rgba(250, 247, 241, 0.48); }
.drawer-fondo { position: fixed; inset: 0; z-index: 75; background: rgba(26, 24, 20, .5); }

/* Topbar */
.topbar { min-height: var(--app-topbar); position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 9px; padding: 0 14px; border-bottom: 1px solid var(--bv-borde); background: rgba(250, 247, 241, .98); }
#btn-drawer { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--bv-radio-s); background: transparent; cursor: pointer; color: var(--bv-verde-profundo); }
.miga { min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--bv-gris-claro); font-size: 12px; white-space: nowrap; }
.miga a { color: var(--bv-gris-claro); }
.miga a:hover { color: var(--bv-verde); }
#miga-mod { max-width: 190px; overflow: hidden; text-overflow: ellipsis; color: var(--bv-tinta-suave); }
.topbar-esp { flex: 1; }
.busq-wrap, .pop-wrap { position: relative; }
#busqueda-global { width: min(250px, 24vw); height: 40px; padding: 0 12px 0 35px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-s); background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B867C' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; color: var(--bv-tinta); font-size: 12.5px; outline: none; }
#busqueda-global:focus { border-color: var(--bv-verde); box-shadow: 0 0 0 3px rgba(46, 98, 49, .12); }
.busq-res { position: absolute; top: 45px; right: 0; z-index: 65; width: min(360px, 90vw); max-height: 360px; overflow-y: auto; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: #FFF; box-shadow: 0 14px 34px -16px rgba(26, 24, 20, .4); }
.busq-grupo { padding: 8px 12px 5px; color: var(--bv-gris-claro); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.busq-item { min-height: 48px; display: block; padding: 9px 12px; border-top: 1px solid var(--app-muted); color: var(--bv-tinta); }
.busq-item:hover { background: var(--bv-marfil); color: var(--bv-verde-profundo); }
.busq-item strong { display: block; font-size: 12.5px; }
.busq-item span { display: block; margin-top: 2px; color: var(--bv-gris); font-size: 10.5px; }
.busq-vacio { padding: 18px; color: var(--bv-gris-claro); font-size: 12px; text-align: center; }
.empr-btn { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-s); background: #FFF; color: var(--bv-tinta-suave); font-size: 11.5px; white-space: nowrap; }
.punto-verde { width: 7px; height: 7px; border-radius: 50%; background: var(--bv-verde-apoyo); }
.theme-toggle { width: 64px; height: 36px; flex: 0 0 64px; position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 3px; border: 1px solid var(--bv-borde); border-radius: 999px; background: #EAE6DA; color: var(--bv-tinta-suave); cursor: pointer; transition: background var(--bv-transicion), border-color var(--bv-transicion); }
.theme-toggle::before { content: ""; width: 28px; height: 28px; position: absolute; left: 3px; top: 3px; z-index: 0; border-radius: 50%; background: #FFF; box-shadow: 0 2px 7px rgba(28,61,34,.18); transition: transform var(--bv-transicion), background var(--bv-transicion); }
.theme-toggle-icon { position: relative; z-index: 1; display: grid; place-items: center; transition: color var(--bv-transicion); }
.theme-toggle-icon svg { width: 16px; height: 16px; }
.theme-toggle-sun { color: #796020; }
.theme-toggle-moon { color: #8B867C; }
.theme-toggle:hover { border-color: var(--bv-verde); }
.theme-toggle:focus-visible { outline: 3px solid rgba(210,180,106,.62); outline-offset: 2px; }
#btn-notif, #btn-user { min-height: 44px; border: 0; background: transparent; cursor: pointer; }
#btn-notif { width: 44px; position: relative; border-radius: var(--bv-radio-s); }
#notif-badge { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; align-items: center; justify-content: center; border-radius: 999px; background: var(--bv-error); color: #FFF; font-size: 9px; font-weight: 700; }
#notif-badge:not([hidden]) { display: inline-flex; }
#btn-user { display: flex; align-items: center; gap: 8px; padding: 0 5px; border-radius: var(--bv-radio-s); }
.avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bv-verde); color: var(--bv-marfil); font-size: 10.5px; font-weight: 700; }
.av28 { width: 28px; height: 28px; }
.user-textos { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.user-textos strong { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.user-textos small { color: var(--bv-gris-claro); font-size: 9.5px; }
.user-flecha { color: var(--bv-gris-claro); font-size: 11px; }
.pop-panel { position: absolute; top: 49px; right: 0; z-index: 65; width: min(340px, 90vw); overflow: hidden; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: #FFF; box-shadow: 0 14px 34px -16px rgba(26, 24, 20, .4); }
#user-menu { width: 245px; }
.pop-cab { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--app-muted); }
.pop-cab strong { font-size: 12.5px; }
.link-btn { min-height: 34px; padding: 0; border: 0; background: transparent; color: var(--bv-verde); cursor: pointer; font-size: 11px; text-decoration: underline; }
.notif-lista { max-height: 320px; overflow-y: auto; }
.notif-item { width: 100%; min-height: 62px; display: block; padding: 10px 13px; border: 0; border-bottom: 1px solid var(--app-muted); background: #FFF; text-align: left; cursor: pointer; }
.notif-item:hover { background: var(--bv-marfil); }
.notif-item.no-leida { box-shadow: inset 3px 0 var(--bv-dorado); }
.notif-item strong { display: block; font-size: 12px; }
.notif-item span { display: block; margin-top: 3px; color: var(--bv-gris); font-size: 10.5px; line-height: 1.4; }
.user-resumen { padding: 13px; border-bottom: 1px solid var(--app-muted); }
.user-resumen strong, .user-resumen span { display: block; }
.user-resumen strong { font-size: 13px; }
.user-resumen span { margin-top: 2px; color: var(--bv-gris-claro); font-size: 10.5px; }
.user-menu-accion { width: 100%; min-height: 44px; display: flex; align-items: center; padding: 0 13px; border: 0; border-bottom: 1px solid var(--app-muted); background: #FFF; color: var(--bv-tinta-suave); cursor: pointer; font-size: 12px; text-align: left; }
.user-menu-accion:hover { background: var(--bv-marfil); color: var(--bv-verde-profundo); }
.user-menu-accion.peligro { color: var(--bv-error); }

/* Área principal */
#principal { flex: 1; width: 100%; min-width: 0; max-width: 1500px; margin: 0 auto; padding: clamp(14px, 2.2vw, 28px); outline: none; }
.vista { min-width: 0; max-width: 100%; animation: app-entrada .28s ease; }
@keyframes app-entrada { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.page-title { margin: 0; color: var(--bv-verde-profundo); font-family: var(--bv-serif); font-size: clamp(25px, 3vw, 32px); font-weight: 400; line-height: 1.1; }
.page-sub { margin: 4px 0 0; color: var(--bv-gris-claro); font-size: 12.5px; line-height: 1.5; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.demo-banner { margin: 14px 0 0; padding: 9px 12px; border: 1px dashed var(--bv-borde-input); border-radius: var(--bv-radio-s); background: rgba(255,255,255,.5); color: var(--bv-gris); font-size: 11.5px; line-height: 1.5; }

.card { border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: var(--app-card); box-shadow: var(--app-shadow); }
.card-pad { padding: 17px; }
.card-title { margin: 0; color: var(--bv-tinta); font-size: 13px; font-weight: 700; }
.card-sub { margin: 3px 0 0; color: var(--bv-gris-claro); font-size: 11px; line-height: 1.5; }
.section-title { margin: 0; color: var(--bv-tinta-suave); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.grid { display: grid; gap: 13px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.muted { color: var(--bv-gris-claro); }

.kpi-grid { margin-top: 17px; display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); overflow: hidden; background: #FFF; }
/* El valor manda en la tarjeta: rótulo, número y detalle van centrados sobre el
   mismo eje para que la fila de indicadores se lea de un vistazo. */
.kpi { min-height: 104px; padding: 15px 17px; border-right: 1px solid var(--app-muted); border-bottom: 1px solid var(--app-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.kpi-label { color: var(--bv-gris-claro); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.kpi-value { margin-top: 5px; color: var(--bv-verde-profundo); font-family: var(--bv-serif); font-size: 29px; font-weight: 400; line-height: 1; }
/* La variación va pegada al número, antes de la bajada: el dato solo no dice
   si el período viene mejor o peor que el anterior. */
.kpi-delta { margin-top: 5px; display: inline-flex; align-items: baseline; gap: 5px;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.4; white-space: nowrap; }
.kpi-delta small { font-size: 9px; font-weight: 500; letter-spacing: .01em; opacity: .78; }
.kpi-delta.es-bueno { background: var(--bv-ok-bg); color: var(--bv-ok); }
.kpi-delta.es-malo { background: var(--bv-error-bg); color: var(--bv-error-texto); }
.kpi-delta.es-plano { background: var(--bv-neutro-bg); color: var(--bv-neutro); }
[data-theme="dark"] .kpi-delta.es-bueno { background: rgba(110, 178, 120, .16); color: #9BCB9E; }
[data-theme="dark"] .kpi-delta.es-malo { background: rgba(200, 110, 90, .16); color: #E4A493; }
[data-theme="dark"] .kpi-delta.es-plano { background: rgba(255, 255, 255, .07); color: var(--bv-gris-claro); }

/* cuándo se abrió una alerta: sin eso, «3 cuotas vencidas» no dice si es de
   ayer o si viene arrastrándose hace meses */
.alerta-desde { color: var(--bv-gris); font-size: 10.5px; }

.kpi-sub { margin-top: 7px; color: var(--bv-gris); font-size: 10.5px; line-height: 1.35; max-width: 100%; }
.kpi-sub:empty { display: none; }
.kpi-sub.alerta { color: var(--bv-error); }
.kpi-sub.ok { color: var(--bv-ok); }

.toolbar { margin-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar .crece { flex: 1 1 220px; max-width: 340px; }
.input, .select, .textarea { border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-s); background: #FFF; color: var(--bv-tinta); outline: none; }
.input, .select { height: 40px; padding: 0 11px; font-size: 12.5px; }
.textarea { min-height: 82px; padding: 9px 11px; resize: vertical; font-size: 12.5px; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--bv-verde); box-shadow: 0 0 0 3px rgba(46, 98, 49, .12); }
.check { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 7px; color: var(--bv-tinta-suave); font-size: 11.5px; }
.check input { width: 16px; height: 16px; accent-color: var(--bv-verde); }
.segmented { display: inline-flex; overflow: hidden; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-s); background: #FFF; }
.segmented button { min-height: 38px; padding: 0 14px; border: 0; border-left: 1px solid var(--bv-borde); background: #FFF; cursor: pointer; color: var(--bv-tinta-suave); font-size: 12px; font-weight: 600; }
.segmented button:first-child { border-left: 0; }
.segmented button.es-activo { background: var(--bv-verde); color: var(--bv-marfil); }
.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 2px solid var(--bv-borde); scrollbar-width: none; -ms-overflow-style: none; }
.tabs::-webkit-scrollbar { width: 0; height: 0; display: none; }
.tab { min-height: 43px; flex: none; padding: 0 15px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; background: transparent; color: var(--bv-gris-claro); cursor: pointer; font-size: 12.5px; font-weight: 600; }
.tab.es-activa { border-color: var(--bv-verde); color: var(--bv-verde-profundo); }

/* Tablas */
.table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: #FFF; box-shadow: var(--app-shadow); }
.data-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.data-table th { padding: 10px 13px; border-bottom: 1px solid var(--bv-borde); background: #FCFBF7; color: var(--bv-gris-claro); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 11px 13px; border-bottom: 1px solid var(--app-muted); color: var(--bv-tinta-suave); font-size: 12px; line-height: 1.45; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #FCFBF7; }
.data-table strong { color: var(--bv-tinta); font-weight: 600; }
.data-table .num { color: var(--bv-tinta); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.data-table .acciones { display: flex; gap: 5px; justify-content: flex-end; }
/* Acciones en ícono: la columna deja de ser más ancha que los datos (18/08/2026).
   El rótulo vive en el title y en el aria-label; en pantallas chicas baja como
   texto para que nadie tenga que adivinar el dibujo. */
.acc-ico { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-s); background: #FFF; color: var(--bv-verde-profundo); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.acc-ico svg { width: 17px; height: 17px; }
.acc-ico .acc-ico-texto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.acc-ico:hover { border-color: var(--bv-verde); background: var(--bv-marfil); }
.acc-ico:focus-visible { outline: 2px solid var(--bv-verde); outline-offset: 1px; }
.acc-ico.es-principal { border-color: var(--bv-verde); color: var(--bv-verde); background: var(--bv-ok-bg); }
.acc-ico.es-principal:hover { background: var(--bv-verde); color: #FFF; }
.acc-ico.es-peligro { color: var(--bv-error); }
.acc-ico.es-peligro:hover { border-color: var(--bv-error); background: var(--bv-error-bg); }
.acc-sep { width: 1px; align-self: stretch; margin: 2px 3px; background: var(--bv-borde); }
[data-theme="dark"] .acc-ico { background: transparent; border-color: var(--app-muted); color: inherit; }
[data-theme="dark"] .acc-ico:hover { background: rgba(255,255,255,.07); }
@media (max-width: 900px) {
  .data-table .acciones { flex-wrap: wrap; }
  .acc-ico { width: auto; min-width: 32px; height: 32px; gap: 6px; padding: 0 9px; }
  .acc-ico .acc-ico-texto { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 10.5px; font-weight: 600; }
}
.btn-tabla { min-height: 34px; padding: 0 10px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-s); background: #FFF; color: var(--bv-verde-profundo); cursor: pointer; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.btn-tabla:hover { border-color: var(--bv-verde); }
.btn-tabla.peligro { color: var(--bv-error); }
.select-tabla { height: 34px; max-width: 175px; padding: 0 8px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-s); background: #FFF; font-size: 10.5px; }
.vacio { padding: 30px 18px; color: var(--bv-gris-claro); font-size: 12.5px; text-align: center; }

/* Kanban */
.kanban-scroll { width: 100%; min-width: 0; max-width: 100%; margin-top: 14px; overflow-x: auto; padding-bottom: 10px; }
.kanban { min-width: max-content; display: flex; gap: 10px; align-items: flex-start; }
.kanban-col { width: 240px; flex: none; overflow: hidden; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: #EDE8DA; }
.kanban-head { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--bv-borde); }
.kanban-head strong { font-size: 11.5px; }
.kanban-count { min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.72); color: var(--bv-gris); font-size: 9.5px; font-weight: 700; }
[data-theme="dark"] .kanban-count { background: rgba(250,247,241,.14); color: #EAF2E6; }
.kanban-cards { min-height: 75px; display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.lead-card { padding: 10px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-s); background: #FFF; box-shadow: var(--app-shadow); }
.lead-card:hover { border-color: rgba(46, 98, 49, .55); }
.lead-card-cab { width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.lead-card-cab strong { display: block; color: var(--bv-tinta); font-size: 12px; }
.lead-card-cab span { display: block; margin-top: 3px; color: var(--bv-gris-claro); font-size: 10px; }
.lead-card p { margin: 6px 0 0; color: var(--bv-gris); font-size: 10.5px; line-height: 1.4; }
.lead-card .select-tabla { width: 100%; max-width: none; margin-top: 8px; }
.lead-card[draggable="true"] { cursor: grab; }
.lead-card.es-arrastrando { opacity: .45; cursor: grabbing; }
.kanban-col.es-destino { border-color: var(--bv-dorado); box-shadow: 0 0 0 3px rgba(210,180,106,.24); }
.funil-editor { display: flex; flex-direction: column; gap: 8px; }
.funil-editor-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.funil-editor-row [data-stage-id] { display: none; }

/* Mapa */
.mapa-layout { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 13px; align-items: start; }
.mapa-canvas { padding: 16px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: #FFF; }
.mapa-manzanas { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 14px; }
.manzana-titulo { margin-bottom: 7px; color: var(--bv-gris); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lotes-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.lote-mini { min-height: 39px; display: flex; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 3px; cursor: pointer; font-size: 9.5px; font-weight: 700; transition: transform var(--bv-transicion), box-shadow var(--bv-transicion); }
.lote-mini:hover, .lote-mini:focus-visible { position: relative; z-index: 2; transform: translateY(-1px); box-shadow: 0 4px 10px -6px rgba(26,24,20,.5); }
.lote-mini.oculto { opacity: .16; pointer-events: none; }
.mapa-plano-scroll { min-width: 0; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-s); background: #f7f5ee; scrollbar-color: var(--bv-dorado) #e8e4d8; scrollbar-width: thin; overscroll-behavior-inline: contain; }
.mapa-plano-scroll:focus-visible { outline: 3px solid rgba(210, 180, 106, .75); outline-offset: 2px; }
.mapa-plano { position: relative; width: 2200px; aspect-ratio: 5630 / 890; overflow: hidden; background: #fff; }
.mapa-plano > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.mapa-plano-lotes { position: absolute; inset: 0; }
.mapa-plano-lote { position: absolute; z-index: 1; width: 18px; height: 18px; padding: 0; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: var(--mapa-estado, var(--bv-verde)); cursor: pointer; box-shadow: 0 2px 7px rgba(26, 24, 20, .48), 0 0 0 2px var(--mapa-fondo, #fff); transition: transform var(--bv-transicion), opacity var(--bv-transicion), box-shadow var(--bv-transicion); }
.mapa-plano-lote span { position: absolute; inset: 4px; border-radius: 50%; background: rgba(255, 255, 255, .72); }
.mapa-plano-lote:hover, .mapa-plano-lote:focus-visible { z-index: 3; transform: translate(-50%, -50%) scale(1.4); outline: none; box-shadow: 0 0 0 4px #fff, 0 7px 15px rgba(26, 24, 20, .55); }
.mapa-plano-lote.oculto { opacity: .07; pointer-events: none; }
.mapa-plano-lote.es-editable { cursor: move; }
.mapa-plano-lote.es-arrastrando { z-index: 8; transform: translate(-50%, -50%) scale(1.55); }
.mapa-lateral { position: sticky; top: calc(var(--app-topbar) + 14px); }
.leyenda { display: flex; flex-direction: column; gap: 8px; }
.leyenda-item { display: flex; align-items: center; gap: 8px; color: var(--bv-tinta-suave); font-size: 11.5px; }
.leyenda-glifo { width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 12px; font-weight: 700; }
.mapa-resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mapa-resumen div { padding: 9px; border: 1px solid var(--app-muted); border-radius: var(--bv-radio-s); background: #FCFBF7; }
.mapa-resumen strong, .mapa-resumen span { display: block; }
.mapa-resumen strong { color: var(--bv-verde-profundo); font-size: 16px; }
.mapa-resumen span { margin-top: 2px; color: var(--bv-gris-claro); font-size: 9.5px; }

/* Gráficos simples */
.bar-list { display: flex; flex-direction: column; gap: 9px; }
.bar-row-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; color: var(--bv-tinta-suave); font-size: 11px; }
.bar-track { height: 8px; overflow: hidden; border-radius: 2px; background: var(--app-muted); }
.bar-track span { display: block; height: 100%; background: var(--bv-verde); }
.chart-bars { height: 155px; display: flex; align-items: flex-end; gap: 10px; padding-top: 15px; }
.chart-bar { min-width: 35px; flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
.chart-bar i { width: min(70%, 46px); min-height: 3px; display: block; border-radius: 2px 2px 0 0; background: var(--bv-verde); }
.chart-bar strong { color: var(--bv-tinta-suave); font-size: 9.5px; }
.chart-bar span { color: var(--bv-gris-claro); font-size: 9.5px; }
.chart-card .chart-bars { height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 11px; padding-top: 0; }
.chart-row { display: grid; grid-template-columns: minmax(105px, .7fr) minmax(120px, 2fr) minmax(92px, auto); gap: 10px; align-items: center; }
.chart-label { color: var(--bv-tinta-suave); font-size: 11px; }
.chart-track { height: 11px; overflow: hidden; border-radius: 999px; background: var(--app-muted); }
.chart-track span { display: block; height: 100%; border-radius: inherit; }
.chart-row strong { color: var(--bv-tinta); font-size: 11px; text-align: right; }

.fila-detalle { cursor: pointer; transition: background var(--bv-transicion), box-shadow var(--bv-transicion); }
.fila-detalle:hover { background: rgba(210,180,106,.11); }
.fila-detalle:focus-visible { outline: 3px solid rgba(210,180,106,.58); outline-offset: -3px; }
.detalle-pagina { max-width: 1080px; margin: 0 auto; }
.detalle-voltar { min-height: 40px; margin-bottom: 12px; padding: 0 13px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-s); background: var(--app-card); color: var(--bv-tinta-suave); cursor: pointer; font-weight: 700; }
.detalle-pagina-card { overflow: hidden; }
.detalle-pagina .panel-body { max-height: none; overflow: visible; }
.detalle-pagina .panel-foot { position: static; }
.avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.perfil-editor { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; }
.perfil-foto-preview { width: 120px; height: 120px; display: block; object-fit: cover; border-radius: 50%; border: 3px solid var(--bv-dorado); }
.perfil-foto-iniciales { display: grid; place-items: center; background: var(--bv-verde); color: #fff; font-size: 30px; font-weight: 700; }
.idiomas-editor, .hero-editor-list { display: flex; flex-direction: column; gap: 10px; }
.idioma-editor, .hero-slide-editor { border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-s); background: var(--app-card); }
.idioma-editor summary, .hero-slide-editor summary { padding: 12px 14px; cursor: pointer; color: var(--bv-tinta); font-size: 12px; font-weight: 700; }
.idioma-editor[open], .hero-slide-editor[open] { padding: 0 14px 14px; }
.idioma-editor[open] summary, .hero-slide-editor[open] summary { margin: 0 -14px; padding-left: 14px; border-bottom: 1px solid var(--bv-borde); }
.hero-lang-fields { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--app-muted); }

[data-theme="dark"] {
  color-scheme: dark;
  --app-card: #17221d;
  --app-muted: #202d27;
  --bv-fondo-op: #0e1612;
  --bv-marfil: #f4efe3;
  --bv-tinta: #f1ede4;
  --bv-tinta-suave: #d8ded9;
  --bv-gris: #bbc4bc;
  --bv-gris-claro: #aab4ac;
  --bv-borde: #3b5145;
  --bv-borde-input: #405348;
  --bv-fondo-input: #17221d;
  --bv-ok: #b7ddbb;
  --bv-ok-bg: #173629;
  --bv-alerta: #f0d68b;
  --bv-alerta-bg: #423716;
  --bv-pendiente: #f0c782;
  --bv-pendiente-bg: #3d3017;
  --bv-neutro: #d2d8d3;
  --bv-neutro-bg: #28352f;
  --bv-error: #f2a392;
  --bv-error-bg: #49251f;
  --bv-error-borde: #754238;
  --bv-error-texto: #ffc0b2;
}
[data-theme="dark"] body,
[data-theme="dark"] #principal { background: #0e1612; }
[data-theme="dark"] .topbar { background: rgba(18,27,23,.98); }
[data-theme="dark"] .theme-toggle { border-color: #405348; background: #17221d; }
[data-theme="dark"] .theme-toggle::before { background: #2e6231; transform: translateX(28px); }
[data-theme="dark"] .theme-toggle-sun { color: #9ca69e; }
[data-theme="dark"] .theme-toggle-moon { color: #f1ede4; }
[data-theme="dark"] .page-title,
[data-theme="dark"] .kpi-value,
[data-theme="dark"] .mapa-resumen strong,
[data-theme="dark"] .panel-title,
[data-theme="dark"] .modal-cab h2,
[data-theme="dark"] .sesion-titulo,
[data-theme="dark"] .sin-permiso h1 { color: #dcebdd; }
[data-theme="dark"] #principal [style*="color:var(--bv-verde-profundo)"] { color: #dcebdd !important; }
[data-theme="dark"] #principal [style*="color:var(--bv-dorado-oscuro)"] { color: #e0c77e !important; }
[data-theme="dark"] .link-btn,
[data-theme="dark"] .btn-tabla,
[data-theme="dark"] .tab.es-activa,
[data-theme="dark"] .panel-kicker { color: #9bcb9e; }
[data-theme="dark"] #principal a:not(.btn) { color: #9bcb9e; }
[data-theme="dark"] .link-btn:hover,
[data-theme="dark"] .btn-tabla:hover,
[data-theme="dark"] .tab.es-activa:hover,
[data-theme="dark"] #principal a:not(.btn):hover { color: #e0c77e; }
[data-theme="dark"] .card,
[data-theme="dark"] .sesion-card,
[data-theme="dark"] .kpi-grid,
[data-theme="dark"] .kpi,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .data-table td,
[data-theme="dark"] .lead-card,
[data-theme="dark"] .mapa-canvas,
[data-theme="dark"] .pop-panel,
[data-theme="dark"] .busq-res,
[data-theme="dark"] .modal,
[data-theme="dark"] .panel-lateral,
[data-theme="dark"] .panel-cab,
[data-theme="dark"] .panel-foot,
[data-theme="dark"] .modal-foot,
[data-theme="dark"] .detail,
[data-theme="dark"] .landing-media-item,
[data-theme="dark"] .empr-btn,
[data-theme="dark"] .notif-item,
[data-theme="dark"] .user-menu-accion,
[data-theme="dark"] .segmented,
[data-theme="dark"] .segmented button,
[data-theme="dark"] .btn-tabla,
[data-theme="dark"] .toast,
[data-theme="dark"] .detalle-voltar,
[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select-tabla,
[data-theme="dark"] #busqueda-global { background-color: var(--app-card); color: var(--bv-tinta); }
[data-theme="dark"] .data-table th { background: #1b2922; color: var(--bv-gris-claro); }
[data-theme="dark"] .demo-banner { background: rgba(255,255,255,.035); color: var(--bv-gris); }
[data-theme="dark"] .busq-item:hover,
[data-theme="dark"] .notif-item:hover,
[data-theme="dark"] .user-menu-accion:hover,
[data-theme="dark"] .data-table tbody tr:hover,
[data-theme="dark"] .fila-detalle:hover { background: #223229; color: var(--bv-tinta); }
[data-theme="dark"] .user-menu-accion.peligro { color: var(--bv-error); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #9ca69e; opacity: 1; }
[data-theme="dark"] .kanban-col { background: #1b2922; }
[data-theme="dark"] .mapa-resumen div { background: #19241f; }
[data-theme="dark"] .segmented,
[data-theme="dark"] .tabs { background: #1b2922; }
[data-theme="dark"] .table-wrap.apilable tr { background: var(--app-card); }
[data-theme="dark"] .bv-lang[data-bv-tema="claro"] .bv-lang-btn { border-color: #455a4e !important; background: #1a2721 !important; color: #e8eee9 !important; }
[data-theme="dark"] .bv-lang[data-bv-tema="claro"] .bv-lang-btn:hover { border-color: #7f9c89 !important; background: #223229 !important; color: #fff !important; }

/* Listas, mensajes y galerías */
.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 9px 0; border-bottom: 1px solid var(--app-muted); }
.list-row:last-child { border-bottom: 0; }
.list-main { flex: 1; min-width: 0; }
.list-main strong { display: block; color: var(--bv-tinta); font-size: 12px; }
.list-main span { display: block; margin-top: 3px; color: var(--bv-gris); font-size: 10.5px; line-height: 1.4; }
.list-side { flex: none; color: var(--bv-tinta-suave); font-size: 11px; text-align: right; }
.mensaje-lista { display: flex; flex-direction: column; gap: 8px; }
.mensaje { max-width: 92%; padding: 9px 11px; border-radius: var(--bv-radio-s); color: var(--bv-tinta-suave); font-size: 11.5px; line-height: 1.5; }
.mensaje.cliente { align-self: flex-start; background: var(--bv-fondo-op); }
.mensaje.equipo { align-self: flex-end; background: var(--bv-ok-bg); }
.mensaje-meta { display: block; margin-bottom: 3px; color: var(--bv-gris-claro); font-size: 9.5px; }
.foto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.foto-card { position: relative; min-height: 140px; overflow: hidden; border-radius: var(--bv-radio-s); background: var(--bv-verde-profundo); }
.foto-card img { width: 100%; height: 150px; display: block; object-fit: cover; }
.foto-card span { position: absolute; inset: auto 0 0; padding: 22px 9px 8px; background: linear-gradient(transparent, rgba(20, 30, 18, .82)); color: var(--bv-marfil); font-size: 10.5px; }

/* Painel lateral, modal, confirmação e toast */
.panel-fondo { position: fixed; inset: 0; z-index: 90; background: rgba(26, 24, 20, .45); }
.panel-lateral { position: fixed; inset: 0 0 0 auto; z-index: 95; width: min(460px, 96vw); display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid var(--bv-borde); background: var(--bv-marfil); box-shadow: -18px 0 50px -24px rgba(26, 24, 20, .5); }
.panel-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--bv-borde); background: var(--bv-marfil); }
.panel-kicker { color: var(--bv-dorado-oscuro); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.panel-title { margin: 3px 0 0; color: var(--bv-verde-profundo); font-family: var(--bv-serif); font-size: 25px; font-weight: 400; line-height: 1.15; }
.panel-close { width: 44px; height: 44px; flex: none; border: 0; border-radius: var(--bv-radio-s); background: transparent; cursor: pointer; font-size: 18px; }
.panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 24px; }
.panel-foot { display: flex; gap: 8px; padding: 12px 17px; border-top: 1px solid var(--bv-borde); background: #FFF; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail { padding: 10px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-s); background: #FFF; }
.detail dt { color: var(--bv-gris-claro); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.detail dd { margin: 4px 0 0; color: var(--bv-tinta); font-size: 12px; font-weight: 600; line-height: 1.45; }
.modal-wrap { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 18px; background: rgba(26, 24, 20, .5); }
.modal.modal-ancho { width: min(100%, 980px); max-height: min(94vh, 960px); }
.modal { width: min(100%, 520px); max-height: min(88vh, 760px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-l); background: var(--bv-marfil); box-shadow: 0 24px 70px -30px rgba(26,24,20,.75); }
.modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 17px; border-bottom: 1px solid var(--bv-borde); }
.modal-cab h2 { margin: 0; color: var(--bv-verde-profundo); font-family: var(--bv-serif); font-size: 23px; font-weight: 400; }
.modal-body { overflow-y: auto; padding: 17px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 17px; border-top: 1px solid var(--bv-borde); background: #FFF; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.form-grid .ancho { grid-column: 1 / -1; }
.form-help { margin: 5px 0 0; color: var(--bv-gris-claro); font-size: 10.5px; line-height: 1.45; }
.confirm { width: min(100%, 430px); }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 140; max-width: min(390px, calc(100vw - 36px)); display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid #BCD8B8; border-radius: var(--bv-radio-m); background: #FFF; color: var(--bv-verde-profundo); box-shadow: 0 16px 38px -20px rgba(26,24,20,.55); font-size: 12px; line-height: 1.45; }
.toast-icon { font-weight: 700; }

.sin-permiso { max-width: 480px; margin: 60px auto; padding: 38px; text-align: center; }
.sin-permiso h1 { margin: 0; color: var(--bv-verde-profundo); font-family: var(--bv-serif); font-size: 26px; font-weight: 400; }
.sin-permiso p { color: var(--bv-gris); font-size: 13px; line-height: 1.6; }

/* Editor local do site público */
.landing-contenido-textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
.landing-media-grid { display: grid; gap: 12px; }
.landing-media-item { display: grid; grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr); gap: 16px; align-items: start; padding: 12px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: #FFF; }
.landing-media-item > img { width: 100%; min-height: 142px; max-height: 210px; border-radius: var(--bv-radio-s); background: var(--bv-fondo); object-fit: cover; }
.landing-media-file { height: auto; min-height: 42px; padding-block: 8px; }

/* Responsive */
@media (max-width: 999px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 80; width: 272px; height: 100vh; visibility: hidden; pointer-events: none; transform: translateX(-105%); transition: transform var(--bv-transicion), visibility 0s linear 220ms; box-shadow: 14px 0 40px -18px rgba(26,24,20,.6); }
  .sidebar.es-abierto { visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  #btn-cerrar-drawer, #btn-drawer { display: inline-flex; align-items: center; justify-content: center; }
  .mapa-layout { grid-template-columns: 1fr; }
  .mapa-lateral { position: static; }
  .mapa-manzanas { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
}

@media (max-width: 760px) {
  .topbar { padding: 0 8px; gap: 4px; }
  .miga > a, .miga > span:first-of-type, .empr-btn, .user-textos, .user-flecha { display: none; }
  #miga-mod { max-width: 115px; font-weight: 600; }
  #busqueda-global { width: 44px; padding-right: 0; color: transparent; cursor: pointer; }
  #busqueda-global::placeholder { color: transparent; }
  #busqueda-global:focus { position: fixed; top: 8px; left: 58px; right: 58px; z-index: 72; width: auto; color: var(--bv-tinta); cursor: text; }
  #busqueda-global:focus::placeholder { color: #6F6A61; }
  #principal { padding: 14px 11px 24px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .mapa-manzanas { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .table-wrap.apilable { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .table-wrap.apilable .data-table { min-width: 0; }
  .table-wrap.apilable thead { display: none; }
  .table-wrap.apilable tbody, .table-wrap.apilable tr, .table-wrap.apilable td { display: block; width: 100%; }
  .table-wrap.apilable tr { margin-bottom: 9px; padding: 9px 11px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: #FFF; }
  .table-wrap.apilable td { min-height: 32px; display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; text-align: right; }
  .table-wrap.apilable td::before { content: attr(data-label); flex: none; color: var(--bv-gris-claro); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
  .table-wrap.apilable .acciones { justify-content: flex-end; }
  .panel-lateral { inset: 13vh 0 0; width: 100%; border: 0; border-radius: 10px 10px 0 0; box-shadow: 0 -20px 60px -20px rgba(26,24,20,.55); }
  .landing-media-item { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .mapa-manzanas { grid-template-columns: 1fr; }
  .lotes-mini { grid-template-columns: repeat(6, 1fr); }
  .detail-grid, .form-grid { grid-template-columns: 1fr; }
  .form-grid .ancho { grid-column: auto; }
  .modal-wrap { padding: 0; align-items: end; }
  .modal { width: 100%; max-height: 92vh; border-radius: 10px 10px 0 0; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
}

@media print {
  body { background: #FFF; }
  .bv-noprint, .sidebar, .topbar, .drawer-fondo, .panel-fondo, .panel-lateral, #modal-zona, #confirm-zona, #toast-zona, .page-actions, .toolbar { display: none !important; }
  #principal { max-width: none; padding: 0; }
  .card, .table-wrap { box-shadow: none; break-inside: avoid; }
}

/* selector de emprendimiento — 30/07/2026 */
.empr-btn { cursor: pointer; }
.empr-btn:hover { border-color: var(--bv-verde); }
.empr-chevron { width: 13px; height: 13px; flex: none; opacity: .55; }
.empr-menu {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 60;
  width: min(300px, calc(100vw - 28px)); padding: 7px;
  border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m);
  background: #FFF; box-shadow: 0 18px 40px -22px rgba(26,24,20,.55);
}
.empr-menu-tit {
  padding: 5px 8px 8px; color: var(--bv-gris-claro);
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.empr-opcion {
  display: block; width: 100%; padding: 8px 9px; border: 0; border-radius: var(--bv-radio-s);
  background: transparent; text-align: left; cursor: pointer;
}
.empr-opcion:hover { background: #F4F1E8; }
.empr-opcion.es-activo { background: var(--bv-ok-bg); }
.empr-opcion strong { display: block; color: var(--bv-tinta); font-size: 12px; font-weight: 600; }
.empr-opcion span { display: block; margin-top: 2px; color: var(--bv-gris); font-size: 10.5px; }
[data-theme="dark"] .empr-menu { background: var(--app-card); border-color: #33443a; }
[data-theme="dark"] .empr-opcion:hover { background: #223229; }
[data-theme="dark"] .empr-opcion.es-activo { background: #22352a; }
[data-theme="dark"] .empr-opcion strong { color: var(--bv-marfil); }
@media (max-width: 1000px) {
  #empr-wrap { display: none; }
}

/* rodada de feedback 30/07/2026 — parte 2 */

/* ---------- splash de carga ---------- */
.splash {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: var(--bv-verde-profundo); color: var(--bv-marfil);
  transition: opacity .4s ease;
}
.splash.es-saliendo { opacity: 0; }
.splash-caja { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; text-align: center; }
.splash-logo { animation: splash-late 1.6s ease-in-out infinite; }
@keyframes splash-late { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.07); opacity: 1; } }
.splash-marca span { display: block; font-family: var(--bv-serif); font-size: 22px; letter-spacing: .1em; }
.splash-marca small { display: block; margin-top: 4px; font-size: 8px; letter-spacing: .26em; color: rgba(250,247,241,.6); }
.splash-barra { width: min(260px, 70vw); height: 3px; border-radius: 3px; background: rgba(250,247,241,.18); overflow: hidden; }
.splash-barra span { display: block; height: 100%; width: 8%; border-radius: 3px; background: var(--bv-dorado); transition: width .45s ease; }
.splash-texto { margin: 0; font-size: 11.5px; color: rgba(250,247,241,.72); min-height: 16px; }
@media (prefers-reduced-motion: reduce) { .splash-logo { animation: none; } }

/* ---------- sidebar: colapsar y redimensionar ---------- */
.btn-colapsar {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid rgba(250,247,241,.2); border-radius: var(--bv-radio-s);
  background: transparent; color: var(--bv-marfil); cursor: pointer;
}
.btn-colapsar svg { width: 15px; height: 15px; transition: transform var(--bv-transicion); }
.btn-colapsar:hover { background: rgba(250,247,241,.1); }
.sidebar.es-colapsada .btn-colapsar svg { transform: rotate(180deg); }
/* la regla de posición vive dentro de la consulta de escritorio para no pisar el drawer móvil */
@media (min-width: 1000px) { .sidebar { position: sticky; } }
.sidebar-resize {
  position: absolute; top: 0; right: -3px; width: 6px; height: 100%; z-index: 5;
  cursor: col-resize; background: transparent;
}
.sidebar-resize:hover, .sidebar-resize:focus-visible { background: rgba(68,171,79,.45); outline: none; }
body.redimensionando { cursor: col-resize; user-select: none; }

.sidebar.es-colapsada .bv-lockup-textos,
.sidebar.es-colapsada .sidebar-pie,
.sidebar.es-colapsada .nav-grupo-titulo { display: none; }
.sidebar.es-colapsada .sidebar-cab { justify-content: center; padding: 12px 6px; flex-wrap: wrap; gap: 6px; }
.sidebar.es-colapsada .sidebar-nav { padding: 6px 6px 18px; }
.sidebar.es-colapsada .nav-item { justify-content: center; padding: 0 6px; }
.sidebar.es-colapsada .nav-item span:not(.nav-icono) { display: none; }
.sidebar.es-colapsada .sidebar-resize { display: none; }
@media (max-width: 999px) {
  .sidebar-resize { display: none; }
  .btn-colapsar { display: none; }
  /* el ancho guardado del menú lateral no se aplica al drawer */
  .sidebar, .sidebar.es-colapsada { width: 272px !important; flex: 0 0 auto; }
  .sidebar.es-colapsada .bv-lockup-textos,
  .sidebar.es-colapsada .sidebar-pie,
  .sidebar.es-colapsada .nav-grupo-titulo { display: revert; }
  .sidebar.es-colapsada .nav-enlace span:not(.nav-icono),
  .sidebar.es-colapsada .nav-item span:not(.nav-icono) { display: revert; }
  .sidebar.es-colapsada .sidebar-cab { justify-content: space-between; padding: 14px 14px; flex-wrap: nowrap; }
}

/* ---------- tablero: barras clicables ---------- */
.bar-row-btn {
  display: block; width: 100%; padding: 5px 6px; margin: 0 -6px;
  border: 0; border-radius: var(--bv-radio-s); background: transparent; text-align: left; cursor: pointer;
  transition: background var(--bv-transicion);
}
.bar-row-btn:hover { background: #F4F1E8; }
.bar-row-btn:focus-visible { outline: 2px solid var(--bv-verde); outline-offset: 1px; }
[data-theme="dark"] .bar-row-btn:hover { background: #223229; }

/* ---------- empresa con foto ---------- */
/* los estilos de la pantalla Empresas salieron con ella (16/08/2026) */

/* ---------- agenda: calendario ---------- */
.cal-toolbar { align-items: center; }
.cal-nav { display: inline-flex; align-items: center; gap: 6px; }
.cal-periodo { min-width: 168px; text-align: center; color: var(--bv-tinta); font-size: 12.5px; }
.cal-periodo::first-letter { text-transform: uppercase; }
.btn-icono-sec {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-s);
  background: var(--app-card, #FFF); color: var(--bv-tinta-suave); cursor: pointer; font-size: 16px; line-height: 1;
}
.btn-icono-sec:hover { border-color: var(--bv-verde); color: var(--bv-verde); }
.cal-leyenda { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; color: var(--bv-gris); font-size: 10.5px; }
.cal-leyenda-item { display: inline-flex; align-items: center; gap: 5px; }
.cal-punto { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.cal-punto.es-pendiente { background: var(--bv-dorado); }
.cal-punto.es-confirmada { background: var(--bv-verde-apoyo); }
.cal-punto.es-ok { background: var(--bv-verde); }

.cal-grid-mes {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); overflow: hidden;
  background: var(--app-card, #FFF);
}
.cal-cab {
  padding: 8px 10px; background: #FCFBF7; border-bottom: 1px solid var(--bv-borde);
  color: var(--bv-gris-claro); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.cal-dia {
  min-height: 104px; padding: 7px 8px; border-right: 1px solid var(--app-muted, #EFECE3); border-bottom: 1px solid var(--app-muted, #EFECE3);
  display: flex; flex-direction: column; gap: 5px;
}
.cal-dia:nth-child(7n+7) { border-right: 0; }
.cal-dia.es-fuera { background: #FBFAF6; opacity: .58; }
.cal-dia.es-hoy { background: #F1F7EF; box-shadow: inset 0 0 0 2px var(--bv-verde); }
.cal-dia-cab { display: flex; align-items: center; justify-content: space-between; color: var(--bv-tinta-suave); font-size: 11.5px; font-weight: 600; }
.cal-dia-cab em { font-style: normal; padding: 1px 6px; border-radius: 999px; background: var(--bv-neutro-bg); color: var(--bv-gris); font-size: 9px; font-weight: 700; }
.cal-dia-eventos { display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.cal-evento {
  display: flex; align-items: baseline; gap: 5px; width: 100%; padding: 3px 6px;
  border: 0; border-left: 3px solid var(--bv-gris-claro); border-radius: 3px;
  background: var(--bv-neutro-bg); color: var(--bv-tinta); cursor: pointer;
  font-size: 10px; text-align: left; overflow: hidden;
}
.cal-evento:hover { filter: brightness(.96); }
.cal-evento-hora { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-evento-tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-evento.es-pendiente { border-left-color: var(--bv-dorado); background: var(--bv-alerta-bg); color: var(--bv-alerta); }
.cal-evento.es-confirmada { border-left-color: var(--bv-verde-apoyo); background: #E9F4E7; color: var(--bv-verde-profundo); }
.cal-evento.es-ok { border-left-color: var(--bv-verde); background: var(--bv-ok-bg); color: var(--bv-verde-profundo); }
.cal-evento.es-error { border-left-color: var(--bv-error); background: var(--bv-error-bg); color: var(--bv-error-texto); }
.cal-mas { color: var(--bv-gris-claro); font-size: 9.5px; padding-left: 3px; }

.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-col { border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: var(--app-card, #FFF); padding: 9px; min-height: 220px; }
.cal-col.es-hoy { border-color: var(--bv-verde); box-shadow: 0 0 0 2px rgba(46,98,49,.12); }
.cal-col-cab { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid var(--app-muted, #EFECE3); }
.cal-col-cab strong { color: var(--bv-tinta); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.cal-col-cab span { color: var(--bv-gris-claro); font-size: 10.5px; }
.cal-col-eventos { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.cal-vacio { color: var(--bv-gris-claro); font-size: 10.5px; text-align: center; }

[data-theme="dark"] .cal-grid-mes, [data-theme="dark"] .cal-col { background: var(--app-card); }
[data-theme="dark"] .cal-cab { background: #1b2922; }
[data-theme="dark"] .cal-dia.es-fuera { background: #16211c; }
[data-theme="dark"] .cal-dia.es-hoy { background: #1e2f26; }
[data-theme="dark"] .cal-dia-cab { color: var(--bv-marfil); }
[data-theme="dark"] .cal-col-cab strong { color: var(--bv-marfil); }

@media (max-width: 900px) {
  .cal-grid-mes { grid-template-columns: repeat(7, minmax(44px, 1fr)); font-size: 10px; overflow-x: auto; }
  .cal-dia { min-height: 78px; }
  .cal-evento-tit { display: none; }
  .cal-semana { grid-template-columns: 1fr; }
  .cal-leyenda { margin-left: 0; }
}

/* Cartera Financiera: las dos tablas de cierre son cortas —cuatro columnas— y
   el mínimo de 760 px pensado para las tablas grandes las mandaba al scroll
   horizontal dentro de media pantalla. Acá se dejan fluir (19/08/2026). */
.cartera-tablas { grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); align-items: start; }
.cartera-tablas .data-table { min-width: 0; }
.cartera-tablas .data-table th, .cartera-tablas .data-table td { padding-left: 10px; padding-right: 10px; }
.cartera-tablas .table-wrap { overflow-x: visible; }

/* ---------- esqueleto de carga ----------
   Solo para esperas reales. El brillo respeta a quien pidió menos movimiento. */
.sk { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--app-muted, #EFECE3) 25%, #F7F4EE 37%, var(--app-muted, #EFECE3) 63%); background-size: 400% 100%; animation: sk-brillo 1.4s ease-in-out infinite; }
.sk-linea { height: 12px; }
.sk-titulo { height: 26px; width: 62%; }
.sk-bloque { display: grid; gap: 10px; padding: 4px 0; }
.sk-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bv-borde); }
.sk-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sk-tarjeta { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); }
[aria-busy="true"] { cursor: progress; }
@keyframes sk-brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
[data-theme="dark"] .sk { background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.06) 63%); background-size: 400% 100%; }

/* ---------- reportes ---------- */
.rep-filtro {
  margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 13px; border: 1px solid #BCD8B8; border-radius: var(--bv-radio-m); background: var(--bv-ok-bg);
  color: var(--bv-verde-profundo); font-size: 12px;
}
/* sin filtro es solo una pista, no una caja que compita con las tarjetas */
.rep-filtro.es-vacio { padding: 4px 2px; border: 0; background: transparent; color: var(--bv-gris-claro); font-size: 11.5px; }
.rep-filtro-tag { padding: 2px 8px; border-radius: 999px; background: var(--bv-verde); color: #FFF; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rep-filtro button { margin-left: auto; }
[data-theme="dark"] .rep-filtro { background: #1b2922; border-color: #3d5c40; color: #C8E3C4; }

/* indicadores del panel: el número manda (rediseño 19/08/2026) */
.rep-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 16px; }
.rep-kpi {
  position: relative; display: grid; gap: 2px; padding: 16px 18px;
  border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: var(--app-card, #FFF);
}
.rep-kpi-ico { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--bv-ok-bg); color: var(--bv-verde); }
.rep-kpi-ico svg { width: 16px; height: 16px; }
.rep-kpi-label { color: var(--bv-gris-claro); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rep-kpi-valor { color: var(--bv-verde-profundo); font-family: var(--bv-tipo-titulo, inherit); font-size: 30px; line-height: 1.15; font-weight: 600; font-variant-numeric: tabular-nums; }
.rep-kpi-sub { color: var(--bv-gris); font-size: 11.5px; }
/* variación contra el mes anterior: sube, baja o sin cambio */
.rep-kpi-delta { margin-top: 6px; display: inline-flex; align-items: center; align-self: start; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: var(--bv-marfil); color: var(--bv-gris); }
.rep-kpi-delta.es-sube { background: var(--bv-ok-bg); color: var(--bv-ok); }
.rep-kpi-delta.es-baja { background: var(--bv-error-bg); color: var(--bv-error); }
[data-theme="dark"] .rep-kpi-delta { background: rgba(255,255,255,.07); color: inherit; }

/* dato grande de las tarjetas de dirección */
.rep-dato { display: grid; gap: 2px; }
.rep-dato strong { color: var(--bv-verde-profundo); font-family: var(--bv-tipo-titulo, inherit); font-size: 34px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.rep-dato span { color: var(--bv-tinta-suave); font-size: 12.5px; }
.rep-dato em { font-style: normal; color: var(--bv-gris-claro); font-size: 11.5px; }
.rep-dato.es-alerta strong { color: var(--bv-error); }
[data-theme="dark"] .rep-dato strong { color: var(--bv-marfil); }
[data-theme="dark"] .rep-dato.es-alerta strong { color: var(--bv-error); }

/* barra de período: manda en toda la pantalla de reportes */
.rep-periodo { align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rep-periodo .campo { min-width: 150px; }
/* la conversión ocupa el ancho de la grilla, que es una tabla */
.rep-card-ancha { grid-column: 1 / -1; }
.rep-lista-sub { display: block; font-style: normal; color: var(--bv-gris-claro); font-size: 10.5px; }
.rep-lista li strong.es-salida { color: var(--bv-error); }
.rep-lista li strong.es-ok { color: var(--bv-ok); }
.rep-lista { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.rep-lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--bv-borde); font-size: 12px; color: var(--bv-tinta-suave); }
.rep-lista li:first-child { border-top: 0; }
.rep-lista li strong { color: var(--bv-tinta); font-variant-numeric: tabular-nums; }
.rep-lista li span { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.rep-lista li span:has(.rep-punto) { flex-direction: row; align-items: center; gap: 7px; }
.rep-punto { width: 9px; height: 9px; border-radius: 3px; flex: none; }
[data-theme="dark"] .rep-lista li { border-color: var(--app-muted); }
[data-theme="dark"] .rep-lista li strong { color: var(--bv-marfil); }

/* franja de vencidos por antigüedad */
.rep-franja { display: flex; gap: 3px; height: 10px; margin-top: 14px; }
.rep-franja i { display: block; height: 100%; border-radius: 3px; }
.rep-pie { margin: 14px 0 0; padding-top: 11px; border-top: 1px solid var(--bv-borde); color: var(--bv-gris); font-size: 11.5px; }
.rep-pie strong { color: var(--bv-tinta); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .rep-pie { border-color: var(--app-muted); }
[data-theme="dark"] .rep-pie strong { color: var(--bv-marfil); }

.rep-kpi.es-alerta .rep-kpi-ico { background: var(--bv-error-bg); color: var(--bv-error); }
.rep-kpi.es-alerta .rep-kpi-sub { color: var(--bv-error); }
[data-theme="dark"] .rep-kpi { border-color: var(--app-muted); }
[data-theme="dark"] .rep-kpi-valor { color: var(--bv-marfil); }

.rep-card-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rep-card-sub { color: var(--bv-gris-claro); font-size: 10.5px; }
/* tarjetas de la misma fila con la misma altura y el contenido arriba */
.rep-grid { align-items: stretch; }
.rep-grid .rep-card { display: flex; flex-direction: column; }
.rep-barras { display: flex; flex-direction: column; gap: 2px; }
.rep-barra {
  display: grid; grid-template-columns: minmax(96px, 32%) 1fr minmax(38px, auto); align-items: center; gap: 12px;
  width: 100%; min-height: 32px; padding: 5px 8px; border: 0; border-radius: var(--bv-radio-s);
  background: transparent; cursor: pointer; text-align: left;
  transition: background var(--bv-transicion), opacity var(--bv-transicion);
}
.rep-barra:hover { background: #F4F1E8; }
.rep-barra:focus-visible { outline: 2px solid var(--bv-verde); outline-offset: 1px; }
.rep-barra.es-activa { background: var(--bv-ok-bg); box-shadow: inset 0 0 0 1px #BCD8B8; }
.rep-barra.es-apagada { opacity: .38; }
.rep-barra-label { color: var(--bv-tinta-suave); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-barra-pista { height: 8px; border-radius: 999px; background: var(--app-muted, #EFECE3); overflow: hidden; }
.rep-barra-pista i { display: block; height: 100%; border-radius: 999px; transition: width var(--bv-transicion); }
.rep-barra-valor { color: var(--bv-tinta); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
/* el cero no compite con los valores que sí tienen peso */
.rep-barra-valor.es-cero { color: var(--bv-gris-claro); font-weight: 500; }
/* las filas sin movimiento viven plegadas: la tarjeta mide lo que muestra */
.rep-mas { margin-top: 8px; }
.rep-mas > summary { cursor: pointer; color: var(--bv-gris-claro); font-size: 11px; padding: 4px 8px; border-radius: var(--bv-radio-s); list-style: none; }
.rep-mas > summary::-webkit-details-marker { display: none; }
.rep-mas > summary::before { content: '▸ '; }
.rep-mas[open] > summary::before { content: '▾ '; }
.rep-mas > summary:hover { background: var(--bv-marfil); color: var(--bv-gris); }
.rep-mas[open] .rep-barras { margin-top: 6px; }
.rep-vacio { margin: 4px 0 0; color: var(--bv-gris-claro); font-size: 11.5px; }
.rep-sub { margin: 0 0 6px; color: var(--bv-gris-claro); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.rep-dos { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .rep-dos { grid-template-columns: 1.25fr 1fr; } }

/* volumen mensual en columnas */
.rep-col-graf svg { width: 100%; height: auto; }
.rep-col-guia { stroke: var(--bv-borde); stroke-width: 1; stroke-dasharray: 3 4; }
.rep-col-base { stroke: var(--bv-borde); stroke-width: 1; }
.rep-col-barra { fill: var(--bv-verde); transition: fill var(--bv-transicion); }
.rep-col-fondo { fill: transparent; }
.rep-col { cursor: pointer; }
.rep-col:hover .rep-col-fondo, .rep-col:focus-visible .rep-col-fondo { fill: var(--bv-marfil); }
.rep-col:hover .rep-col-barra { fill: var(--bv-verde-profundo); }
.rep-col.es-activa .rep-col-barra { fill: var(--bv-verde-profundo); }
.rep-col.es-apagada { opacity: .38; }
.rep-col-etq { fill: var(--bv-gris-claro); font-size: 10px; }
.rep-col-cima { fill: var(--bv-gris); font-size: 9.5px; font-weight: 600; }
.rep-col-cima.es-pico { fill: var(--bv-verde-profundo); font-size: 11px; }
[data-theme="dark"] .rep-col-etq, [data-theme="dark"] .rep-col-cima { fill: var(--bv-marfil); }
[data-theme="dark"] .rep-col:hover .rep-col-fondo { fill: rgba(255,255,255,.06); }
[data-theme="dark"] .rep-barra:hover { background: #223229; }
[data-theme="dark"] .rep-barra.es-activa { background: #22352a; box-shadow: inset 0 0 0 1px #3d5c40; }
[data-theme="dark"] .rep-barra-label, [data-theme="dark"] .rep-barra-valor { color: var(--bv-marfil); }

.rep-donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rep-donut-graf { position: relative; width: 160px; height: 160px; flex: none; }
.rep-donut svg { width: 160px; height: 160px; flex: none; transform: rotate(-90deg); }
/* el total en el centro: es la suma de la leyenda, no un dato nuevo */
.rep-donut-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; pointer-events: none; text-align: center; padding: 0 26px; }
.rep-donut-centro span { color: var(--bv-verde-profundo); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; word-break: break-word; }
.rep-donut-centro em { font-style: normal; color: var(--bv-gris-claro); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
[data-theme="dark"] .rep-donut-centro span { color: var(--bv-marfil); }
.rep-donut-arco { transition: stroke-dasharray var(--bv-transicion); }
.rep-donut-leyenda { flex: 1; min-width: 160px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.rep-donut-leyenda li { display: grid; grid-template-columns: 11px 1fr auto auto; align-items: center; gap: 8px; font-size: 11.5px; }
.rep-donut-leyenda i { width: 11px; height: 11px; border-radius: 3px; }
.rep-donut-leyenda span { color: var(--bv-gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-donut-leyenda strong { color: var(--bv-tinta); font-variant-numeric: tabular-nums; }
.rep-donut-leyenda em { font-style: normal; color: var(--bv-gris-claro); font-size: 10.5px; min-width: 30px; text-align: right; }
[data-theme="dark"] .rep-donut-leyenda strong { color: var(--bv-marfil); }

.rep-area { max-width: 820px; margin: 0 auto; }
.rep-area svg { width: 100%; height: auto; }
.rep-area-punto { fill: #FFF; stroke: var(--bv-verde); stroke-width: 2.2; }
.rep-area-etq { fill: var(--bv-gris-claro); font-size: 9.5px; }
.rep-area-guia { stroke: var(--bv-borde); stroke-width: 1; stroke-dasharray: 3 4; }
[data-theme="dark"] .rep-area-punto { fill: var(--app-card); }
[data-theme="dark"] .rep-area-guia { stroke: var(--app-muted); }

/* exportaciones: nombre arriba, los dos botones abajo y del mismo ancho, para
   que las tarjetas no queden escalonadas entre sí (18/08/2026) */
/* la caja de exportación nace plegada y ocupa una línea */
.rep-export-box > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.rep-export-box > summary::-webkit-details-marker { display: none; }
.rep-export-box > summary::after { content: '▾'; margin-left: auto; color: var(--bv-gris-claro); font-size: 12px; }
.rep-export-box[open] > summary::after { content: '▴'; }
.rep-export { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.rep-export-item {
  display: flex; flex-direction: column; gap: 9px;
  padding: 11px 12px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m);
}
.rep-export-item:hover { border-color: var(--bv-verde); }
.rep-export-item strong { color: var(--bv-tinta); font-size: 12px; }
.rep-export-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rep-export-botones .btn-tabla { width: 100%; padding: 0 6px; }
[data-theme="dark"] .rep-export-item { border-color: var(--app-muted); }

/* ---------- matriz de permisos del perfil ---------- */
.perfil-matriz { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.perfil-grupo { margin: 0; padding: 10px 12px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); }
.perfil-grupo legend { padding: 0 5px; color: var(--bv-gris-claro); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.perfil-mod { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-size: 12px; color: var(--bv-tinta-suave); }
.perfil-mod input { width: 16px; height: 16px; accent-color: var(--bv-verde); }
.perfil-mod input:disabled + span { color: var(--bv-gris-claro); }

@media print { .splash { display: none !important; } }

/* correcoes do cliente — 30/07/2026 (rodada 2b) */

/* modales con formulario largo: el form tiene que repartir la altura,
   si no el cuerpo no puede scrollear y el contenido queda cortado. */
.modal > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.modal > form > .modal-body { flex: 1; min-height: 0; }
.modal-body { overscroll-behavior: contain; }

/* sidebar contraída: solo iconos (la clase real del enlace es .nav-enlace) */
.sidebar.es-colapsada .nav-grupo { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(250,247,241,.1); }
.sidebar.es-colapsada .nav-grupo:first-child { border-top: 0; margin-top: 0; }
.sidebar.es-colapsada .nav-enlace {
  justify-content: center; gap: 0; padding: 0; width: 44px; margin: 3px auto; position: relative;
}
.sidebar.es-colapsada .nav-texto { display: none; }
.sidebar.es-colapsada .nav-enlace svg { margin: 0; }
.sidebar.es-colapsada .nav-contador {
  position: absolute; top: 4px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  font-size: 8.5px; line-height: 15px;
}
.sidebar.es-colapsada .sidebar-cab { flex-direction: column; gap: 8px; padding: 12px 6px; }
.sidebar.es-colapsada .bv-lockup { justify-content: center; }

@media print { .sidebar-resize { display: none !important; } }

.perfil-fila-der { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.perfil-mods { font-size: 10.5px; white-space: nowrap; }
@media (max-width: 720px) { .perfil-fila { flex-wrap: wrap; } .perfil-fila-der { width: 100%; justify-content: flex-start; } }

/* ============================================================
   Reunión 21/07/2026 — permisos, bandeja de pendencias, embudo y fichas
   ============================================================ */

/* matriz de permisos: una fila por módulo, con «ver» y «editar» */
.perm-cab { display: grid; grid-template-columns: 1fr 44px 44px; gap: 4px; padding: 2px 0 6px; border-bottom: 1px solid var(--app-muted); }
.perm-cab span { color: var(--bv-gris-claro); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.perm-cab span:first-child { text-align: left; }
.perm-fila { display: grid; grid-template-columns: 1fr 44px 44px; gap: 4px; align-items: center; padding: 4px 0; }
.perm-nombre { font-size: 12px; color: var(--bv-tinta-suave); line-height: 1.3; }
.perm-check { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.perm-check input { width: 16px; height: 16px; accent-color: var(--bv-verde); }
.perm-check input:disabled { opacity: .45; cursor: not-allowed; }
.perfil-matriz { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* bandeja de pendencias */
.notif-fila { display: flex; align-items: stretch; gap: 8px; border-bottom: 1px solid var(--app-muted); }
.notif-fila:last-child { border-bottom: 0; }
.notif-fila .notif-item { flex: 1; min-width: 0; border-bottom: 0; }
.notif-fila .acciones { display: flex; align-items: center; gap: 5px; padding: 0 10px; flex-wrap: wrap; justify-content: flex-end; }
.notif-fila.no-leida .notif-item { box-shadow: inset 3px 0 var(--bv-dorado); }
[data-theme="dark"] .notif-fila { border-color: var(--app-muted); }
@media (max-width: 720px) { .notif-fila { flex-direction: column; } .notif-fila .acciones { padding: 0 10px 10px; justify-content: flex-start; } }

/* embudo con volumen alto de leads */
.kanban-cards { max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; }
.kanban-mas { width: 100%; margin-top: 4px; }
.lead-lote { display: inline-block; margin: 6px 8px 0; padding: 2px 7px; border-radius: 999px; background: var(--bv-marfil); color: var(--bv-verde-profundo); font-size: 10px; font-weight: 600; }
[data-theme="dark"] .lead-lote { background: rgba(255, 255, 255, .09); color: inherit; }
.lead-card.es-archivado { opacity: .62; }

/* botones y notas auxiliares */
.btn.btn-sm { min-height: 30px; padding: 5px 11px; font-size: 11px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-head h2 { margin: 0; font-size: 13px; }
.nota { margin: 0; color: var(--bv-gris); font-size: 11px; line-height: 1.5; }
.list-row-btn { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.list-row-btn:hover { background: var(--bv-marfil); }
[data-theme="dark"] .list-row-btn:hover { background: rgba(255, 255, 255, .05); }
.list-main .muted { display: block; margin-top: 2px; font-size: 10.5px; }
.estado-fila { display: grid; grid-template-columns: 1fr 56px minmax(180px, 1.2fr) auto; gap: 7px; align-items: center; margin-bottom: 8px; }
.estado-fila .muted { font-size: 10.5px; white-space: nowrap; }
@media (max-width: 720px) { .estado-fila { grid-template-columns: 1fr 56px; } .estado-fila select, .estado-fila button { grid-column: 1 / -1; } }

/* el embudo desplaza en horizontal dentro de su caja, sin arrastrar la página */
.vista { min-width: 0; max-width: 100%; }
.kanban-scroll { overscroll-behavior-x: contain; }
@media (max-width: 999px) { .kanban-scroll { max-width: calc(100vw - 24px); } }

/* ==========================================================================
   CRM inmobiliario — reunión del 31/07/2026
   Componentes nuevos: selector de vista, embudo compacto, atajos de contacto,
   cartera financiera, reservas, planes y mapa de perfiles.
   ========================================================================== */

/* --- selector de vista en la barra superior --- */
.vista-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border: 1px solid var(--bv-borde-input); border-radius: 999px; background: var(--bv-fondo-input); color: var(--bv-tinta-suave); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color var(--bv-transicion), color var(--bv-transicion); }
.vista-btn:hover { border-color: var(--bv-verde); color: var(--bv-verde-profundo); }
.vista-btn svg { width: 15px; height: 15px; flex: 0 0 15px; }
.vista-btn .empr-chevron { width: 13px; height: 13px; flex: 0 0 13px; opacity: .7; }
#vista-menu { right: 0; left: auto; min-width: 268px; }
@media (max-width: 1180px) { .vista-btn #vista-label { display: none; } .vista-btn { padding: 0 8px; } }

/* --- aviso intermedio --- */
.aviso-alerta { background: var(--bv-alerta-bg); border: 1px solid #E0CE95; color: var(--bv-alerta); border-radius: var(--bv-radio-s); padding: 9px 12px; font-size: 12.5px; }

/* --- embudo compacto --- */
.kanban-compacto .kanban-col { min-width: 236px; }
.lead-card-compacta { padding: 8px 9px; display: flex; flex-direction: column; gap: 6px; }
.lead-card-top { display: flex; align-items: flex-start; gap: 4px; }
.lead-card-compacta .lead-card-cab { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; padding: 0; }
.lead-card-compacta .lead-card-cab strong { font-size: 12.5px; line-height: 1.3; color: var(--bv-verde-profundo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-card-compacta .lead-card-cab span { font-size: 10.5px; color: var(--bv-gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .lead-card-compacta .lead-card-cab strong { color: inherit; }
.lead-expandir { flex: 0 0 22px; width: 22px; height: 22px; border: 0; border-radius: 4px; background: none; color: var(--bv-gris); cursor: pointer; font-size: 11px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.lead-expandir:hover { background: var(--bv-marfil); color: var(--bv-verde-profundo); }
[data-theme="dark"] .lead-expandir:hover { background: rgba(255,255,255,.08); color: inherit; }

/* semáforo del plazo de contacto */
.lead-card-plazo { display: flex; }
.lead-plazo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 1.5; }
.lead-plazo-punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }
.lead-plazo-ok { background: var(--bv-ok-bg); color: var(--bv-ok); }
.lead-plazo-pendiente { background: var(--bv-fondo-op); color: var(--bv-gris); }
.lead-plazo-alerta { background: var(--bv-alerta-bg); color: var(--bv-alerta); }
.lead-plazo-error { background: var(--bv-error-bg); color: var(--bv-error); }

/* atajos de contacto */
.lead-acciones { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lead-accion { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--bv-borde-input); border-radius: var(--bv-radio-s); background: var(--bv-fondo-input); color: var(--bv-tinta-suave); cursor: pointer; text-decoration: none; transition: border-color var(--bv-transicion), color var(--bv-transicion), background var(--bv-transicion); }
.lead-accion:hover { border-color: var(--bv-verde); color: var(--bv-verde); background: var(--bv-ok-bg); }
.lead-accion svg { width: 15px; height: 15px; }
.lead-acciones.es-compacto .lead-accion { width: 27px; height: 27px; }
.lead-acciones.es-compacto .lead-accion svg { width: 13.5px; height: 13.5px; }

/* detalle expandido de la tarjeta */
.lead-detalle { border-top: 1px dashed var(--bv-borde); padding-top: 7px; display: flex; flex-direction: column; gap: 7px; }
.lead-detalle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin: 0; }
.lead-detalle-grid dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--bv-gris-claro); font-weight: 600; }
.lead-detalle-grid dd { margin: 1px 0 0; font-size: 11.5px; color: var(--bv-tinta); overflow-wrap: anywhere; }
.lead-nota { margin: 0; font-size: 11px; line-height: 1.5; color: var(--bv-tinta-suave); }
.lead-detalle-acciones { display: flex; flex-wrap: wrap; gap: 4px; }

/* --- cartera financiera --- */
.cartera-total { text-align: right; }
.cartera-total span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--bv-gris-claro); font-weight: 600; }
.cartera-total strong { font-size: 20px; color: var(--bv-verde-profundo); font-family: var(--bv-serif); font-weight: 400; }
[data-theme="dark"] .cartera-total strong { color: inherit; }
.num.es-alerta { color: var(--bv-error); font-weight: 700; }

/* --- reservas y comprobantes --- */
.comprobante { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.comprobante-icono { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 50px; border-radius: var(--bv-radio-s); background: var(--bv-error-bg); color: var(--bv-error); font-size: 10px; font-weight: 700; letter-spacing: .04em; flex: 0 0 42px; }
.comprobante > div { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px; }
.comprobante strong { font-size: 12.5px; }
.comprobante span { font-size: 11px; color: var(--bv-gris); }
.comprobante-vista { display: flex; justify-content: center; }
.comprobante-doc { width: 100%; max-width: 460px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); padding: 18px; background: var(--bv-marfil); }
[data-theme="dark"] .comprobante-doc { background: rgba(255,255,255,.04); }
.comprobante-doc-cab { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--bv-borde); }
.comprobante-doc-cab strong { font-size: 12px; letter-spacing: .06em; color: var(--bv-verde-profundo); }
[data-theme="dark"] .comprobante-doc-cab strong { color: inherit; }
.comprobante-doc-cab span { font-size: 11px; color: var(--bv-gris); }

/* --- planes de suscripción --- */
.planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 14px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 20px 18px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: var(--bv-fondo-card, #FFF); box-shadow: var(--app-shadow); }
[data-theme="dark"] .plan-card { background: rgba(255,255,255,.03); }
.plan-card.es-destaque { border-color: var(--bv-verde); box-shadow: 0 0 0 1px var(--bv-verde) inset, var(--app-shadow); }
.plan-card.es-activo { border-color: var(--bv-dorado, #D2B46A); }
.plan-tag { position: absolute; top: -10px; left: 18px; padding: 3px 10px; border-radius: 999px; background: var(--bv-verde); color: #FFF; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.plan-card h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--bv-verde-profundo); }
[data-theme="dark"] .plan-card h3 { color: inherit; }
.plan-precio { font-family: var(--bv-serif); font-size: 27px; font-weight: 400; color: var(--bv-verde-profundo); line-height: 1.1; }
[data-theme="dark"] .plan-precio { color: inherit; }
.plan-sub { margin: 0; font-size: 11.5px; color: var(--bv-gris); }
.plan-lista { margin: 4px 0 0; padding-left: 17px; display: flex; flex-direction: column; gap: 4px; }
.plan-lista li { font-size: 12px; color: var(--bv-tinta-suave); line-height: 1.45; }
.plan-btn { margin-top: auto; width: 100%; }
.plan-activo { margin-top: auto; padding: 9px 12px; border-radius: var(--bv-radio-s); background: var(--bv-ok-bg); color: var(--bv-ok); font-size: 11.5px; font-weight: 600; text-align: center; }
.pasos { margin: 0; padding-left: 19px; display: flex; flex-direction: column; gap: 6px; }
.pasos li { font-size: 12.5px; line-height: 1.55; color: var(--bv-tinta-suave); }

/* --- mapa de perfiles --- */
.flujo-grid { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 12px; align-items: stretch; }
.flujo-col { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--bv-borde); border-top: 3px solid var(--flujo-color); border-radius: var(--bv-radio-m); background: var(--bv-fondo-card, #FFF); box-shadow: var(--app-shadow); }
[data-theme="dark"] .flujo-col { background: rgba(255,255,255,.03); }
.flujo-cab { display: flex; align-items: center; gap: 10px; }
.flujo-punto { width: 11px; height: 11px; border-radius: 50%; background: var(--flujo-color); flex: 0 0 11px; }
.flujo-cab strong { display: block; font-size: 15px; color: var(--bv-verde-profundo); }
[data-theme="dark"] .flujo-cab strong { color: inherit; }
.flujo-cab span { display: block; font-size: 11px; color: var(--bv-gris); }
.flujo-modulos { display: flex; flex-wrap: wrap; gap: 4px; }
.flujo-chip { padding: 2px 8px; border-radius: 999px; background: var(--bv-marfil); color: var(--bv-tinta-suave); font-size: 10.5px; font-weight: 600; }
[data-theme="dark"] .flujo-chip { background: rgba(255,255,255,.08); }
.flujo-lista { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 5px; }
.flujo-lista li { font-size: 12px; line-height: 1.5; color: var(--bv-tinta-suave); }
.flujo-flecha { display: flex; align-items: center; justify-content: center; }
.flujo-flecha span { width: 2px; height: 100%; background: linear-gradient(180deg, transparent, var(--bv-borde), transparent); }
.flujo-si { font-size: 12px; }
.flujo-no { font-size: 12px; color: var(--bv-gris-claro); font-style: italic; }
@media (max-width: 860px) { .flujo-grid { grid-template-columns: 1fr; } .flujo-flecha { display: none; } }

/* --- disponibilidad de la agenda --- */
.slots { display: flex; flex-wrap: wrap; gap: 6px; }
.slot { padding: 6px 11px; border: 1px solid var(--bv-borde-input); border-radius: var(--bv-radio-s); background: var(--bv-ok-bg); color: var(--bv-ok); font-size: 11.5px; font-weight: 600; }
.slot.es-ocupado { background: var(--bv-fondo-op); color: var(--bv-gris-claro); text-decoration: line-through; }

/* --- ajustes móviles de las pantallas nuevas --- */
@media (max-width: 720px) {
  .kanban-compacto .kanban-col { min-width: 218px; }
  .lead-detalle-grid { grid-template-columns: 1fr; }
  .cartera-total { text-align: left; }
  .planes-grid { grid-template-columns: 1fr; }
  .comprobante-doc { padding: 14px; }
  .lead-acciones .lead-accion { width: 32px; height: 32px; }
}

/* ==========================================================================
   Simulador de escenarios
   ========================================================================== */
.sim-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 11px; border: 1px solid var(--bv-borde-input); border-radius: 999px; background: var(--bv-fondo-input); color: var(--bv-tinta-suave); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: border-color var(--bv-transicion), color var(--bv-transicion); }
.sim-btn:hover { border-color: var(--bv-verde); color: var(--bv-verde-profundo); }
.sim-btn svg { width: 15px; height: 15px; flex: 0 0 15px; }
[data-theme="dark"] .sim-btn:hover { color: inherit; }
@media (max-width: 1180px) { .sim-btn .sim-btn-txt { display: none; } .sim-btn { padding: 0 9px; } }
/* en pantallas angostas la barra superior ya va justa: el simulador se abre
   desde el menú de usuario y desde el botón de la pantalla de CRM */
@media (max-width: 900px) { .sim-btn { display: none; } }

.sim-body { max-width: 100%; }
.sim-saltos { margin-top: 12px; flex-wrap: wrap; }

.sim-preview { margin-top: 12px; padding: 13px 15px; border: 1px dashed var(--bv-borde-input); border-radius: var(--bv-radio-m); background: var(--bv-marfil); }
[data-theme="dark"] .sim-preview { background: rgba(255, 255, 255, .04); }
.sim-preview-cab { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--bv-gris-claro); margin-bottom: 8px; }
.sim-preview-item { font-size: 12.5px; font-weight: 600; line-height: 1.6; }
.sim-preview-item.sim-ok { color: var(--bv-ok); }
.sim-preview-item.sim-alerta { color: var(--bv-alerta); }
.sim-preview-item.sim-error { color: var(--bv-error); }
.sim-preview-lista { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--bv-borde); display: flex; flex-direction: column; gap: 3px; }
.sim-preview-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--bv-tinta-suave); }
.sim-preview-fila span { color: var(--bv-gris); }

.sim-escenarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 9px; }
.sim-escenario { display: flex; align-items: flex-start; gap: 11px; padding: 13px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); background: var(--bv-fondo-card, #FFF); text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color var(--bv-transicion), box-shadow var(--bv-transicion); }
[data-theme="dark"] .sim-escenario { background: rgba(255, 255, 255, .03); }
.sim-escenario:hover { border-color: var(--bv-verde); box-shadow: var(--app-shadow); }
.sim-escenario-icono { flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--bv-radio-s); background: var(--bv-ok-bg); color: var(--bv-verde); }
.sim-escenario-icono svg { width: 17px; height: 17px; }
.sim-escenario-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sim-escenario-txt strong { font-size: 12.5px; color: var(--bv-verde-profundo); }
[data-theme="dark"] .sim-escenario-txt strong { color: inherit; }
.sim-escenario-txt span { font-size: 11.5px; line-height: 1.5; color: var(--bv-gris); }

.sim-resultado { margin-top: 18px; border: 1px solid var(--bv-verde); border-radius: var(--bv-radio-m); overflow: hidden; }
.sim-resultado-cab { padding: 12px 15px; background: var(--bv-ok-bg); display: flex; flex-direction: column; gap: 2px; }
.sim-resultado-cab strong { font-size: 13.5px; color: var(--bv-verde-profundo); }
.sim-resultado-cab span { font-size: 11.5px; color: var(--bv-verde); }
.sim-resultado-lista { display: flex; flex-direction: column; }
.sim-fila { display: flex; align-items: center; gap: 10px; padding: 9px 15px; border-top: 1px solid var(--bv-borde); }
.sim-icono { flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bv-marfil); color: var(--bv-verde); font-size: 11px; font-weight: 700; }
[data-theme="dark"] .sim-icono { background: rgba(255, 255, 255, .08); }
.sim-fila-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sim-fila-main strong { font-size: 12.5px; }
.sim-fila-main span { font-size: 11px; color: var(--bv-gris); }
.sim-fila-lado { font-size: 11.5px; font-weight: 600; color: var(--bv-verde-profundo); text-align: right; }
[data-theme="dark"] .sim-fila-lado { color: inherit; }
.sim-nota { margin: 10px 15px 0; font-size: 11.5px; color: var(--bv-gris); line-height: 1.5; }
.sim-resultado .page-actions { padding: 0 15px 14px; }

.sim-reset { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 15px; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); }
.sim-reset strong { display: block; font-size: 12.5px; }
.sim-reset span { display: block; font-size: 11.5px; color: var(--bv-gris); margin-top: 2px; }

@media (max-width: 720px) {
  .sim-escenarios { grid-template-columns: 1fr; }
  .sim-fila { flex-wrap: wrap; }
  .sim-fila-lado { text-align: left; }
  .sim-reset { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Barra superior en pantallas intermedias
   Entre el celular (donde ya se esconden varios elementos) y el escritorio
   ancho, la barra tenía más contenido del que cabía y el menú de usuario
   quedaba cortado. Acá se va soltando lastre a medida que falta espacio.
   ========================================================================== */
@media (min-width: 1000px) and (max-width: 1439px) {
  .busq-wrap { flex: 1 1 auto; min-width: 0; }
  .busq-wrap input { width: 100%; min-width: 120px; }
  #empr-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-textos strong { max-width: 92px; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .miga { display: none; }
  #empr-label { max-width: 78px; }
  .user-textos { display: none; }
  .topbar { gap: 6px; }
}
@media (min-width: 1000px) and (max-width: 1099px) {
  #empr-label { display: none; }
  .empr-btn { padding: 0 8px; }
}

/* ==========================================================================
   Ventana arrastrable
   El encabezado del modal funciona como asa: se puede correr la ventana para
   mirar lo que quedó atrás. Doble clic la devuelve al centro.
   ========================================================================== */
.modal-cab.es-arrastrable { cursor: grab; user-select: none; touch-action: none; }
.modal-cab.es-arrastrable:active { cursor: grabbing; }
.modal-cab.es-arrastrable h2 { cursor: inherit; }
/* el asa no debe robar el cursor de los controles del encabezado */
.modal-cab.es-arrastrable button,
.modal-cab.es-arrastrable a,
.modal-cab.es-arrastrable input,
.modal-cab.es-arrastrable select { cursor: pointer; user-select: auto; }
.modal-cab.es-arrastrable::before {
  content: ""; position: absolute; left: 50%; top: 6px; width: 34px; height: 3px;
  transform: translateX(-50%); border-radius: 999px; background: var(--bv-borde);
  opacity: 0; transition: opacity var(--bv-transicion);
}
.modal-cab.es-arrastrable { position: relative; }
.modal-cab.es-arrastrable:hover::before { opacity: 1; }
.modal.es-arrastrando { box-shadow: 0 32px 90px -28px rgba(26,24,20,.85); }
.modal.es-arrastrando .modal-cab { cursor: grabbing; }
body.arrastrando-modal { user-select: none; cursor: grabbing; }
@media (max-width: 720px) {
  .modal-cab.es-arrastrable::before { display: none; }
}

/* ---------- simulación: cantidad de horas escrita a mano ---------- */
.sim-libre { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; }
.sim-libre .campo { flex: 1 1 190px; min-width: 0; margin: 0; }
.sim-libre .campo span { display: block; margin-bottom: 5px; color: var(--bv-gris-claro); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sim-libre .input.num { width: 100%; }
.sim-libre .btn { flex: 0 0 auto; min-height: 42px; }
@media (max-width: 560px) {
  .sim-libre { flex-direction: column; align-items: stretch; }
  /* en columna, flex-basis pasa a ser altura: hay que soltarla o el campo
     se estira y deja un hueco antes del botón */
  .sim-libre .campo { flex: 0 0 auto; }
  .sim-libre .btn { width: 100%; }
}

/* ==========================================================================
   Menú lateral: contraer y expandir con transición
   Antes los textos se apagaban con display:none y el ancho saltaba de golpe.
   Acá el ancho, los rótulos y el pie acompañan el movimiento. Sólo en
   escritorio: en el celular el menú es un cajón y mantiene su comportamiento.
   ========================================================================== */
@media (min-width: 1000px) {
  .sidebar { transition: width var(--bv-transicion), flex-basis var(--bv-transicion); }
  /* el encabezado recorta los rótulos mientras se encogen; el borde de
     redimensionar vive fuera del recorte y sigue agarrable */
  .sidebar .sidebar-cab { overflow: hidden; }
  /* mientras se arrastra el borde el ancho tiene que seguir al mouse sin retraso */
  body.redimensionando .sidebar { transition: none; }

  .sidebar .nav-texto,
  .sidebar .bv-lockup-textos,
  .sidebar .nav-grupo-titulo,
  .sidebar .sidebar-pie {
    transition: opacity 150ms ease, max-width var(--bv-transicion), max-height var(--bv-transicion),
                padding var(--bv-transicion), margin var(--bv-transicion), transform var(--bv-transicion);
  }
  .sidebar .nav-texto, .sidebar .bv-lockup-textos { white-space: nowrap; }
  .sidebar .nav-enlace {
    transition: background var(--bv-transicion), color var(--bv-transicion),
                width var(--bv-transicion), padding var(--bv-transicion), margin var(--bv-transicion), gap var(--bv-transicion);
  }
  .sidebar .sidebar-cab { transition: padding var(--bv-transicion), gap var(--bv-transicion); }

  /* estado contraído: los rótulos se encogen en lugar de desaparecer de golpe */
  .sidebar.es-colapsada .nav-texto {
    display: inline-block; max-width: 0; min-width: 0; opacity: 0; overflow: hidden;
    transform: translateX(-6px); pointer-events: none;
  }
  .sidebar.es-colapsada .bv-lockup-textos {
    display: block; max-width: 0; min-width: 0; opacity: 0; overflow: hidden;
    transform: translateX(-6px); pointer-events: none;
  }
  .sidebar.es-colapsada .nav-grupo-titulo {
    display: block; max-width: 0; max-height: 0; opacity: 0; overflow: hidden;
    padding-top: 0; padding-bottom: 0; margin: 0; pointer-events: none;
  }
  .sidebar.es-colapsada .sidebar-pie {
    display: block; max-height: 0; opacity: 0; overflow: hidden;
    padding-top: 0; padding-bottom: 0; border-top-width: 0; pointer-events: none;
  }
  /* estado expandido: valores de destino explícitos para que haya qué animar */
  .sidebar .nav-texto { max-width: 220px; opacity: 1; transform: none; }
  .sidebar .bv-lockup-textos { max-width: 220px; opacity: 1; transform: none; }
  .sidebar .nav-grupo-titulo { max-width: 260px; max-height: 30px; opacity: 1; }
  .sidebar .sidebar-pie { max-height: 90px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar .nav-texto, .sidebar .bv-lockup-textos,
  .sidebar .nav-grupo-titulo, .sidebar .sidebar-pie, .sidebar .nav-enlace,
  .sidebar .sidebar-cab { transition: none !important; }
}

/* ==========================================================================
   Agenda: agendar tocando el casillero del día
   El casillero completo abre la nueva actividad con esa fecha ya cargada.
   Las pastillas de adentro siguen abriendo su propia ficha.
   ========================================================================== */
.cal-dia.es-agendable, .cal-col.es-agendable { position: relative; cursor: pointer; }
.cal-dia.es-agendable:hover, .cal-col.es-agendable:hover { background: #F7FAF5; }
[data-theme="dark"] .cal-dia.es-agendable:hover,
[data-theme="dark"] .cal-col.es-agendable:hover { background: rgba(68,171,79,.08); }
.cal-dia.es-agendable:focus-visible, .cal-col.es-agendable:focus-visible {
  outline: 2px solid var(--bv-verde); outline-offset: -2px;
}
.cal-agregar {
  position: absolute; right: 5px; bottom: 5px; width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bv-ok-bg); color: var(--bv-verde);
  font-size: 13px; font-weight: 700; line-height: 1;
  opacity: 0; transform: scale(.85); pointer-events: none;
  transition: opacity var(--bv-transicion), transform var(--bv-transicion);
}
.cal-dia.es-agendable:hover .cal-agregar,
.cal-col.es-agendable:hover .cal-agregar,
.cal-dia.es-agendable:focus-visible .cal-agregar,
.cal-col.es-agendable:focus-visible .cal-agregar { opacity: 1; transform: scale(1); }
/* «+N más» abre la semana de ese día y no debe disparar el alta */
button.cal-mas {
  align-self: flex-start; border: 0; background: transparent; cursor: pointer;
  color: var(--bv-gris-claro); font: inherit; font-size: 9.5px; padding: 1px 3px;
  border-radius: 3px; text-align: left;
}
button.cal-mas:hover { color: var(--bv-verde); background: var(--bv-ok-bg); }
/* en pantallas táctiles o angostas el casillero es chico y el «+» tapa el
   número del día: el toque sigue agendando, sólo se saca el adorno. */
@media (hover: none), (max-width: 900px) {
  .cal-agregar { display: none; }
}

/* ---------- painel: filtro de data ---------- */
.panel-filtro { margin-top: 14px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.panel-filtro .campo-periodo { min-width: 196px; }
.panel-filtro .campo-periodo .select { height: 38px; }
/* al cambiar el período solo se rehace esta franja: una atenuación corta deja
   claro que el número se actualizó, sin el parpadeo de repintar la pantalla */
#panel-kpis { transition: opacity .2s ease; }
#panel-kpis.es-actualizando { opacity: .38; }
@media (prefers-reduced-motion: reduce) { #panel-kpis { transition: none; } #panel-kpis.es-actualizando { opacity: 1; } }
.panel-filtro .campo { margin: 0; min-width: 132px; }
.panel-filtro .campo span { display: block; margin-bottom: 4px; color: var(--bv-gris-claro); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.panel-filtro .campo .input { height: 38px; }
@media (max-width: 720px) {
  .panel-filtro .segmented { width: 100%; overflow-x: auto; }
  .panel-filtro .campo { flex: 1 1 132px; }
}
/* valores monetários longos encolhem em vez de quebrar linha ou serem cortados */
.kpi-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-value.es-medio { font-size: 24px; }
.kpi-value.es-largo { font-size: 20px; }
@media (min-width: 1440px) { .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); } }
@media (max-width: 560px) { .kpi-value.es-largo { font-size: 18px; } }

/* ==========================================================================
   Cobranza mensual — tasa de conservación, avisos y conferencia (06/08/2026)
   ========================================================================== */

/* resumen del prorrateo: la última fila es el número que importa */
.cob-resumen { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); overflow: hidden; background: #FFF; }
.cob-resumen > div { padding: 12px 15px; border-right: 1px solid var(--app-muted); text-align: center; }
.cob-resumen > div:last-child { border-right: 0; }
.cob-resumen span { display: block; color: var(--bv-gris-claro); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; }
.cob-resumen strong { display: block; margin-top: 5px; color: var(--bv-verde-profundo);
  font-family: var(--bv-serif); font-size: 21px; font-weight: 400; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cob-resumen .es-destaque { background: #F2F7F1; }
.cob-resumen .es-destaque strong { color: var(--bv-verde-simbolo); font-size: 25px; }
.cob-resumen .es-nota strong { font-size: 16px; color: var(--bv-gris); }

/* panel financiero del dashboard */
.cob-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 1px;
  background: var(--app-muted); border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m); overflow: hidden; }
.cob-celda { background: #FFF; padding: 12px 14px; text-align: center; }
.cob-celda span { display: block; color: var(--bv-gris-claro); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; }
.cob-celda strong { display: block; margin-top: 5px; color: var(--bv-verde-profundo);
  font-family: var(--bv-serif); font-size: 20px; font-weight: 400; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cob-celda small { display: block; margin-top: 3px; color: var(--bv-gris); font-size: 10.5px; }
.cob-celda.es-ok strong { color: var(--bv-ok); }
.cob-celda.es-alerta strong { color: var(--bv-error); }


/* fila de la lista con casilla a la derecha (organizar el menú) */
.list-row-check { cursor: pointer; }
.list-row-check input { width: 17px; height: 17px; accent-color: var(--bv-verde); flex: 0 0 auto; }

/* pie de la navegación: archivar y reabrir módulos */
.nav-archivo { margin: 14px 10px 4px; padding-top: 11px; border-top: 1px solid rgba(250, 247, 241, .13);
  display: flex; flex-direction: column; gap: 5px; }
.nav-archivo-btn { width: 100%; text-align: left; background: transparent; border: 1px solid rgba(250, 247, 241, .18);
  color: rgba(250, 247, 241, .74); font: inherit; font-size: 11.5px; padding: 7px 10px; border-radius: 7px; cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease; }
.nav-archivo-btn:hover { background: rgba(250, 247, 241, .09); color: var(--bv-marfil); border-color: rgba(250, 247, 241, .32); }
.nav-archivo-btn.es-secundario { border-style: dashed; font-size: 11px; }
.nav-enlace.es-archivado { opacity: .58; }
.nav-enlace.es-archivado:hover { opacity: 1; }
.nav-grupo-archivado .nav-grupo-titulo { color: rgba(250, 247, 241, .34); }
.sidebar.es-colapsada .nav-archivo { display: none; }

[data-theme="dark"] .cob-resumen, [data-theme="dark"] .cob-resumen > div,
[data-theme="dark"] .cob-celda, [data-theme="dark"] .aviso-doc { background: var(--app-card); }
[data-theme="dark"] .cob-resumen .es-destaque { background: rgba(46, 98, 49, .18); }

/* al imprimir solo interesa el documento */
@media print {
  .aviso-doc { border: 0; }
  .panel-cab, .page-actions, .section-title, .list, .btn { display: none !important; }
}


/* ==========================================================================
   Ordenar cualquier tabla por su encabezado (06/08/2026)
   ========================================================================== */
.data-table th.es-ordenable { cursor: pointer; user-select: none; position: relative; padding-right: 22px; }
/* el encabezado no se pinta al pasar el mouse: alcanza con que la flecha
   despierte y el rótulo tome color */
.data-table th.es-ordenable:hover { color: var(--bv-verde); }
[data-theme="dark"] .data-table th.es-ordenable:hover { color: var(--bv-tinta); }
.data-table th.es-ordenable:focus-visible { outline: 2px solid var(--bv-dorado); outline-offset: -2px; }
.data-table th .orden-flecha { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 9px; line-height: 1; opacity: .32; transition: opacity .15s ease; }
.data-table th.es-ordenable:hover .orden-flecha { opacity: .7; }
.data-table th[aria-sort="ascending"] .orden-flecha,
.data-table th[aria-sort="descending"] .orden-flecha { opacity: 1; color: var(--bv-dorado); }

/* --- pie de totales -------------------------------------------------------
   Suma lo que se está mirando. Con un filtro de columna puesto, cambia con él:
   por eso dice «de la vista» y no «del mes». */
.data-table tfoot .fila-totales th,
.data-table tfoot .fila-totales td { padding: 11px 13px; border-top: 2px solid var(--bv-borde);
  background: #FCFBF7; color: var(--bv-tinta); font-size: 12.5px; font-weight: 700; }
.data-table tfoot .totales-rotulo { text-align: left; color: var(--bv-gris);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.data-table tfoot .fila-totales td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme="dark"] .data-table tfoot .fila-totales th,
[data-theme="dark"] .data-table tfoot .fila-totales td { background: rgba(255,255,255,.04); }
.table-wrap.apilable .data-table tfoot .fila-totales td:empty { display: none; }

/* nota a la izquierda del selector de período */
.panel-filtro-nota { margin-right: auto; align-self: center; color: var(--bv-gris); font-size: 11.5px; }
@media (max-width: 700px) { .panel-filtro-nota { margin-right: 0; width: 100%; } }

/* agregar una línea desde el pie de la propia planilla */
.agregar-linea { width: 100%; margin-top: -1px; padding: 10px 14px; background: #FCFAF6;
  border: 1px dashed var(--bv-borde); border-radius: 0 0 var(--bv-radio-m) var(--bv-radio-m);
  color: var(--bv-verde); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease; }
.agregar-linea:hover { background: #F1F6F0; border-color: var(--bv-verde); color: var(--bv-verde-profundo); }
[data-theme="dark"] .agregar-linea { background: rgba(250,247,241,.04); }

/* Acción de fila con ícono en vez de una palabra: editar, borrar.
   Es una acción secundaria — la fila entera ya abre el detalle —, así que se
   queda callada hasta que el mouse pasa por encima.
   El nombre no es `.btn-icono` a propósito: facturacion.css usa esa clase para
   un botón verde macizo de 46px y, como se carga después, ganaba el pulso. */
.icono-accion { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--bv-gris-claro);
  opacity: .72; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease; }
.icono-accion svg { width: 15px; height: 15px; }
tr:hover .icono-accion, .celda-concepto:hover .icono-accion { opacity: 1; }
.icono-accion:hover { opacity: 1; color: var(--bv-verde); border-color: var(--bv-borde); background: #F1F6F0; }
.icono-accion.peligro:hover { color: var(--bv-error); border-color: var(--bv-error-bg, #F3D9D6); background: #FBF2F1; }
.icono-accion:focus-visible { opacity: 1; outline: 2px solid var(--bv-dorado); outline-offset: 1px; }
[data-theme="dark"] .icono-accion:hover { background: rgba(250,247,241,.06); }


/* tarjeta de indicador que lleva a algún lado */
.kpi-enlace { position: relative; font: inherit; color: inherit; text-decoration: none; background: transparent;
  border-top: 0; border-left: 0; cursor: pointer; transition: background .15s ease; }
.kpi-enlace:hover { background: #F4F7F3; }
.kpi-enlace:focus-visible { outline: 2px solid var(--bv-dorado); outline-offset: -2px; }
.kpi-ir { position: absolute; top: 10px; right: 12px; font-size: 15px; line-height: 1; color: var(--bv-gris-claro);
  opacity: .5; transition: opacity .15s ease, transform .15s ease; }
.kpi-enlace:hover .kpi-ir { opacity: 1; transform: translateX(2px); color: var(--bv-verde); }
[data-theme="dark"] .kpi-enlace:hover { background: rgba(250, 247, 241, .05); }

/* celda del panel financiero que lleva a algún lado */
.cob-celda-enlace { font: inherit; color: inherit; text-decoration: none; border: 0; cursor: pointer;
  transition: background .15s ease; }
.cob-celda-enlace:hover { background: #F4F7F3; }
.cob-celda-enlace:focus-visible { outline: 2px solid var(--bv-dorado); outline-offset: -2px; }
[data-theme="dark"] .cob-celda-enlace:hover { background: rgba(250, 247, 241, .06); }

/* concepto: lista cerrada + lápiz para corregir el nombre */
.celda-concepto { display: flex; align-items: center; gap: 6px; }
.celda-concepto .select { flex: 1 1 auto; min-width: 0; }

/* manija para cambiar el ancho de la columna */
.data-table th { position: relative; }
.col-manija { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize;
  z-index: 2; touch-action: none; }
.col-manija::after { content: ""; position: absolute; top: 22%; bottom: 22%; left: 3px; width: 1px;
  background: rgba(250, 247, 241, .28); opacity: 0; transition: opacity .15s ease; }
.col-manija:hover::after { opacity: 1; }
body.arrastrando-columna { cursor: col-resize; user-select: none; }
body.arrastrando-columna .col-manija::after { opacity: 1; }
.data-table.es-ancho-fijo td { overflow: hidden; text-overflow: ellipsis; }

/* comprobante: el archivo recibido a la vista */
.comp-adjunto { display: block; width: 100%; max-height: 560px; min-height: 320px; border: 1px solid var(--bv-borde);
  border-radius: var(--bv-radio-m); background: #FCFAF6; object-fit: contain; }
img.comp-adjunto { height: auto; min-height: 0; }
.comp-sin-archivo { border: 1px dashed var(--bv-borde); border-radius: var(--bv-radio-m); padding: 18px;
  text-align: center; background: #FCFAF6; }
.comp-sin-archivo strong { display: block; color: var(--bv-verde-profundo); font-size: 13px; }
.comp-sin-archivo span { display: block; margin-top: 4px; color: var(--bv-gris); font-size: 11.5px; }

/* ==========================================================================
   Vida en los íconos de la navegación (06/08/2026)
   Cada ícono reacciona según lo que representa: al pasar el mouse insinúa el
   gesto, al entrar en la sección lo completa una vez. Nada que distraiga.
   ========================================================================== */
.nav-enlace svg { transition: transform .28s cubic-bezier(.34, 1.4, .64, 1); transform-origin: 50% 55%; }

/* al pasar el mouse: el gesto insinuado */
.nav-enlace:hover svg { transform: scale(1.14); }
.nav-enlace[data-icono="users"]:hover svg   { transform: scale(1.1) translateX(1px); }
.nav-enlace[data-icono="coins"]:hover svg   { transform: scale(1.12) rotate(-9deg); }
.nav-enlace[data-icono="doc"]:hover svg     { transform: scale(1.1) rotate(5deg); }
.nav-enlace[data-icono="building"]:hover svg{ transform: scale(1.1) translateY(-2px); }
.nav-enlace[data-icono="map"]:hover svg     { transform: scale(1.12) rotate(-5deg); }
.nav-enlace[data-icono="home"]:hover svg    { transform: scale(1.1) translateY(-2px); }
.nav-enlace[data-icono="bell"]:hover svg    { transform: scale(1.1) rotate(9deg); }
.nav-enlace[data-icono="funnel"]:hover svg  { transform: scale(1.1) translateY(1px); }
.nav-enlace[data-icono="chart"]:hover svg,
.nav-enlace[data-icono="trend"]:hover svg   { transform: scale(1.14) translateY(-1px); }

/* al entrar en la sección: el gesto completo, una sola vez */
.nav-enlace.es-activo svg { animation: nav-pop .52s cubic-bezier(.34, 1.4, .64, 1); }
.nav-enlace.es-activo[data-icono="users"] svg    { animation: nav-saludo .62s ease; }
.nav-enlace.es-activo[data-icono="coins"] svg    { animation: nav-moneda .68s cubic-bezier(.34, 1.3, .64, 1); }
.nav-enlace.es-activo[data-icono="doc"] svg      { animation: nav-hoja .6s ease; }
.nav-enlace.es-activo[data-icono="building"] svg { animation: nav-subir .58s cubic-bezier(.34, 1.4, .64, 1); }
.nav-enlace.es-activo[data-icono="bell"] svg     { animation: nav-campana .7s ease; }
.nav-enlace.es-activo[data-icono="map"] svg      { animation: nav-mapa .6s ease; }

@keyframes nav-pop     { 0% { transform: scale(1); } 45% { transform: scale(1.24); } 100% { transform: scale(1); } }
@keyframes nav-saludo  { 0%,100% { transform: translateX(0) scale(1); } 25% { transform: translateX(-2.5px) scale(1.08); }
                         55% { transform: translateX(2.5px) scale(1.08); } 80% { transform: translateX(-1px) scale(1.03); } }
@keyframes nav-moneda  { 0% { transform: rotateY(0) scale(1); } 40% { transform: rotateY(180deg) scale(1.16); }
                         100% { transform: rotateY(360deg) scale(1); } }
@keyframes nav-hoja    { 0%,100% { transform: rotate(0) scale(1); } 35% { transform: rotate(-8deg) scale(1.12); }
                         70% { transform: rotate(5deg) scale(1.06); } }
@keyframes nav-subir   { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(-4px) scale(1.12); }
                         75% { transform: translateY(1px) scale(1.02); } 100% { transform: translateY(0) scale(1); } }
@keyframes nav-campana { 0%,100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-11deg); }
                         60% { transform: rotate(7deg); } 80% { transform: rotate(-4deg); } }
@keyframes nav-mapa    { 0%,100% { transform: scale(1) rotate(0); } 40% { transform: scale(1.15) rotate(-7deg); }
                         70% { transform: scale(1.05) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .nav-enlace svg, .nav-enlace:hover svg, .nav-enlace.es-activo svg { transition: none; animation: none; transform: none; }
}

/* ==========================================================================
   Vuelta a la pantalla anterior
   Recorrer el sistema es saltar de una pantalla a otra: una tarjeta del tablero
   abre cobranzas, una alerta abre conservación. El botón del navegador existe,
   pero estando adentro de un sistema casi nadie lo mira. Esta vuelta va arriba
   a la izquierda, discreta, y dice a dónde lleva.
   ========================================================================== */
.volver-nav { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; margin-bottom: 10px;
  padding: 0 12px 0 9px; border: 1px solid transparent; border-radius: 999px; background: transparent;
  color: var(--bv-gris); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease; }
.volver-nav:hover { border-color: var(--bv-borde); background: var(--app-card); color: var(--bv-verde); }
.volver-nav:focus-visible { border-color: var(--bv-verde); color: var(--bv-verde); }
.volver-nav svg { flex: none; transition: transform .15s ease; }
.volver-nav:hover svg { transform: translateX(-2px); }
[data-theme="dark"] .volver-nav:hover { background: rgba(250,247,241,.06); color: var(--bv-tinta); }
@media (prefers-reduced-motion: reduce) { .volver-nav svg, .volver-nav:hover svg { transition: none; transform: none; } }

/* ==========================================================================
   Tipografía de datos — Inter (SIL OFL 1.1, autoalojada como Prata y Poppins)
   Prata es la letra de la marca: hermosa en un título, incómoda para leer
   veinte números seguidos. Poppins es la letra de la interfaz. Para el panel
   gerencial hace falta una tercera, hecha para pantalla y para cifras: Inter,
   con números de ancho fijo. Queda así el reparto: Prata en los títulos
   (identidad), Poppins en la interfaz, Inter en los datos.
   ========================================================================== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { --bv-datos: 'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* los números del panel */
.kpi-label, .kpi-value, .kpi-sub,
.cob-resumen span, .cob-resumen strong,
.cob-celda span, .cob-celda strong, .cob-celda small,
.chart-label, .chart-row strong,
.num, .mapa-resumen strong, .cartera-total strong {
  font-family: var(--bv-datos); font-variant-numeric: tabular-nums; }
.kpi-value { font-weight: 600; letter-spacing: -.01em; }
.cob-resumen strong, .cob-celda strong { font-weight: 600; letter-spacing: -.01em; }
.cob-resumen .es-destaque strong { font-weight: 700; }
/* la planilla entera: doce puntos de Inter se leen mejor que doce de Poppins */
.data-table th, .data-table td { font-family: var(--bv-datos); }
.data-table td { font-variant-numeric: tabular-nums; }

/* modo oscuro: estos números seguían pintados de verde profundo sobre fondo
   oscuro, o sea, invisibles */
[data-theme="dark"] .cob-resumen strong,
[data-theme="dark"] .cob-celda strong,
[data-theme="dark"] .plan-precio,
[data-theme="dark"] .cartera-total strong { color: #dcebdd; }
[data-theme="dark"] .cob-resumen .es-destaque strong { color: #a8d8ab; }
[data-theme="dark"] .cob-resumen .es-nota strong { color: var(--bv-gris); }
[data-theme="dark"] .cob-celda.es-ok strong { color: var(--bv-ok); }
[data-theme="dark"] .cob-celda.es-alerta strong { color: var(--bv-error); }
[data-theme="dark"] .agregar-linea { color: #9bcb9e; }
[data-theme="dark"] .agregar-linea:hover { background: rgba(155,203,158,.1); border-color: #9bcb9e; color: #cfe6d0; }

/* ==========================================================================
   Íconos en el tablero
   Una franja de siete números todos iguales obliga a leer los rótulos uno por
   uno. Con un ícono al lado, la vista encuentra el dato que busca antes de
   leer nada.
   ========================================================================== */
.kpi-icono { width: 28px; height: 28px; margin-bottom: 7px; display: grid; place-items: center;
  border-radius: 50%; background: #EFF4EE; color: var(--bv-verde); }
.kpi-icono svg { width: 15px; height: 15px; }
.kpi.es-alerta .kpi-icono, .kpi-enlace.es-alerta .kpi-icono { background: #FBF1F0; color: var(--bv-error); }
[data-theme="dark"] .kpi-icono { background: rgba(155,203,158,.14); color: #9bcb9e; }
[data-theme="dark"] .kpi.es-alerta .kpi-icono, [data-theme="dark"] .kpi-enlace.es-alerta .kpi-icono {
  background: rgba(242,163,146,.14); color: var(--bv-error); }
/* ícono junto al título de un bloque */
.titulo-icono { display: inline-flex; align-items: center; gap: 8px; }
.titulo-icono > svg { flex: none; width: 16px; height: 16px; color: var(--bv-verde); opacity: .85; }
[data-theme="dark"] .titulo-icono > svg { color: #9bcb9e; }

/* ==========================================================================
   Acciones al pie de un formulario
   Van a la derecha, debajo del último campo, que es donde queda la mano. En el
   encabezado de página siguen donde estaban.
   ========================================================================== */
.page-actions { justify-content: flex-end; }
.page-head > .page-actions { justify-content: flex-start; }

/* el botón de feedback se puede esconder para mostrar el sistema sin él */
body.sin-feedback .bv-feedback-trigger,
body.sin-feedback .bv-feedback-pin,
body.sin-feedback .bv-feedback-scrim,
body.sin-feedback .bv-feedback-drawer { display: none !important; }

/* el ícono del rótulo de una celda del panel financiero */
.cob-celda span svg, .cob-resumen span svg { width: 12px; height: 12px; margin-right: 5px;
  vertical-align: -2px; opacity: .6; }

/* un monto largo no puede partirse en dos líneas: la celda baja el cuerpo */
.cob-celda strong, .cob-resumen strong { white-space: nowrap; }
.cob-celda strong.es-medio, .cob-resumen strong.es-medio { font-size: 17.5px; }
.cob-celda strong.es-largo, .cob-resumen strong.es-largo { font-size: 15.5px; }
.cob-resumen .es-destaque strong.es-medio { font-size: 21px; }
.cob-resumen .es-destaque strong.es-largo { font-size: 18px; }
/* ocho indicadores entran en una fila: antes el octavo caía solo, con media
   tarjeta vacía al lado */
.cob-panel { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }

/* El aviso de "guardado" vivía debajo del botón de feedback, que es más alto y
   opaco: la confirmación existía y nadie la veía. Ahora pasa por encima, y
   vuelve abajo cuando el botón está escondido. */
.toast { bottom: 84px; z-index: 300; animation: toast-entra .22s ease-out; }
body.sin-feedback .toast { bottom: 18px; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* un estado que explica lo que significa al pasar el mouse */
.chip-ayuda { cursor: help; text-decoration: underline dotted transparent; text-underline-offset: 3px;
  transition: text-decoration-color .15s ease; }
.chip-ayuda:hover { text-decoration-color: currentColor; }

/* eliminar: la acción que no se deshace se ve distinta de las demás */
.btn-peligro { border: 1px solid var(--bv-error-borde, #E3B7B1); background: transparent; color: var(--bv-error);
  transition: background .15s ease, border-color .15s ease; }
.btn-peligro:hover { border-color: var(--bv-error); background: var(--bv-error-bg, #FBF2F1); }
[data-theme="dark"] .btn-peligro { background: transparent; }
[data-theme="dark"] .btn-peligro:hover { background: rgba(226,124,106,.12); }

/* aviso de atención: no es un error, es algo que falta hacer */
.aviso-atencion { border: 1px solid #E6C98A; border-radius: var(--bv-radio-s); background: #FDF6E6;
  color: #7A5714; padding: 9px 12px; font-size: 12.5px; line-height: 1.55; }
.aviso-atencion strong { color: #6A4A0F; }
[data-theme="dark"] .aviso-atencion { border-color: #6A5426; background: rgba(224,199,126,.12); color: #E8D9A8; }
[data-theme="dark"] .aviso-atencion strong { color: #F2E7C4; }

/* ==========================================================================
   GASTOS MENSUALES DE COPROPIEDAD
   Réplica del papel que Bella Vida ya manda todos los meses. Se copia el
   encabezado verde, la caja de título y la planilla con todos sus bordes: el
   propietario reconoce este documento de un vistazo y cualquier diferencia
   visual le hace dudar del número.
   ========================================================================== */
.doc-gastos-hoja { max-width: 900px; margin-inline: auto; }
.doc-gastos { border: 2px solid #1B7A3E; background: #FFF; color: #14231A;
  font-family: 'Courier New', 'DejaVu Sans Mono', monospace; font-size: 12px; }
.doc-gastos-cab { display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: #0FA958; color: #FFF; }
.doc-gastos-datos { flex: 1; text-align: center; line-height: 1.45; }
.doc-gastos-datos strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: .22em; }
.doc-gastos-datos span { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; }
.doc-gastos-logo { flex: none; width: 148px; padding: 7px 6px; border-radius: 3px;
  background: #FFF; color: #1B7A3E; text-align: center; line-height: 1.1; }
.doc-gastos-logo span { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.doc-gastos-logo small { display: block; margin-top: 2px; font-size: 6px; letter-spacing: .18em; color: #4B7A55; }
.doc-gastos-tit { padding: 8px 12px 12px; border-bottom: 1px solid #1B7A3E; background: #DDEBD6; text-align: center; }
.doc-gastos-tit strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: .06em; }
.doc-gastos-tit span { display: block; margin-top: 6px; font-size: 17px; font-weight: 700; letter-spacing: .06em; }
.doc-gastos-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.doc-gastos-tabla th, .doc-gastos-tabla td { border: 1px solid #1B7A3E; padding: 6px 8px;
  text-align: center; vertical-align: middle; word-break: break-word; }
.doc-gastos-tabla thead th { background: #FFF; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: none; }
.doc-gastos-tabla tbody td { background: #EAF3E5; font-size: 11px; }
.doc-gastos-tabla tbody td.doc-g-concepto { text-transform: uppercase; }
.doc-gastos-tabla tfoot th { background: #DDEBD6; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.doc-gastos-tabla tfoot td { background: #FFF; font-size: 12.5px; font-weight: 700; }
.doc-gastos-tabla tfoot tr.es-destaque th, .doc-gastos-tabla tfoot tr.es-destaque td { background: #FFF; }
.doc-gastos-tabla thead th:nth-child(1) { width: 30%; }
.doc-gastos-tabla thead th:nth-child(2) { width: 16%; }
.doc-gastos-tabla thead th:nth-child(3) { width: 16%; }
[data-theme="dark"] .doc-gastos { background: #FFF; color: #14231A; }

/* al imprimir queda solo la hoja, sin cabecera ni menú */
@media print {
  .doc-gastos-hoja { max-width: none; margin: 0; }
  .doc-gastos { border-width: 1px; }
  .volver-nav, .page-head { display: none !important; }
}

/* ==========================================================================
   Imprimir un documento y nada más
   `window.print()` mandaba al papel la pantalla entera: el aviso salía sin el
   fondo verde del encabezado — los navegadores no imprimen fondos si no se les
   pide — y abajo aparecían las cajas vacías de «Envíos» y «Comprobantes».
   Ahora el documento se clona acá y solo esto se imprime.
   ========================================================================== */
#zona-impresion { display: none; }
@media print {
  body.imprimiendo > *:not(#zona-impresion) { display: none !important; }
  body.imprimiendo #zona-impresion { display: block !important; }
  /* margen de hoja: el documento no puede salir pegado al borde del papel */
  @page { margin: 12mm; }
  #zona-impresion .aviso-doc, #zona-impresion .doc-gastos { max-width: none; margin: 0; }
  /* los fondos del documento son parte del documento, no decoración */
  .aviso-doc, .aviso-doc *, .doc-gastos, .doc-gastos * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* un lote que ya tiene dueño sigue en la lista, pero no se puede elegir */
.select option:disabled { color: var(--bv-gris-claro); font-style: italic; }

/* ==========================================================================
   Buscar y filtrar en una tabla
   ========================================================================== */
.campo-busca { position: relative; display: flex; align-items: center; flex: 1 1 220px; max-width: 340px; }
.campo-busca.angosto { flex: 0 1 260px; }
.campo-busca.campo-busca-corto { flex: 0 0 190px; max-width: 190px; }
.campo-busca .input { width: 100%; padding-left: 33px; padding-right: 30px; }
.campo-busca-lupa { position: absolute; left: 11px; display: grid; place-items: center;
  color: var(--bv-gris-claro); pointer-events: none; }
.campo-busca-lupa svg { width: 14px; height: 14px; }
.campo-busca-x { position: absolute; right: 6px; width: 22px; height: 22px; display: none; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--bv-gris-claro); font-size: 11px;
  cursor: pointer; transition: background .15s ease, color .15s ease; }
.campo-busca-x:hover { background: var(--app-muted); color: var(--bv-tinta); }
.campo-busca.tiene-texto .campo-busca-x { display: grid; }

/* el rótulo ordena, el embudo filtra */
.data-table th .col-titulo { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 3px; }
.data-table th.es-ordenable { padding-right: 40px; }
.data-table th .orden-flecha { position: static; transform: none; margin-left: 2px; }
.col-filtro { position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: inherit; opacity: .3; cursor: pointer;
  transition: opacity .15s ease, background .15s ease, color .15s ease; }
.col-filtro svg { width: 12px; height: 12px; }
.data-table th:hover .col-filtro { opacity: .7; }
.col-filtro:hover { opacity: 1; background: var(--app-muted); color: var(--bv-verde); }
.col-filtro.es-activo { opacity: 1; color: var(--bv-verde); background: #E8F0E6; }
[data-theme="dark"] .col-filtro.es-activo { background: rgba(155,203,158,.18); color: #9bcb9e; }

.filtro-columna { position: absolute; z-index: 320; border: 1px solid var(--bv-borde); border-radius: var(--bv-radio-m);
  background: var(--app-card, #FFF); box-shadow: 0 20px 48px -18px rgba(26,24,20,.45); overflow: hidden; }
.filtro-columna-cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--app-muted); font-size: 11.5px; }
.filtro-columna-cab strong { flex: 1; color: var(--bv-tinta); font-size: 11.5px; text-transform: none; }
.filtro-columna-lista { max-height: 250px; overflow-y: auto; padding: 6px 6px 8px; }
.filtro-columna-lista .check { display: flex; width: 100%; min-height: 30px; padding: 0 8px; font-size: 12px; }
.filtro-columna-lista .check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro-columna-lista .check:hover { background: var(--app-muted); border-radius: 6px; }
.filtro-columna-pie { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 12px;
  border-top: 1px solid var(--app-muted); background: #FCFBF7; }
.filtro-columna-pie .btn { min-height: 34px; padding: 0 14px; font-size: 12px; }
[data-theme="dark"] .filtro-columna-pie { background: rgba(250,247,241,.04); }
.tabla-filtrada { display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  border-top: 1px solid var(--app-muted); background: #FCFBF7; color: var(--bv-gris); font-size: 11.5px; }
[data-theme="dark"] .tabla-filtrada { background: rgba(250,247,241,.04); }

/* ==========================================================================
   AVISO DE PAGO
   Réplica del papel que el propietario recibe: franja verde con los datos de
   la empresa, el número de cuota del año, la planilla de dos columnas y el
   total en amarillo. Se copia el original hasta en los rótulos, porque el
   propietario lo reconoce de un vistazo.
   ========================================================================== */
.aviso-doc { max-width: 640px; margin-inline: auto; border: 1px solid #E4DFD3; border-radius: 12px;
  overflow: hidden; background: #FFF; color: var(--bv-tinta);
  font-family: var(--bv-sans); font-size: 12.5px; box-shadow: 0 10px 28px rgba(26, 24, 20, .07); }
.aviso-doc-cab { display: flex; align-items: stretch; gap: 8px; padding: 14px 16px;
  background: var(--bv-verde-profundo); color: var(--bv-marfil); }
.aviso-doc-marca { flex: 1; min-width: 0; align-self: center; }
.aviso-doc-marca strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.aviso-doc-marca span { display: block; margin-top: 2px; font-size: 7.6px; font-weight: 600;
  letter-spacing: .06em; line-height: 1.55; color: rgba(250, 247, 241, .78); }
.aviso-doc-logo { flex: none; width: 130px; display: grid; place-content: center; padding: 6px;
  background: transparent; border: 0; color: var(--bv-marfil); text-align: center; }
.aviso-doc-logo span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.aviso-doc-logo small { display: block; margin-top: 1px; font-size: 5px; letter-spacing: .16em; color: var(--bv-dorado-claro); }
/* --- logotipo de los documentos ------------------------------------------
   El mismo del sitio: símbolo verde + lockup. El propietario recibe el papel y
   entra a la web; tienen que ser la misma marca. Si la imagen no carga —una
   impresión sin red— queda el lockup escrito, que es lo que había antes. */
.doc-marca { display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 10px; line-height: 1.1; }
.doc-marca .doc-marca-simbolo { flex: none; width: 26px; height: 26px; object-fit: contain; }
.doc-marca .doc-marca-textos { display: block; text-align: left; }
.doc-marca .doc-marca-textos > span { display: block; font-family: var(--bv-serif), Georgia, serif;
  font-size: 15px; font-weight: 600; letter-spacing: .05em; color: #1B7A3E; text-transform: none; }
.doc-marca .doc-marca-textos > small { display: block; margin-top: 1px; font-size: 5.6px;
  font-weight: 700; letter-spacing: .16em; color: #4B7A55; white-space: nowrap; }
.doc-gastos-logo.doc-marca { width: 172px; }
.aviso-doc-logo.doc-marca { width: 146px; }
.aviso-doc-logo.doc-marca .doc-marca-simbolo { width: 22px; height: 22px; }
.aviso-doc-logo.doc-marca .doc-marca-textos > span { font-size: 13px; }
.aviso-doc-logo.doc-marca .doc-marca-textos > small { font-size: 4.9px; letter-spacing: .13em; }

/* --- el documento se puede agrandar --------------------------------------
   En la ficha el papel se ve chico al lado de los datos. Tocarlo en cualquier
   punto lo abre en grande, que es lo que uno hace con un papel cuando quiere
   leer la letra de abajo. */
.doc-lupa { position: relative; display: block; cursor: zoom-in; border-radius: 4px; }
.doc-lupa:focus-visible { outline: 2px solid var(--bv-verde); outline-offset: 4px; }
.doc-lupa-pista { position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  background: rgba(26, 24, 20, .8); color: #FFF; font-size: 11.5px; font-weight: 600;
  letter-spacing: .01em; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.doc-lupa:hover .doc-lupa-pista,
.doc-lupa:focus-visible .doc-lupa-pista { opacity: 1; }
@media (hover: none) { .doc-lupa-pista { opacity: 1; } }

.modal.es-visor { width: min(100%, 1180px); max-height: 92vh; }
.visor-doc { padding: 20px; background: var(--bv-fondo-op); overflow: auto; overscroll-behavior: contain; }
.visor-lienzo { display: flex; justify-content: center; min-width: min-content; }
.visor-escala { flex: none; }
.visor-barra { align-items: center; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
.visor-barra .visor-nivel { min-width: 58px; text-align: center; font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--bv-tinta-suave); }
.visor-barra [data-act="modal-cerrar"] { margin-left: auto; }

.aviso-doc-tit { padding: 16px 16px 14px; background: var(--bv-fondo-op); text-align: center;
  border-bottom: 1px solid #E4DFD3; }
.aviso-doc-nro { display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--bv-verde-profundo); color: var(--bv-dorado-claro);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; }
.aviso-doc-tit strong { display: block; margin-top: 8px; font-family: var(--bv-serif), Georgia, serif;
  font-size: 21px; font-weight: 400; letter-spacing: .12em; color: var(--bv-verde-profundo); }
.aviso-doc-liq { display: block; margin-top: 7px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--bv-tinta-suave); }
.aviso-doc-liq b { font-size: 12.5px; color: var(--bv-tinta); }
.aviso-doc-datos { width: 100%; border-collapse: collapse; table-layout: fixed; }
.aviso-doc-datos th, .aviso-doc-datos td { border-bottom: 1px solid #EFEAE0; padding: 8px 14px;
  font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; vertical-align: middle;
  word-break: break-word; }
.aviso-doc-datos th { width: 45%; text-align: left; background: #FBF9F4;
  color: var(--bv-tinta-suave); font-weight: 600; font-size: 10px; letter-spacing: .08em; }
.aviso-doc-datos td { text-align: right; background: #FFF; color: var(--bv-tinta);
  font-variant-numeric: tabular-nums; }
.aviso-doc-datos .aviso-doc-pagar th, .aviso-doc-datos .aviso-doc-pagar td {
  background: #F5EBCC; color: var(--bv-verde-profundo); border-bottom: 0;
  font-weight: 700; font-size: 14px; }
.aviso-doc-datos .aviso-doc-pagar th { font-size: 11px; letter-spacing: .1em; }
.aviso-doc-pie { margin: 0; padding: 10px 16px; border-top: 1px solid #E4DFD3;
  background: var(--bv-fondo-op); color: var(--bv-tinta-suave); font-size: 10px; text-align: right; }
/* En la cabecera verde el lockup va en marfil y la línea de apoyo en dorado
   (pedido del 08/08); los documentos con fondo claro conservan sus colores. */
.aviso-doc-logo.doc-marca .doc-marca-textos > span { color: var(--bv-marfil); }
.aviso-doc-logo.doc-marca .doc-marca-textos > small { color: var(--bv-dorado-claro); }
[data-theme="dark"] .aviso-doc { background: #FFF; color: var(--bv-tinta); }

/* Credenciales del portal en la ficha del cliente: se leen en voz alta por
   teléfono, así que van en monoespaciada y con los caracteres separados. */
.p-credencial {
  display: inline-block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 15px; font-weight: 600; letter-spacing: 0.06em;
  background: rgba(8, 103, 61, 0.07);
  border: 1px solid rgba(8, 103, 61, 0.18);
  border-radius: 7px; padding: 4px 9px;
}

/* ==========================================================================
   Material comercial del corredor (16/08/2026)
   Cuatro hojas que la plataforma arma sola —ficha en blanco, reglamento,
   lista de precios y mapa— y que se imprimen o se guardan en PDF.
   ========================================================================== */
.material-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.material-tarjeta {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  padding: 13px; border: 1px solid var(--app-muted); border-radius: var(--bv-radio-s);
  background: #FCFBF7; cursor: pointer; transition: border-color var(--bv-transicion), transform var(--bv-transicion);
}
.material-tarjeta:hover { border-color: var(--bv-verde); transform: translateY(-1px); }
.material-tarjeta strong { font-size: 12.5px; color: var(--bv-tinta); }
.material-tarjeta span { font-size: 11px; color: var(--bv-tinta-suave); }
.material-tarjeta em { font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bv-verde); }
[data-theme="dark"] .material-tarjeta { background: rgba(255,255,255,.03); }

.material-hoja { max-width: 820px; margin: 0 auto; padding: 26px 30px;
  border: 1px solid var(--app-muted); border-radius: var(--bv-radio-s); background: #FFF; color: var(--bv-tinta); }
.material-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 11px; border-bottom: 2px solid var(--bv-verde); }
.material-cab strong { font-size: 17px; letter-spacing: .02em; color: var(--bv-verde); }
.material-cab span { font-size: 11.5px; color: var(--bv-tinta-suave); }
.material-nota { margin-top: 12px; font-size: 11px; color: var(--bv-tinta-suave); }
.material-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 20px; margin-top: 12px; }
.material-campo.ancho { grid-column: 1 / -1; }
.material-campo span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bv-tinta-suave); }
.material-campo i { display: block; height: 21px; border-bottom: 1px solid #B9B2A2; }
.material-caja { height: 92px; margin-top: 12px; border: 1px solid #B9B2A2; border-radius: var(--bv-radio-s); }
.material-firmas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; }
.material-firmas i { display: block; border-bottom: 1px solid #6F6A5E; }
.material-firmas span { display: block; margin-top: 5px; font-size: 10px; text-align: center; color: var(--bv-tinta-suave); }
.material-capitulo { break-inside: avoid; margin-bottom: 15px; }
.material-capitulo h3 { font-size: 12.5px; color: var(--bv-verde); }
.material-capitulo p { margin-top: 4px; font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; }
/* el mapa impreso entra en el ancho de la hoja: los puntos van en porcentaje,
   así que acompañan solos. Y en papel no son botones: no se clickean. */
.material-mapa .mapa-plano { width: 100%; border: 1px solid var(--app-muted); border-radius: var(--bv-radio-s); }
.material-mapa .mapa-plano-lote { pointer-events: none; cursor: default; width: 13px; height: 13px; }
[data-theme="dark"] .material-hoja { background: #FFF; }

@media print {
  .material-hoja { max-width: none; margin: 0; padding: 0; border: 0; }
  .material-tarjeta, .nota { display: none !important; }
  .material-capitulo, .material-campos, .material-firmas { break-inside: avoid; }
}
.material-cab small { margin-left: auto; font-size: 10.5px; color: var(--bv-tinta-suave); }

/* ==========================================================================
   Sesión prestada — «entrar como» (16/08/2026)
   El aviso es fijo y no se cierra: operar como otra persona sin saberlo sería
   peor que no tener la función.
   ========================================================================== */
.aviso-suplantacion {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0; padding: 9px 18px;
  background: #FDF6E6; border-bottom: 1px solid #E6C98A; color: #6A4A0F;
  font-size: 12px; font-weight: 600;
}
.aviso-suplantacion strong { color: #513709; }
.aviso-suplantacion > button { margin-left: auto; }
[data-theme="dark"] .aviso-suplantacion { background: rgba(224,199,126,.14); border-color: #6A5426; color: #E8D9A8; }
[data-theme="dark"] .aviso-suplantacion strong { color: #F2E7C4; }

/* ---------- cuentas de cobro dentro del formulario de reserva ----------
   Plegado por defecto: el corredor que ya sabe a dónde transferir no necesita
   verlo, y el que no sabe lo tiene a un clic sin salir del formulario. */
.crm-transferencia {
  border: 1px solid var(--bv-borde);
  border-radius: 10px;
  background: var(--app-muted, rgba(0, 0, 0, 0.02));
}
.crm-transferencia > summary {
  padding: 10px 12px; cursor: pointer;
  color: var(--bv-tinta); font-size: 12.5px; font-weight: 600;
}
.crm-transferencia-cuerpo {
  padding: 0 12px 12px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.crm-cuenta {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border: 1px solid var(--bv-borde); border-radius: 8px;
  background: var(--app-surface, #fff);
}
.crm-cuenta-qr {
  flex: 0 0 auto; width: 84px; height: auto; display: block;
  border: 1px solid var(--bv-borde); border-radius: 6px; background: #fff;
}
.crm-cuenta-titulo { margin: 0 0 3px; color: var(--bv-gris); font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.crm-cuenta-dato { margin: 0; color: var(--bv-tinta); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }