/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.24_@types+node@24.13.3_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/.pnpm/next@15.5.24_@types+node@24.13.3_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/.pnpm/next@15.5.24_@types+node@24.13.3_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Sora","arguments":[{"subsets":["latin"],"weight":["500","600","700"],"variable":"--font-sora"}],"variableName":"sora"} ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/c5f10e9e72d35c52-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/3dc379dc9b5dec12-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/c5f10e9e72d35c52-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/3dc379dc9b5dec12-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/c5f10e9e72d35c52-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/3dc379dc9b5dec12-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Sora Fallback';src: local("Arial");ascent-override: 85.29%;descent-override: 25.50%;line-gap-override: 0.00%;size-adjust: 113.73%
}.__className_f78264 {font-family: 'Sora', 'Sora Fallback';font-style: normal
}.__variable_f78264 {--font-sora: 'Sora', 'Sora Fallback'
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.24_@types+node@24.13.3_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/.pnpm/next@15.5.24_@types+node@24.13.3_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/.pnpm/next@15.5.24_@types+node@24.13.3_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Inter","arguments":[{"subsets":["latin"],"weight":["400","500","600","700"],"variable":"--font-inter"}],"variableName":"inter"} ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_8b3a0b {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_8b3a0b {--font-inter: 'Inter', 'Inter Fallback'
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.24_@types+node@24.13.3_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.24_@types+node@24.13.3_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  /* ===== Manual de marca ZOLTA v1.2 (2026-09-09), página 10/22 "Sistema UI" — valores
     LOCKED, no aproximados. Los dos sistemas de tokens que ya convivían en este archivo
     (--bg/--surface/... y --evm-*) apuntan ahora a los mismos valores reales del manual en
     vez de a los tonos provisionales de antes — se corrigen los VALORES, no se renombra nada,
     para no romper ninguna página que ya use uno u otro. */
  --bg: #061426;
  --surface: #0d2038;
  --border: #1e3657;
  --text: #f7fafc;
  --text-dim: #a9b7c9;
  /* --accent = semántico "online/activo/éxito" en páginas viejas, nunca el accent de un
     módulo (regla del manual: "status colors never inherit product accent") — Success
     locked. */
  --accent: #22c55e;
  /* CTA global por default (manual: "Global CTA = Electric Teal") para páginas sin un
     módulo ZOLTA específico todavía asignado (admin, login, settings). */
  --primary: #00b3a4;
  --danger: #ef4444;
  --warn: #f59e0b;

  /* ===== Design system evm-* (2026-09-07) — mismos valores ZOLTA, token names sin tocar. ===== */
  --evm-bg-app: #061426;
  --evm-bg-main: #061426;
  --evm-bg-sidebar: #08182b;

  --evm-card: #0d2038;
  --evm-card-secondary: #0d2038;
  --evm-card-elevated: #102a46;
  --evm-card-hover: #102a46;
  --evm-table-header: rgba(255, 255, 255, 0.02);
  --evm-input: #0d2038;

  --evm-border-soft: rgba(120, 160, 220, 0.14);
  --evm-border-card: #1e3657;
  --evm-border-strong: rgba(120, 160, 220, 0.12);
  --evm-border-focus: rgba(88, 214, 255, 0.35);

  --evm-text-primary: #f7fafc;
  --evm-text-secondary: #c8d3e1;
  --evm-text-muted: #a9b7c9;

  /* Semánticos de estado — nunca heredan el accent de un módulo (manual, regla LOCKED). */
  --evm-green: #22c55e;
  --evm-green-soft: rgba(34, 197, 94, 0.14);
  --evm-blue: #06b6d4;
  --evm-blue-soft: rgba(6, 182, 212, 0.14);
  --evm-purple: #8b5cf6;
  --evm-purple-soft: rgba(139, 92, 246, 0.14);
  --evm-orange: #f59e0b;
  --evm-orange-soft: rgba(245, 158, 11, 0.14);

  --evm-success: #22c55e;
  --evm-warning: #f59e0b;
  --evm-danger: #ef4444;
  --evm-info: #06b6d4;
  --evm-danger-soft: rgba(239, 68, 68, 0.14);

  /* Accent por módulo de producto (manual, página 22/22 — bloque literal "product accent"),
     LOCKED, distinto de los semánticos de arriba. Dealer usa slate como default de la app
     interna; cada tenant dealer (ej. Changan) sigue pisándolo con su propio primaryColor.
     Fleet pasó de azul a Electric Teal #00B3A4 (sistema visual EV Fleet, 2026-09-14) — mismo
     valor que CSMS a propósito (ambos son "producto ZOLTA propio", a diferencia de
     Dealer/Public que son marca de terceros); se diferencian por contexto de navegación, no
     por color. Consumido por (dashboard)/layout.tsx (accent del grupo de nav Fleet) y por los
     bloques .zolta-ev-fleet de abajo — nunca reemplaza --primary/evm-btn-primary global. */
  --zolta-accent-csms: #00b3a4;
  --zolta-accent-fleet: #00b3a4;
  /* 2026-09-15: --zolta-accent-dealer es SOLO el fallback por default — cubre el instante
     antes de que cargue el color propio de un distribuidor y el edge case SSR de un
     distribuidor sin primaryColor configurado todavía. NUNCA es el color que de verdad se
     renderiza para un tenant: eso siempre sale de distributor.primaryColor de la DB (ej.
     Changan "#0b467f"), convertido a las 5 variantes --dealer-accent* por accentVariants()
     (apps/web/src/lib/contrast.ts) e inyectado inline por dealer/[slug]/layout.tsx en el div
     .zolta-dealer-portal. Todo CSS de acá para abajo que necesite "el color del distribuidor"
     debe leer var(--dealer-accent), nunca este token ni un hex hardcodeado — ver bloque
     .zolta-dealer-portal más abajo. */
  --zolta-accent-dealer: #64748b;
  --zolta-accent-public: #c75b3f;

  /* Triple RGB (sin rgba() acá, para poder inyectar la opacidad propia de cada box-shadow:
     "0 8px 24px rgba(var(--evm-shadow-rgb), 0.24)") — negro puro en oscuro, navy tenue en
     claro (auditoría de diseño 2026-09-13: un shadow negro sobre fondo blanco se ve como
     mugre, no como profundidad). */
  --evm-shadow-rgb: 0, 0, 0;
}

