/* ===== SELECTO BUILD v65 - 2026-11-09 - Inicio de logistica: las tareas pendientes aparecen como seccion principal arriba de todo ===== */

/* Tamaño base de íconos SVG sueltos (sin esto, un ícono fuera de botón sale gigante) */
.ico { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.modal-h h3 .ico { width: 20px; height: 20px; }
/* =========================================================================
   SELECTO AUTOMOTORES · PORTAL DE MARKETING
   Hoja de estilos — tema oscuro premium (por defecto) + tema claro (azul).
   Todos los colores viven en variables CSS: para reajustar la identidad
   basta con tocar :root  /  [data-theme="light"].
   ========================================================================= */

:root {
  /* --- Tema OSCURO (identidad Selecto) --- */
  --bg:        #0A0B0D;
  --bg-2:      #0f1114;
  --surface:   #15181D;
  --surface-2: #1B1F26;
  --surface-3: #21262e;
  --border:    #262b33;
  --border-2:  #333a44;
  --text:      #EDEFF2;
  --text-dim:  #9aa3af;
  --text-mute: #6b7280;
  --accent:        #E5384B;   /* rojo de marca — usado con moderación */
  --accent-hover:  #f04a5c;
  --accent-soft:   rgba(229,56,75,.14);
  --accent-text:   #ffffff;
  --ok:      #34d399;
  --ok-soft: rgba(52,211,153,.14);
  --warn:      #fbbf24;
  --warn-soft: rgba(251,191,36,.14);
  --danger:      #f87171;
  --danger-soft: rgba(248,113,113,.14);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
  --radius:   14px;
  --radius-sm:10px;
  --sidebar:  248px;
  color-scheme: dark;
}

[data-theme="light"] {
  /* --- Tema CLARO (premium minimal, acento azul profundo) --- */
  --bg:        #f4f6f9;
  --bg-2:      #eceff3;
  --surface:   #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef1f5;
  --border:    #e4e7ec;
  --border-2:  #d3d8e0;
  --text:      #0b1220;
  --text-dim:  #55606f;
  --text-mute: #8a93a2;
  --accent:        #24466f;   /* azul oscuro (paleta pedida) */
  --accent-hover:  #2d5688;
  --accent-soft:   rgba(36,70,111,.10);
  --accent-text:   #ffffff;
  --ok:      #16a34a;
  --ok-soft: rgba(22,163,74,.10);
  --warn:      #b45309;
  --warn-soft: rgba(180,83,9,.10);
  --danger:      #dc2626;
  --danger-soft: rgba(220,38,38,.10);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 4px 16px rgba(16,24,40,.08);
  --shadow-lg: 0 12px 40px rgba(16,24,40,.14);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;   /* evita scroll lateral por el drawer en mobile */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
a { color: inherit; }
::selection { background: var(--accent-soft); }

/* Scrollbar sutil */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ LOGIN */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 34px 30px;
}
.brand {
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.brand-logo {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text);
  font-weight: 800; font-size: 20px; letter-spacing: -1px;
  overflow: hidden;
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.2px; }
.brand-sub  { font-size: 12px; color: var(--text-mute); }
.login h1 { font-size: 20px; margin: 22px 0 4px; letter-spacing: -.3px; }
.login p.lead { color: var(--text-dim); font-size: 14px; margin: 0 0 22px; }
.login-error {
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid var(--danger); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 13px; margin-bottom: 14px;
}
.login-hint {
  margin-top: 18px; font-size: 12px; color: var(--text-mute);
  border-top: 1px solid var(--border); padding-top: 14px; line-height: 1.7;
}

/* ------------------------------------------------------------------ FORM */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--text-dim); margin-bottom: 6px;
}
.input, .select, .textarea {
  width: 100%; padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { resize: vertical; min-height: 90px; }
.input::placeholder, .textarea::placeholder { color: var(--text-mute); }
.hint { font-size: 12px; color: var(--text-mute); margin-top: 5px; }

/* ------------------------------------------------------------------ BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text); font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .14s; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.block { width: 100%; }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn.icon { padding: 9px; width: 38px; height: 38px; }

/* ------------------------------------------------------------------ SHELL */
.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100dvh; }
.sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  padding: 18px 14px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh;
}
.sidebar .brand { padding: 6px 8px 18px; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-weight: 600; font-size: 14px;
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  font-family: inherit; transition: background .14s, color .14s;
}
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }
[data-theme="light"] .nav-item.active { color: var(--accent); }
.nav-item .ico { width: 19px; height: 19px; flex: none; }
.nav-item .count {
  margin-left: auto; background: var(--accent); color: var(--accent-text);
  font-size: 11px; font-weight: 700; min-width: 20px; height: 20px;
  border-radius: 10px; display: grid; place-items: center; padding: 0 6px;
}
.nav-foot { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 10px; }
.user-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-sm); margin-bottom: 6px;
}
.avatar {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: var(--surface-3); color: var(--text);
}
.user-chip .who { line-height: 1.25; overflow: hidden; }
.user-chip .who b { font-size: 13.5px; display: block; }
.user-chip .who span { font-size: 11.5px; color: var(--text-mute); }

/* Contenido */
.content { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 26px; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 20px; margin: 0; letter-spacing: -.4px; flex: 1; }
.topbar .sub { font-size: 12.5px; color: var(--text-mute); font-weight: 500; }
.hamburger { display: none; }
.bell { position: relative; }
.bell .count {
  position: absolute; top: -4px; right: -4px;
  background: var(--accent); color: var(--accent-text);
  font-size: 10px; font-weight: 700; min-width: 17px; height: 17px;
  border-radius: 9px; display: grid; place-items: center; padding: 0 4px;
  border: 2px solid var(--bg);
}
.main { padding: 26px; max-width: 1240px; width: 100%; margin: 0 auto; }

/* ------------------------------------------------------------------ CARDS / GRID */
.grid { display: grid; gap: 16px; }
.metrics { grid-template-columns: repeat(4, 1fr); }
.metric {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow-sm);
}
.metric .k { font-size: 12.5px; color: var(--text-dim); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.metric .v { font-size: 30px; font-weight: 750; letter-spacing: -1px; margin-top: 8px; }
.metric .dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.disp { background: var(--ok); }
.dot.sen  { background: var(--warn); }
.dot.ven  { background: var(--accent); }
.dot.all  { background: var(--text-mute); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-h {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.card-h h2 { font-size: 15px; margin: 0; letter-spacing: -.2px; }
.card-h .btn { margin-left: auto; }
.card-b { padding: 6px 18px 8px; }

.section-title { font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin: 26px 0 12px; }

/* Actividad / listas */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.feed li:last-child { border-bottom: none; }
.feed .fi-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--surface-2); }
.feed .fi-txt { flex: 1; min-width: 0; }
.feed .fi-txt b { font-weight: 600; }
.feed .fi-time { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.empty { text-align: center; color: var(--text-mute); padding: 40px 20px; font-size: 14px; }
.empty .big { font-size: 34px; opacity: .5; margin-bottom: 8px; }

/* ------------------------------------------------------------------ TOOLBAR (buscador/filtros) */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.search { position: relative; flex: 1; min-width: 200px; }
.search .input { padding-left: 38px; }
.search .s-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-mute); pointer-events: none; }
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.segmented button {
  border: none; background: none; color: var(--text-dim); font-weight: 600;
  font-size: 13px; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-family: inherit;
}
.segmented button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.select.compact { width: auto; padding: 8px 30px 8px 12px; }

