:root {
    --indigo: #6574cd;
    --purple: #9561e2;

    /* Brand */
    --orange:      #F2A057;
    --orange-d:    #E0883A;
    --orange-bg:   #FFF7F0;
    --orange-mid:  #FFE4C8;
    /* Mismo color en r, g, b para sombras: rgba(var(--orange-rgb), .35) */
    --orange-rgb:   242, 160, 87;
    --orange-d-rgb: 224, 136, 58;

    /* Surface / backgrounds */
    --bg-app:      #FAFAFA;   /* fondo general + sidebar */
    --bg-card:     #FFFFFF;   /* todas las cards */
    --bg-hover:    #EFEFEF;   /* hover en sidebar links */

    /* Text */
    --tx-strong:   #0A0A0A;
    --tx-base:     #3D3D3D;
    --tx-muted:    #737373;
    --tx-faint:    #C2C2C2;
    --tx-white:    #FFFFFF;

    /* Semantic */
    --green:       #16A34A;
    --green-bg:    #F0FDF4;
    --red:         #DC2626;
    --red-bg:      #FEF2F2;
    --blue:        #2563EB;
    --blue-bg:     #EFF6FF;
    --amber:       #D97706;
    --amber-bg:    #FFFBEB;

    /* Structure */
    --border:      #E4E2DC;
    --sidebar-w:   252px;
    --font:        'Geist', sans-serif;

    /* Radius scale */
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   20px;
    --r-pill: 999px;
}

/* ÍCONOS DE TRAZO (partials/v2/icon.blade.php) — reemplazan a Font Awesome en el shell */
.v2-ico {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: var(--font);
  background: var(--bg-app);
  color: var(--tx-base);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

/* LAYOUT SHELL */
.shell { display: flex; min-height: 100vh; }

.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0; /* sin esto, una tabla o fila ancha estira toda la pagina en celular */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

/* SIDEBAR */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.sidebar::-webkit-scrollbar { width: 0; }

/* — Logo + boton colapsar — */
.sb-brand {
  height: 56px; /* misma altura que el topbar, para que las lineas cuadren */
  padding: 0 12px 0 16px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sb-logo {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
}
.sb-logo-mark {
  width: 30px; height: 30px;
  background: var(--orange); color: var(--tx-white);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb-logo-mark .v2-ico { width: 18px; height: 18px; }
.sb-logo-text { min-width: 0; }
.sb-logo-img {
  width: auto; max-width: 100%; max-height: 34px;
  height: auto;
}
.sb-collapse {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--tx-muted); cursor: pointer;
  transition: background .12s, color .12s, transform .2s;
}
.sb-collapse:hover { background: var(--bg-hover); color: var(--tx-strong); }
.sb-collapse .v2-ico { width: 16px; height: 16px; }
.sb-collapse-logo { display: none; width: 32px; height: 32px; object-fit: contain; }

/* — Cuenta del cliente (fija, estilo selector de app2) — */
.sb-section-label.sb-account-label { padding: 14px 18px 0; }
.sb-account {
  margin: 4px 12px 0;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-app);
}
.sb-account-text { min-width: 0; }
.sb-account .sb-user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-logo-name  { font-size: 14px; font-weight: 700; color: var(--tx-strong); letter-spacing: -.01em; }
.sb-logo-sub   { font-size: 11px; color: var(--tx-muted); margin-top: 1px; }

/* — New shipment CTA — */
.sb-new {
  margin: 12px 12px 8px;
  width: calc(100% - 24px);
  background: var(--orange);
  color: var(--tx-white);
  border: none; border-radius: var(--r-md);
  padding: 9px 14px;
  font: 600 13px/1 var(--font);
  cursor: pointer; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 7px;
  transition: background .15s, box-shadow .15s;
}
.sb-new:hover { background: var(--orange-d); box-shadow: 0 2px 12px rgba(var(--orange-rgb), .35); }
.sb-new-plus {
  width: 18px; height: 18px;
  background: rgba(255,255,255,.25);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb-new-plus .v2-ico { width: 14px; height: 14px; stroke-width: 2.4; }

/* — Nav sections — */
.sb-section { padding: 14px 12px 4px; }
.sb-section-label {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--tx-faint);
  padding: 0 6px; margin-bottom: 3px;
}

/* Secciones plegables: el titulo es boton con flecha; cerradas solo muestran el titulo */
.sb-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: 0; border-radius: var(--r-sm);
  padding: 6px 6px; margin-bottom: 0; cursor: pointer; text-align: left;
  font-family: inherit;
}
.sb-group-toggle:hover { color: var(--tx-base); background: var(--bg-hover); }
.sb-group-toggle .v2-ico { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .15s; }
.sb-group.open .sb-group-toggle .v2-ico { transform: none; }
.sb-group.open .sb-group-toggle { margin-bottom: 3px; }
.sb-group:not(.open) > .sb-link { display: none; }
.sb-group { padding-top: 6px; padding-bottom: 0; }
.sb-group.open { padding-bottom: 4px; }
/* Con el menu en solo iconos no hay titulos: se ven todos los iconos */
@media (min-width: 781px) { .sb-collapsed .sb-group > .sb-link { display: flex; } }
/* Grupos del menu lateral que solo van en celular (en compu estan en el menu del nombre) */
@media (min-width: 781px) { .sb-mobile-only { display: none !important; } }

/* Single nav link style — all variations handled with .active modifier only */
.sb-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: var(--r-sm);
  color: var(--tx-base); cursor: pointer;
  transition: background .12s, color .12s;
  user-select: none;
}
.sb-link:hover               { background: var(--bg-hover); color: var(--tx-strong); }
.sb-link.active              { background: var(--orange-bg); color: var(--orange-d); font-weight: 600; }
.sb-link .sl-label           { font-size: 13.5px; font-weight: 500; flex: 1; letter-spacing: -.01em; }
.sb-link.active .sl-label    { font-weight: 600; }

