@media (max-width: 768px){
  html, body { overflow-x:hidden !important; max-width:100% !important; }
  .flex.items-center:not(.flex-col){ flex-wrap: wrap !important; }
  .flex > * { min-width:0 !important; }
  [class*="min-w-["] { min-width:0 !important; }
  table, thead, tbody, tr, td { display:block !important; width:auto !important; max-width:100% !important; }
  table thead { position:absolute !important; left:-9999px !important; top:-9999px !important; height:0 !important; overflow:hidden !important; }
  table tbody tr { border:1px solid rgba(128,128,128,.22) !important; border-radius:12px !important; margin:0 0 12px 0 !important; padding:4px 6px !important; box-shadow:0 1px 3px rgba(0,0,0,.05) !important; }
  table tbody td { display:flex !important; justify-content:space-between !important; align-items:center !important; gap:12px !important; padding:9px 12px !important; text-align:right !important; border:0 !important; border-bottom:1px solid rgba(128,128,128,.13) !important; white-space:normal !important; }
  table tbody td:last-child { border-bottom:0 !important; }
  table tbody td::before { content:attr(data-label); font-weight:700; opacity:.65; text-align:left; flex:0 0 40%; white-space:normal; font-size:.86em; }
  table tbody td[colspan]{ justify-content:center !important; text-align:center !important; }
  table tbody td[colspan]::before{ display:none !important; }
  table tbody td:empty { display:none !important; }
  .rounded-lg, .rounded-xl, .rounded-2xl, .shadow, .shadow-sm, .shadow-md, .card { max-width:100% !important; }
  input[type="text"], input[type="search"], input:not([type]) { min-width:0 !important; }
  button, a[role="button"] { min-height:40px; }
}

/* ===== TABLET / pantallas intermedias 769-1280px (fix 2026-06-13) =====
   El topbar (header shadcn de WorkDo) muestra el nombre de la empresa dentro de un boton
   con white-space:nowrap; ese bloque esta oculto en movil ("hidden md:flex") y reaparece
   desde 768px, pero NO se encogia -> desbordaba a la derecha en tablets (768=+30px, 1024=+114px).
   Aqui acotamos y truncamos SOLO ese bloque del header, en el rango intermedio.
   NO toca el rango movil (<=768) ni el desktop (>=1281) que ya funcionan. */
@media (min-width: 768px) and (max-width: 1280px){
  header { min-width: 0 !important; }
  header .flex.items-center { min-width: 0 !important; }
  header .flex-col.items-start { min-width: 0 !important; max-width: 40vw !important; overflow: hidden !important; }
  header .flex-col.items-start > * {
    max-width: 100% !important; display: block !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }
}

/* ===== Identidad TuMarketSV en pantallas de acceso (login / registro / recuperar) =====
   Congruencia con Emitir. Scopeado por body.tmsv-auth (lo agrega tmsv-mobile.js solo en esas
   rutas guest). SOLO CSS: no toca el formulario ni el auth; el inicio de sesion sigue intacto. */
