/* [ZSPORT-dealer] Dealer Portal — layout de dos columnas (menu + contenido).
   [ZSPORT-dealer-2] al final: el selector de idioma que el servidor inserta tras </nav>.
   Toma los tokens de app.css; define fallbacks por si falta alguno. Preparado
   para RTL (arabe): usa propiedades logicas y respeta [dir="rtl"]. */
:root {
  --dl-borde: var(--borde, #2a2e33);
  --dl-panel: var(--panel, #16191c);
  --dl-panel2: var(--panel2, #1c2024);
  --dl-acento: var(--redline, #e8622a);
  --dl-texto: var(--hueso, #e9e6e0);
}
.dealer-cuerpo { background: var(--carbon, #0e1012); color: var(--dl-texto); margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.dealer-barra { border-bottom: 1px solid var(--dl-borde); background: var(--dl-panel); }
.dealer-env { max-width: 1180px; margin: 0 auto; padding: 12px 16px; display: flex;
  align-items: center; gap: 18px; flex-wrap: wrap; }
.dealer-logo { font-weight: 800; letter-spacing: .04em; color: var(--dl-texto); text-decoration: none; }
.dealer-barra nav { display: flex; gap: 16px; flex-wrap: wrap; }
.dealer-barra nav a { color: var(--dl-texto); opacity: .8; text-decoration: none; font-size: .95rem; }
.dealer-barra nav a.dealer-activo, .dealer-barra nav a:hover { opacity: 1; color: var(--dl-acento); }

.dealer-app { max-width: 1180px; margin: 0 auto; padding: 16px; }
.dealer-wrap { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }
.dealer-col { min-width: 0; }

.dealer-nav { border: 1px solid var(--dl-borde); border-radius: 14px; background: var(--dl-panel);
  padding: 10px; position: sticky; top: 12px; }
.dealer-nav-tit { font-weight: 700; padding: 8px 10px; opacity: .7; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .08em; }
.dealer-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: var(--dl-texto); text-decoration: none; opacity: .85; }
.dealer-nav a:hover { background: var(--dl-panel2); opacity: 1; }
.dealer-nav a.activo { background: var(--dl-panel2); color: var(--dl-acento); opacity: 1; font-weight: 600; }
.dealer-nav-ico { width: 1.3em; text-align: center; }

.dealer-top { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; border: 1px solid var(--dl-borde); border-radius: 14px; background: var(--dl-panel);
  padding: 14px 16px; margin-bottom: 14px; }
.dealer-saldo { font-weight: 700; color: var(--dl-acento); }

.dealer-card { border: 1px solid var(--dl-borde); border-radius: 14px; background: var(--dl-panel);
  padding: 16px; margin-bottom: 14px; }
.dealer-card-tit { margin: 0 0 10px; font-size: 1.05rem; }
.dealer-mini { border: 1px solid var(--dl-borde); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.dealer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 8px; }

.dealer-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--dl-borde); background: transparent; color: var(--dl-texto); cursor: pointer;
  text-decoration: none; font: inherit; margin-top: 6px; }
.dealer-btn:hover { border-color: var(--dl-acento); }
.dealer-btn-primario { background: var(--dl-acento); border-color: var(--dl-acento); color: #16110c; font-weight: 600; }
.dealer-btn-chico { padding: 5px 10px; font-size: .85rem; margin: 0; }
.dealer-links { display: flex; gap: 8px; flex-wrap: wrap; }
.dealer-form { display: grid; gap: 6px; margin-top: 10px; max-width: 520px; }
.dealer-input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--dl-borde);
  background: transparent; color: inherit; font: inherit; }

.dealer-tabla { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: .92rem; }
.dealer-tabla th { text-align: start; opacity: .6; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--dl-borde); }
.dealer-tabla td { padding: 7px 8px; border-bottom: 1px solid var(--dl-borde); vertical-align: top; }

.dealer-centro { max-width: 620px; margin: 60px auto; text-align: center; display: grid; gap: 14px; justify-items: center; }

/* Arabe / RTL: el layout se espeja solo con propiedades logicas; el menu va a la derecha. */
[dir="rtl"] .dealer-tabla th, [dir="rtl"] .dealer-tabla td { text-align: right; }

@media (max-width: 760px) {
  .dealer-wrap { grid-template-columns: 1fr; }
  .dealer-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .dealer-nav-tit { width: 100%; }
  .dealer-nav a { flex: 1 1 auto; }
}

/* [ZSPORT-dealer-2] selector ES/EN/PT/AR (lo inserta vestir() despues del </nav>) */
.dealer-barra .idiomas { display: flex; gap: 8px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; margin-inline-start: auto; }
.dealer-barra .idioma { color: var(--dl-texto); opacity: .6; text-decoration: none; }
.dealer-barra .idioma:hover { opacity: 1; color: var(--dl-acento); text-decoration: none; }
.dealer-barra .idioma-activo { opacity: 1; }

/* [ZSPORT-dealer-3] la pantalla centrada (login / 403) no se estira al alto del #app (grid en app.css):
   sin esto las filas auto se repartian la pantalla y el boton llenaba su fila. */
.dealer-centro { align-content: start; align-items: start; align-self: start; }

/* [ZSPORT-dealer-4] app.css trae #app{display:flex;height:100vh;overflow:hidden} para el panel;
   aca #app es la pagina del dealer: bloque normal, alto por contenido, con scroll de pagina. */
#app.dealer-app { display: block !important; height: auto !important; min-height: 60vh;
  overflow: visible !important; }

/* [ZSPORT-dealer-t6] franja de KPIs arriba del portal (propiedades logicas: se espeja sola en RTL) */
.dealer-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  margin-block-end: 14px; }
.dealer-kpi { display: block; border: 1px solid var(--dl-borde); border-radius: 12px; background: var(--dl-panel);
  padding-block: 10px; padding-inline: 14px; color: var(--dl-texto); text-decoration: none; min-width: 0; }
.dealer-kpi:hover { border-color: var(--dl-acento); }
.dealer-kpi-n { font-size: 1.45rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.dealer-kpi-l { font-size: .74rem; opacity: .7; text-transform: uppercase; letter-spacing: .06em; margin-block-start: 2px; }
/* [ZSPORT-fix-front-rtl-kpi] en arabe el espaciado entre letras separa las letras y corta las ligaduras (y no hay mayusculas) */
[dir="rtl"] .dealer-kpi-l, [dir="rtl"] .dealer-nav-tit { letter-spacing: 0; text-transform: none; }
.dealer-kpi-s { font-size: .8rem; color: #4caf7d; margin-block-start: 4px; }
.dealer-kpi-alerta .dealer-kpi-n { color: #e3ad46; }
@media (max-width: 760px) { .dealer-kpis { grid-template-columns: repeat(2, 1fr); } }