/* ------------------------------------------------------------------ VEHÍCULOS (grid tarjetas) */
.veh-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.veh-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .15s, border-color .15s, box-shadow .15s; display: flex; flex-direction: column;
}
.veh-card:hover { transform: translateY(-3px); border-color: var(--border-2); box-shadow: var(--shadow-md); }
.veh-thumb { aspect-ratio: 4/3; background: var(--surface-2); position: relative; overflow: hidden; }
.veh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.veh-thumb .no-img { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-mute); gap: 6px; text-align: center; font-size: 12px; }
.veh-thumb .pcount {
  position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; backdrop-filter: blur(4px);
  display: flex; align-items: center; gap: 5px;
}
.veh-thumb .badge { position: absolute; left: 8px; top: 8px; }
.veh-info { padding: 13px 14px 14px; }
.veh-info .tt { font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
.veh-info .vs { color: var(--text-dim); font-size: 13px; margin-top: 1px; }
.veh-info .mt { color: var(--text-mute); font-size: 12.5px; margin-top: 8px; display: flex; gap: 12px; }

/* Badge de estado */
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 20px; letter-spacing: .2px;
}
.badge .bd { width: 7px; height: 7px; border-radius: 50%; }
.badge.disp { background: var(--ok-soft); color: var(--ok); } .badge.disp .bd { background: var(--ok); }
.badge.sen  { background: var(--warn-soft); color: var(--warn); } .badge.sen .bd { background: var(--warn); }
.badge.ven  { background: var(--danger-soft); color: var(--danger); } .badge.ven .bd { background: var(--danger); }

/* ------------------------------------------------------------------ FICHA / DETALLE */
.detail-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.detail-head .ht { flex: 1; min-width: 220px; }
.detail-head h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -.6px; }
.detail-head .sub { color: var(--text-dim); font-size: 15px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.two-col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.spec-grid .sp { background: var(--surface); padding: 12px 14px; }
.spec-grid .sp .l { font-size: 11.5px; color: var(--text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.spec-grid .sp .v { font-size: 15px; font-weight: 600; margin-top: 3px; }
.prose { color: var(--text-dim); font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; }
.internal-note { background: var(--warn-soft); border: 1px solid var(--warn); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px; color: var(--text); }
.internal-note .l { font-size: 11px; font-weight: 700; color: var(--warn); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------------ GALERÍA */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.gcell {
  position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border); cursor: pointer;
}
.gcell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcell.primary { outline: 2px solid var(--accent); outline-offset: -2px; }
.gcell .primary-tag {
  position: absolute; left: 6px; top: 6px; background: var(--accent); color: var(--accent-text);
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 12px; display: flex; align-items: center; gap: 4px;
}
.gcell .g-tools {
  position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 55%);
  opacity: 0; transition: opacity .14s; display: flex; align-items: flex-end; justify-content: center; gap: 5px; padding: 8px;
}
.gcell:hover .g-tools, .gcell.show-tools .g-tools { opacity: 1; }
.g-tools button {
  border: none; background: rgba(255,255,255,.16); color: #fff; width: 30px; height: 30px;
  border-radius: 8px; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(4px);
}
.g-tools button:hover { background: rgba(255,255,255,.3); }
.g-tools button.on { background: var(--accent); }
.gcell[draggable="true"] { cursor: grab; }
.gcell.dragging { opacity: .4; }
.gcell.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* Dropzone */
.dropzone {
  border: 2px dashed var(--border-2); border-radius: var(--radius); padding: 30px 20px;
  text-align: center; color: var(--text-dim); cursor: pointer; transition: all .15s; background: var(--surface-2);
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.dropzone .big { font-size: 30px; margin-bottom: 8px; opacity: .7; }
.dropzone b { color: var(--text); }
.dz-formats { font-size: 12px; color: var(--text-mute); margin-top: 8px; }

/* ------------------------------------------------------------------ MENSAJES */
.msg { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 15px 17px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.msg.unread { border-left: 3px solid var(--accent); }
.msg-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.msg-h .from { font-weight: 700; font-size: 13.5px; }
.msg-h .time { color: var(--text-mute); font-size: 12px; margin-left: auto; }
.msg-h .rd { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px; }
.msg-h .rd.no { background: var(--accent-soft); color: var(--accent); }
.msg-h .rd.si { background: var(--surface-3); color: var(--text-mute); }
.msg-body { font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; }

/* Notificaciones */
.notif { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: border-color .14s; }
.notif:hover { border-color: var(--border-2); }
.notif.unread { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.notif .n-ico { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 18px; }
.notif .n-ico.ven { background: var(--danger-soft); }
.notif .n-ico.sen { background: var(--warn-soft); }
.notif .n-ico.msg { background: var(--accent-soft); }
.notif .n-body { flex: 1; min-width: 0; }
.notif .n-body b { font-size: 14px; }
.notif .n-body p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-dim); }
.notif .n-time { font-size: 12px; color: var(--text-mute); margin-top: 4px; }
.notif .n-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 6px; }

/* Alerta de vendidos recientes (marketing) */
.sold-alert { border: 1px solid var(--danger); background: var(--danger-soft); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; }
.sold-alert .sa-h { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--danger); font-size: 14px; margin-bottom: 10px; }
.sold-alert ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sold-alert li { font-size: 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sold-alert li:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ MODAL / OVERLAY */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 100; padding: 20px; animation: fade .15s;
}
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; animation: pop .16s; }
.modal.wide { max-width: 720px; }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.modal-h h3 { margin: 0; font-size: 17px; letter-spacing: -.2px; }
.modal-h .x { margin-left: auto; }
.modal-b { padding: 20px; max-height: 70vh; overflow: auto; }
.modal-f { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 20px; border-top: 1px solid var(--border); }
.modal-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.modal-icon.danger { background: var(--danger-soft); color: var(--danger); }
.modal-icon.warn { background: var(--warn-soft); color: var(--warn); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Progreso de carga */
.progress-wrap { text-align: center; }
.progress-wrap .pl { font-size: 14px; margin-bottom: 14px; color: var(--text-dim); }
.bar { height: 10px; background: var(--surface-3); border-radius: 20px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 20px; transition: width .2s; width: 0; }
.progress-wrap .pn { font-size: 13px; color: var(--text-mute); margin-top: 10px; }
.upload-errs { margin-top: 14px; text-align: left; font-size: 12.5px; color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding: 10px 12px; max-height: 120px; overflow: auto; }

/* ------------------------------------------------------------------ LIGHTBOX */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 200; display: grid; grid-template-rows: auto 1fr auto; animation: fade .15s; }
.lb-top { display: flex; align-items: center; gap: 12px; padding: 16px 20px; color: #fff; }
.lb-top .lb-count { font-size: 14px; opacity: .8; }
.lb-top .spacer { flex: 1; }
.lb-stage { display: grid; place-items: center; padding: 0 20px; min-height: 0; position: relative; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: none; color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.lb-nav:hover { background: rgba(255,255,255,.25); }
.lb-nav.prev { left: 16px; } .lb-nav.next { right: 16px; }
.lb-bot { padding: 14px 20px 20px; display: flex; justify-content: center; }
.lb-btn { background: rgba(255,255,255,.14); border: none; color: #fff; }
.lb-btn:hover { background: rgba(255,255,255,.26); }

/* ------------------------------------------------------------------ TOASTS */
#toast-root { position: fixed; bottom: 22px; right: 22px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--surface); border: 1px solid var(--border-2); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 12px 16px; font-size: 13.5px; max-width: 340px; animation: slidein .2s; display: flex; gap: 10px; align-items: center; }
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--danger); }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }

