/* ============================================================
   Flujo de Fee · PUENTE con nubi ui
   Une el marcado y las clases que ya usan los módulos con el sistema nubi:
   tokens heredados, pop-ups (SFFModal), pestañas de Bootstrap, estados de carga,
   login y utilidades. Se carga DESPUÉS de nubi.min.css y nubi-compat.css.
   ============================================================ */

/* ── Tokens heredados del tema anterior → tokens de nubi ── */
:root {
  --lavanda: var(--brand-50);   --lavanda-2: var(--brand-50);
  --morado: var(--brand);       --morado-2: var(--brand);   --morado-deep: var(--brand-600);
  --menta: var(--teal);         --menta-ink: var(--teal);   --menta-soft: var(--teal-50);
  --title: var(--ink);
  --f-display: var(--f);        --f-body: var(--f);
  --fx-blue-softer: var(--brand-50);  --fx-purple-soft: var(--teal-50);
  --rail-w: 0px;
  --hover-btn: var(--brand-50);
}
:root[data-theme="dark"] { --menta-ink: var(--teal); }

/* ── Utilidades que usan los módulos ── */
.d-none, .hidden { display: none !important; }
.text-faint { color: var(--mute); }
.upper { text-transform: uppercase; }
.upper::placeholder { text-transform: none; }
.btn-xs { padding: 2px 8px; font-size: 11.5px; border-radius: var(--r-sm); line-height: 1.5; }
.btn-icon { display: inline-grid; place-items: center; }
.table-sm th, .table-sm td { padding: 6px 8px; }
.float-end { float: right; }
.w-full { width: 100%; }
#modals-container .modal { display: none !important; }

/* ── Contenido a ancho cómodo dentro del shell de nubi ── */
.o-app.fill > .o-body { padding: 18px 24px 28px; }
.o-body > * { width: 100%; max-width: 1500px; margin-inline: auto; }

/* ── Marca y menú en la barra superior ── */
.o-brand { gap: 9px; }
.o-brand img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; }
.o-tabs .tab i { font-size: 16px; }
.dd-menu a i, .dd-menu button i { margin-right: 6px; color: var(--mute); }
.userbtn .avatar { font: 700 11px var(--f); }
@media (max-width: 767px) { .o-brand span { display: none; } }

/* ── Pestañas internas de Bootstrap (pop-up de factura) ── */
.nav.fx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 14px; padding: 0; list-style: none; }
.fx-tabs .nav-link { border: 0; background: none; padding: 8px 14px; font: 500 13.5px var(--f); color: var(--ink-2); border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; }
.fx-tabs .nav-link:hover { color: var(--ink); }
.fx-tabs .nav-link.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }

/* ── Pop-ups (SFFModal): mismo aspecto que los <dialog> de nubi ── */
.sff-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadein var(--t);
}
.sff-dialog {
  background: var(--surface); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  width: min(520px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden;
  animation: pop var(--t-slow) var(--ease);
}
.sff-dialog.lg { width: min(760px, 100%); }
.sff-dialog.xl { width: min(1100px, 100%); }
.sff-dialog > .modal-content { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; border: 0; background: transparent; box-shadow: none; }
.sff-modal-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex: none; }
.sff-modal-title { flex: 1; font-size: 17px; font-weight: 600; margin: 0; color: var(--ink); }
.sff-close-btn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 0; background: none; color: var(--ink-2); cursor: pointer; font-size: 16px; }
.sff-close-btn:hover { background: var(--line-2); color: var(--ink); }
.sff-modal-body { padding: 20px; overflow: auto; flex: 1; min-height: 0; }
.sff-modal-footer { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; background: var(--line-2); flex: none; }
.sff-modal-body details { background: var(--line-2); border-radius: var(--r); padding: 8px 12px; }
@media (max-width: 767px) {
  .sff-backdrop { align-items: flex-end; padding: 0; }
  .sff-dialog { width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ── Estados de carga y vacío ── */
.sff-loader, .sff-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; color: var(--mute); text-align: center; padding: 24px; }
.sff-empty i { font-size: 34px; opacity: .5; }
.sff-empty p, .sff-loader p { margin: 0; font-size: 13.5px; }
.sff-spinner { width: 26px; height: 26px; border: 2.5px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
tr.sff-group-row td { background: var(--line-2); color: var(--mute); font: 600 11px var(--f); text-transform: uppercase; letter-spacing: .06em; padding: 6px 12px; }

/* ── Login (estilo SGD: fondo claro con degradé de nubi, logo flotando, botón teal) ── */
#login-page { min-height: 100vh; }
.login-app-logo { width: 84px; height: 84px; display: block; margin: 0 auto 8px; object-fit: contain; animation: float 4s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(16,24,40,.18)); }
.login-card { padding: 1.75rem; margin-bottom: 1rem; box-shadow: var(--sh-3); border-radius: var(--r-xl); overflow: visible; }
.login-label { font: 600 13px var(--f); color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
/* Selector de usuario con búsqueda (igual al del SGD) */
.lg-combo { position: relative; text-align: left; }
.lg-field { position: relative; display: flex; align-items: center; }
.lg-field > i { position: absolute; left: 11px; color: var(--mute); pointer-events: none; font-size: 16px; }
.lg-field input { padding-left: 34px; padding-right: 36px; }
.lg-field.sel input { border-color: var(--teal); background: var(--teal-50); font-weight: 600; }
.lg-clear { position: absolute; right: 5px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--mute); cursor: pointer; display: grid; place-items: center; }
.lg-clear:hover { background: var(--line-2); color: var(--ink); }
.lg-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 264px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); padding: 4px; }
.lg-group { font: 600 11px var(--f); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); padding: 8px 10px 3px; }
.lg-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; font: 600 13px var(--f); color: var(--ink); }
.lg-item .avatar { width: 28px; height: 28px; font-size: 10px; }
.lg-item:hover, .lg-item.on { background: var(--brand-50); color: var(--brand); }
.lg-empty { padding: 14px 10px; text-align: center; color: var(--mute); font-size: 13px; }

