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

/* ── Tokens heredados → tokens de nubi ── */
:root {
  --wine: var(--brand);          --wine-light: 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);
  --lavanda: var(--brand-50);    --lavanda-2: var(--brand-50);
  --title: var(--ink);
  --f-display: var(--f);         --f-body: var(--f);
  --topbar-h: 46px;
}

/* ── Utilidades que usan los módulos ── */
.d-none, .hidden { display: none !important; }
.text-faint { color: var(--mute); }
.btn-icon { display: inline-grid; place-items: center; }
.table-sm th, .table-sm td { padding: 6px 8px; }
.w-full { width: 100%; }
.text-nowrap { white-space: nowrap; }
.text-uppercase { text-transform: uppercase; }
.fw-normal { font-weight: 400; }
.fs-5 { font-size: 1.15rem; }
.fs-8 { font-size: .72rem; }
.text-dark { color: var(--ink) !important; }
.text-info { color: var(--info-ink) !important; }
.text-warning { color: var(--warn-ink) !important; }
.bg-light { background: var(--line-2) !important; }
.rounded-circle { border-radius: 50% !important; }
.img-thumbnail { padding: 3px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); max-width: 100%; height: auto; }
@media (min-width: 768px) { .text-md-end { text-align: right; } .mt-md-0 { margin-top: 0 !important; } }
#modals-container .modal { display: none !important; }
button, select, textarea, input { font-family: inherit; }

/* ── 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; }
.o-app.fill > .o-body { display: grid; gap: 16px; align-content: start; grid-auto-rows: max-content; }
.o-app.fill > .o-body > * { margin-block: 0; min-width: 0; }
.o-app.fill > .o-body { grid-template-columns: minmax(0, 1fr); }
.o-app.fill > .o-cp { flex: none; }

/* ── Marca y menú en la barra superior ── */
.o-brand { gap: 9px; }
.o-brand img { width: 28px; height: 28px; object-fit: contain; }
.o-tabs .tab i { font-size: 16px; }
#sidebar-admin .tab { border: 0; background: none; cursor: pointer; }
#sidebar-admin .tab .ti-chevron-down { font-size: 13px; margin-left: 2px; color: var(--mute); }
.dd-menu a i, .dd-menu button i { margin-right: 6px; color: var(--mute); }
.userbtn .avatar { font: 700 11px var(--f); overflow: hidden; }
.userbtn .avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .o-brand span { display: none; } #sidebar-nav, #sidebar-admin { display: none !important; } }
@media print { .o-nav, .o-cp, .bottom-nav { display: none !important; } }

/* ── Pop-ups (SGSModal): mismo aspecto que los <dialog> de nubi ── */
.sgs-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);
}
.sgs-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);
}
.sgs-dialog.lg { width: min(760px, 100%); }
.sgs-dialog.xl { width: min(1100px, 100%); }
.sgs-dialog > .modal-content { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; border: 0; background: transparent; box-shadow: none; }
.sgs-modal-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex: none; }
.sgs-modal-title { flex: 1; font-size: 17px; font-weight: 600; margin: 0; color: var(--ink); }
.sgs-modal-title i { color: var(--brand) !important; }
.sgs-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; }
.sgs-close-btn:hover { background: var(--line-2); color: var(--ink); }
.sgs-modal-body { padding: 20px; overflow: auto; flex: 1; min-height: 0; }
.sgs-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; }
@media (max-width: 767px) {
  .sgs-backdrop { align-items: flex-end; padding: 0; }
  .sgs-dialog, .sgs-dialog.lg, .sgs-dialog.xl { width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ── Estados de carga y vacío ── */
.sgs-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 160px; color: var(--mute); text-align: center; padding: 24px; }
.sgs-spinner { width: 22px; height: 22px; border: 2.5px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty .ill i { font-size: 38px; color: var(--brand); opacity: .75; }
.empty b { font-weight: 600; color: var(--ink-2); }

/* ── Paginación (Utils.paginationHTML) ── */
.sgs-pagination { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; padding: 12px 0 4px; }
.sgs-page-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: var(--r); font: 500 13px var(--f-mono); cursor: pointer; display: inline-grid; place-items: center; }
.sgs-page-btn:hover:not(:disabled) { background: var(--brand-50); color: var(--brand); border-color: var(--brand-100); }
.sgs-page-btn.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-weight: 700; }
.sgs-page-btn:disabled { opacity: .45; cursor: default; }