/* SVG icon inside links */
.sb-link .sl-icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; opacity: .45; transition: opacity .12s;
}
.sb-link .sl-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sb-link:hover .sl-icon  { opacity: .7; }
.sb-link.active .sl-icon { opacity: 1; }

/* Badge inside nav link */
.sb-badge {
  font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,.07); color: var(--tx-base);
  border-radius: var(--r-pill); padding: 1px 7px;
}
.sb-link.active .sb-badge { background: var(--orange-mid); color: var(--orange-d); }

/* dropdown items */
.sb-dropdown {
    display: block;
}
.sb-dropdown-toggle {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sb-dropdown-toggle::-webkit-details-marker {
    display: none;
}
.sb-dropdown-toggle .sl-label {
    flex: 1;
}
.sb-dropdown-chevron {
    transition: transform 0.2s ease;
}
.sb-dropdown[open] .sb-dropdown-chevron {
    transform: rotate(180deg);
}
.sb-dropdown-menu {
    display: flex;
    flex-direction: column;
    padding-left: 2.2rem;
}
.sb-sublink {
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    color: inherit;
    opacity: 0.85;
    text-decoration: none;
    border-radius: 6px;
}
.sb-sublink:hover {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}
.sb-sublink.active {
    opacity: 1;
    font-weight: 600;
}

/* — Footer — */
.sb-footer {
  margin-top: auto; padding: 12px;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.sb-user-dropdown {
  position: relative;
  display: block;
}
.sb-user-dropdown summary {
  list-style: none;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: var(--r-sm);
  cursor: pointer; transition: background .12s, border-color .12s;
  border: 1px solid transparent;
}
.sb-user-dropdown summary::-webkit-details-marker { display: none; }
.sb-user-dropdown[open] > summary,
.sb-user-dropdown summary:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}
.sb-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--orange); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--tx-white);
}
.sb-user-name { font-size: 13px; font-weight: 600; color: var(--tx-strong); line-height: 1.2; }
.sb-user-id   { font-size: 11px; color: var(--tx-muted); }
.sb-chevron   { margin-left: auto; display: flex; color: var(--tx-faint); transition: transform .12s ease; }
.sb-chevron .v2-ico { width: 14px; height: 14px; }
.sb-avatar--lg { width: 38px; height: 38px; font-size: 14px; }
.sb-user-dropdown[open] .sb-chevron { transform: rotate(180deg); }
.sb-user-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  padding: 8px 0;
  z-index: 120;
  overflow: hidden;
}
.sb-user-menu-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  color: var(--tx-strong);
  font-size: 13px;
  transition: background .12s;
}
.sb-user-menu-item:hover {
  background: var(--bg-hover);
}
.sb-user-menu-separator {
  height: 1px; background: var(--border); margin: 6px 0;
}

/* TOPBAR */
.topbar {
  height: 56px; padding: 0 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50; flex-shrink: 0;
}
.tb-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--tx-muted);
}
.tb-breadcrumb span { color: var(--tx-strong); font-weight: 500; }
.tb-breadcrumb .sep { color: var(--tx-faint); font-size: 11px; }
.tb-right { display: flex; align-items: center; gap: 6px; }
.tb-workspace {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.6);
  font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--tx-base);
  cursor: pointer; transition: background .12s;
}
.tb-workspace:hover { background: var(--bg-card); }
.tb-ws-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; }
/* Saldo del cliente en lugar del nombre del sitio; lleva a la seccion de Saldo */
.tb-balance { color: var(--tx-base); text-decoration: none; }
.tb-balance .v2-ico { width: 15px; height: 15px; color: var(--orange-d); }
.tb-balance-label { color: var(--tx-muted); }
.tb-balance-amount { font-weight: 700; color: var(--tx-strong); font-variant-numeric: tabular-nums; }
.tb-balance--neg .tb-balance-amount { color: var(--red); }

/* Selector de franquicia (DropdownSiteV2.vue) — el wrapper solo da el position:relative
   para anclar el menu; la caja visual (borde/fondo/padding) la pone .tb-workspace
   directo sobre el <button>, para no anidar dos cajas. Solo aparece si
   config('other_configs.show_select_site') esta activo; si no, se mantiene el
   <div>.tb-workspace estatico de siempre. */
.tb-dropdown-wrap { position: relative; }
.tb-workspace__chevron { font-size: 9px; color: var(--tx-faint); transition: transform .15s; }
.tb-workspace__chevron--open { transform: rotate(180deg); }
.tb-workspace__menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 220px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 8px 30px rgba(0,0,0,.10);
  padding: 6px; z-index: 1050;
}
.tb-workspace__item {
  display: block; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500; color: var(--tx-base); text-decoration: none;
}
.tb-workspace__item:hover, .tb-workspace__item--active {
  background: var(--orange-bg); color: var(--orange-d); text-decoration: none;
}
.tb-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; position: relative;
  transition: background .12s;
}
.tb-btn:hover { background: var(--bg-card); }
.tb-btn .v2-ico { width: 16px; height: 16px; color: var(--tx-base); }
.tb-btn .dot {
  width: 6px; height: 6px; background: var(--orange); border-radius: 50%;
  border: 1.5px solid var(--bg-app);
  position: absolute; top: 5px; right: 5px;
}

/* Campana de notificaciones V2 — vive en el header (partials/v2/header.blade.php), por eso
   es CSS global y no <style scoped> del componente: el panel aparece en todas las paginas v2. */