/* ===== Light theme (manual de marca ZOLTA, página 10/22 "Sistema UI" — "Light mode",
   valores LOCKED). Dark sigue siendo el default del producto (regla explícita del manual:
   "dark mode is the product default") — este bloque solo aplica cuando [data-theme="light"]
   está puesto en <html>, algo que solo pasa si el usuario lo elige a mano en Settings (ver
   ThemeToggle.tsx). Los semánticos de estado (success/warning/danger/info) y los accent por
   módulo NO se redefinen acá a propósito — son los mismos en los dos temas, el manual no
   pide variantes de esos por tema. */
:root[data-theme="light"] {
  --bg: #f7f9fc;
  --surface: #ffffff;
  --border: #d8e2ec;
  --text: #10243e;
  --text-dim: #66758a;

  --evm-bg-app: #f7f9fc;
  --evm-bg-main: #f7f9fc;
  --evm-bg-sidebar: #ffffff;

  --evm-card: #ffffff;
  --evm-card-secondary: #ffffff;
  --evm-card-elevated: #eff4f8;
  --evm-card-hover: #eff4f8;
  --evm-table-header: rgba(16, 36, 62, 0.03);
  --evm-input: #ffffff;

  --evm-border-soft: rgba(16, 36, 62, 0.08);
  --evm-border-card: #d8e2ec;
  --evm-border-strong: rgba(16, 36, 62, 0.12);
  /* "Focus ring: product accent" (manual) — Electric Teal, el CTA global. */
  --evm-border-focus: rgba(0, 179, 164, 0.35);

  --evm-text-primary: #10243e;
  --evm-text-secondary: #3d5064;
  --evm-text-muted: #66758a;

  --evm-shadow-rgb: 16, 36, 62;
}

* {
  box-sizing: border-box;
}

/* El navegador le pone ~1em de margen arriba/abajo a <p> por default — sin resetear esto, se
   suma al marginBottom que ya ponemos en el elemento anterior (título, etc.) y separa todo
   más de lo que el diseño pide. Cada uso sigue controlando su propio espaciado con margin
   explícito, como ya se hace en todas las páginas. */
p {
  margin: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Manual de marca ZOLTA, página 11/22: Inter es la tipografía default de product UI/data
     (tablas, mapas, formularios, dashboards, body copy) — Sora queda reservada para
     headlines/marketing vía .zolta-heading, nunca al revés. */
  font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Headlines de marketing/marca (manual, página 11/22) — usar solo en hero/landing/decks, no
   en headers de producto (esos siguen con Inter, ver tabla "Product H1" del manual). */
.zolta-heading {
  font-family: var(--font-sora), var(--font-inter), sans-serif;
}

a {
  color: inherit;
}

.container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 24px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge-online {
  background: rgba(59, 166, 118, 0.15);
  color: var(--accent);
}

.badge-offline {
  background: rgba(217, 83, 79, 0.15);
  color: var(--danger);
}

.badge-info {
  background: rgba(59, 130, 246, 0.15);
  color: var(--primary);
}

/* Scrollbar delgada para el sidebar — el default del navegador (flechitas + barra gruesa,
   estilo Windows viejo) hacía que el sidebar se viera roto en vez de "no cabe, hace scroll". */
.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}
.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

/* Sidebar colapsable (pedido explícito 2026-09-12, toda la plataforma vía AppSidebar.tsx) —
   ancho variable con transición, expandido por default. La lógica de qué clase aplicar vive
   en React (estado real, persistido en localStorage); acá solo el tamaño/comportamiento. */
/* Auditoría de diseño 2026-09-13, decisión global de light mode: el sidebar (CSMS, Fleet Y
   white-label) se queda SIEMPRE azul oscuro, tema claro u oscuro — solo el área principal
   cambia de tema. En vez de un segundo sistema de diseño paralelo, se re-pinnean acá mismo
   los valores de los tokens (ambos sistemas: evm-* y el viejo --bg/--text/etc, porque
   componentes del sidebar usan los dos — UserMenu.tsx/TimezoneToggle.tsx todavía usan el
   viejo) a sus valores de OSCURO, scoped a .evm-sidebar — cualquier descendiente (nav, labels
   de sección, tooltips, dropdown de UserMenu, "Próximamente") hereda automáticamente sin
   tocar esos componentes uno por uno. Esto es lo único que hace que :root[data-theme="light"]
   no se filtre adentro del sidebar. */
.evm-sidebar {
  --bg: #061426;
  --surface: #0d2038;
  --border: #1e3657;
  --text: #f7fafc;
  --text-dim: #a9b7c9;

  --evm-bg-sidebar: #08182b;
  --evm-card: #0d2038;
  --evm-card-elevated: #102a46;
  --evm-input: #0d2038;
  --evm-border-soft: rgba(120, 160, 220, 0.14);
  --evm-border-card: #1e3657;
  --evm-border-strong: rgba(120, 160, 220, 0.12);
  --evm-text-primary: #f7fafc;
  --evm-text-secondary: #c8d3e1;
  --evm-text-muted: #a9b7c9;

  width: 210px;
  flex-shrink: 0;
  background: var(--evm-bg-sidebar);
  border-right: 1px solid rgba(120, 160, 220, 0.14);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width 0.15s ease;
  z-index: 40;
}
.evm-sidebar-collapsed {
  width: 64px;
  padding: 16px 8px;
}

.evm-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--evm-border-strong);
  border-radius: 8px;
  color: var(--evm-text-secondary);
  cursor: pointer;
  padding: 0;
}
.evm-sidebar-toggle:hover {
  background: var(--evm-card-elevated);
  color: var(--evm-text-primary);
}