/* ── Login (igual al SGD y Flujo de Fee) ── */
#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; }
.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; }
.login-foot { margin-top: 18px; text-align: center; display: grid; justify-items: center; gap: 8px; }
.login-foot p { font-size: 12px; margin: 0; line-height: 1.5; color: var(--mute); }
#admin-panel .form-label { font: 600 12px var(--f); color: var(--ink-2); }

/* ── Panel de control: controles propios de cada pantalla (Cp.render) ── */
.o-cp .crumb b { font-weight: 600; }
.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; }
.cp-r .inp-box { width: auto; padding: 5px 10px; font-size: 13px; }
.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; } #topbar-date { display: none; } }
/* Celular: búsqueda y facetas bajan de línea en vez de salirse de la pantalla */
@media (max-width: 767px) {
  .o-cp { min-width: 0; }
  .o-cp .o-search { flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .o-cp .o-search::-webkit-scrollbar { display: none; }
  .o-search .facet { flex: none; }
  .o-search input[type="search"] { flex: 1 0 150px; min-width: 150px; }
  .cp-l { flex-wrap: wrap; }
  .cp-r .inp-box { flex: 1 1 150px; }
}

/* La miga ya nombra la pantalla → el título de las listas queda solo para lectores de pantalla */
.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; }
.page-head:not(:has(nav)) > div:only-child:has(> p:empty), .page-head:empty { display: none; }

/* Selector de vista (Tablero · Lista · Calendario) con enlaces: mismo aspecto que .views button de nubi */
.views a { display: inline-flex; align-items: center; gap: 5px; background: var(--surface); padding: 5px 10px; color: var(--ink-2); font: 500 13px var(--f); text-decoration: none; }
.views a + a { border-left: 1px solid var(--line); }
.views a:hover { background: var(--line-2); color: var(--ink); }
.views a.on { background: var(--line-2); color: var(--brand); font-weight: 600; }
@media (max-width: 520px) { .views a span { display: none; } }

/* Barra inferior (móvil): cada ícono ocupa su parte del ancho */
.bottom-nav li { flex: 1; display: flex; }

/* ── Celular (iPhone): la página completa hace scroll, no un contenedor interno de 100dvh ──
   Con el shell .o-app.fill, al abrir/cerrar el teclado de iOS (p. ej. al filtrar marcas)
   Safari reajusta la vista y el scroll interno rebota hacia arriba, ocultando "Registrar actividad".
   El scroll del documento es el comportamiento nativo y estable en iOS. */
@media (max-width: 767px) {
  html { scroll-behavior: auto; scroll-padding-top: calc(var(--topbar-h) + 8px); scroll-padding-bottom: calc(var(--bottom-nav-h) + 24px + env(safe-area-inset-bottom)); }
  .o-app.fill { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .o-app.fill > .o-nav { position: sticky; top: 0; z-index: var(--z-nav); }
  .o-app.fill > .o-body { overflow: visible; flex: none; min-height: 0;
    padding: 14px 14px calc(var(--bottom-nav-h) + 28px + env(safe-area-inset-bottom)); }
}
/* Listas con scroll propio: al llegar al final no arrastran ni hacen rebotar la página */
#marcas-checklist, #edit-especialistas-checklist, .sgs-modal-body, .lg-list, .kanban-board .col-cards { overscroll-behavior: contain; }