.notif-v2-wrap { position: relative; }
.notif-v2-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 360px; max-width: calc(100vw - 32px); max-height: 460px;
  display: flex; flex-direction: column; overflow: hidden;
  z-index: 1050;
}
.notif-v2-panel__header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px 10px;
}
.notif-v2-panel__title { font-size: 15px; font-weight: 700; color: var(--tx-strong); }
.notif-v2-panel__count {
  margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px;
}
.notif-v2-panel__mark-all {
  border: none; background: none; font-size: 12px; font-weight: 600;
  color: var(--orange-d); cursor: pointer; padding: 0; white-space: nowrap;
}
.notif-v2-panel__mark-all:hover { text-decoration: underline; }
.notif-v2-panel__list { overflow-y: auto; border-top: 1px solid var(--border); }
.notif-v2-panel__state { padding: 28px 16px; text-align: center; color: var(--tx-muted); font-size: 13px; }
.notif-v2-panel__state i { font-size: 24px; display: block; margin-bottom: 8px; opacity: .5; }
.notif-v2-panel__footer { border-top: 1px solid var(--border); }
.notif-v2-panel__footer a {
  display: block; padding: 12px 16px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--orange-d);
}
.notif-v2-panel__footer a:hover { background: var(--bg-hover); text-decoration: none; }
@media (max-width: 576px) {
  /* Celular: ancho de la pantalla y sin bajar hasta la barra de abajo (Inicio, Envios, Enviar...) */
  .notif-v2-panel {
    position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-width: none;
    max-height: calc(100vh - 64px - 110px);
  }
}

/* Item de notificacion V2 — compartido entre el panel del header y la lista completa.
   Lista limpia: fondo blanco con linea entre filas; las no leidas en negritas con punto naranja. */
.notif-v2-item {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background-color .12s;
}
.notif-v2-item:last-child { border-bottom: none; }
.notif-v2-item:hover { background-color: var(--bg-hover); }
.notif-v2-item__icon {
  flex: 0 0 36px; height: 36px; width: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  background: var(--bg-hover); color: var(--tx-faint);
}
.notif-v2-item--unread .notif-v2-item__icon { background: var(--orange-bg); color: var(--orange-d); }
.notif-v2-item__body { flex: 1 1 auto; min-width: 0; }
.notif-v2-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.notif-v2-item__title {
  margin: 0; font-size: 13.5px; font-weight: 600; color: var(--tx-base);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-v2-item--unread .notif-v2-item__title { font-weight: 700; color: var(--tx-strong); }
.notif-v2-item__time { flex-shrink: 0; font-size: 11.5px; color: var(--tx-faint); white-space: nowrap; }
.notif-v2-item--unread .notif-v2-item__time { color: var(--orange-d); font-weight: 600; }
.notif-v2-item__message {
  margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--tx-muted);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notif-v2-item__date { display: block; margin-top: 3px; font-size: 11px; color: var(--tx-faint); }
.notif-v2-item__dot {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); margin-top: 6px;
}

.tb-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.7);
}
.tb-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  color: var(--tx-muted);
}
.tb-switch__item--active {
  background: var(--orange-bg);
  color: var(--orange-d);
}
.hamburger { display: none; }
.tb-left { min-width: 0; }
.tb-logo { display: none; }
.tb-logo img { display: block; width: auto; max-width: 130px; max-height: 30px; }
.tb-right { display: flex; align-items: center; gap: 8px; }

/* Menu de perfil (header) — <details>, se cierra solo al hacer clic fuera (v2/app.js) */
.tb-user-dropdown { position: relative; }
.tb-user {
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  padding: 3px 8px 3px 3px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--bg-card);
  cursor: pointer; transition: background .12s;
}
.tb-user::-webkit-details-marker { display: none; }
.tb-user:hover, .tb-user-dropdown[open] > .tb-user { background: var(--bg-hover); }
/* Avatar como liga a Mi cuenta: solo en celular */
.tb-user-link { display: none; }
.tb-user-name {
  max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; font-weight: 600; color: var(--tx-strong);
}
.tb-user-dropdown[open] .sb-chevron { transform: rotate(180deg); }
.tb-user-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 290px; max-width: calc(100vw - 24px);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  padding: 6px; z-index: 1050;
}
.tb-um-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; }
.tb-um-id { min-width: 0; }
.tb-um-id .sb-user-id { overflow: hidden; text-overflow: ellipsis; }
.tb-um-meta {
  margin: 0 4px 6px; padding: 8px 10px;
  background: var(--bg-app); border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 4px;
}
.tb-um-meta div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.tb-um-meta dt { color: var(--tx-muted); font-weight: 500; }
.tb-um-meta dd { color: var(--tx-strong); font-weight: 600; text-align: right; }
.tb-um-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--tx-base);
  transition: background .12s;
}
.tb-um-link:hover { background: var(--bg-hover); color: var(--tx-strong); }
.tb-um-link .v2-ico { width: 16px; height: 16px; color: var(--tx-muted); }
.tb-um-link--danger, .tb-um-link--danger .v2-ico { color: var(--red); }
.tb-um-link--danger:hover { background: var(--red-bg); color: var(--red); }
.tb-um-sep { height: 1px; background: var(--border); margin: 6px 4px; }
  .tb-workspace {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: rgba(255,255,255,.6);
    font-size: 12.5px; font-weight: 500; color: var(--tx-base);
    cursor: pointer; transition: background .12s;
  }
  .tb-workspace:hover { background: var(--bg-card); }
  .tb-ws-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; }