/* Tooltip CSS puro (sin JS de posicionamiento) para los íconos del sidebar colapsado — sale
   fijo a la derecha del ícono, mismo patrón que un `title` nativo pero con el estilo del
   design system en vez del tooltip feo del navegador. */
.evm-nav-tooltip {
  position: relative;
}
.evm-nav-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--evm-card-elevated);
  border: 1px solid var(--evm-border-strong);
  color: var(--evm-text-primary);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(var(--evm-shadow-rgb), 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
  z-index: 50;
}
.evm-nav-tooltip:hover::after {
  opacity: 1;
}

.evm-sidebar-backdrop {
  display: none;
}

/* Drawer móvil — mismo botón de tres líneas, comportamiento distinto por viewport. Por
   default (desktop) el sidebar fijo ya está visible y esta media query no aplica nada. */
@media (max-width: 900px) {
  .evm-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    transform: translateX(-100%);
    box-shadow: 0 0 40px rgba(var(--evm-shadow-rgb), 0.4);
  }
  /* En móvil, "colapsado" (el default persistido de escritorio) no debe angostar el drawer —
     el estado que importa acá es mobileOpen, no collapsed. */
  .evm-sidebar-collapsed {
    width: 240px;
    padding: 16px 12px;
  }
  .evm-sidebar-mobile-open {
    transform: translateX(0);
  }
  .evm-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(3, 10, 22, 0.6);
    z-index: 39;
  }
}

/* MapLibre inyecta sus propios controles (+/-, brújula) con fondo blanco por default — sin
   esto se ven como una caja blanca chocando contra el mapa oscuro. */
.maplibregl-ctrl-group {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.maplibregl-ctrl-group button {
  background: transparent !important;
}
.maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--border) !important;
}
/* Auditoría de diseño 2026-09-13, hallazgo real: este invert se aplicaba SIEMPRE, sin mirar
   el tema — los íconos de MapLibre ya vienen oscuros por default, así que en tema claro
   quedaban casi invisibles sobre .evm-ctrl-group (blanco). Solo tiene sentido invertirlos
   quedarlos claros cuando el fondo alrededor es oscuro. */
:root:not([data-theme="light"]) .maplibregl-ctrl-icon {
  filter: invert(1) brightness(1.4);
}
.maplibregl-ctrl-attrib {
  background: var(--evm-card-elevated) !important;
}
.maplibregl-ctrl-attrib a {
  color: var(--text-dim) !important;
}
.maplibregl-popup-content {
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 24px rgba(var(--evm-shadow-rgb), 0.4) !important;
}
.maplibregl-popup-tip {
  border-top-color: var(--surface) !important;
  border-bottom-color: var(--surface) !important;
}
.maplibregl-popup-close-button {
  color: var(--text-dim) !important;
}
/* Reemplaza el color:#666 inline que traían los popups de SitesMap/FleetMap (auditoría de
   diseño 2026-09-13) — hardcodeado no seguía el tema, quedaba casi ilegible en modo oscuro. */
.evm-map-popup-address {
  color: var(--evm-text-muted);
}

/* El contenedor del mapa entra en fullscreen real vía requestFullscreen() ("Ver mapa
   completo") — sin esto se ve como la caja chica de 360px estirada, en vez de ocupar la
   pantalla completa. */
div:-webkit-full-screen {
  height: 100vh !important;
  border-radius: 0 !important;
}
div:fullscreen {
  height: 100vh !important;
  border-radius: 0 !important;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

th {
  color: var(--text-dim);
  font-weight: 600;
}

input,
button {
  font-family: inherit;
  font-size: 14px;
}

input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  width: 100%;
}

button {
  /* --primary (Electric Teal), no --accent — --accent es el semántico de estado
     "online/éxito" (manual ZOLTA: "status colors never inherit product accent"), un botón
     genérico es un CTA, no un indicador de estado. */
  background: var(--primary);
  color: #06120c;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.error {
  color: var(--danger);
  font-size: 14px;
}

/* ============================================================================
   Design system "evm-*" — validado en /sites (2026-09-07). Clases nuevas, con
   prefijo propio, para no afectar nada que ya use .card/.badge/etc. Pensado
   para reusarse en el resto de CSMS Core más adelante, sin migrar todavía.
   ============================================================================ */

/* El estado activo se pone por inline style (necesita el degradado verde puntual); el
   default/hover del resto de los links vive acá — un inline style de background en el link
   activo le gana en especificidad a :hover, así que el hover normal solo debe depender de
   esta clase (nunca fijar background inline cuando NO está activo). */
.evm-nav-link {
  background: transparent;
}
.evm-nav-link:hover {
  background: rgba(255, 255, 255, 0.035);
  color: var(--evm-text-primary) !important;
}

.evm-main {
  background: linear-gradient(180deg, var(--evm-bg-main) 0%, var(--evm-bg-app) 100%);
  min-height: 100vh;
}
/* El glow radial azul es un efecto de tema oscuro — auditoría 2026-09-13: "no aplicar glow
   azul fuerte sobre el body blanco", se veía como una mancha sucia en tema claro. */
:root:not([data-theme="light"]) .evm-main {
  background:
    radial-gradient(circle at 45% -10%, rgba(35, 82, 150, 0.13), transparent 38%),
    linear-gradient(180deg, var(--evm-bg-main) 0%, var(--evm-bg-app) 100%);
}

/* Bajado de 39px (feedback directo 2026-09-11: "los titulos estan enormes" comparado al logo
   del sidebar — el logo recién se recortó de su padding transparente, ver logos/, pero el
   desbalance real era el título, no el logo). 24px es el tamaño real que compite bien contra
   un logo de sidebar de ~180px de ancho, sin dejar de leerse como el título de la página. */
.evm-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--evm-text-primary);
  margin: 0;
}

.evm-subtitle {
  font-size: 13px;
  color: var(--evm-text-muted);
}