/* Accesos sin sesión: dos botones centrados + nota a mano con flecha hacia "Subir evidencia".
   Una sola rejilla (2 columnas iguales) para que la flecha caiga justo sobre el botón de la derecha. */
.login-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 178px)); justify-content: center; column-gap: 12px; row-gap: 0; margin: 4px 0 10px; }
.login-quick .btn { padding: 11px 8px; white-space: nowrap; }
.login-hint { grid-column: 1 / -1; position: relative; text-align: center; transform: rotate(-1.6deg); display: grid; gap: 0; padding: 4px 18px 0; }
.login-hint .hand { font-size: 1.55rem; line-height: 1.05; font-weight: 700; }
.login-hint .mark { padding: 0 6px; background-repeat: no-repeat; background-size: 0% 100%; animation: markIn .8s .5s var(--ease) forwards; }
.login-hint .sp { position: absolute; width: 15px; height: 15px; fill: var(--hl); stroke: none; opacity: 0; animation: twinkle 3.2s var(--ease) infinite; }
.login-hint .sp1 { left: 4px; top: 0; animation-delay: 1.2s; }
.login-hint .sp2 { right: 6px; top: 20px; width: 11px; height: 11px; animation-delay: 2s; }
.login-arrow { grid-column: 2; width: 100%; height: 48px; overflow: visible; color: var(--teal); }
.login-arrow path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.login-arrow .shaft { animation: draw .9s 1s var(--ease) forwards; }
.login-arrow .head { animation: draw .35s 1.8s var(--ease) forwards; }
.login-evidencia { border-color: var(--teal); color: var(--teal-600); font-weight: 600; animation: ringPulse 2.2s 2.3s 3; }
.login-evidencia:hover { background: var(--teal-50); text-decoration: none; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes markIn { to { background-size: 100% 100%; } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: .95; transform: scale(1) rotate(25deg); } }
@keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(1,126,132,.5); } 70% { box-shadow: 0 0 0 12px rgba(1,126,132,0); } 100% { box-shadow: 0 0 0 0 rgba(1,126,132,0); } }
:root[data-theme="dark"] .login-hint .mark { background-image: linear-gradient(transparent 58%, rgba(255,215,94,.32) 58% 90%, transparent 90%); }
@media (prefers-reduced-motion: reduce) {
  .login-hint .mark { animation: none; background-size: 100% 100%; }
  .login-arrow path { animation: none; stroke-dashoffset: 0; }
  .login-evidencia, .login-hint .sp { animation: none; }
  .login-hint .sp { opacity: .8; }
}
@media (max-width: 380px) { .login-hint .hand { font-size: 1.35rem; } }
.login-foot { margin-top: 18px; text-align: center; display: grid; justify-items: center; gap: 8px; }
:root[data-theme="dark"] .login-foot p { font-size: 12px; margin: 0; line-height: 1.5; color: var(--mute); }
#public-page { min-height: 100vh; background: var(--bg); }


/* ── Panel de control: la miga ya nombra la pantalla → el título de las listas queda solo para lectores de pantalla.
      (Las fichas con miga propia dentro de .page-head conservan su título.) ── */
.page-head:not(:has(nav)) > div > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-head:not(:has(nav)) { align-items: center; }
.o-app.fill > .o-cp { flex: none; }