/* PAGE WRAPPER */
.page { padding: 36px 40px; flex: 1; }
/* Regresar a la sección padre: solo en celular, en compu ya está el breadcrumb */
.v2-back {
  display: none;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx-muted);
  text-decoration: none;
}
.v2-back .v2-ico { width: 18px; height: 18px; }
.v2-back:hover { color: var(--tx-strong); }

/* TYPOGRAPHY HELPERS - Use these inline — no extra wrapper classes needed */
.t-sup    { font-size: 13px; color: var(--tx-muted); }
.t-h1     { font-size: 30px; font-weight: 800; color: var(--tx-strong); letter-spacing: -.03em; line-height: 1.1; }
.t-sub    { font-size: 14px; color: var(--tx-muted); line-height: 1.55; margin-top: 6px; max-width: 440px; }
.t-label  { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--tx-faint); }
.t-orange { color: var(--orange-d); }
.t-red    { color: var(--red); }
.t-green  { color: var(--green); }

/* CARD  ← THE ONE CLASS TO RULE THEM ALL
   All surface containers use .card
   Modifiers: .card--dark  .card--warn
*/
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.card--dark { background: var(--tx-strong); border-color: transparent; color: var(--tx-white); }
.card--warn { background: var(--red-bg);    border-color: #FECACA; }

/* Shared empty state — used by EmptyStateV2.vue across v2 list views */
.empty-state { padding: 56px 20px; text-align: center; color: var(--tx-muted); }
.v2-empty-state__icon { font-size: 40px; opacity: .35; margin-bottom: 12px; }
.v2-empty-state__title { font-size: 16px; font-weight: 700; color: var(--tx-strong); }
.v2-empty-state__sub { font-size: 13px; margin-top: 6px; }

/* Card internal regions — padding conventions */
.card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card--dark .card-head { border-bottom-color: rgba(255,255,255,.08); }
.card-body  { padding: 20px; }
.card-rows  { /* no padding — rows handle their own */ }

/* Titulo de card dentro de un .card-head (duplicado antes en varios css por-pagina) */
.section-title,
.side-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx-strong);
}

/* Row inside a card — universal row pattern */
.card-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.card-row:last-child { border-bottom: none; }

/* STATUS HERO — card de estado (icono + titulo + acciones arriba, razon + badges abajo).
   Usado por HeroStatus.vue (envios, recolecciones, rastreo-coleccion) y HeroNationalStatus.vue
   (envios nacionales). Estaba duplicado byte a byte en envios_show.css, recolecciones_show.css
   y rastreo.css (con prefijo .v2-rastreo-show); variantes propias de cada pagina (ej. .st-detail
   en national-shipment-show.css) se quedaron locales. */
.status-hero { border-top: 3px solid var(--red); background: var(--red-bg); }
.status-hero.status--entregado,
.status-hero.status--green  { border-top-color: var(--green); background: var(--green-bg); }
.status-hero.status--camino,
.status-hero.status--blue   { border-top-color: var(--blue);  background: var(--blue-bg); }
.status-hero.status--pendiente,
.status-hero.status--amber  { border-top-color: var(--amber); background: var(--amber-bg); }
.status-hero.status--red    { border-top-color: var(--red);   background: var(--red-bg); }
.status-hero.status--cancelado,
.status-hero.status--gray   { border-top-color: var(--tx-faint); background: #f7f7f7; }

.status-hero .evidence-strip { background: rgba(255,255,255,.55); }
.status-hero.status--entregado .evidence-strip,
.status-hero.status--camino .evidence-strip,
.status-hero.status--pendiente .evidence-strip { background: rgba(255,255,255,.6); }

.sh-inner {
  padding: 20px 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  row-gap: 6px;
}
.sh-icon {
  grid-column: 1; grid-row: 1;
  width: 48px; height: 48px;
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800;
  flex-shrink: 0;
}
.sh-icon.green { background: var(--green-bg); color: var(--green); }
.sh-icon.blue  { background: var(--blue-bg);  color: var(--blue); }
.sh-icon.amber { background: var(--amber-bg); color: var(--amber); }
.sh-icon.red   { background: var(--red-bg);   color: var(--red); }
.sh-icon.gray  { background: var(--bg-hover); color: var(--tx-muted); }

.sh-top-row {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sh-body-row { grid-column: 2; grid-row: 2; }

.st-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
  color: var(--tx-strong);
}
.st-status__symbol { color: var(--tx-faint); font-weight: 900; }
.st-status__raw { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--tx-muted); }
.st-reason { font-size: 14px; line-height: 1.5; color: var(--tx-muted); }
.st-reason strong { color: var(--red); font-weight: 600; }
.status-hero.status--entregado .st-reason strong,
.status-hero.status--green .st-reason strong { color: var(--green); }
.status-hero.status--camino .st-reason strong,
.status-hero.status--blue .st-reason strong { color: var(--blue); }
.status-hero.status--pendiente .st-reason strong,
.status-hero.status--amber .st-reason strong { color: var(--amber); }

.hero-date { font-size: 12px; color: var(--tx-muted); align-self: center; }
.hero-meta { flex-wrap: wrap; }
.sh-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

@media (max-width: 780px) {
  .sh-inner { grid-template-columns: 1fr; row-gap: 12px; padding: 16px; }
  .sh-icon { grid-column: 1; grid-row: 1; }
  .sh-top-row { grid-column: 1; grid-row: 2; flex-direction: column; align-items: flex-start; gap: 10px; }
  .sh-body-row { grid-column: 1; grid-row: 3; }
  .sh-actions { width: 100%; }
  .sh-actions .btn { flex: 1; justify-content: center; }
}

