/* ══════════════════════════════════════════════════════════════════════════
   ORBITA — Design Elite v1.0
   Stripe / Vercel standard — Web · Android · iOS
   Loaded AFTER main.css  →  safe overrides only
   ══════════════════════════════════════════════════════════════════════════

   REGLAS INAMOVIBLES
   ─────────────────────────────────────────────────────────────────────────
   • .sidebar-logo svg  y sus hijos NO se tocan (logos animados de Orbita)
   • .mobile-topbar-brand svg  NO se toca
   • Estructura Supabase / rutas Cloudflare: intactas
   • --bg-sidebar / --sidebar-text: controlados por JS (branding de tenant)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. FUENTE: Inter ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap');

/* ── 2. DESIGN TOKENS EXTENDIDOS ──────────────────────────────────────── */
:root {
  /* ── Tipografía → Inter ── */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Escala tipográfica (8-point grid) */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.8125rem;  /*  13px */
  --text-base: 0.9375rem;  /*  15px */
  --text-md:   1rem;       /*  16px — mínimo inputs iOS */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */

  /* Pesos tipográficos */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Interlineado */
  --lh-tight:   1.25;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;

  /* ── Sistema WCAG Tenant (valores iniciales; JS los sobreescribe) ── */
  --tenant-primary:     var(--accent);      /* Color primario del tenant  */
  --tenant-on-primary:  #ffffff;            /* Texto sobre primario (calc. por JS) */
  --tenant-surface:     rgba(0,188,212,.08);/* Superficie suave en tono tenant */

  /* ── Sombras premium (Stripe-style, multicapa) ── */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.08),  0 1px 2px -1px rgba(0,0,0,.06);
  --shadow:    0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-md: 0 8px 12px -3px rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.05);
  --shadow-lg: 0 16px 24px -5px rgba(0,0,0,.10), 0 6px 8px -6px rgba(0,0,0,.05);
  --shadow-xl: 0 24px 48px -8px rgba(0,0,0,.18), 0 12px 16px -6px rgba(0,0,0,.06);

  /* ── Radios ── */
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ── Sidebar ── */
  --sidebar-w: 260px;
  /* --bg-sidebar  y  --sidebar-text se mantienen controlados por el tenant */
}

/* ── 3. BASE GLOBAL ───────────────────────────────────────────────────── */
html {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  letter-spacing: -0.011em;
  background: #f8fafc;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.025em;
  line-height: var(--lh-snug);
}

/* ── 4. SIDEBAR ELITE ─────────────────────────────────────────────────── */
/*
   IMPORTANTE: .sidebar-logo svg y .mobile-topbar-brand svg
   son los logos animados de Orbita — NO se modifican.
   Solo se estiliza el contenedor y los textos hermanos.
*/

/* Ancho actualizado */
.sidebar {
  width: var(--sidebar-w);
  /* background: var(--bg-sidebar) — respetado, controlado por el tenant JS */
  border-right: none;
  box-shadow: 1px 0 0 0 rgba(255,255,255,.05);
}