.evm-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #39d98a 0%, #2ec27e 100%);
  color: #04111f;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  text-decoration: none;
  border: none;
  box-shadow: 0 6px 18px rgba(57, 217, 138, 0.22);
  transition: filter 0.15s, transform 0.15s;
  cursor: pointer;
}
.evm-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.evm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
}
@media (max-width: 1100px) {
  .evm-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .evm-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Modificadores de columnas — mismo grid base (.evm-kpi-grid da display/gap), solo cambia
   cuántas columnas en desktop. Clase aparte en vez de inline style: un inline
   gridTemplateColumns le gana en especificidad a los @media de arriba y rompe el
   responsive (encontrado en Fleet Analysis, 5 KPIs — la fila no colapsaba en mobile). */
.evm-kpi-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
/* minmax(0, 1fr) — evm-kpi-grid-5 hoy solo lo usan las 2 páginas EV Fleet con 5 KPIs; un
   track "1fr" desnudo tiene mínimo implícito "auto" (el ancho del label, que es nowrap),
   y eso empujaba la fila más ancha que el viewport en 1440px real (hallazgo real, scroll
   horizontal confirmado en EV Fleet Analysis). */
.evm-kpi-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.evm-kpi-grid-6 {
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1100px) {
  .evm-kpi-grid-5,
  .evm-kpi-grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .evm-kpi-grid-2,
  .evm-kpi-grid-5,
  .evm-kpi-grid-6 {
    grid-template-columns: 1fr;
  }
}

.evm-kpi-card {
  display: flex;
  align-items: center;
  gap: 18px;
  /* Antes un gradiente hardcodeado (#0d1c33→#0a172b) pensado solo para fondo oscuro — en
     tema claro se veía como una tarjeta oscura fija sobre una app blanca. var(--evm-card),
     mismo token plano que ya usa .evm-panel, se adapta solo por tema. */
  background: var(--evm-card);
  border: 1px solid var(--evm-border-card);
  border-radius: 18px;
  padding: 24px 28px;
  box-shadow: 0 8px 24px rgba(var(--evm-shadow-rgb), 0.24);
}

.evm-kpi-icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.evm-kpi-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--evm-text-primary);
}
.evm-kpi-value {
  font-size: 34px;
  font-weight: 700;
  color: var(--evm-text-primary);
  line-height: 1.15;
}
.evm-kpi-helper {
  font-size: 13px;
  color: var(--evm-text-secondary);
}

/* Variante compacta — pedida explícitamente para el portal dealer (2026-09-09): los tiles
   estándar (.evm-kpi-card) se ven demasiado grandes/con fuente grande comparado al render de
   venta. Clase aparte en vez de tocar .evm-kpi-card: ese es el tile ya aprobado en CSMS
   Core/Fleet, no se toca. */
.evm-kpi-card-compact {
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
}
.evm-kpi-icon-compact {
  width: 32px;
  height: 32px;
}
.evm-kpi-value-compact {
  font-size: 18px;
  line-height: 1.1;
}
.evm-kpi-label-compact {
  font-size: 11px;
  white-space: nowrap;
}
.evm-kpi-helper-compact {
  font-size: 10.5px;
}

/* Variante "dense" — 2026-09-12, calculada a partir de medir el render aprobado de Fleet
   Analysis (tile ~92px de alto contra ~269px de ancho, en una fila de 5). Ni .evm-kpi-card
   (24px padding/54px ícono/34px número, para filas de 4 en CSMS Core/Fleet Overview) ni
   .evm-kpi-card-compact (12px/32px/18px, pensado para el widget angosto del dealer) daban ese
   resultado — el primero se ve enorme en 5 columnas, el segundo hacía wrap de labels largos
   igual porque el problema real era ancho de columna, no tamaño de fuente. Estos valores están
   elegidos para que label+helper quepan en una sola línea en un tile de ~280-300px de ancho
   real (5 columnas en un content area típico), no solo "más chico a ojo". */
.evm-kpi-card-dense {
  gap: 14px;
  padding: 16px 20px;
  border-radius: 16px;
}
.evm-kpi-icon-dense {
  width: 44px;
  height: 44px;
}
.evm-kpi-value-dense {
  font-size: 26px;
  line-height: 1.15;
}
.evm-kpi-label-dense {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evm-kpi-helper-dense {
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grids del dashboard dealer (auditoría 2026-09-13) — proporciones exactas contra el render,
   antes flex-basis aproximados daban anchos irregulares en vez de columnas reales. */
.evm-dealer-map-row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-gap: 16px;
  gap: 16px;
}
.evm-fleet-map-row {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}
/* Fleet Analysis — fila de tendencia (línea) + eficiencia por modelo (barras). Corrección
   2026-09-13: reemplaza un flex aproximado (flex: "3 1 460px" / "2 1 320px") que dejaba a las
   dos tarjetas con alturas de gráfico distintas (240px vs 180px) — la grid fuerza el mismo
   ancho relativo, la altura igual la da compartir el mismo padding/alto de plot en el JSX. */
.evm-fleet-trend-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-gap: 16px;
  gap: 16px;
  align-items: stretch;
}
.evm-settings-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
  /* stretch (no "start") — auditoría 2026-09-13, hallazgo real: con PowerFill mostrando 3
     tablas y Wanway 2, "start" dejaba a Wanway visiblemente más baja que su vecina. Ver
     IntegrationCard en fleet/settings/page.tsx para cómo se ancla el footer abajo del todo. */
  align-items: stretch;
}
@media (max-width: 1100px) {
  .evm-settings-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* <details> nativo, sin JS — cerrado queda en ~64px (el padding del <summary>), abierto
   crece con el contenido. Mismo look que .evm-panel para que no se sienta un componente
   aparte. */
.evm-collapsible-guide {
  background: var(--evm-card);
  border: 1px solid var(--evm-border-card);
  border-radius: 18px;
  padding: 0 20px;
}
.evm-collapsible-guide summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  font-size: 16px;
  font-weight: 650;
  color: var(--evm-text-primary);
  cursor: pointer;
  list-style: none;
}
.evm-collapsible-guide summary::-webkit-details-marker {
  display: none;
}
.evm-collapsible-guide[open] {
  padding-bottom: 20px;
}
.evm-dealer-triple-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
}
/* Corrección 2026-09-13, hallazgo real (dos capas):
   1) min-height:430 en ambas tarjetas dejaba ~200px de espacio muerto en la del gráfico (su
      contenido real medía ~230px) — el mapa en cambio ya excede 430px solo, por su propio
      aspect ratio (ver EsDepartmentMap.tsx), así que a él nunca le hizo falta ese piso.
   2) Un primer intento de arreglarlo con "stretch" de grid + un gráfico que medía su propio
      contenedor (ResizeObserver) para llenar el alto disponible entró en loop: el alto del
      gráfico pasaba a contar como contenido de la fila de la grid, la fila crecía para
      acomodarlo, el observer veía más espacio disponible y el gráfico crecía de nuevo — la
      tarjeta crecía sin parar en cada resize. La tarjeta del gráfico no necesita igualar la
      altura del mapa (el propio ticket de corrección da un rango de alto total ~330-370px,
      claramente menor a los ~580px que mide el mapa) — con una altura FIJA (no reactiva a su
      propio contenido) el loop desaparece de raíz. */