/* SECTION CARD HEAD — icon + title (backs SectionCardV2.vue). Estaba duplicado byte a
   byte en bank-information.css, billing-information.css, profile.css, onboarding.css
   y rastreo-detalles.css; se dejo cada copia local unicamente donde tenia variantes
   propias no cubiertas aqui. */
.sc-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.sc-head-text { min-width: 0; }
.sc-title { font-size: 14.5px; font-weight: 700; color: var(--tx-strong); }
.sc-subtitle { font-size: 12px; color: var(--tx-muted); margin-top: 2px; }
.sc-body { padding: 20px; }

/* SELECTOR DE PRODUCTOS DE INVENTARIO — backs ShopItemPickerV2.vue (sin <style> propio),
   usado por PageCrearEnvioV2.vue y FormCreateGuideV2.vue (nacionales). Vivia solo en
   nuevo-envio.css; la pagina de crear-guia nacional nunca lo cargaba y se veia sin estilo. */
.shop-picker-row { display: flex; align-items: flex-start; gap: 8px; }
.shop-picker-row .multiselect { flex: 1; }
.shop-picker-hint { margin-top: 6px; font-size: 11.5px; color: var(--tx-muted); }
.shop-picker-hint b { color: var(--tx-strong); }

.shop-item-list { display: flex; flex-direction: column; gap: 8px; }
.shop-item-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; }
.shop-item-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--tx-strong); }
.shop-item-remove { font-size: 11.5px; font-weight: 600; color: var(--red); background: none; border: none; cursor: pointer; padding: 0; }

.qty-stepper { display: flex; align-items: center; gap: 6px; }
.qty-stepper button {
  width: 26px; height: 26px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--bg-card); color: var(--tx-base); cursor: pointer; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.qty-stepper button:hover { background: var(--bg-hover); }
.qty-stepper input {
  width: 48px; text-align: center; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 5px 4px; font: 12.5px var(--font); color: var(--tx-strong); background: var(--bg-card);
}

/* FORM FIELDS — mismo motivo: duplicado identico en los mismos 4-5 modulos. Variantes
   que no eran uniformes (.field-input:disabled, select.field-input, .field-row y sus
   modificadores) se quedaron donde ya estaban, no se tocaron. */
.field-label { font-size: 12px; font-weight: 600; color: var(--tx-base); margin: 0 0 6px; display: block; }
.field-input {
  width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; font: 500 13px/1.4 var(--font); color: var(--tx-strong); background: var(--bg-card);
  outline: none; box-sizing: border-box; appearance: none; -webkit-appearance: none;
}
.field-input:focus { border-color: #d0ccc1; box-shadow: 0 0 0 3px rgba(var(--orange-d-rgb), .12); }
.field-error { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--red); }
/* Campo con su mensaje rojo debajo: borde y fondo rojo suave, etiqueta en rojo y un sacudon
   al aparecer, para que vean cual falta (sin tocar cada formulario). Solo el campo pegado al
   mensaje (o con una ayuda en medio), asi no se pintan los de arriba en formularios corridos */