/* ── 4a. Cabecera del sidebar ─── */
.sidebar-header {
  padding: 18px 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* "ORBITA" — pastilla glass que funciona sobre cualquier color de sidebar */
/* El SVG animado no se toca — solo estilizamos el contenedor y el span */
.sidebar-logo {
  gap: 10px;
  padding: 9px 13px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.sidebar-logo:hover {
  background: rgba(0, 0, 0, 0.30);
  border-color: rgba(255, 255, 255, 0.18);
}

.sidebar-logo span {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(0, 188, 212, 0.45);
}

/* ── 4b. Contenedor del logo del Tenant ─── */
/*
   Jerarquía visual:
   ┌─ Orbita (constante de marca, 32px SVG animado + texto 17px bold) ──┐
   │  ↓ subordinado                                                      │
   │  [CLIENTE]  logo 34px / nombre 11px — claramente secundario        │
   └──────────────────────────────────────────────────────────────────── ┘
*/
.tenant-branding-bar {
  margin-top: 10px;
  padding: 10px 0 2px;
  border-top: 1px solid rgba(255,255,255,.06);
  gap: 5px;
}

.tenant-branding-divider {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  padding: 0;
}

.tenant-branding-inner {
  gap: 6px;
  align-items: flex-start;
}

/* Logo del cliente: aspecto fijo, claramente más pequeño que el de Orbita */
.tenant-logo-img {
  width: auto;
  max-width: 148px;
  height: 34px;                    /* 34px vs 32px SVG de Orbita — paridad intencionada */
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255,255,255,.9);
  padding: 4px 8px;
  display: block;
}

.tenant-nombre {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
  text-transform: none;
}

/* ── 4c. Navegación: estilo Vercel / Linear ─── */
.sidebar-nav {
  padding: 10px 10px 8px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-item {
  position: relative;          /* para el ::before de barra activa */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 0;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(248,250,252,.60);
  border: none;
  opacity: 1;
  min-height: 44px;             /* mínimo táctil 44px */
  transition: background .14s ease, color .14s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.nav-item:hover {
  background: rgba(255,255,255,.07);
  color: rgba(248,250,252,.90);
  border-color: transparent;
  transform: none;              /* sin translateY en sidebar */
}

/* Estado activo: fondo suave + barra izquierda en color del tenant */
.nav-item.active {
  background: rgba(255,255,255,.10);
  color: #ffffff;
  font-weight: 600;
  box-shadow: none;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 55%;
  min-height: 14px;
  border-radius: 0 3px 3px 0;
  background: var(--tenant-primary, var(--accent));
}

/* Íconos: tamaño uniforme 18px, sin escala en hover */
.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  opacity: .70;
  transition: opacity .14s;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  opacity: 1;
  transform: none;
}

.nav-item.active .nav-icon {
  stroke: var(--tenant-primary, var(--accent));
}

/* Separador */
.nav-separator {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 6px 10px;
}

/* Badge de chat sin-leer */
#chat-badge {
  margin-left: auto;
  font-family: var(--font-display);
}

/* Items superadmin */
.nav-superadmin {
  border-left: none;
  opacity: .60;
}

.nav-superadmin::after {
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── 4d. Footer del sidebar ─── */
.sidebar-footer {
  padding: 12px 10px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

/* Tarjeta de usuario */
#sidebarUserInfo {
  border-radius: 8px !important;
  background: rgba(255,255,255,.06) !important;
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}

/* Botón Cerrar Sesión en sidebar */
.sidebar-footer .btn-secondary {
  color: rgba(255,255,255,.50) !important;
  border-color: rgba(255,255,255,.10) !important;
  background: transparent !important;
  font-size: 13px;
  min-height: 40px;
  font-family: var(--font-body);
}

.sidebar-footer .btn-secondary:hover {
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.80) !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* ── 5. TOPBAR MÓVIL ──────────────────────────────────────────────────── */
/* NO tocar .mobile-topbar-brand svg (logo animado Orbita) */
.mobile-topbar {
  /* background: usa var(--bg-sidebar) para mantener coherencia de tenant */
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.mobile-topbar-brand span {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* ── 6. SELECTOR SUPERADMIN ───────────────────────────────────────────── */
#superadminTenantSelector {
  padding: 8px 10px 4px !important;
}

#ctxTenantSelect {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

/* ── 7. CONTENIDO PRINCIPAL ───────────────────────────────────────────── */
.main-content {
  background: #f8fafc;
}

/* ── 7a. Page header ── */
.page-header {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 20px 24px;
  margin-bottom: 24px;
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f172a;
}

/* ── 8. CARDS & SUPERFICIES ───────────────────────────────────────────── */
.stat-card {
  border: 1px solid #f1f5f9;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow .18s ease, border-color .18s ease;
}

.stat-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: #e2e8f0;
}

.stat-value {
  font-family: var(--font-display);
  font-feature-settings: "tnum";  /* números tabulares */
  letter-spacing: -0.04em;
  line-height: 1;
}

.stat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.chart-card {
  border: 1px solid #f1f5f9;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.chart-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.table-container {
  border: 1px solid #f1f5f9;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

/* ── 9. INPUTS & FORMULARIOS ──────────────────────────────────────────── */
/*
   iOS anti-zoom: font-size mínimo 16px en TODOS los inputs
   Sin este fix, iOS hace zoom automático al enfocar cualquier campo.
*/
input,
select,
textarea,
.form-control,
.filtro-input,
.filtro-select,
.filtro-date,
.equipo-search-input {
  font-size: max(16px, 1em) !important;
  font-family: var(--font-body);
}

.form-control {
  border-color: #e2e8f0;
  border-radius: var(--radius-md);
  background: #fcfcfd;
  color: #0f172a;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.form-control:focus {
  background: #ffffff;
  border-color: var(--tenant-primary, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-primary, var(--accent)) 15%, transparent);
  outline: none;
}

.form-group label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #334155;
  letter-spacing: -0.005em;
}

/* ── 10. BOTONES ──────────────────────────────────────────────────────── */
/*
   Área táctil mínima: 44×44px (WCAG 2.5.5 / Apple HIG / Material)
*/
.btn-primary {
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  background: var(--tenant-primary, var(--accent));
  color: var(--tenant-on-primary, #ffffff);
  box-shadow: var(--shadow-xs);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: filter .14s, box-shadow .14s, transform .1s;
}

.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: var(--shadow-sm);
  transform: none;             /* elimina el translateY(-2px) — problemático en móvil */
}

.btn-primary:active {
  transform: scale(.98);
  box-shadow: var(--shadow-xs);
  filter: brightness(.97);
}

.btn-secondary {
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn-secondary:active {
  transform: scale(.98);
}

/* Botones de acción en tabla */
.btn-icon-action {
  min-height: 36px;
  min-width: 36px;
  font-family: var(--font-body);
  border-radius: var(--radius);
}

/* Botón icono circular */
.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background .14s, color .14s;
}

/* ── 11. MODALES ──────────────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid #f1f5f9;
}

.modal-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* ── 12. TABLAS ───────────────────────────────────────────────────────── */
.data-table th {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.data-table td {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: #1e293b;
  line-height: var(--lh-normal);
}

/* ── 13. FILTROS ──────────────────────────────────────────────────────── */
.filtros-bar {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

/* ── 14. BADGES ───────────────────────────────────────────────────────── */
.badge-rol,
.tipo-badge,
.badge-firma {
  font-family: var(--font-display);
  border-radius: 6px;
  letter-spacing: -0.01em;
}

/* ── 15. TOAST ────────────────────────────────────────────────────────── */
.toast {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid #f1f5f9;
}

.toast-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.toast-msg {
  font-size: 13px;
  line-height: var(--lh-normal);
}

/* ── 16. SCROLLBAR SLIM ───────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: rgba(0,0,0,.13); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.22); }

.sidebar ::-webkit-scrollbar-thumb      { background: rgba(255,255,255,.14); }
.sidebar ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }

/* ── 17. FOCUS VISIBLE (accesibilidad teclado) ───────────────────────── */
:focus-visible {
  outline: 2px solid var(--tenant-primary, var(--accent));
  outline-offset: 2px;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ── 18. LOGIN ────────────────────────────────────────────────────────── */
.login-card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid #f1f5f9;
}

.login-logo span {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

/* ── 19. UBICACIÓN & CHAT: corregir left con nuevo sidebar-w ─────────── */
#sec-ubicacion.active {
  left: var(--sidebar-w, 260px);
}

#sec-chat.active {
  left: var(--sidebar-w, 260px);
}

/* ── 20. TEMPLATE BUILDER ─────────────────────────────────────────────── */
.tb-campo-card {
  border-radius: var(--radius-md);
}

.tb-tipo-btn {
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 13px;
}

/* ── 21. FIRMA ────────────────────────────────────────────────────────── */
.firma-tabs {
  font-family: var(--font-display);
}

.firma-tab {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
}

/* ── 22. ADMIN CONTEXT BAR ────────────────────────────────────────────── */
.admin-context-bar {
  border-radius: var(--radius-md);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first adjustments
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 23. Tablet (≤ 1100px) ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --sidebar-w: 240px; }
}

/* ── 24. Mobile (≤ 768px) ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Corregir left fijo de ubicación/chat en móvil */
  #sec-ubicacion.active,
  #sec-chat.active {
    left: 0 !important;
  }

  /* Nav items más altos en táctil */
  .nav-item {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 14px;
  }

  /* Botones siempre 44px mínimo en táctil */
  .btn-primary,
  .btn-secondary {
    min-height: 48px;
  }

  /* btn-icon: 44px en móvil */
  .btn-icon {
    width: 44px;
    height: 44px;
  }

  /* Page header: compacto */
  .page-header {
    padding: 16px;
    gap: 12px;
    margin-bottom: 16px;
    border-radius: var(--radius-lg);
  }

  .page-header h1 {
    font-size: var(--text-xl);
  }

  /* Stat value: más compacto */
  .stat-value {
    font-size: 32px;
  }
}