/* Revertido 2026-09-16 (bug real reportado por el usuario: la tarjeta del gráfico crecía
   infinitamente). El cambio de 2026-09-15 de abajo (min-height en vez de height fijo, "para
   alinear el borde inferior con el mapa") REINTRODUJO exactamente el loop de ResizeObserver
   que el comentario de 2026-09-13 de arriba ya documentaba y arregla con una altura FIJA — con
   min-height la tarjeta vuelve a ser reactiva a su propio contenido medido (DailyKwhChart mide
   su contenedor con ResizeObserver y le devuelve esa altura al SVG), así que cada medición la
   hace crecer un poco, lo que dispara otra medición, sin techo. .evm-dealer-map-card sí puede
   quedarse en min-height (EsDepartmentMap usa width:100%/height:auto por aspect-ratio fijo del
   viewBox, nunca se automide) — el desalineo visual del borde inferior contra el mapa es un
   costo aceptado frente a un layout que crece sin parar. */
.evm-dealer-map-card {
  min-height: 430px;
}
.evm-dealer-energy-card {
  height: 390px;
}
@media (max-width: 1100px) {
  .evm-dealer-map-card {
    min-height: 0;
  }
  .evm-dealer-energy-card {
    height: 320px;
  }
}
@media (max-width: 1100px) {
  .evm-dealer-map-row {
    grid-template-columns: 1fr;
  }
  .evm-dealer-triple-row {
    grid-template-columns: 1fr;
  }
  .evm-fleet-map-row {
    grid-template-columns: 1fr;
  }
  .evm-fleet-trend-row {
    grid-template-columns: 1fr;
  }
}

/* Portal dealer white-label (2026-09-15) — reglas de interacción scoped a
   .zolta-dealer-portal (el wrapper inyectado por dealer/[slug]/layout.tsx, ver comentario en
   --zolta-accent-dealer arriba). Todas leen var(--dealer-accent*), nunca un hex fijo, para que
   cada distribuidor se vea con SU color sin tocar esta hoja. Look corporativo/plano pedido
   explícitamente por el usuario: nada de glassmorphism (backdrop-filter/blur), sombra fuerte
   ni gradiente decorativo acá — solo color sólido + borde 1px, mismo lenguaje que .evm-panel. */
.zolta-dealer-portal .evm-dealer-nav-active {
  background: var(--dealer-accent-soft);
  border: 1px solid var(--dealer-accent-border);
  color: var(--dealer-accent);
}
.zolta-dealer-portal .evm-dealer-btn-primary,
/* Mismo patrón que .zolta-ev-fleet .evm-btn-primary arriba — la acción primaria del portal
   dealer también reusa el botón primario GLOBAL (.evm-btn-primary), nunca una clase paralela
   que solo un componente recuerde usar. Sin esta regla, cualquier página dealer que arme su
   botón con la clase estándar (Modelos, Clientes) se quedaba con el verde genérico de la
   plataforma en vez del color real del distribuidor (hallazgo 2026-09-15, screenshot QA). */
.zolta-dealer-portal .evm-btn-primary {
  background: var(--dealer-accent);
  color: var(--dealer-accent-contrast);
  border: none;
  box-shadow: none;
}
.zolta-dealer-portal .evm-dealer-btn-primary:hover,
.zolta-dealer-portal .evm-btn-primary:hover:not(:disabled) {
  background: var(--dealer-accent-hover);
  filter: none;
  transform: none;
}
.zolta-dealer-portal .evm-dealer-focusable:focus-visible,
.zolta-dealer-portal input:focus-visible,
.zolta-dealer-portal select:focus-visible,
.zolta-dealer-portal button:focus-visible {
  outline: none;
  border-color: var(--dealer-accent);
  box-shadow: 0 0 0 3px var(--dealer-accent-soft);
}
.zolta-dealer-portal .evm-dealer-tab {
  color: var(--evm-text-muted);
  border-bottom: 2px solid transparent;
}
.zolta-dealer-portal .evm-dealer-tab-active {
  color: var(--dealer-accent);
  border-bottom: 2px solid var(--dealer-accent);
}
.zolta-dealer-portal .evm-dealer-model-card {
  border: 1px solid var(--evm-border-card);
}
.zolta-dealer-portal .evm-dealer-model-card-selected {
  border: 1.5px solid var(--dealer-accent);
  background: var(--dealer-accent-soft);
}

.evm-map-shell {
  background: var(--evm-card);
  border: 1px solid rgba(90, 130, 190, 0.16);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 10px 30px rgba(var(--evm-shadow-rgb), 0.25);
  overflow: hidden;
}