.field-input.has-error,
.field-input:has(+ .field-error:not([style*="display: none"])),
.field-input:has(+ :not(.field-input):not(.field-label):not(.field-error) + .field-error:not([style*="display: none"])) {
  border-color: var(--red); background-color: var(--red-bg); animation: v2-field-shake .35s ease-in-out;
}
.field-input.has-error:focus,
.field-input:has(+ .field-error:not([style*="display: none"])):focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.field-label:has(+ .field-input.has-error),
.field-label:has(+ .field-input + .field-error:not([style*="display: none"])) { color: var(--red); }
.field-error::before {
  content: "!"; display: inline-block; width: 15px; height: 15px; margin-right: 6px; border-radius: 50%;
  background: var(--red); color: #fff; font: 700 10px/15px var(--font); text-align: center; vertical-align: 1px;
}
@keyframes v2-field-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .field-input { animation: none !important; }
}
.field-group + .field-group { margin-top: 14px; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* BUTTONS - One base .btn + modifier classes only */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: var(--r-sm);
  padding: 9px 18px; font: 600 13px/1 var(--font);
  cursor: pointer; letter-spacing: -.01em; white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn--primary  { background: var(--tx-strong); color: var(--tx-white); }
.btn--primary:hover { background: #2a2a2a; }
.btn--orange   { background: var(--orange);   color: var(--tx-white); }
.btn--orange:hover { background: var(--orange-d); box-shadow: 0 2px 10px rgba(var(--orange-rgb), .35); }
.btn--ghost    { background: rgba(255,255,255,.6); color: var(--tx-base); border: 1px solid var(--border); }
.btn--ghost:hover  { background: var(--bg-card); }
.btn--danger   { background: var(--red); color: var(--tx-white); }
.btn--danger:hover { background: #b91c1c; }
.btn--sm       { padding: 6px 12px; font-size: 12px; }
.btn--block    { width: 100%; justify-content: center; }
.btn--lg       { padding: 13px 18px; font-size: 13.5px; }
.btn--green    { background: #25D366; color: var(--tx-white); width: 100%; justify-content: center; }
.btn--green:hover { background: #1ebe5a; }

/* BADGE  — status pills */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(0,0,0,.06); color: var(--tx-base);
}
.badge--green  { background: var(--green-bg);  color: var(--green); }
.badge--red    { background: var(--red-bg);    color: var(--red); }
.badge--orange { background: var(--orange-bg); color: var(--orange-d); }
.badge--blue   { background: var(--blue-bg);   color: var(--blue); }
.badge--amber  { background: var(--amber-bg);  color: var(--amber); }
.badge--gray   { background: var(--bg-hover);  color: var(--tx-muted); }
.badge--new    { background: var(--orange-bg); color: var(--orange-d); }
/* Icono de trazo de StatusBadgeV2 (estilo orders-ep) */
.badge-icon {
  width: 13px; height: 13px; flex: 0 0 13px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* MODAL — overlay + dialog reutilizable. Antes vivia duplicado por modulo (ej. bajo
   .fc-body en nuevo-envio.css); esta es la version global para no repetirlo mas. */
.ep-modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ep-modal {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl);
  width: 480px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .08);
}
.ep-modal--lg { width: 720px; }
.ep-modal--sm { width: 360px; }
.ep-modal-header {
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0;
}
.ep-modal-title { font-size: 16px; font-weight: 800; color: var(--tx-strong); letter-spacing: -.03em; }
.ep-modal-sub { font-size: 11.5px; color: var(--tx-muted); margin-top: 3px; }
.ep-modal-close {
  width: 28px; height: 28px; background: var(--bg-hover); border: none; border-radius: var(--r-sm);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--tx-muted); flex-shrink: 0; line-height: 1; transition: background .12s;
}
.ep-modal-close:hover { background: var(--border); }
.ep-modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.ep-modal-footer {
  padding: 12px 22px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-shrink: 0;
}

/* DATE PICKER (DatePickerV2.vue) — popup con position:fixed calculado desde el input,
   por eso no necesita vivir fuera de .card/.ep-modal para escapar de overflow:hidden;
   solo necesita z-index por encima del overlay de los modales (1050). */
.dpv2 { position: relative; }
.dpv2-input { cursor: pointer; }
.dpv2-popup {
  z-index: 1100; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .06);
  padding: 10px; width: 260px;
}
.dpv2-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 8px; font: 700 13px var(--font); color: var(--tx-strong);
}
.dpv2-month { text-transform: capitalize; }
.dpv2-nav {
  width: 26px; height: 26px; border: none; border-radius: var(--r-sm); background: var(--bg-app);
  color: var(--tx-base); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dpv2-nav:hover { background: var(--bg-hover); }
.dpv2-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font: 700 10.5px var(--font); color: var(--tx-faint); text-transform: uppercase; margin-bottom: 4px;
}
.dpv2-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dpv2-day {
  border: none; background: transparent; border-radius: var(--r-sm); height: 30px;
  font: 500 12.5px var(--font); color: var(--tx-base); cursor: pointer;
}
.dpv2-day:hover:not(:disabled) { background: var(--bg-hover); }
.dpv2-day--muted { color: var(--tx-faint); }
.dpv2-day--today { font-weight: 700; color: var(--orange-d); }
.dpv2-day--selected { background: var(--orange); color: #fff; font-weight: 700; }
.dpv2-day--selected:hover { background: var(--orange); }
.dpv2-day--disabled { color: var(--tx-faint); cursor: not-allowed; text-decoration: line-through; }

/* ICON CONTAINER  — reusable icon box */
.icon-box {
  width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(0,0,0,.04);
}
.icon-box--orange { background: var(--orange-bg); }
.icon-box--blue   { background: var(--blue-bg); }
.icon-box--green  { background: var(--green-bg); }

/* ALERT BANNER — backs AlertBalance.vue (.card--warn + .icon-box de arriba ya eran
   globales, estas 4 clases solo vivian en home.css; se dejo ese archivo intacto, esto
   solo sirve de respaldo donde no se haya cargado). */
.alert-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 20px; }
.alert-title { font-size: 13.5px; font-weight: 600; color: var(--red); }
.alert-sub { font-size: 12.5px; color: #991B1B; margin-top: 2px; }
.alert-close { background: none; border: none; font-size: 16px; color: var(--tx-faint); cursor: pointer; flex-shrink: 0; }

/* GRID de 2 columnas (colapsa a 1 en mobile), con variante de 1 sola columna y
   .span-2 para celdas de ancho completo. Generico — antes vivia en profile.css. */
.grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
}
.grid-2col--single { grid-template-columns: 1fr; }
.grid-2col .span-2 { grid-column: span 2; }
@media (max-width: 760px) {
  .grid-2col { grid-template-columns: 1fr; }
  .grid-2col .span-2 { grid-column: span 1; }
}

/* LAYOUT UTILITIES */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.mt-4   { margin-top: 4px; }
.mt-8   { margin-top: 8px; }
.mt-12  { margin-top: 12px; }
.mt-16  { margin-top: 16px; }
.mt-20  { margin-top: 20px; }
.mt-28  { margin-top: 28px; }
.mb-4   { margin-bottom: 4px; }
.mb-16  { margin-bottom: 16px; }
.mb-20  { margin-bottom: 20px; }
.mb-28  { margin-bottom: 28px; }
.w-full { width: 100%; }
.flex-1 { flex: 1; }
.min-w-0{ min-width: 0; }
.ml-auto{ margin-left: auto; }

/* TWO-COLUMN PAGE GRID */
.page-grid {
  display: grid;
  grid-template-columns: 1fr 296px;
  gap: 20px;
  align-items: start;
}
.col-stack { display: flex; flex-direction: column; gap: 16px; }

/* TARJETA-LIGA (icono + titulo + texto + flecha). Nacio en el login ("¿No tienes cuenta?"); se
   recicla en rastreo, onboarding (ayuda WhatsApp) e inicio del cliente nuevo. */
.v2-login-new {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  color: var(--tx-strong);
  text-decoration: none;
}

.v2-login-new:hover {
  border-color: var(--orange);
}

.v2-login-new-icon {
  flex: none;
  color: var(--orange-d);
}

.v2-login-new-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--tx-muted);
}

.v2-login-new-text strong {
  font-size: 14px;
  color: var(--tx-strong);
}