body.tmsv-auth::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#6517d8,#ff6b00);z-index:99999;pointer-events:none}
body.tmsv-auth h1,body.tmsv-auth h2{font-family:"Fraunces",Georgia,"Palatino Linotype",serif !important;letter-spacing:-.01em}
body.tmsv-auth button[type=submit]{background:#6517d8 !important;background-image:none !important;border-color:#6517d8 !important;color:#fff !important}
body.tmsv-auth button[type=submit]:hover{filter:brightness(1.07)}
body.tmsv-auth input:focus,body.tmsv-auth input:focus-visible{border-color:#6517d8 !important;box-shadow:0 0 0 3px rgba(101,23,216,.16) !important;outline:none !important}
body.tmsv-auth input{border-radius:12px !important}
body.tmsv-auth .max-w-md.rounded-2xl{position:relative;overflow:hidden;border-color:#e9e6f3 !important;box-shadow:0 26px 64px -22px rgba(101,23,216,.34),0 2px 10px rgba(20,22,31,.06) !important}
body.tmsv-auth .max-w-md.rounded-2xl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#ff6b00,#6517d8 90px,#6517d81f);z-index:2}
body.tmsv-auth .max-w-md a{color:#6517d8 !important;font-weight:600}

/* ===== Bloque D — Identidad TuMarketSV en la NAVEGACION de la empresa =====
   Oculta la nav NATIVA de WorkDo SOLO a empresas (no superadmin) y viste el sidebar con
   identidad propia. SEGURIDAD (cero-tolerancia a atrapar/lisiar al dueno):
   - El ocultamiento exige body.tmsv-role-company (clase server-side de InjectTmkAssets) Y
     .tmsv-nav-ready (que SOLO agrega el JS tras construir la nav TuMarketSV con exito). Si el
     JS no corre -> sin .tmsv-nav-ready -> la nav nativa queda VISIBLE (el dueno nunca pierde
     acceso a sus modulos = degradacion segura).
   - body.tmsv-native-view (preferencia "Ver todo mi sistema", localStorage) reexpone TODO.
   - Superadmin: el selector no aplica -> conserva el dash nativo intacto.
   display:none (no visibility/opacity) saca los grupos del arbol de accesibilidad y del foco. */
body.tmsv-role-company.tmsv-nav-ready:not(.tmsv-native-view) [data-sidebar="content"] > [data-sidebar="group"]{display:none !important}

/* Lockup de marca + nav TuMarketSV (la construye tmsv-mobile.js como primer hijo de [data-sidebar=content]).
   Superficie PLANA (sin caja tintada que parezca banner); jerarquia por serif + espaciado. */
.tmsv-fe-menu{margin:4px 8px 12px;padding:2px;border:0;background:none;text-align:left;display:flex;flex-direction:column;gap:1px}
.tmsv-fe-menu .tmsv-brand{display:flex;align-items:center;gap:9px;padding:9px 8px 10px;margin-bottom:6px;border-bottom:1px solid rgba(101,23,216,.12);position:relative}
.tmsv-fe-menu .tmsv-brand::before{content:"";position:absolute;left:8px;right:8px;top:0;height:3px;border-radius:3px;background:linear-gradient(90deg,#6517d8,#ff6b00)}
.tmsv-fe-menu .tmsv-dot{width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,#6517d8,#ff6b00);flex:0 0 auto;box-shadow:0 1px 4px rgba(101,23,216,.4)}
.tmsv-fe-menu .tmsv-wm{font-family:"Fraunces",Georgia,"Palatino Linotype",serif;font-weight:600;font-size:18px;letter-spacing:-.01em;color:#1f1733}
.tmsv-fe-menu .tmsv-h{font-family:"Fraunces",Georgia,"Palatino Linotype",serif;font-weight:600;font-size:12.5px;color:#6517d8;padding:8px 8px 4px;letter-spacing:.01em}
.tmsv-fe-menu nav{display:block}
.tmsv-fe-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.tmsv-fe-menu li{margin:0;padding:0}
.tmsv-fe-menu a{display:flex;align-items:center;gap:11px;min-height:44px;padding:9px 10px;border-radius:9px;font-size:14px;font-weight:600;color:#2b2440;text-decoration:none;line-height:1.2;transition:background .12s}
.tmsv-fe-menu a > svg{width:20px;height:20px;flex:0 0 auto;stroke-width:1.75;color:#6517d8;opacity:.9}
.tmsv-fe-menu a:hover{background:rgba(101,23,216,.09)}
.tmsv-fe-menu a:focus-visible{outline:2px solid #6517d8;outline-offset:2px}
.tmsv-fe-menu a.is-active{background:rgba(101,23,216,.12);color:#4d12a6;font-weight:700;box-shadow:inset 3px 0 0 #6517d8}
.tmsv-fe-menu a.is-active > svg{opacity:1}
/* Toggle "Ver todo mi sistema" / "Volver a lo simple" — control SECUNDARIO (nunca naranja).
   Solo se muestra a la empresa (superadmin no lo necesita). */
.tmsv-fe-menu .tmsv-viewtoggle{display:none;align-items:center;justify-content:center;gap:8px;width:calc(100% - 4px);margin:10px 2px 2px;min-height:44px;padding:9px 10px;border:1px solid #d9d2ec;border-radius:9px;background:#faf9fe;color:#5b5470;font-size:12.5px;font-weight:600;cursor:pointer;line-height:1.2;transition:background .12s,border-color .12s}
body.tmsv-role-company .tmsv-fe-menu .tmsv-viewtoggle{display:flex}
.tmsv-fe-menu .tmsv-viewtoggle:hover{background:#f1edfb;border-color:#bcb5d4}
.tmsv-fe-menu .tmsv-viewtoggle:focus-visible{outline:2px solid #6517d8;outline-offset:2px}
.tmsv-fe-menu .tmsv-viewtoggle > svg{width:17px;height:17px;flex:0 0 auto;stroke-width:1.75;color:#6517d8}
body.tmsv-native-view .tmsv-fe-menu .tmsv-viewtoggle{background:#fff;border-color:#ffd3ad;color:#8a5a2a}
@media (prefers-reduced-motion: reduce){ .tmsv-fe-menu *{transition:none !important} }

/* ===== Paso 2 — Banner de subordinacion fiscal (documento nativo -> DTE) =====
   Aditivo, solo en pantallas de factura/NC/ND nativas y solo a empresa (lo inyecta el JS).
   Tono ambar = precaucion; el CTA es MORADO de marca (el naranja se reserva para 1 sola
   accion del flujo de emision, no aqui). No bloquea: la pantalla sigue usable debajo. */
.tmsv-fiscal-guard{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 18px;padding:14px 16px 14px 20px;border:1px solid #f0d3a8;border-radius:14px;
  background:#fff8f0;box-shadow:0 1px 3px rgba(124,45,18,.06);overflow:hidden}
.tmsv-fiscal-guard .tmsv-fg-rail{position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,#d97706,#6517d8)}
.tmsv-fiscal-guard .tmsv-fg-ic{width:26px;height:26px;flex:0 0 auto;color:#b45309}
.tmsv-fiscal-guard .tmsv-fg-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 280px}
.tmsv-fiscal-guard .tmsv-fg-title{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:15px;color:#7c2d12;letter-spacing:-.01em}
.tmsv-fiscal-guard .tmsv-fg-text{font-size:13px;line-height:1.45;color:#6b5645}
.tmsv-fiscal-guard .tmsv-fg-cta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 18px;border-radius:11px;background:#6517d8;color:#fff !important;
  font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:filter .12s}
.tmsv-fiscal-guard .tmsv-fg-cta:hover{filter:brightness(1.08)}
.tmsv-fiscal-guard .tmsv-fg-cta:focus-visible{outline:2px solid #6517d8;outline-offset:2px}
@media (max-width:600px){ .tmsv-fiscal-guard .tmsv-fg-cta{flex:1 1 100%} }