.evm-panel {
  background: var(--evm-card);
  border: 1px solid rgba(90, 130, 190, 0.16);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(var(--evm-shadow-rgb), 0.2);
  overflow: hidden;
}

.evm-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  flex-wrap: wrap;
}

.evm-panel-title {
  font-size: 16px;
  font-weight: 650;
  color: var(--evm-text-primary);
}

.evm-search {
  background: var(--evm-input);
  border: 1px solid var(--evm-border-strong);
  color: var(--evm-text-primary);
  border-radius: 12px;
  padding: 9px 12px 9px 34px;
  font-size: 13px;
  width: 260px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.evm-search::placeholder {
  color: var(--evm-text-muted);
}
.evm-search:focus {
  outline: none;
  border-color: var(--evm-border-focus);
  box-shadow: 0 0 0 3px rgba(88, 214, 255, 0.08);
}

.evm-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--evm-input);
  border: 1px solid var(--evm-border-strong);
  color: var(--evm-text-secondary);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.evm-ghost-btn:hover {
  background: var(--evm-card-elevated);
  color: var(--evm-text-primary);
}

.evm-table {
  width: 100%;
  border-collapse: collapse;
}
.evm-table thead th {
  background: var(--evm-table-header);
  color: var(--evm-text-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(120, 160, 220, 0.08);
}
/* Auditoría de diseño 2026-09-13, hallazgo real: 62px/20px de padding daba filas mucho más
   altas que el render aprobado (~42-44px) — bajado a una densidad de tabla de datos real. */
.evm-table tbody td {
  padding: 10px 16px;
  height: 44px;
  border-bottom: 1px solid rgba(120, 160, 220, 0.08);
  font-size: 13px;
  font-weight: 500;
  color: var(--evm-text-primary);
}
.evm-table tbody tr {
  background: transparent;
  transition: background 0.12s;
}
.evm-table tbody tr:hover {
  background: rgba(80, 120, 180, 0.045);
}
.evm-table tbody tr:last-child td {
  border-bottom: none;
}

.evm-row-link {
  color: var(--evm-text-secondary);
  text-decoration: none;
  font-weight: 600;
}
.evm-row-link:hover {
  color: var(--evm-text-primary);
  text-decoration: underline;
}

.evm-location-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--evm-green-soft);
  border: 1px solid rgba(57, 217, 138, 0.20);
  color: var(--evm-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.evm-pill-fleet {
  display: inline-block;
  background: rgba(34, 197, 94, 0.14);
  color: #5ee7a5;
  border: 1px solid rgba(57, 217, 138, 0.20);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
}

.evm-pill-neutral {
  display: inline-block;
  background: var(--evm-blue-soft);
  color: var(--evm-blue);
  border: 1px solid rgba(78, 161, 255, 0.20);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
}

.evm-status-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6bf0af;
  font-weight: 500;
}
.evm-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--evm-green);
  box-shadow: 0 0 5px rgba(57, 217, 138, 0.5);
  display: inline-block;
}

.evm-action-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--evm-input);
  border: 1px solid var(--evm-border-strong);
  border-radius: 7px;
  color: var(--evm-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.evm-action-btn:hover {
  background: var(--evm-card-elevated);
  color: var(--evm-text-primary);
}

.evm-map-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Antes rgba(11,21,38,.85) fijo — un chip casi negro flotando sobre un mapa que ahora
     también puede ser claro. var(--evm-card-elevated) se adapta solo por tema. */
  background: var(--evm-card-elevated);
  border: 1px solid var(--evm-border-card);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--evm-text-secondary);
}

.evm-map-expand {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--evm-card-elevated);
  border: 1px solid var(--evm-border-card);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--evm-text-primary);
  cursor: pointer;
}

/* ============================================================================
   Extensión del design system evm-* al resto de CSMS Core (2026-09-07) — Sites
   sigue siendo la fuente de verdad, todo lo de acá reusa exactamente sus mismos
   valores efectivos (radius/border/shadow/spacing), solo generalizados para
   poder aplicarse fuera de Sites (filtros, botones, badges de estado, tablas de
   otras páginas). Nada de esto modifica una clase evm-* ya existente.
   ============================================================================ */

.evm-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.evm-select {
  background: var(--evm-input);
  border: 1px solid var(--evm-border-strong);
  color: var(--evm-text-primary);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.evm-select:focus {
  outline: none;
  border-color: var(--evm-border-focus);
  box-shadow: 0 0 0 3px rgba(88, 214, 255, 0.08);
}

.evm-segmented {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--evm-input);
  border: 1px solid var(--evm-border-strong);
  border-radius: 12px;
  padding: 4px;
}
.evm-segmented-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--evm-text-secondary);
  border-radius: 9px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.evm-segmented-item:hover {
  color: var(--evm-text-primary);
}
.evm-segmented-item.is-active {
  background: var(--evm-green-soft);
  color: var(--evm-green);
  font-weight: 600;
}

/* Jerarquía de botones — brand (verde) reservado para la acción primaria de cada página;
   el resto de las variantes son semánticas de riesgo/estado, no decorativas. */
.evm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 16px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s, background 0.15s, transform 0.15s;
}
.evm-btn-block {
  width: 100%;
  justify-content: center;
}
.evm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.evm-btn-primary {
  background: linear-gradient(180deg, #39d98a 0%, #2ec27e 100%);
  color: #04111f;
  box-shadow: 0 6px 18px rgba(57, 217, 138, 0.22);
}
.evm-btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.evm-btn-secondary {
  background: var(--evm-input);
  border-color: var(--evm-border-strong);
  color: var(--evm-text-secondary);
}
.evm-btn-secondary:hover:not(:disabled) {
  background: var(--evm-card-elevated);
  color: var(--evm-text-primary);
}
.evm-btn-ghost {
  background: transparent;
  border-color: var(--evm-border-strong);
  color: var(--evm-text-secondary);
}
.evm-btn-ghost:hover:not(:disabled) {
  background: var(--evm-card-elevated);
  color: var(--evm-text-primary);
}
.evm-btn-danger {
  background: var(--evm-danger-soft);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ff8080;
}
.evm-btn-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.22);
}
.evm-btn-warning {
  background: var(--evm-orange-soft);
  border-color: rgba(245, 158, 11, 0.3);
  color: #ffc370;
}
.evm-btn-warning:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.22);
}
.evm-btn-info {
  background: var(--evm-blue-soft);
  border-color: rgba(78, 161, 255, 0.3);
  color: #8fc4ff;
}
.evm-btn-info:hover:not(:disabled) {
  background: rgba(78, 161, 255, 0.22);
}