.v2-login-new-arrow {
  flex: none;
  color: var(--tx-muted);
}

/* Card de ayuda por WhatsApp (commons/v2/CardHelpWhatsappV2.vue) */
.v2-help-whatsapp { margin-top: 0; }
.v2-help-whatsapp-icon { color: var(--green); }

/* MOBILE NAV */
.mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(250,250,250,.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 8px 0 20px; z-index: 200;
  justify-content: space-around; align-items: center;
}
.mn-tab {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px; padding: 4px 14px;
  border: none; background: none; font-family: var(--font); cursor: pointer;
  color: var(--tx-muted);
}
.mn-tab .mn-icon { font-size: 20px; opacity: .55; transition: opacity .12s; }
.mn-tab .mn-label{ font-size: 10px; font-weight: 600; color: var(--tx-muted); }
.mn-tab.active { color: var(--orange); }
.mn-tab.active .mn-icon { opacity: 1; }
.mn-tab.active .mn-label{ color: var(--orange); }
.mn-tab--fab { padding-top: 0; }
.mn-tab--fab .mn-label { color: var(--orange-d); }
.mn-fab .v2-ico { width: 24px; height: 24px; stroke-width: 2.4; }
.mn-fab {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--orange); color: var(--tx-white); font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  margin-top: -20px; border: 3px solid var(--bg-app);
  box-shadow: 0 4px 16px rgba(var(--orange-rgb), .4);
}

/* SIDEBAR COLAPSADO (solo escritorio) — clase en <html>, se recuerda en localStorage (v2/app.js) */
@media (min-width: 781px) {
  .sb-collapsed { --sidebar-w: 72px; }
  .sb-collapsed .sb-brand { justify-content: center; padding: 0; }
  .sb-collapsed .sb-logo { display: none; }
  .sb-collapsed .sb-collapse { width: 40px; height: 40px; }
  .sb-collapsed .sb-collapse .v2-ico { display: none; transform: rotate(180deg); }
  .sb-collapsed .sb-collapse-logo { display: block; }
  .sb-collapsed .sb-collapse:hover .sb-collapse-logo { display: none; }
  .sb-collapsed .sb-collapse:hover .v2-ico { display: block; }
  .sb-collapsed .sb-account-label,
  .sb-collapsed .sb-account-text,
  .sb-collapsed .sb-section-label,
  .sb-collapsed .sl-label,
  .sb-collapsed .sb-badge,
  .sb-collapsed .sb-chevron,
  .sb-collapsed .sb-dropdown-menu { display: none; }
  .sb-collapsed .sb-account { margin: 12px 12px 0; padding: 8px 0; justify-content: center; border-color: transparent; background: none; }
  .sb-collapsed .sb-new { justify-content: center; padding: 10px 0; }
  .sb-collapsed .sb-section { padding: 10px 12px 0; }
  .sb-collapsed .sb-link { justify-content: center; padding: 10px 0; }
  .sb-collapsed .sb-link .sl-icon { width: 22px; height: 22px; opacity: .65; }
  .sb-collapsed .sb-link .sl-icon svg { width: 21px; height: 21px; stroke-width: 1.7; }
  .sb-collapsed .sb-link.active .sl-icon { opacity: 1; }
  .sb-collapsed .sb-new-plus { width: 22px; height: 22px; }
  .sb-collapsed .sb-new-plus .v2-ico { width: 17px; height: 17px; }
  .sb-collapsed .sb-collapse .v2-ico { width: 18px; height: 18px; }
  .sb-collapsed .sb-user-text { display: none; }
  .sb-collapsed .sb-user-dropdown summary { justify-content: center; padding: 7px 0; }
  .sb-collapsed .sb-user-menu { right: auto; width: 220px; }
}

/* Tooltip del menu colapsado (v2/app.js). Fijo para que no lo recorte el scroll del sidebar */
.sb-tooltip {
  position: fixed; z-index: 300; pointer-events: none;
  transform: translateY(-50%);
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--tx-strong); color: var(--tx-white);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.sb-tooltip::before {
  content: ''; position: absolute; left: -5px; top: 50%;
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--tx-strong);
  transform: translateY(-50%) rotate(45deg);
}
.sb-tooltip[hidden] { display: none; }

/* OVERLAY */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 90; }
.overlay.on { display: block; }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
[data-anim] { animation: fadeUp .4s ease both; }
[data-anim="1"] { animation-delay: .04s; }
[data-anim="2"] { animation-delay: .09s; }
[data-anim="3"] { animation-delay: .14s; }
[data-anim="4"] { animation-delay: .19s; }

/* RESPONSIVE */
@media (max-width: 1060px) {
  .page-grid { grid-template-columns: 1fr; }
  .col-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 780px) {
  :root { --sidebar-w: 0px; }
  .sidebar { width: 252px; transform: translateX(-252px); box-shadow: 4px 0 24px rgba(0,0,0,.1); }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: flex !important; }
  .main { margin-left: 0; }
  .topbar { padding: 0 16px; }
  .page { padding: 24px 20px 100px; }
  .welcome-row { flex-direction: column; gap: 14px; }
  .mobile-nav { display: flex; }
  .sb-collapse { display: none; }
  .tb-logo { display: flex; align-items: center; }
  .tb-crumbs--client { display: none; }
  .v2-back { display: inline-flex; }
  .tb-user { padding: 3px; }
  .tb-user-name, .tb-user .sb-chevron { display: none; }
  .tb-user-dropdown { display: none; }
  /* Por ahora oculto en celular: Mi cuenta ya esta en "Mas" del menu de abajo */
  .tb-user-link { display: none; }
  .col-stack { grid-template-columns: 1fr; }
  .hide-mobile { display: none !important; }

  /* Topbar: en viewports angostos el switch V1/V2 + el nombre de la
     sucursal + la campana ya no caben juntos — se conserva el switch
     (importante) y se recorta el nombre de la sucursal al indicador. */
  .tb-right { gap: 6px; }
  .tb-switch { padding: 2px; }
  .tb-switch__item { min-width: 34px; padding: 5px 8px; }
  .tb-workspace { padding: 6px; }
  .tb-ws-label { display: none; }
  .tb-balance-label { display: none; }
  .tb-balance { padding: 6px 8px; }
  .tb-balance .v2-ico { display: none; }
}