/* ------------------------------------------------------------------ DRAWER / RESPONSIVE */
.scrim { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 60; width: 82%; max-width: 300px;
    transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow-lg);
  }
  .app.drawer-open .sidebar { transform: translateX(0); }
  .app.drawer-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; }
  .hamburger { display: inline-flex; }
  .topbar { padding: 12px 16px; }
  .main { padding: 16px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .detail-head h1 { font-size: 22px; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .metric .v { font-size: 25px; }
  .detail-actions .btn span.lbl { display: none; }
  .detail-actions .btn { padding: 10px; }
}

/* ==================================================================
   LOGO OFICIAL (cambia según tema) + módulo CONTENIDO
   ================================================================== */
.brand--stack { flex-direction: column; align-items: flex-start; gap: 2px; }
.brand-mark { display: inline-flex; align-items: center; }
.logo-img { height: 30px; width: auto; max-width: 210px; object-fit: contain; display: block; }
.brand--stack .brand-sub { margin-top: 3px; }
.logo--dark { display: none; } .logo--white { display: block; }
[data-theme="light"] .logo--white { display: none; }
[data-theme="light"] .logo--dark { display: block; }
.login-card .logo-img { height: 42px; max-width: 260px; }

/* Token azul para estado "publicado" / contenido */
:root { --info: #3b82f6; --info-soft: rgba(59,130,246,.16); }
[data-theme="light"] { --info: #2563eb; --info-soft: rgba(37,99,235,.10); }
.dot.pub { background: var(--info); }

/* Dashboard extra */
.metrics-3 { grid-template-columns: repeat(3, 1fr); }
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sold-alert.urgent-alert { border-color: var(--danger); }
.seg-wrap { flex-wrap: wrap; margin-bottom: 18px; }

/* Tarjetas de contenido */
.content-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.content-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.content-card:hover { transform: translateY(-3px); border-color: var(--border-2); box-shadow: var(--shadow-md); }
.content-card.urgent { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset, var(--shadow-sm); }
.cc-thumb { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.cc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-thumb .no-img { position: absolute; inset: 0; display: grid; place-items: center; }
.cc-emoji { font-size: 46px; opacity: .5; }
.cc-type {
  position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.62); color: #fff;
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 20px; backdrop-filter: blur(4px);
}
.cc-thumb .pcount {
  position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; backdrop-filter: blur(4px);
  display: flex; align-items: center; gap: 5px;
}
.cc-thumb .prio { position: absolute; right: 8px; top: 8px; }
.cc-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cc-title { font-weight: 700; font-size: 15px; letter-spacing: -.2px; line-height: 1.25; }
.cc-desc { color: var(--text-dim); font-size: 12.8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.cc-date { color: var(--text-mute); font-size: 11.5px; white-space: nowrap; }

/* Badges de estado de contenido */
.badge.pend { background: var(--warn-soft); color: var(--warn); } .badge.pend .bd { background: var(--warn); }
.badge.list { background: var(--ok-soft); color: var(--ok); } .badge.list .bd { background: var(--ok); }
.badge.pub  { background: var(--info-soft); color: var(--info); } .badge.pub .bd { background: var(--info); }
.badge.arch { background: var(--surface-2); color: var(--text-mute); } .badge.arch .bd { background: var(--text-mute); }

/* Prioridad */
.prio { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; }
.prio.imp { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }
.prio.urg { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); }

/* Ficha de contenido */
.detail-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.cc-type-inline { color: var(--text-dim); font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.prose { white-space: pre-wrap; line-height: 1.55; font-size: 14.5px; color: var(--text); }
.ctrl-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ctrl-label { font-size: 12.5px; font-weight: 700; color: var(--text-dim); min-width: 74px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.dz-count { margin-top: 10px; color: var(--accent); font-weight: 600; }

/* Videos */
.video-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.video-block { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.video-block video { width: 100%; display: block; background: #000; max-height: 340px; }
.video-meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.vm-name { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; word-break: break-word; }
.vm-name svg { flex: none; color: var(--accent); }
.vm-info { font-size: 12px; color: var(--text-mute); }
.video-meta .btn { align-self: flex-start; }

@media (max-width: 900px) {
  .metrics-3 { grid-template-columns: 1fr; }
  .content-grid { grid-template-columns: 1fr 1fr; }
  .video-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .content-grid { grid-template-columns: 1fr; }
  .ctrl-label { min-width: 0; }
}

/* ============ Plantilla de descripción / datos de Selecto ============ */
.hstack { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.desc-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.tpl-lbl { font-size: 12.5px; font-weight: 700; color: var(--text-dim); margin: 16px 0 8px; }
.tpl-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600;
  padding: 5px 9px; border-radius: 8px; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--text-dim); cursor: pointer; transition: border-color .12s, color .12s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.tpl-editor { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; min-height: 190px; }
.card-h .hstack .btn.sm { padding: 6px 10px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; color: var(--text-dim); }

@media (max-width: 560px) {
  .card-h { flex-wrap: wrap; gap: 8px; }
  .detail-actions .btn span.lbl { display: none; }
}

/* ============ Registro de accesos de Marketing (Dashboard admin) ============ */
.access-row { margin-bottom: 20px; }
.metric.access { max-width: 380px; cursor: pointer; transition: border-color .14s, box-shadow .14s, transform .14s; }
.metric.access:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.metric.access .sub { margin-top: 8px; font-size: 12px; color: var(--text-mute); }
.dot.mkt { background: var(--accent); }

.access-total { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }
.access-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; }
.access-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border); font-size: 14px; }
.access-list li:last-child { border-bottom: 0; }
.ah-date { font-weight: 600; letter-spacing: -.1px; }
.ah-role { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 20px; }
.ah-empty { justify-content: center; color: var(--text-mute); }

@media (max-width: 560px) { .metric.access { max-width: none; } }

/* ================= Conversaciones Marketing <-> Admin ================= */
.thread { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.thread.unread { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft) inset; }
.thread-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.thread-title { font-weight: 700; font-size: 15px; flex: 1; min-width: 120px; }
.thread-h .time { font-size: 12px; color: var(--text-mute); }
.mbadge { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; }
.mbadge.m-msg { background: var(--surface-2); color: var(--text-dim); }
.mbadge.m-info { background: var(--info-soft); color: var(--info); }
.mbadge.m-urg { background: var(--danger-soft); color: var(--danger); }
.mbadge.m-saldo { background: var(--warn-soft); color: var(--warn); }
.saldo-box { display: flex; align-items: center; gap: 10px; background: var(--warn-soft); color: var(--text); border: 1px solid var(--warn); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; font-size: 13.5px; }
.saldo-box svg { color: var(--warn); flex: none; }
.thread-msgs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tmsg { border-radius: var(--radius-sm); padding: 9px 12px; border: 1px solid var(--border); }
.tmsg.mkt { background: var(--surface-2); }
.tmsg.adm { background: var(--accent-soft); border-color: var(--accent); }
.tm-who { font-size: 11px; color: var(--text-mute); margin-bottom: 3px; }
.tm-text { font-size: 14px; white-space: pre-wrap; line-height: 1.45; }
.thread-reply { border-top: 1px dashed var(--border); padding-top: 12px; }

/* ================= Publicidad ================= */
.pub-forms { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.mov { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.mov:last-child { border-bottom: 0; }
.mov-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.mov-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; padding: 4px 8px; border-radius: 8px; flex: none; margin-top: 2px; }
.mov-tag.pos { background: var(--ok-soft); color: var(--ok); }
.mov-tag.neg { background: var(--danger-soft); color: var(--danger); }
.mov-l1 { font-size: 14px; }
.mov-when { color: var(--text-mute); font-weight: 400; }
.mov-obs { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.mov-by { font-size: 11px; color: var(--text-mute); margin-top: 3px; }
.mov-right { display: flex; align-items: center; gap: 10px; flex: none; }
.mov-amount { font-weight: 800; font-size: 15px; white-space: nowrap; }
.mov-amount.pos { color: var(--ok); }
.mov-amount.neg { color: var(--danger); }
.mov-tools { display: flex; gap: 4px; }
.btn.sm.icon { padding: 6px; }

@media (max-width: 560px) {
  .mov { flex-wrap: wrap; }
  .mov-right { width: 100%; justify-content: space-between; }
}

/* ================= Selector de apariencia (claro / oscuro / sistema) ================= */
.theme-seg { display: flex; gap: 6px; margin-top: 6px; }
.theme-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; padding: 7px 4px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
  font: inherit; font-size: 11px; line-height: 1; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
.theme-opt .ti { font-size: 16px; line-height: 1; }
.theme-opt:hover { background: var(--surface-2); }
.theme-opt.active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.theme-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ================= Historial de actividad ================= */
.act-toolbar { flex-wrap: wrap; gap: 8px; }
.date-f { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-mute); }
.date-f .input.compact { width: auto; }
.act-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.act-row:last-child { border-bottom: 0; }
.act-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; font-size: 16px; flex: none; }
.act-main { min-width: 0; flex: 1; }
.act-text { font-size: 14px; font-weight: 600; line-height: 1.35; }
.act-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }
.act-chip { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--surface-3); color: var(--text-dim); }
.act-chip.mod { background: var(--accent-soft); color: var(--accent); }
.act-chip.role-admin { background: var(--danger-soft); color: var(--danger); }
.act-chip.role-marketing { background: var(--info-soft); color: var(--info); }
.act-when { font-size: 11.5px; color: var(--text-mute); margin-left: auto; }

/* ================= Notificaciones: niveles ================= */
.notif .n-ico { background: var(--surface-2); }
.notif { border-left: 3px solid var(--border); }
.notif.lv-info { border-left-color: var(--info); }
.notif.lv-att { border-left-color: var(--warn); }
.notif.lv-urg { border-left-color: var(--danger); }
.notif.lv-ok { border-left-color: var(--ok); }
.n-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.lv-badge { font-size: 10px; font-weight: 800; letter-spacing: .3px; padding: 2px 7px; border-radius: 20px; text-transform: uppercase; }
.lv-badge.lv-info { background: var(--info-soft); color: var(--info); }
.lv-badge.lv-att { background: var(--warn-soft); color: var(--warn); }
.lv-badge.lv-urg { background: var(--danger-soft); color: var(--danger); }
.lv-badge.lv-ok { background: var(--ok-soft); color: var(--ok); }

/* ================= Estadísticas: gráficos de barras ================= */
.two-col { grid-template-columns: 1fr 1fr; }
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; }
.bar-lbl { font-size: 12.5px; color: var(--text-dim); text-align: right; }
.bar-track { background: var(--surface-3); border-radius: 8px; height: 14px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 8px; background: var(--accent); transition: width .4s ease; min-width: 2px; }
.bar-fill.b1 { background: var(--info); } .bar-fill.b2 { background: var(--accent); } .bar-fill.b3 { background: var(--ok); } .bar-fill.b4 { background: var(--warn); } .bar-fill.b5 { background: var(--danger); }
.bar-val { font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* ================= Backup ================= */
.file-btn { cursor: pointer; }
.bk-progress { margin-top: 14px; }
.zip-bar { height: 8px; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.zip-bar > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }

@media (max-width: 720px) {
  .two-col { grid-template-columns: 1fr; }
  .act-when { margin-left: 0; }
  .bar-row { grid-template-columns: 78px 1fr auto; }
}

/* ================= Login: registro ================= */
.login-sep { margin: 16px 0 8px; text-align: center; font-size: 12.5px; color: var(--text-mute); }
.login-ok { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13.5px; margin-bottom: 12px; }

/* ================= Panel del COMISIONISTA ================= */
.com-app { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.com-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.com-brand .logo-img { height: 30px; }
.com-top-actions { display: flex; align-items: center; gap: 8px; }
.com-main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 20px 18px 60px; flex: 1; }
.com-head h1 { font-size: 22px; margin: 6px 0 2px; }
.com-head p { color: var(--text-dim); font-size: 14px; margin: 0 0 12px; }
.com-toolbar { flex-wrap: wrap; gap: 8px; }
.com-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.com-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; display: flex; flex-direction: column; }
.com-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.com-card-img { position: relative; aspect-ratio: 4/3; background: var(--surface-2); }
.com-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.com-noimg { width: 100%; height: 100%; display: grid; place-items: center; font-size: 40px; color: var(--text-mute); }
.com-badge { position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; padding: 4px 9px; border-radius: 20px; background: var(--warn); color: #fff; }
.com-badge.sen { background: var(--warn); }
.com-card-b { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.com-card-t { font-weight: 700; font-size: 15px; }
.com-card-v { font-size: 12.5px; color: var(--text-dim); }
.com-card-meta { display: flex; gap: 10px; font-size: 12.5px; color: var(--text-mute); margin-top: 2px; }
.com-card-price { font-weight: 800; font-size: 17px; margin-top: 6px; }
.com-card-ant { font-size: 12px; color: var(--text-dim); }
.com-cta { margin-top: 10px; }
.com-detail { max-width: 900px; margin: 0 auto; }
.com-backbtn { margin-bottom: 12px; }
.com-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.com-detail-head h1 { font-size: 22px; margin: 0; }
.com-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.com-shot { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.com-shot img { width: 100%; height: 100%; object-fit: cover; }
.com-dl { position: absolute; right: 8px; bottom: 8px; }
.com-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.com-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.com-spec { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border); padding: 7px 0; font-size: 14px; }
.com-spec span { color: var(--text-mute); }

/* ================= Admin: usuarios ================= */
.ulist { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.ucard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.uhead { display: flex; align-items: flex-start; gap: 12px; }
.uname { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.umeta { font-size: 12.5px; color: var(--text-mute); margin-top: 2px; }
.uactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ustatus { font-size: 10.5px; font-weight: 800; letter-spacing: .3px; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
.ustatus.st-pend { background: var(--warn-soft); color: var(--warn); }
.ustatus.st-act { background: var(--ok-soft); color: var(--ok); }
.ustatus.st-block { background: var(--danger-soft); color: var(--danger); }
.ustatus.st-rej { background: var(--surface-3); color: var(--text-mute); }
.users-seg .seg-n { font-size: 11px; opacity: .7; margin-left: 4px; }

/* ================= Permisos ================= */
.perms-wrap { align-items: start; }
.perm-lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-mute); margin: 14px 0 8px; font-weight: 700; }
.perm-lbl:first-child { margin-top: 0; }
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.perm-chk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.perm-chk input { width: 16px; height: 16px; accent-color: var(--accent); }
.uperm-row, .vperm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.vperm-cols { display: flex; gap: 10px; }
.vperm-cols label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-mute); }

/* ================= Categoría de foto en galería ================= */
.gcat { position: absolute; left: 8px; bottom: 8px; font-size: 11px; padding: 3px 6px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--text); border: 1px solid var(--border-2); max-width: 60%; }

@media (max-width: 560px) {
  .com-specs { grid-template-columns: 1fr; }
  .perm-grid { grid-template-columns: 1fr; }
  .com-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .uactions .btn { flex: 1 1 auto; }
}
@media (max-width: 380px) { .com-grid { grid-template-columns: 1fr; } }

/* ================= Vista previa por grupo ================= */
.prev-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 3px; margin-bottom: 12px; }
.prev-toggle button { border: 0; background: transparent; color: var(--text-dim); font-weight: 600; font-size: 13px; padding: 7px 16px; border-radius: 8px; cursor: pointer; }
.prev-toggle button.on { background: var(--accent); color: #fff; }
.prev-warn { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.prev-cat { position: absolute; left: 6px; bottom: 6px; font-size: 10.5px; padding: 2px 7px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--text); border: 1px solid var(--border-2); }

/* ================= Destino de fotos (Marketing / Comisionistas) ================= */
.aud-choices { display: flex; flex-direction: column; gap: 10px; }
.aud-choice { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; color: var(--text); transition: border-color .12s, background .12s; }
.aud-choice:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.aud-choice .ae { font-size: 22px; }
.aud-choice b { display: block; font-size: 14.5px; }
.aud-choice .as { color: var(--text-mute); font-size: 12.5px; margin-left: auto; text-align: right; }
.aud-seg { display: inline-flex; flex-wrap: wrap; }
.aud-seg button { font-size: 12.5px; }

/* Selector y badge por foto en la galería admin */
.gsel { position: absolute; left: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 5px; max-width: 72%; }
.gsel .gcat { position: static; left: auto; bottom: auto; max-width: 100%; }
.gaud { font-weight: 600; }
.aud-badge { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; background: color-mix(in srgb, var(--bg) 78%, transparent); border: 1px solid var(--border-2); z-index: 2; }
.gcell:hover .aud-badge { opacity: 0; }
.aud-marketing { box-shadow: 0 0 0 2px color-mix(in srgb, #3B82F6 55%, transparent); }
.aud-comisionista { box-shadow: 0 0 0 2px color-mix(in srgb, #22C55E 55%, transparent); }

/* Fallback para imágenes que el navegador no puede decodificar (HEIC en Chrome/Firefox) */
.img-fallback { width: 100%; height: 100%; min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--surface-2); color: var(--text-mute); }
.img-fallback .iff-ic { font-size: 30px; opacity: .7; }
.img-fallback .iff-t { font-size: 11px; font-weight: 800; letter-spacing: .5px; background: var(--surface-3); padding: 1px 8px; border-radius: 20px; }
.img-fallback .iff-n { font-size: 10.5px; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= Vehículos destacados ⭐ ================= */
.feat-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .2px; padding: 3px 9px; border-radius: 20px; background: color-mix(in srgb, #E7B008 16%, var(--surface)); color: #E7B008; border: 1px solid color-mix(in srgb, #E7B008 40%, transparent); vertical-align: middle; }
.feat-badge.card-feat { position: absolute; top: 10px; left: 10px; background: color-mix(in srgb, #000 55%, transparent); color: #FFD34E; border-color: color-mix(in srgb, #FFD34E 45%, transparent); backdrop-filter: blur(4px); z-index: 2; }
.com-section-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .3px; color: var(--text-dim); text-transform: uppercase; margin: 22px 0 12px; }
.com-section-h:first-of-type { margin-top: 6px; }
.com-section-h .star { color: #E7B008; }
.com-card.feat { border-color: color-mix(in srgb, #E7B008 45%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, #E7B008 30%, transparent); }
.com-feat-tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; padding: 4px 9px; border-radius: 20px; background: color-mix(in srgb, #000 55%, transparent); color: #FFD34E; border: 1px solid color-mix(in srgb, #FFD34E 45%, transparent); backdrop-filter: blur(4px); z-index: 2; }

/* ================= Avisos Selecto 📢 ================= */
.aviso-list, .cav-list { display: flex; flex-direction: column; gap: 12px; }
.aviso-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.aviso-card.pinned { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.aviso-top, .cav-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; margin-bottom: 8px; }
.aviso-tipo { font-weight: 700; }
.aviso-date { color: var(--text-mute); margin-left: auto; }
.aviso-pin { color: var(--accent); font-weight: 700; }
.aviso-pr { font-size: 10.5px; font-weight: 800; letter-spacing: .3px; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
.pr-normal { background: var(--surface-3); color: var(--text-mute); }
.pr-imp { background: var(--warn-soft); color: var(--warn); }
.pr-urg { background: var(--danger-soft); color: var(--danger); }
.aviso-title, .cav-title { font-weight: 700; font-size: 15.5px; margin-bottom: 4px; }
.aviso-msg, .cav-msg { color: var(--text-dim); font-size: 14px; white-space: pre-wrap; line-height: 1.5; }
.aviso-stats { font-size: 12.5px; color: var(--text-mute); margin-top: 10px; }
.aviso-actions, .cav-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }

/* Comisionista */
.cav-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; }
.cav-card.pinned { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
.cav-card.unread { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); }
.cav-new { font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 2px 8px; border-radius: 20px; background: var(--accent); color: #fff; }
.cav-read { font-size: 12.5px; color: var(--ok); font-weight: 600; }

@media (max-width: 560px) {
  .aviso-actions .btn, .cav-actions .btn { flex: 1 1 auto; }
  .aviso-date { width: 100%; margin-left: 0; }
}


/* ==========================================================
   Apéndice web · clases de módulos que no están en el CSS local
   (usa los mismos tokens del sistema de diseño de Selecto)
   ========================================================== */

/* Detalle de vehículo */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shot { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot .dl { position: absolute; right: 8px; bottom: 8px; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.spec { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); padding: 8px 0; font-size: 14px; }
.spec span { color: var(--text-mute); }
.desc-venta { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; white-space: pre-wrap; font-size: 14px; line-height: 1.55; color: var(--text); margin-top: 8px; }
.welcome h2 { font-size: 20px; margin: 0 0 4px; }

/* Progreso de subida / segmento de audiencia */
.up-item { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 0; }
.up-bar { flex: 1; height: 6px; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.aud-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.aud-seg .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Publicidad: historial de movimientos */
.mcard.neg .v { color: var(--danger); }
.mov { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.mov:last-child { border-bottom: 0; }
.mov-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.mov-tag { font-size: 10px; font-weight: 800; letter-spacing: .4px; padding: 3px 8px; border-radius: 20px; margin-top: 2px; flex: none; }
.mov-tag.pos { background: var(--ok-soft); color: var(--ok); }
.mov-tag.neg { background: var(--danger-soft); color: var(--danger); }
.mov-l1 { font-size: 14.5px; }
.mov-when { color: var(--text-mute); font-size: 12.5px; }
.mov-obs { color: var(--text-dim); font-size: 13px; margin-top: 2px; white-space: pre-wrap; }
.mov-by { font-size: 11.5px; margin-top: 2px; }
.mov-right { display: flex; align-items: center; gap: 10px; flex: none; }
.mov-amount { font-weight: 800; font-size: 16px; }
.mov-amount.pos { color: var(--ok); }
.mov-amount.neg { color: var(--danger); }
.mov-tools { display: flex; gap: 4px; }
@media (max-width: 560px) { .mov { flex-direction: column; align-items: stretch; } .mov-right { justify-content: space-between; } }

/* Actividad / Seguridad */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 14px; font-weight: 600; cursor: pointer; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.act-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.act-row:last-child { border-bottom: 0; }
.act-ico { font-size: 18px; width: 26px; text-align: center; flex: none; }
.act-info { min-width: 0; }
.act-action { font-size: 14px; }
.act-meta { color: var(--text-mute); font-size: 12px; margin-top: 2px; }

/* Contenido: ficha con archivos (imágenes y videos) */
.cfile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.cfile { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cfile-media { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: #000; }
video.cfile-media { object-fit: contain; }
.cfile-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px; }
.cfile-name { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Contenedor de login (la app local centra con #login-screen; acá con .login-wrap) */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-wrap .login-card { margin: 0; }
.login-logo { text-align: center; margin-bottom: 8px; }
.boot { display: grid; place-items: center; min-height: 100vh; color: var(--text-mute); }

/* Precio en tarjeta de vehículo (no existe en la app local, se suma con su estilo) */
.veh-price { font-weight: 800; font-size: 16px; margin-top: 8px; }
.veh-ant { font-weight: 500; font-size: 12.5px; color: var(--text-mute); }

/* Indicadores de fotos por audiencia en la tarjeta (solo admin/vendedor) */
.veh-aud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.aud-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; line-height: 1.3; white-space: nowrap; }
.aud-chip.ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok); }
.aud-chip.no { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }

/* ==================== Visor de imágenes (lightbox) ==================== */
.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lb-stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 0; position: relative; z-index: 1; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
/* Los controles SIEMPRE por encima de la imagen (si no, la foto tapa la X y las flechas) */
.lb-close { position: absolute; top: 14px; right: 14px; z-index: 20; background: rgba(255,255,255,.16); color: #fff; border: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lb-close .ico { width: 24px; height: 24px; pointer-events: none; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; background: rgba(255,255,255,.16); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.lb-bar { position: relative; z-index: 20; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
.lb-count { color: rgba(255,255,255,.75); font-size: 13px; }
.lb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-actions .btn { background: rgba(255,255,255,.16); color: #fff; border-color: transparent; }
.lb-actions .btn.wa { background: #25D366; }
.lb-actions .btn.wa.ghost { background: transparent; color: #25D366; border: 1px solid #25D366; }
.shot { cursor: zoom-in; }
.shot-zoom { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #fff; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; pointer-events: none; }
.shot-zoom .ico { width: 16px; height: 16px; }

/* Botón WhatsApp */
.btn.wa { background: #25D366; border-color: #25D366; color: #fff; }
.btn.wa:hover { background: #1eb85a; border-color: #1eb85a; }
.btn.wa .ico { width: 18px; height: 18px; }

/* Selector de fotos que acumula */
.photo-picker .pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; }
.pick-item { position: relative; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.pick-item img { width: 100%; height: 100%; object-fit: cover; }
.pick-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text-mute); }
.pick-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.pick-count { margin-top: 8px; }

/* ==================== Destino de fotos (admin) ==================== */
.shot-wrap { display: flex; flex-direction: column; gap: 6px; }
.aud-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.shot-wrap.aud-ambos .aud-dot { background: #3b82f6; }
.shot-wrap.aud-mkt .aud-dot { background: var(--accent); }
.shot-wrap.aud-comi .aud-dot { background: #34d399; }
.shot-wrap.aud-mkt .shot { box-shadow: inset 0 0 0 2px var(--accent); }
.shot-wrap.aud-comi .shot { box-shadow: inset 0 0 0 2px #34d399; }
.shot-admin { display: flex; gap: 6px; align-items: center; }
.shot-admin .select.sm { padding: 5px 8px; font-size: 12px; flex: 1; }
.aud-summary { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 10px; font-size: 12.5px; }

/* Selector de fotos para compartir */
.share-help { margin-top: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--text-mute); }
.share-help b { color: var(--text); }
.share-help ol { margin: 6px 0 0; padding-left: 18px; }
.share-help li { margin: 3px 0; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.share-item { position: relative; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; }
.share-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-item .share-check { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; font-size: 13px; opacity: 0; transition: opacity .12s; }
.share-item.selected { border-color: #25D366; }
.share-item.selected .share-check { opacity: 1; background: #25D366; }
.share-item:not(.selected) img { opacity: .55; }
.btn.wa.ghost { background: transparent; color: #25D366; border-color: #25D366; }

/* ===== Sección Selecto: Tareas ===== */
.prio-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--border); }
.prio-badge.prio-alta { color:#e5484d; border-color:#e5484d55; background:#e5484d14; }
.prio-badge.prio-media { color:#d98a00; border-color:#d98a0055; background:#d98a0014; }
.prio-badge.prio-baja { color:#2fa84f; border-color:#2fa84f55; background:#2fa84f14; }
.task-card.task-done { opacity:.72; }
.task-card.task-done .task-title { text-decoration:line-through; }
.task-check input { width:20px; height:20px; cursor:pointer; accent-color: var(--accent); }
.task-check-ro { font-size:18px; line-height:1; cursor:default; display:inline-flex; align-items:center; }

/* Tareas en el Inicio (logística) */
.dash-tasks { padding:6px; margin-bottom:6px; }
.dash-task { display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:10px; cursor:pointer; }
.dash-task + .dash-task { border-top:1px solid var(--border); }
.dash-task:hover { background:var(--surface-2); }
.dash-task .prio-badge { flex:0 0 auto; padding:2px 6px; margin-top:1px; }
.dash-task-main { min-width:0; flex:1; }
.dash-task-title { font-weight:600; font-size:14px; }
.dash-task-detail { margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-tasks-cta { padding:10px; font-size:12.5px; font-weight:700; color:var(--accent); cursor:pointer; }
.notes-box { margin-top:8px; border-left:2px solid var(--border); padding-left:10px; display:flex; flex-direction:column; gap:6px; }
.note-item { font-size:13px; }
.note-item .hint { display:block; font-size:11px; }

/* ===== Sección Selecto: Herramientas ===== */
.tools-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.tool-btn { position:relative; }
.tool-link { width:100%; justify-content:center; }
.tool-x { position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.tool-x:hover { color:#e5484d; border-color:#e5484d; }
.tool-x .ico { width:14px; height:14px; }

/* ===== Avatares (foto de perfil) ===== */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.avatar-lg { width: 72px; height: 72px; border-radius: 16px; font-size: 26px; }
.avatar.avatar-sm { width: 38px; height: 38px; border-radius: 9px; font-size: 13px; }

/* ===== Menú por grupos (acordeón, solo admin) ===== */
.nav-group { display: flex; flex-direction: column; }
.nav-grp-head {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-weight: 700; font-size: 14px;
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  font-family: inherit; transition: background .14s, color .14s;
}
.nav-grp-head:hover { background: var(--surface); color: var(--text); }
.nav-grp-head .ico { width: 19px; height: 19px; flex: none; }
.nav-grp-head .grp-caret { margin-left: auto; display: grid; place-items: center; transition: transform .18s; }
.nav-grp-head .grp-caret .ico { width: 15px; height: 15px; }
.nav-group.open > .nav-grp-head { color: var(--text); }
.nav-group.open > .nav-grp-head .grp-caret { transform: rotate(90deg); }
.nav-grp-body {
  display: none; flex-direction: column; gap: 2px;
  padding-left: 12px; overflow: hidden;
}
.nav-group.open > .nav-grp-body { display: flex; }
.nav-grp-body .nav-item { font-weight: 600; }

/* ===== Tabla Unidades disponibles (preview in-app) ===== */
.uni-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.uni-table th, .uni-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.uni-table th { text-align: left; font-weight: 700; color: var(--text-dim); background: var(--surface); position: sticky; top: 0; }
.uni-table td { color: var(--text); }

/* ===== Reordenar vehículos ===== */
.ro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 58vh; overflow-y: auto; }
.ro-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card);
  cursor: grab; user-select: none;
}
.ro-row.dragging { opacity: .5; }
.ro-handle { display: grid; place-items: center; color: var(--muted); cursor: grab; }
.ro-handle .ico { width: 18px; height: 18px; }
.ro-thumb { width: 44px; height: 34px; border-radius: 6px; overflow: hidden; flex: none; background: var(--surface); display: grid; place-items: center; }
.ro-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ro-info { flex: 1; min-width: 0; overflow: hidden; }
.ro-info b { display: inline; }
.ro-btns { display: flex; gap: 2px; flex: none; }
.ro-btns .btn.icon { width: 30px; height: 30px; font-size: 12px; }

/* ===== Reordenar fotos ===== */
.ro-feat { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.ro-pos { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; background: var(--surface); color: var(--text-dim); font-size: 12px; }

/* ================= Check-in de vehículos (checklist) ================= */
.modal.modal-lg { max-width: 680px; }
.modal-lg .form-row.trio { grid-template-columns: 1fr 1fr 1fr; }
.chk-help { margin: 4px 0 12px; padding: 9px 11px; background: var(--surface-2, rgba(127,127,127,.08)); border-radius: 10px; }
.chk-grp { margin-bottom: 14px; }
.chk-grp-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0 0 6px; }
.chk-item { padding: 7px 0; border-bottom: 1px solid var(--border); }
.chk-item:last-child { border-bottom: 0; }
.chk-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chk-label { flex: 1; min-width: 130px; font-size: 13.5px; }
.chk-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.chk-s { border: 0; background: transparent; color: var(--muted); padding: 7px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; border-right: 1px solid var(--border); line-height: 1; }
.chk-s:last-of-type { border-right: 0; }
.chk-s.active.chk-ok { background: #0a7d33; color: #fff; }
.chk-s.active.chk-reg { background: #b26a00; color: #fff; }
.chk-s.active.chk-falta { background: #b00020; color: #fff; }
.chk-note-btn { border: 1px solid var(--border); background: transparent; color: var(--muted); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 15px; line-height: 1; }
.chk-note-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.chk-note { margin-top: 7px; }
@media (max-width: 560px) {
  .modal-lg .form-row.trio { grid-template-columns: 1fr; }
  .chk-label { min-width: 100%; }
  .chk-seg { flex: 1; }
  .chk-s { flex: 1; text-align: center; padding: 9px 6px; }
}

/* Login · mantener sesión iniciada */
.login-remember { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; font-size: 13.5px; color: var(--muted); cursor: pointer; user-select: none; }
.login-remember input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; cursor: pointer; }

/* ================= Documentos ================= */
.doc-grid{display:flex;flex-direction:column;gap:10px}
.doc-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;
  font:inherit;color:var(--text);transition:transform .15s,border-color .15s,box-shadow .15s}
.doc-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-sm,0 4px 14px rgba(0,0,0,.08))}
.doc-card .doc-ic{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,#1c2126,#3a3f45);color:#fff}
.doc-card .doc-ic svg{width:22px;height:22px}
.doc-card .doc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.doc-card .doc-tx b{font-size:15px;font-weight:700}
.doc-card .doc-tx small{font-size:12.5px;color:var(--muted)}
.doc-card .doc-arrow{color:var(--muted);flex:none}
.doc-card:hover .doc-arrow{color:var(--accent)}

/* ================= Estado de vehículo: más visible sobre la miniatura ================= */
.veh-thumb .badge{
  left:10px; top:10px; font-size:12.5px; font-weight:800; padding:6px 13px; color:#fff;
  letter-spacing:.3px; box-shadow:0 2px 10px rgba(0,0,0,.45); border:1.5px solid rgba(255,255,255,.3);
}
.veh-thumb .badge .bd{ width:8px; height:8px; background:#fff !important; box-shadow:0 0 0 2px rgba(255,255,255,.35); }
.veh-thumb .badge.disp{ background:var(--ok); }
.veh-thumb .badge.sen { background:var(--warn); }
.veh-thumb .badge.ven { background:var(--danger); }

/* Marketing: cartel grande de SEÑADO / VENDIDO casi tapando la miniatura */
.veh-state-over{ position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.5)); }
.veh-state-over span{
  font-size:clamp(22px,6vw,38px); font-weight:900; letter-spacing:2.5px; color:#fff; text-transform:uppercase;
  padding:10px 26px; border-radius:12px; transform:rotate(-7deg); border:3px solid rgba(255,255,255,.9);
  box-shadow:0 8px 26px rgba(0,0,0,.45); white-space:nowrap;
}
.veh-state-over.sen span{ background:var(--warn); }
.veh-state-over.ven span{ background:var(--danger); }

/* ================= Aviso flotante de novedades (Marketing) ================= */
.mkt-notif{
  position:fixed; right:18px; bottom:18px; z-index:1200; width:min(360px,calc(100vw - 32px));
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.3); padding:16px 16px 14px;
  opacity:0; transform:translateY(16px); transition:opacity .25s, transform .25s;
}
.mkt-notif.show{ opacity:1; transform:translateY(0); }
.mkt-notif .mkt-h{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14.5px; margin-bottom:10px; padding-right:22px; }
.mkt-notif .mkt-h svg{ color:var(--accent); }
.mkt-notif .mkt-body{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.mkt-notif .mkt-line{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--text-dim); }
.mkt-notif .mkt-line svg{ flex:none; margin-top:1px; color:var(--text-mute); }
.mkt-notif .mkt-line b{ color:var(--text); }
.mkt-notif .mkt-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.mkt-notif .mkt-x{ position:absolute; top:12px; right:12px; background:transparent; border:0; color:var(--text-mute); cursor:pointer; padding:2px; line-height:0; border-radius:6px; }
.mkt-notif .mkt-x:hover{ background:var(--surface-2); color:var(--text); }
@media (max-width:560px){ .mkt-notif{ right:12px; left:12px; bottom:12px; width:auto; } }

/* ================= Cartel "instalar en iPhone" (solo iOS Safari) ================= */
.ios-a2hs{ position:fixed; left:12px; right:12px; bottom:12px; z-index:1300;
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.3); padding:14px 40px 14px 14px;
  opacity:0; transform:translateY(18px); transition:opacity .25s, transform .25s; }
.ios-a2hs.show{ opacity:1; transform:translateY(0); }
.ios-a2hs-in{ display:flex; gap:12px; align-items:flex-start; }
.ios-a2hs .ios-ic{ font-size:26px; line-height:1; flex:none; }
.ios-a2hs .ios-tx{ display:flex; flex-direction:column; gap:3px; font-size:13.5px; color:var(--text-dim); }
.ios-a2hs .ios-tx b{ color:var(--text); }
.ios-a2hs .ios-x{ position:absolute; top:10px; right:10px; background:transparent; border:0; color:var(--text-mute); cursor:pointer; padding:3px; line-height:0; border-radius:6px; }
.ios-a2hs .ios-x:hover{ background:var(--surface-2); color:var(--text); }

/* ===== v39 · Portada de Inicio + botones Web/WhatsApp + banner WhatsApp comisionistas ===== */
.home-hero{ position:relative; border-radius:var(--radius,16px); overflow:hidden; margin-bottom:20px; min-height:200px; background-size:cover; background-position:center; display:flex; align-items:flex-end; box-shadow:var(--shadow-md); }
@media (min-width:768px){ .home-hero{ min-height:300px; } }
.home-hero-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.30) 55%, rgba(0,0,0,.12)); pointer-events:none; }
.home-hero-actions{ position:relative; z-index:1; display:flex; gap:10px; flex-wrap:wrap; padding:16px; }
.home-hero .hero-btn{ background:rgba(255,255,255,.94); color:#0A0B0D; border:none; font-weight:600; }
.home-hero .hero-btn:hover{ background:#fff; }
.home-hero .hero-btn.wa{ background:#25D366; color:#fff; }
.home-hero .hero-btn.wa:hover{ background:#20bd5a; }

/* Vista previa de la portada en Configuración */
.cover-preview{ width:100%; aspect-ratio:16/6; min-height:120px; border-radius:12px; background-size:cover; background-position:center; background-color:rgba(127,127,127,.12); display:flex; align-items:center; justify-content:center; }
.cover-preview.empty{ border:1px dashed var(--border,#444); }

/* Banner de WhatsApp para comisionistas en Vehículos */
.wa-banner{ display:flex; align-items:center; gap:12px; background:#25D366; color:#fff; border-radius:12px; padding:12px 14px; margin-bottom:14px; text-decoration:none; }
.wa-banner:hover{ filter:brightness(.97); }
.wa-banner-ico{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 auto; background:rgba(255,255,255,.22); border-radius:50%; }
.wa-banner-ico .ico{ width:20px; height:20px; }
.wa-banner-txt{ font-size:14px; line-height:1.35; }

/* ===== v42 · Indicador de carga (al abrir vehículo o contenido) ===== */
.load-ov{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.30); }
.load-ov.show{ display:flex; }
.load-box{ display:flex; flex-direction:column; align-items:center; gap:12px; background:var(--card); color:var(--text); padding:22px 30px; border-radius:14px; box-shadow:var(--shadow-lg); }
.load-spin{ width:34px; height:34px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:load-spin .7s linear infinite; }
.load-box span{ font-size:14px; font-weight:600; }
@keyframes load-spin{ to{ transform:rotate(360deg); } }

/* ===== v44 · Sin zoom en la app (como app nativa); el visor de imágenes sí hace zoom ===== */
html { touch-action: manipulation; }           /* desactiva el zoom por doble toque */
.lb-stage { touch-action: none; }               /* el visor controla el pinch/arrastre por su cuenta */
.lb-stage img { touch-action: none; transform-origin: center center; will-change: transform; }

/* ===== v45 · Placeholder "Próximamente" para vehículos sin fotos (según tema) ===== */
.veh-thumb .coming-soon{
  position:absolute; inset:0;
  background-image:url('/assets/images/proximamente-dark.jpg?v=45');
  background-size:contain; background-position:center; background-repeat:no-repeat;
  background-color:#161616;
}
html[data-theme="light"] .veh-thumb .coming-soon{
  background-image:url('/assets/images/proximamente-light.jpg?v=45');
  background-color:#cfccca;
}

/* ===== v46 · Pantalla de carga (logo animado) al iniciar sesión ===== */
.splash{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; opacity:1; transition:opacity .35s ease; }
.splash.hide{ opacity:0; }
.splash-dark{ background:#0A0B0D; }
.splash-light{ background:#F4F5F7; }
.splash-vid{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }

/* ===== v48 · Créditos: chips de entidades ===== */
.ent-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border); border-radius:20px; padding:5px 10px 5px 12px; font-size:13px; font-weight:600; }
.ent-chip .ent-del{ border:none; background:transparent; color:var(--text-mute); cursor:pointer; font-size:17px; line-height:1; padding:0 2px; border-radius:50%; }
.ent-chip .ent-del:hover{ color:var(--danger); }

/* ===== Prendas ===== */
.dot.card { background: var(--info); }
.prenda-top{ width:100%; padding:16px 18px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.prenda-top-v{ font-size:26px; font-weight:800; margin-top:2px; }
.prenda-sum{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:14px; }

/* ===== Pagarés ===== */
.pag-items{ margin-top:10px; border-top:1px solid var(--border); padding-top:8px; }
.pag-item{ display:flex; align-items:center; gap:10px; padding:5px 0; }
.pag-item + .pag-item{ border-top:1px dashed var(--border); }
.pag-item-main{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; font-size:13.5px; flex:1; }
.pag-item.done .pag-item-main{ opacity:.6; }
.pag-venc{ font-size:12.5px; color:var(--text-mute); }
.pag-venc.soon{ color:var(--warn); font-weight:600; }
.pag-venc.late{ color:var(--danger); font-weight:700; }
.pag-check{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:2px solid var(--border-2);
  background:var(--surface-2); color:#fff; cursor:pointer; font-size:14px; line-height:1; display:grid; place-items:center;
  transition:background .15s, border-color .15s; }
.pag-check:hover{ border-color:var(--ok); }
.pag-check.on{ background:var(--ok); border-color:var(--ok); }
.pag-tot{ margin-top:9px; font-size:14px; }

.pag-alert{ border:1px solid var(--warn); background:var(--surface); border-left:4px solid var(--warn);
  border-radius:12px; padding:13px 15px; margin:0 0 16px; cursor:pointer; box-shadow:var(--shadow-sm); }
.pag-alert:hover{ box-shadow:var(--shadow-md); }
.pag-alert-h{ font-weight:800; font-size:14.5px; display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pag-alert-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:13px;
  padding:5px 0; border-top:1px dashed var(--border); }
.pag-alert-when{ color:var(--warn); font-weight:600; white-space:nowrap; }
.pag-alert-row.late .pag-alert-when{ color:var(--danger); font-weight:700; }
.pag-alert-who{ color:var(--text); }
.pag-alert-cta{ margin-top:9px; font-size:12.5px; font-weight:700; color:var(--accent); }

/* ===== Aviso de check-in pendiente (logística) ===== */
.chk-alert{ border:1px solid var(--info); background:var(--surface); border-left:4px solid var(--info);
  border-radius:12px; padding:6px; margin:0 0 6px; box-shadow:var(--shadow-sm); }
.chk-alert-h{ font-weight:700; font-size:13.5px; display:flex; align-items:flex-start; gap:8px;
  padding:9px 10px 10px; color:var(--text); }
.chk-alert-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px;
  border-radius:10px; cursor:pointer; }
.chk-alert-row + .chk-alert-row{ border-top:1px solid var(--border); }
.chk-alert-row:hover{ background:var(--surface-2); }
.chk-alert-dom{ font-weight:800; letter-spacing:.5px; font-size:14px; }
.chk-alert-veh{ flex:1; min-width:0; color:var(--text-mute); font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chk-alert-cta{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
  font-weight:700; color:var(--accent); white-space:nowrap; }
.chk-alert-cta svg{ width:15px; height:15px; }

/* ===== Vista previa de roles ("Ver cómo") ===== */
.preview-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap;
  padding:9px 16px; background:var(--accent-soft); border-bottom:1px solid var(--accent);
  color:var(--text); font-size:13.5px; }
.preview-bar-txt b{ color:var(--accent); }
.preview-bar-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.va-list{ display:flex; flex-direction:column; gap:8px; }
.va-opt{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  padding:12px 14px; border:1px solid var(--border); border-radius:11px; background:var(--surface);
  color:var(--text); transition:border-color .12s, background .12s; }
.va-opt:hover{ border-color:var(--accent); background:var(--surface-2); }
.va-opt.active{ border-color:var(--accent); background:var(--accent-soft); }
.va-opt-main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.va-opt-main .hint{ font-size:12px; }
.va-opt-dot{ color:var(--accent); font-size:12px; flex:0 0 auto; }
.dev-check{ display:flex; align-items:flex-start; gap:10px; padding:11px 12px; margin:2px 0 4px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface-2); cursor:pointer; }
.dev-check input{ margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--accent); }
.dev-check .hint{ font-size:12px; }

/* ===== Dólar + compartir agencia (panel de inicio) ===== */
.dolar-box{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.dolar-load{ color:var(--text-mute); font-size:13.5px; }
.dolar-h{ font-weight:800; font-size:14px; display:flex; align-items:center; gap:7px; margin-bottom:10px; }
.dolar-h .ico{ width:17px; height:17px; }
.dolar-cols{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dolar-col{ border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--surface-2); }
.dolar-col-h{ font-weight:800; font-size:13px; margin-bottom:6px; letter-spacing:.2px; }
.dolar-row{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px; padding:2px 0; color:var(--text-mute); }
.dolar-row b{ color:var(--text); font-weight:700; }
.dolar-row.prom{ margin-top:4px; padding-top:6px; border-top:1px dashed var(--border); }
.dolar-row.prom b{ color:var(--accent); }
.dolar-toma{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px;
  padding:11px 14px; border:1px solid var(--accent); border-radius:10px; background:var(--accent-soft); }
.dolar-toma span{ font-weight:800; font-size:13.5px; }
.dolar-toma b{ font-size:21px; font-weight:800; color:var(--accent); }
.wa-share-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:#25D366; border-color:#25D366; color:#fff; font-weight:700; margin-bottom:16px; text-decoration:none; padding:11px 16px; }
.wa-share-btn:hover{ filter:brightness(.97); }
.wa-share-btn .ico{ width:19px; height:19px; flex:0 0 auto; }
.wa-share-txt{ display:flex; flex-direction:column; align-items:center; line-height:1.25; }
.wa-share-txt b{ font-weight:700; font-size:14px; }
.wa-share-txt small{ font-weight:500; font-size:11.5px; opacity:.92; }

/* ===== Selector "¿Cuánto vale la transferencia?" (entre buscador y unidades) ===== */
.transfer-picker{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.transfer-picker .tp-head{ font-weight:800; font-size:14px; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.transfer-picker .tp-head .ico{ width:17px; height:17px; }
#tp-select{ width:100%; }
.tp-msg{ margin-top:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:13px 15px; }
.tp-sel-veh{ font-weight:800; font-size:14.5px; margin-bottom:10px; }
.tp-vals{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tp-vals .tv{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:11px 8px; }
.tp-vals .tv span{ font-size:12px; font-weight:700; color:var(--text-mute); }
.tp-vals .tv b{ font-size:19px; font-weight:800; color:var(--accent); }
.tp-inc{ margin-top:12px; font-size:13.5px; }
.tp-inc ul{ margin:6px 0 0; padding-left:18px; }
.tp-inc li{ margin:2px 0; }
.tp-msg .btn{ margin-top:12px; }