/* Badges de estado operacional — separados de .evm-pill-fleet/.evm-pill-neutral (esos son
   categoría, no estado). tone=success/danger/warning/info/neutral. */
.evm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.evm-badge-success {
  background: var(--evm-green-soft);
  color: var(--evm-green);
  border-color: rgba(57, 217, 138, 0.2);
}
.evm-badge-danger {
  background: var(--evm-danger-soft);
  color: #ff8080;
  border-color: rgba(239, 68, 68, 0.25);
}
.evm-badge-warning {
  background: var(--evm-orange-soft);
  color: #ffc370;
  border-color: rgba(245, 158, 11, 0.25);
}
.evm-badge-info {
  background: var(--evm-blue-soft);
  color: var(--evm-blue);
  border-color: rgba(78, 161, 255, 0.2);
}
.evm-badge-neutral {
  background: rgba(120, 160, 220, 0.1);
  color: var(--evm-text-muted);
  border-color: var(--evm-border-strong);
}

/* Variante grande — pedida explícitamente 2026-09-11 para el pill de estado de una tarjeta de
   integración completa (ej. Fleet Settings), donde el pill ES la señal principal de la
   tarjeta, no una anotación al lado de un título. evm-badge-sm sigue siendo el default en
   todos lados (tablas, headers de panel chicos). */
.evm-badge-lg {
  padding: 7px 18px;
  font-size: 14px;
  font-weight: 700;
}

.evm-empty {
  color: var(--evm-text-muted);
  font-size: 13px;
}

/* Payload/JSON crudo (Logs) — mismo tono que los inputs, nunca fondo blanco. */
.evm-json {
  background: var(--evm-input);
  border: 1px solid var(--evm-border-strong);
  border-radius: 10px;
  color: var(--evm-text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 14px 16px;
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Chip de icono circular genérico (mismo tamaño/forma que .evm-location-icon en Sites) — el
   color se pasa por inline style, esta clase solo fija forma/tamaño/tipografía del ícono. */
.evm-icon-chip {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Calculadora de ahorro (rebuild 2026-09-13) — panel "vehículo actual" + "tarifas por zona",
   sin panel promocional (ningún asset real configurado todavía, ver reporte). 46/31 de la
   spec original de 3 columnas se aproxima a 1.5fr/1fr con solo 2. */
.evm-ahorro-grid-2 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}
.evm-ahorro-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
}
.evm-ahorro-result-card {
  padding: 16px;
  border-width: 1px;
  border-style: solid;
}
.evm-ahorro-delivery-bar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 16px 20px;
}
@media (max-width: 1100px) {
  .evm-ahorro-grid-2,
  .evm-ahorro-results-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .evm-ahorro-delivery-bar {
    flex-direction: column;
    align-items: stretch;
  }
  /* Hallazgo real (auditoría 2026-09-13): el flex-basis en px de estos campos se pensó para
     el eje horizontal de la fila normal — al pasar a columna acá arriba, ese mismo basis pasa
     a leerse como ALTO, no ancho, y los inputs quedaban estirados a 200/260px de alto. */
  .evm-ahorro-delivery-field {
    flex: 0 0 auto !important;
  }
}

/* Flechas del carousel de modelos — mismo look que .maplibregl-ctrl (círculo elevado), ancladas
   sobre el borde de la fila en vez de empujar layout. */
.evm-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--evm-border-strong);
  background: var(--evm-card);
  color: var(--evm-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(var(--evm-shadow-rgb), 0.25);
}
.evm-carousel-arrow-left {
  left: -14px;
}
.evm-carousel-arrow-right {
  right: -14px;
}

/* Impresión del resumen de la Calculadora de ahorro (botón "Imprimir", real — ver
   SavingsCalculator.tsx) — esconde nav/acciones que no tienen sentido en papel. */
@media print {
  .evm-sidebar,
  .evm-sidebar-backdrop,
  .no-print {
    display: none !important;
  }
  body {
    background: #ffffff !important;
  }
  .evm-panel {
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ============================================================================
   EV FLEET MANAGEMENT — sistema visual del módulo (2026-09-14). Todo acá abajo
   vive bajo .zolta-ev-fleet (raíz agregada solo a las 7 páginas /fleet/*, ver
   (dashboard)/fleet/layout.tsx) — nunca toca CSMS Core, Dealer/Changan ni
   Public Charging. Reusa clases evm- y --zolta-accent-fleet existentes, no crea
   un segundo sistema de tokens.
   ============================================================================ */

/* Defensivo: ~17px de scroll horizontal real (confirmado con window.scrollTo, franja vacía
   sin contenido visible) apareció en /fleet a 360px — no se pudo aislar a un elemento
   puntual (no es ninguna tabla/KPI, esas ya están resueltas arriba); huele a la conocida
   inconsistencia de Chromium con elementos position:fixed + transform (el drawer mobile
   cerrado, .evm-sidebar con translateX) contribuyendo al scrollWidth del documento pese a
   estar clippeado visualmente. overflow-x:hidden acá corta cualquier scroll fantasma sin
   recortar contenido real (la franja confirmada estaba vacía).
   */
.zolta-ev-fleet {
  overflow-x: hidden;
}

/* Acción primaria dentro de Fleet = Electric Teal — sin tocar evm-btn-primary/evm-cta
   global (CSMS/Dealer/Public los siguen viendo verdes). */
.zolta-ev-fleet .evm-btn-primary {
  background: var(--zolta-accent-fleet);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 179, 164, 0.22);
}
.zolta-ev-fleet .evm-btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
}
.zolta-ev-fleet .evm-cta {
  background: var(--zolta-accent-fleet);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 179, 164, 0.22);
}