/* ── 25. Phone (≤ 480px) ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .page-header {
    padding: 14px 12px;
    border-radius: var(--radius-md);
  }

  .page-header h1 {
    font-size: var(--text-lg);
  }

  .login-card {
    border-radius: var(--radius-lg);
    padding: 32px 20px;
  }

  /* Modales: bottom sheet redondeado */
  .modal-content {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  }
}

/* ── 26. Touch device overrides ───────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Eliminar hover states que quedan pegados en táctil */
  .nav-item:hover {
    background: transparent;
    color: rgba(248,250,252,.60);
  }

  .nav-item.active {
    background: rgba(255,255,255,.10) !important;
    color: #ffffff !important;
  }

  .btn-primary:hover {
    filter: none;
    box-shadow: var(--shadow-xs);
  }

  .data-table tbody tr:hover {
    background: transparent;
  }

  /* Sin tap-highlight en toda la app */
  * { -webkit-tap-highlight-color: transparent; }
  button, a, [role="button"] { touch-action: manipulation; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SAFE AREA — iPhone con notch / Dynamic Island
   Nota: La lógica principal está en main.css.
   Aquí solo actualizamos los valores que dependen del nuevo --sidebar-w.
   ══════════════════════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    /* Ya manejado en main.css; aquí no es necesario duplicar */
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SUPERADMIN MODE (body.sa-mode)
   Paleta Orbita fija — NINGÚN tenant puede sobreescribir estos valores.
   JS agrega/quita la clase .sa-mode en aplicarVisibilidadNav().
   ══════════════════════════════════════════════════════════════════════════ */

/* Sidebar: siempre navy Orbita para superadmin */
body.sa-mode .sidebar {
  background: #0f172a !important;
}

/* Topbar móvil: siempre navy */
body.sa-mode .mobile-topbar {
  background: #0f172a !important;
}

/* Nav item active: accent Orbita fijo */
body.sa-mode .nav-item.active {
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}

body.sa-mode .nav-item.active::before {
  background: #00BCD4 !important;
}

body.sa-mode .nav-item.active .nav-icon {
  stroke: #00BCD4 !important;
}

/* Botón primario: Orbita cyan fijo para superadmin */
body.sa-mode .btn-primary {
  background: #00BCD4 !important;
  color: #ffffff !important;
}

body.sa-mode .btn-primary:hover {
  background: #0097A7 !important;
}

/* Overlay guard: usar Orbita cyan para el botón "Ir al selector" */
body.sa-mode [id^="_ctxGuard_"] button {
  background: #00BCD4 !important;
}