/* ── Panel de control: controles propios de cada pantalla ── */
.cp-l, .cp-r { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cp-r { justify-self: end; white-space: nowrap; }
.cp-r .switch { font-size: 13px; }
.cp-r .btn { white-space: nowrap; }
.o-search .facet select { border: 0; background: var(--line-2); color: var(--ink); font: 12px var(--f); padding: 1px 2px; outline: 0; cursor: pointer; max-width: 170px; }
.o-search .facet select:focus-visible { outline: 2px solid var(--teal); }
.o-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.o-search .sp { flex: 1; }
@media (max-width: 900px) { .cp-r { justify-self: start; flex-wrap: wrap; white-space: normal; } }
@media print { .o-cp { display: none !important; } }

/* ── Resumen: saludo con acento a mano + barra de etapas de nubi ── */
.res-hello { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.res-hello h1 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.res-hello .hand { font-size: 1.55rem; }
.statusbar button em { font: normal 11px var(--f-mono); color: var(--mute); margin-left: 8px; }
.statusbar button.done em { color: var(--ink-2); }
.statusbar button:hover { background: var(--line-2); }
.kpis + .statusbar, .res-hello + .kpis { margin-top: 0; }
.o-body > .kpis { width: 100%; }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .kpis { grid-template-columns: 1fr; } }
button, select, textarea, input { font-family: inherit; }

/* ── Separación entre bloques: nubi, en modo pantalla completa, apila sin espacio (display:block) ── */
.o-app.fill > .o-body { display: grid; gap: 16px; align-content: start; grid-auto-rows: max-content; }
#dash-body { grid-auto-rows: max-content; }
.o-app.fill > .o-body > * { margin-block: 0; }
#dash-body { display: grid; gap: 16px; }
.donut-grid, .dash-charts { display: grid; gap: 16px; }
.dash-section-label { margin: 8px 0 -4px; }

/* ── Dashboard: filtros (segmentados de nubi) ── */
.dash-filters { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; padding: 12px 16px; }
.df-g { display: flex; align-items: center; gap: 10px; }
.df-l { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.dash-filters .seg button { padding: 6px 14px; }
.dash-filters select.inp-box { width: auto; min-width: 170px; padding: 6px 30px 6px 10px; font-size: 13px; }
.dash-filters .sp { flex: 1; }

/* ── Dashboard: gráficas lado a lado y con alto controlado ── */
.dash-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.donut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-chart .chart svg { max-height: 320px; margin-inline: auto; }
.dash-chart p { max-width: 62ch; margin: 0 0 6px; line-height: 1.45; }
.dash-chart p b { font-weight: 700; }
.pnl h3 { font-size: 15px; font-weight: 700; margin: 0; }
@media (max-width: 1100px) { .dash-charts { grid-template-columns: 1fr; } .donut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .donut-grid { grid-template-columns: 1fr; }
  .dash-chart .chart { overflow-x: auto; }
  .dash-chart .chart svg { min-width: 540px; }
  .dash-filters { gap: 10px 14px; }
  .df-g { width: 100%; justify-content: space-between; }
  .dash-filters .sp { display: none; }
}
@media print { .dash-filters { display: none !important; } }

/* ── Ficha (formulario nubi: hoja + barra de estado + botones inteligentes + pestañas) ── */
.form-wrap.one { grid-template-columns: minmax(0, 1fr); }
.sheet-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sheet .title { font-size: 22px; font-weight: 700; color: var(--ink); }
.sheet .fv { border-bottom: 1px solid var(--line); padding: 6px 2px; min-height: 32px; display: block; }
.sheet .pane.o-list { border: 0; }
@media (max-width: 820px) { .fg { grid-template-columns: 1fr; } .smart { flex-wrap: wrap; } }

/* ── Texto de ayuda para Fénix (copiar y pegar) ── */
.ctx { display: flex; gap: 8px; align-items: flex-start; }
.ctx-t { flex: 1; font: 12.5px/1.45 var(--f-mono); color: var(--ink); background: var(--line-2); border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 7px 9px; resize: vertical; min-height: 40px; }
.ctx-t:focus { outline: 0; border-color: var(--teal); background: var(--surface); }
.gen { border: 1px solid var(--line); border-radius: var(--r); background: var(--brand-50); padding: 14px 16px; display: grid; gap: 10px; }
.gen-h i { color: var(--brand); }
.gen-f { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.gen-f label { display: grid; gap: 3px; font: 600 11.5px var(--f); color: var(--ink-2); }
@media (max-width: 700px) { .gen-f { grid-template-columns: 1fr; } .ctx { flex-direction: column; } .ctx .btn { width: 100%; } }