/* Estado seleccionado (segmented control — ej. 7/30/90 días en EV Fleet Analysis) —
   .evm-segmented-item.is-active es compartido con Chargers/RFID/Sessions/Logs/Overview,
   que se quedan en verde; solo Fleet pasa a teal. */
.zolta-ev-fleet .evm-segmented-item.is-active {
  background: rgba(0, 179, 164, 0.14);
  color: var(--zolta-accent-fleet);
}

/* Focus rings y bordes de selección en teal dentro del módulo — accesibilidad (foco
   visible) con el accent correcto, sin tocar el focus ring verde/azul genérico de
   evm-select fuera de Fleet. */
.zolta-ev-fleet .evm-select:focus,
.zolta-ev-fleet input:focus-visible,
.zolta-ev-fleet button:focus-visible,
.zolta-ev-fleet a:focus-visible {
  outline: none;
  border-color: var(--zolta-accent-fleet);
  box-shadow: 0 0 0 3px rgba(0, 179, 164, 0.18);
}

/* Glow de ícono KPI reducido en modo claro — "software industrial premium, no landing
   page". El glow vive como boxShadow inline en KpiCardPremium.tsx (compartido con
   CSMS/Dealer, no se toca el componente) — se apaga acá con !important, scoped, solo en
   modo claro dentro de Fleet. */
:root[data-theme="light"] .zolta-ev-fleet .evm-kpi-icon-dense,
:root[data-theme="light"] .zolta-ev-fleet .evm-kpi-icon-compact,
:root[data-theme="light"] .zolta-ev-fleet .evm-kpi-icon {
  box-shadow: none !important;
}

/* Barra superior fija de mobile (EvmPageHeader ya la renderiza siempre, oculta por
   default) — hamburger + isotipo ZOLTA real sobre azul profundo, texto/íconos blancos.
   "sticky" en vez de "fixed": mismo efecto visual (queda visible al hacer scroll) sin la
   complejidad de compensar padding/z-index de un fixed real contra el drawer mobile ya
   existente (.evm-sidebar-mobile-open/.evm-sidebar-backdrop). */
.evm-mobile-topbar {
  display: none;
}
@media (max-width: 768px) {
  .zolta-ev-fleet .evm-mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--evm-bg-sidebar);
    padding: 12px 16px;
    margin: -16px -16px 16px;
  }
  .zolta-ev-fleet .evm-mobile-topbar .evm-sidebar-toggle {
    color: #ffffff;
  }
  .zolta-ev-fleet .evm-mobile-topbar-logo {
    height: 28px;
    width: 28px;
    object-fit: contain;
  }
  /* El hamburger de la fila normal de título se esconde en mobile Fleet — el de la barra
     fija de arriba ya cubre esa función, no hace falta duplicarlo. */
  .zolta-ev-fleet .evm-page-header-title-group .evm-sidebar-toggle {
    display: none;
  }
  /* Mismo patrón que .zolta-ev-fleet arriba (2026-09-15) — mobile: "sidebar como drawer,
     barra superior azul profundo, solamente isotipo". var(--evm-bg-sidebar) es la misma
     navy fija de siempre, NUNCA --dealer-accent: la barra no cambia de color por
     distribuidor, el look de la barra es parte del lenguaje visual fijo de la plataforma —
     solo el isotipo adentro cambia según quién sea el distribuidor. */
  .zolta-dealer-portal .evm-mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--evm-bg-sidebar);
    padding: 12px 16px;
    margin: -16px -16px 16px;
  }
  .zolta-dealer-portal .evm-mobile-topbar .evm-sidebar-toggle {
    color: #ffffff;
  }
  .zolta-dealer-portal .evm-mobile-topbar-logo {
    height: 28px;
    width: 28px;
    object-fit: contain;
  }
  .zolta-dealer-portal .evm-dealer-page-header-title-group .evm-sidebar-toggle {
    display: none;
  }
  /* minmax(0, 1fr), no 1fr solo — hallazgo real: un track "1fr" desnudo tiene un mínimo
     implícito de "auto" (el ancho del contenido), y evm-kpi-label-dense usa white-space:
     nowrap — a 360px eso empujaba la grid entera más ancha que la pantalla (scroll horizontal
     real, confirmado). minmax(0, 1fr) deja que la columna se achique por debajo del texto. */
  .zolta-ev-fleet .evm-kpi-grid,
  .zolta-ev-fleet .evm-kpi-grid-2,
  .zolta-ev-fleet .evm-kpi-grid-5,
  .zolta-ev-fleet .evm-kpi-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .zolta-ev-fleet .evm-kpi-grid > :last-child:nth-child(odd),
  .zolta-ev-fleet .evm-kpi-grid-5 > :last-child {
    grid-column: 1 / -1;
  }
  /* Con la columna angosta de 2 arriba, el label nowrap+ellipsis de KpiCardPremium
     (compartido, no se toca) truncaba labels reales como "Consumo promedio" en "Consu…" —
     legible pero pobre. Acá se deja envolver en 2 líneas en vez de truncar. */
  .zolta-ev-fleet .evm-kpi-label-dense,
  .zolta-ev-fleet .evm-kpi-label-compact,
  .zolta-ev-fleet .evm-kpi-label {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}

/* Filtros de EV Fleet Analysis en 2×2 en tablet — evm-filter-bar es compartido con
   Logs/Sessions/Overview/Chargers, que se quedan con su flex-wrap normal; solo Fleet pasa
   a grid acá. */
@media (min-width: 768px) and (max-width: 1199px) {
  .zolta-ev-fleet .evm-filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    gap: 10px;
  }
  .zolta-ev-fleet .evm-filter-bar > * {
    width: 100%;
  }
}