/* Con el saldo en el header ya no cabe el logo completo junto al switch */
@media (max-width: 420px) {
  .tb-logo img { max-width: 105px; }
}

@media (max-width: 360px) {
  .tb-switch { display: none; }
}
.cool-lightbox .cool-lightbox__slide img {
  max-width: min(90vw, 640px) !important;
  max-height: 75vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 8px;
}
/* Boton de cerrar del visor de imagenes: bien visible en celular (antes gris sobre gris) */
.cool-lightbox .cool-lightbox-toolbar {
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  gap: 8px;
}
.cool-lightbox .cool-lightbox-toolbar .cool-lightbox-toolbar__btn {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 50%;
  background: #fff;
  color: #1F1F1F;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
/* La libreria solo le da tamano al icono en pantallas >= 767px: en celular la X salia vacia */
.cool-lightbox .cool-lightbox-toolbar .cool-lightbox-toolbar__btn > svg {
  width: 100%;
  height: 100%;
}
.cool-lightbox .cool-lightbox-toolbar .cool-lightbox-toolbar__btn:hover {
  color: #000;
}
.cool-lightbox .cool-lightbox-toolbar.hidden {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 480px) {
  .page { padding: 20px 16px 90px; }
  .welcome-row .flex { flex-direction: column; width: 100%; }
  .welcome-row .flex .btn { flex: 1; justify-content: center; }
}

/* Selector de sitio (client-select-site-inicio, legacy, depende de clases bootstrap).
   Clase generica compartida por cualquier vista v2 (publica o de dashboard) que use
   el componente, en vez de repetir el estilo por pagina. */
.v2-public-select-site { display: flex; justify-content: center; margin-top: 20px; position: relative; }
.v2-public-select-site .btn-group { position: relative; display: inline-block; }
.v2-public-select-site .btn-primary {
  padding: 10px 18px;
  border: none;
  border-radius: var(--r-md);
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.v2-public-select-site .btn-primary:hover { background: var(--orange-d); }
.v2-public-select-site .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 30px rgba(0,0,0,.10);
  padding: 6px;
  z-index: 20;
}
.v2-public-select-site .dropdown-menu.show { display: block; }
.v2-public-select-site .dropdown-item {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--tx-base);
  text-decoration: none;
}
.v2-public-select-site .dropdown-item:hover,
.v2-public-select-site .dropdown-item.active { background: var(--orange-bg); color: var(--orange-d); }

/* PERIODO — commons/v2/PeriodSelectV2.vue (estilo app2) */
.v2-period { position: relative; display: inline-block; }
.v2-period__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-card); color: var(--tx-strong);
  font: 500 14px/1 var(--font); cursor: pointer; white-space: nowrap;
}
.v2-period__btn:hover, .v2-period.is-open .v2-period__btn { border-color: #D4D1C9; }
.v2-period__btn strong { font-weight: 600; }
.v2-period__range { color: var(--tx-muted); }
.v2-period__ico, .v2-period__chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.v2-period__ico { color: var(--tx-muted); }
.v2-period__chev { color: var(--tx-muted); margin-left: 2px; }
.v2-period__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 200px; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.v2-period__op {
  display: block; width: 100%; padding: 9px 12px;
  border: none; border-radius: var(--r-sm); background: none;
  text-align: left; font: 500 13.5px/1.2 var(--font); color: var(--tx-base); cursor: pointer;
}
.v2-period__op:hover { background: var(--bg-app); color: var(--tx-strong); }
.v2-period__op.is-active { background: var(--orange-bg); color: var(--orange-d); font-weight: 600; }
@media (max-width: 768px) {
  .v2-period__menu { left: 0; right: auto; }
}

/* EXPORTAR EXCEL — boton unico (commons/v2/ButtonExcelV2.vue), en el titulo de cada pantalla */
.v2-excel { display: inline-flex; align-items: center; gap: 8px; }
.btn--excel { background: var(--bg-hover); color: var(--tx-strong); }
.btn--excel:hover { background: #e4e4e4; }
.btn--excel i { font-size: 13px; }
.v2-excel__progress { width: 60px; height: 5px; border-radius: var(--r-pill); background: var(--bg-hover); overflow: hidden; }
.v2-excel__bar { height: 100%; background: var(--green); transition: width .2s ease; }
/* Titulo con el boton de Excel a la derecha (pantallas sin PageHeaderV2) */
.v2-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* El boton de Excel siempre a la altura del titulo, sin importar cuantas lineas tenga el subtitulo */
.v2-excel { align-self: flex-start; margin-top: 2px; }
.page-header > .v2-page-header__actions:has(.v2-excel) { align-self: flex-start; }
/* Kiosko (bodega): encabezados de seccion mas grandes */
.kiosko-head .t-label { font-size: 12px; }
.kiosko-head .t-h1 { font-size: 40px; }
.kiosko-head .t-sub { font-size: 16px; max-width: none; }
@media (max-width: 780px) {
  .kiosko-head .t-h1 { font-size: 32px; }
}