/* Punto de entrada unico del Design System de Nexora.

   Este archivo es un BUNDLE generado a mano: contiene, concatenado en
   el mismo orden en que antes se cargaban via @import, el contenido
   completo de tokens.css y de los 20 archivos de components/*.css.
   Ningun selector ni valor fue modificado -- es copia exacta.

   Motivo del cambio: @import dentro de un CSS bloquea la construccion
   del CSSOM (el navegador debe descargar y parsear este archivo antes
   de siquiera descubrir los imports, y no puede pintar la pagina hasta
   que TODOS resuelven) -- 21 archivos en cascada se traducian en 21
   round-trips seriados/semiseriados en cada carga de pagina, en toda
   la app, incluso en pantallas que no usan ninguna clase "ds-".

   Si se edita un componente en components/<archivo>.css, hay que
   copiar el cambio tambien aqui (o regenerar este bundle) para que se
   refleje -- los archivos originales en components/ se dejan intactos
   como fuente de referencia / organizacion por componente. Orden
   exacto del bundle (identico al @import anterior):

     fonts.css (anexado en el rediseño visual -- Inter/JetBrains Mono autoalojadas)
     tokens.css
     components/buttons.css
     components/cards.css
     components/metrics.css
     components/badges.css
     components/tables.css
     components/forms.css
     components/filters.css
     components/layout.css
     components/modals.css
     components/menus.css
     components/alerts.css
     components/states.css
     components/hover-card.css
     components/quick-action-menu.css
     components/sidepanel.css
     components/timeline.css
     components/activity-item.css
     components/skeletons.css
     components/confirmation-dialog.css
     components/toasts.css
     components/giras-dashboard.css (anexado en la fase de rediseño visual de Control de Giras)
     components/giras-form.css (anexado en la Etapa B -- formulario de Registrar/Editar Gira)
     components/giras-mapa.css (anexado en la Etapa C -- mapa interactivo de Giras)
     components/giras-expediente.css (anexado al convertir el expediente en dashboard ejecutivo)
     components/module-header.css (anexado en el rediseño visual -- KPI/encabezado/accesos rapidos, compartido por Dashboard/Ventas/Instalaciones)
     components/table-groups.css (anexado en el rediseño visual -- cabecera de tabla con columnas agrupadas)

   components/motion.css NO se anexa aqui -- ver la nota al final de la
   seccion de module-header.css abajo.
*/

/* ===== fonts.css ===== */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/inter-400-normal-latin-ext.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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/inter-400-normal-latin.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';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/inter-500-normal-latin-ext.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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/inter-500-normal-latin.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';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/inter-600-normal-latin-ext.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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/inter-600-normal-latin.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';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/inter-700-normal-latin-ext.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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/inter-700-normal-latin.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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/jetbrains-mono-400-normal-latin-ext.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;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/jetbrains-mono-400-normal-latin.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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/jetbrains-mono-500-normal-latin-ext.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;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/jetbrains-mono-500-normal-latin.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:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/jetbrains-mono-600-normal-latin-ext.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;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/jetbrains-mono-600-normal-latin.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;}

/* Space Grotesk -- fuente de TITULOS del rediseño (--ds-font-display). Mismos
   .woff2 en static/fonts/ que ya usa Giras (giras-cliente-fonts.css): NINGUNA
   descarga nueva, solo se declaran a nivel global para usarlas fuera de Giras. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/space-grotesk-400-normal-latin-ext.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;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/space-grotesk-400-normal-latin.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:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/space-grotesk-500-normal-latin-ext.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;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/space-grotesk-500-normal-latin.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:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/space-grotesk-600-normal-latin-ext.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;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/space-grotesk-600-normal-latin.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:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/space-grotesk-700-normal-latin-ext.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;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/space-grotesk-700-normal-latin.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;}

/* ===== tokens.css ===== */

:root{
  /* Color -- marca / acento (rediseño: azul Nexus sobre papel cálido) */
  --ds-color-primary-dark: #1E42A8;
  --ds-color-primary:      #2853CE;

  /* Color -- superficie / fondo (papel cálido premium) */
  --ds-color-bg-app:      #F4F3EF;
  --ds-color-bg-surface:  #fff;
  --ds-color-bg-surface-alt: #FAF9F5;
  --ds-color-bg-surface-alt-warm: #FAF9F5;
  --ds-color-bg-hover-row:   #F1EFEA;

  /* Color -- texto (tinta cálida, ya no azul) */
  --ds-color-text:        #201E1A;
  --ds-color-text-muted:  #73706A;
  --ds-color-text-positive: #2C6E49;
  --ds-color-text-negative: #A63A30;

  /* Color -- bordes (cálidos) */
  --ds-color-border:       #E4E1D8;
  --ds-color-border-light: #EDEBE3;
  --ds-color-border-lighter: #F2F0EA;

  /* Color -- estados semanticos (fondo / texto), afinados al papel cálido;
     mismos roles que ya usan los badges/flash/alertas existentes */
  --ds-color-success-bg:   #E7F0E4;
  --ds-color-success-text: #2C6E49;
  --ds-color-success-border: #C7DDB9;

  --ds-color-warning-bg:   #F6ECD4;
  --ds-color-warning-text: #8A5A12;
  --ds-color-warning-bg-soft: #FBF6EA;
  --ds-color-warning-border: #E8D19B;

  --ds-color-danger-bg:    #F6E2DC;
  --ds-color-danger-text:  #A63A30;
  --ds-color-danger-accent: #D8664F;
  --ds-color-danger-strong: #B23A2C;

  --ds-color-info-bg:      #E6EEF6;
  --ds-color-info-text:    #2C5487;

  --ds-color-neutral-bg:   #F0EEE7;
  --ds-color-neutral-text: #6B6860;

  --ds-color-purple-bg:    #ECE9F6;
  --ds-color-purple-text:  #4B3F86;

  /* Sidebar -- ink cálido (el rediseño lo pasa a rail claro en F1). */
  --ds-color-sidebar-bg:   #23211D;
  --ds-color-sidebar-text:        rgba(255,255,255,.72);
  --ds-color-sidebar-text-muted:  rgba(255,255,255,.55);
  --ds-color-sidebar-text-faint:  rgba(255,255,255,.42);
  --ds-color-sidebar-hover-bg:    rgba(255,255,255,.08);
  --ds-color-sidebar-active-bg:   rgba(255,255,255,.16);

  /* Tipografia -- Inter (texto) / Space Grotesk (titulos) / JetBrains Mono
     (numeros), TODAS autoalojadas (ver fonts.css arriba, cero descargas nuevas) */
  --ds-font-family: 'Inter', -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ds-font-display: 'Space Grotesk', 'Inter', -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ds-font-mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace;
  --ds-text-2xs: 10px;
  --ds-text-xs:  11px;
  --ds-text-sm:  12px;
  --ds-text-base:13px;
  --ds-text-md:  14px;
  --ds-text-lg:  15px;
  --ds-text-xl:  16px;
  --ds-text-2xl: 18px;
  --ds-text-3xl: 20px;
  --ds-text-4xl: 22px;

  /* Espaciado (escala usada de forma mas consistente en toda la app) */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;

  /* Radios de borde */
  --ds-radius-sm:   6px;
  --ds-radius-md:   8px;
  --ds-radius-lg:   10px;
  --ds-radius-xl:   14px;
  --ds-radius-pill: 20px;

  /* Sombras */
  --ds-shadow-hover: 0 2px 10px -2px rgba(30,28,24,.12);
  --ds-shadow-modal: 0 12px 34px -8px rgba(30,28,24,.30);
  --ds-shadow-focus: 0 0 0 3px rgba(40,83,206,.16);

  /* Transiciones */
  --ds-transition-fast: .1s;
  --ds-transition-base: .15s;
  --ds-transition-slow: .3s;

  /* Motion V2 -- ver tokens.css para el comentario completo. */
  --ds-motion-hover: .12s;
  --ds-motion-dropdown: .14s;
  --ds-motion-card: .16s;
  --ds-motion-content: .14s;
  --ds-motion-panel: .22s;
  --ds-motion-ease: cubic-bezier(.2,.7,.3,1);

  /* z-index -- 1000 ya es el valor real usado hoy por el modal de
     Vehiculos (ver templates/society/vehiculo_detalle.html); dropdown/
     tooltip son capas NUEVAS que hoy no existen en la app, se dejan
     por debajo/encima del modal con margen de sobra. */
  --ds-z-dropdown: 900;
  --ds-z-modal:    1000;
  --ds-z-tooltip:  1100;
}

/* ===== Modo oscuro (rediseño) =====================================
   Todo consume tokens, así que definir aquí la paleta oscura hace que
   TODA la app soporte dark/light. Patrón de 3 estados: :root (claro,
   arriba) es el default; @media (prefers-color-scheme:dark) sigue al
   sistema salvo que el usuario haya forzado claro con [data-theme=light];
   y [data-theme=dark] permite forzar oscuro (para un toggle futuro).
   Los valores oscuros se repiten en ambos bloques a propósito (CSS no
   permite compartirlos). Mantener sincronizado con tokens.css. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ds-color-primary:      #4E63D8;
    --ds-color-primary-dark: #6A7CE6;
    --ds-color-bg-app:       #1A1917;
    --ds-color-bg-surface:   #24221E;
    --ds-color-bg-surface-alt: #201E1A;
    --ds-color-bg-surface-alt-warm: #201E1A;
    --ds-color-bg-hover-row: #2B2822;
    --ds-color-text:         #EEEBE3;
    --ds-color-text-muted:   #A7A299;
    --ds-color-text-positive:#8FD3A6;
    --ds-color-text-negative:#E8A79C;
    --ds-color-border:       #332F29;
    --ds-color-border-light: #2C2924;
    --ds-color-border-lighter:#262320;
    --ds-color-success-bg:#1E2A20; --ds-color-success-text:#8FD3A6; --ds-color-success-border:#2E4436;
    --ds-color-warning-bg:#2C2517; --ds-color-warning-text:#E4BC77; --ds-color-warning-bg-soft:#241F16; --ds-color-warning-border:#4A3E22;
    --ds-color-danger-bg:#2E1D18;  --ds-color-danger-text:#E8A79C;  --ds-color-danger-accent:#C15C4B; --ds-color-danger-strong:#E8897A;
    --ds-color-info-bg:#182430;    --ds-color-info-text:#9CC0E6;
    --ds-color-neutral-bg:#2A2721; --ds-color-neutral-text:#A9A399;
    --ds-color-purple-bg:#241F30;  --ds-color-purple-text:#B9AEE8;
    --ds-color-sidebar-bg:#201E1A;
    --ds-shadow-hover: 0 2px 10px -2px rgba(0,0,0,.5);
    --ds-shadow-modal: 0 18px 44px -12px rgba(0,0,0,.72);
    --ds-shadow-focus: 0 0 0 3px rgba(78,99,216,.30);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ds-color-primary:      #4E63D8;
  --ds-color-primary-dark: #6A7CE6;
  --ds-color-bg-app:       #1A1917;
  --ds-color-bg-surface:   #24221E;
  --ds-color-bg-surface-alt: #201E1A;
  --ds-color-bg-surface-alt-warm: #201E1A;
  --ds-color-bg-hover-row: #2B2822;
  --ds-color-text:         #EEEBE3;
  --ds-color-text-muted:   #A7A299;
  --ds-color-text-positive:#8FD3A6;
  --ds-color-text-negative:#E8A79C;
  --ds-color-border:       #332F29;
  --ds-color-border-light: #2C2924;
  --ds-color-border-lighter:#262320;
  --ds-color-success-bg:#1E2A20; --ds-color-success-text:#8FD3A6; --ds-color-success-border:#2E4436;
  --ds-color-warning-bg:#2C2517; --ds-color-warning-text:#E4BC77; --ds-color-warning-bg-soft:#241F16; --ds-color-warning-border:#4A3E22;
  --ds-color-danger-bg:#2E1D18;  --ds-color-danger-text:#E8A79C;  --ds-color-danger-accent:#C15C4B; --ds-color-danger-strong:#E8897A;
  --ds-color-info-bg:#182430;    --ds-color-info-text:#9CC0E6;
  --ds-color-neutral-bg:#2A2721; --ds-color-neutral-text:#A9A399;
  --ds-color-purple-bg:#241F30;  --ds-color-purple-text:#B9AEE8;
  --ds-color-sidebar-bg:#201E1A;
  --ds-shadow-hover: 0 2px 10px -2px rgba(0,0,0,.5);
  --ds-shadow-modal: 0 18px 44px -12px rgba(0,0,0,.72);
  --ds-shadow-focus: 0 0 0 3px rgba(78,99,216,.30);
}

/* ===== components/buttons.css ===== */

.ds-btn{
  display:inline-block;
  padding:var(--ds-space-2) var(--ds-space-4);
  border:none;
  border-radius:var(--ds-radius-sm);
  font-family:var(--ds-font-family);
  font-size:var(--ds-text-base);
  font-weight:500;
  cursor:pointer;
  text-align:center;
  transition:background var(--ds-transition-fast),color var(--ds-transition-fast);
}

.ds-btn-primary{ background:var(--ds-color-primary); color:#fff; }
.ds-btn-primary:hover{ background:var(--ds-color-primary-dark); }

.ds-btn-secondary{
  background:var(--ds-color-bg-app);
  color:var(--ds-color-text);
  border:1px solid var(--ds-color-border);
}
.ds-btn-secondary:hover{ background:var(--ds-color-bg-hover-row); }

.ds-btn-danger{
  background:var(--ds-color-danger-bg);
  color:var(--ds-color-danger-text);
  border:1px solid var(--ds-color-danger-accent);
}
.ds-btn-danger:hover{ background:var(--ds-color-danger-accent); color:#fff; }

.ds-btn-sm{
  padding:5px var(--ds-space-3);
  font-size:var(--ds-text-sm);
}

/* ===== components/cards.css ===== */

.ds-card{
  background:var(--ds-color-bg-surface);
  border:.5px solid var(--ds-color-border);
  border-radius:var(--ds-radius-lg);
  padding:var(--ds-space-5) var(--ds-space-6);
}

.ds-card-compact{
  background:var(--ds-color-bg-surface);
  border:.5px solid var(--ds-color-border);
  border-radius:var(--ds-radius-lg);
  padding:var(--ds-space-4);
}

.ds-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:border-color var(--ds-transition-base),transform var(--ds-transition-fast);
}
.ds-card-link:hover{
  border-color:var(--ds-color-primary);
  transform:translateY(-1px);
}

/* ===== components/metrics.css ===== */

.ds-metric-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--ds-space-3);
  margin-bottom:var(--ds-space-6);
}
/* min-width:0 -- sin esto, cada celda del grid nunca se encoge mas alla
   del min-content de su texto (ej. una etiqueta larga sin quiebre),
   forzando scroll horizontal en viewports angostos. */
.ds-metric-grid > *{ min-width:0; }
.ds-metric-grid-3{ grid-template-columns:repeat(3,1fr); }
.ds-metric-grid-4{ grid-template-columns:repeat(4,1fr); }
.ds-metric-grid-5{ grid-template-columns:repeat(5,1fr); }
.ds-metric-grid-auto{ grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }

.ds-metric-card{
  background:var(--ds-color-bg-surface);
  border:.5px solid var(--ds-color-border);
  border-radius:var(--ds-radius-lg);
  padding:var(--ds-space-3) var(--ds-space-4);
}

.ds-metric-label{
  font-size:var(--ds-text-xs);
  font-weight:500;
  color:var(--ds-color-text-muted);
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-bottom:var(--ds-space-2);
}

.ds-metric-value{
  font-family:var(--ds-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--ds-text-3xl);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--ds-color-text);
}
.ds-metric-value.ds-positive{ color:var(--ds-color-text-positive); }
.ds-metric-value.ds-negative{ color:var(--ds-color-text-negative); }

@media(max-width:640px){
  .ds-metric-grid, .ds-metric-grid-3, .ds-metric-grid-4, .ds-metric-grid-5, .ds-metric-grid-auto{
    grid-template-columns:1fr;
  }
}

/* ===== components/badges.css ===== */

.ds-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:var(--ds-radius-pill);
  font-size:var(--ds-text-xs);
  font-weight:600;
  white-space:nowrap;
}
.ds-badge::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}

.ds-badge-success{ background:var(--ds-color-success-bg); color:var(--ds-color-success-text); }
.ds-badge-warning{ background:var(--ds-color-warning-bg); color:var(--ds-color-warning-text); }
.ds-badge-danger{  background:var(--ds-color-danger-bg);  color:var(--ds-color-danger-text); }
.ds-badge-info{    background:var(--ds-color-info-bg);    color:var(--ds-color-info-text); }
.ds-badge-neutral{ background:var(--ds-color-neutral-bg); color:var(--ds-color-neutral-text); }
.ds-badge-purple{  background:var(--ds-color-purple-bg);  color:var(--ds-color-purple-text); }

/* ===== components/tables.css ===== */

.ds-table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--ds-text-base);
}
.ds-table th{
  text-align:left;
  padding:var(--ds-space-2) var(--ds-space-3);
  font-size:var(--ds-text-xs);
  font-weight:600;
  color:var(--ds-color-text-muted);
  text-transform:uppercase;
  border-bottom:1px solid var(--ds-color-border-light);
  background:var(--ds-color-bg-surface-alt);
}
.ds-table td{
  padding:10px var(--ds-space-3);
  border-bottom:.5px solid var(--ds-color-border-lighter);
}
.ds-table tr:last-child td{ border-bottom:none; }
.ds-table tr:hover td{ background:var(--ds-color-bg-surface-alt); }

/* ===== components/forms.css ===== */

.ds-form-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--ds-space-3);
}

.ds-field{
  display:flex;
  flex-direction:column;
  gap:var(--ds-space-1);
}
.ds-field label{
  font-size:var(--ds-text-sm);
  font-weight:500;
  color:var(--ds-color-text-muted);
}
.ds-field input,
.ds-field select,
.ds-field textarea{
  padding:var(--ds-space-2) 10px;
  border:1px solid var(--ds-color-border);
  border-radius:var(--ds-radius-sm);
  font-size:var(--ds-text-base);
  color:var(--ds-color-text);
  background:var(--ds-color-bg-surface);
  font-family:var(--ds-font-family);
}
.ds-field input:focus,
.ds-field select:focus,
.ds-field textarea:focus{
  outline:none;
  border-color:var(--ds-color-primary);
  box-shadow:var(--ds-shadow-focus);
}
.ds-field textarea{ resize:vertical; min-height:68px; }

.ds-select-sm{
  padding:6px 10px;
  border:1px solid var(--ds-color-border);
  border-radius:var(--ds-radius-sm);
  font-size:var(--ds-text-base);
  color:var(--ds-color-text);
  background:var(--ds-color-bg-surface);
  font-family:var(--ds-font-family);
}

/* Secciones internas de un formulario largo (ej. Cliente / Venta /
   Instalacion dentro del mismo <form>) -- separa grupos de campos con
   un titulo y una linea divisoria, sin anidar una .section dentro de
   otra .section (evita el doble borde/padding). Funciona igual con
   .field/.form-grid (legacy) o .ds-field/.ds-form-grid, ya que solo
   estiliza el titulo y el espaciado, no los campos en si. */
.ds-form-section{
  padding-top:var(--ds-space-5);
  margin-top:var(--ds-space-5);
  border-top:.5px solid var(--ds-color-border);
}
.ds-form-section:first-child{
  padding-top:0;
  margin-top:0;
  border-top:none;
}
.ds-form-section-title{
  margin:0 0 var(--ds-space-1) 0;
  font-size:var(--ds-text-lg);
  font-weight:600;
  color:var(--ds-color-primary-dark);
}
.ds-form-section-desc{
  margin:0 0 var(--ds-space-4) 0;
  font-size:var(--ds-text-sm);
  color:var(--ds-color-text-muted);
}

/* Subgrupos DENTRO de una .ds-form-section (ej. Asesoria / Datos de
   venta / Contrato dentro de la seccion "Venta") -- deliberadamente mas
   liviano que .ds-form-section-title (sin borde divisorio, texto mas
   chico en mayusculas) para que se sientan como partes internas de la
   misma seccion, no como secciones principales nuevas. */
.ds-form-subsection{
  margin-top:var(--ds-space-4);
}
.ds-form-subsection:first-child{
  margin-top:0;
}
.ds-form-subsection-title{
  margin:0 0 var(--ds-space-2) 0;
  font-size:var(--ds-text-xs);
  font-weight:600;
  color:var(--ds-color-text-muted);
  text-transform:uppercase;
  letter-spacing:.4px;
}

/* Bloques colapsables dentro del formulario (ej. "Avanzado" dentro de
   Venta, o secciones completas como Comisiones/Documentacion) --
   <details>/<summary> nativo, sin JS. El summary reusa las clases de
   titulo (.ds-form-section-title / .ds-form-subsection-title) y suma
   el afordance de "esto se puede abrir" (flecha + cursor). */
.ds-form-details-summary{
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.ds-form-details-summary::-webkit-details-marker{
  display:none;
}
.ds-form-details-summary::before{
  content:'\25B8';
  display:inline-block;
  width:1em;
  margin-right:var(--ds-space-1);
  color:var(--ds-color-text-muted);
  transition:transform var(--ds-transition-fast);
}
.ds-form-details[open] > .ds-form-details-summary::before{
  transform:rotate(90deg);
}
.ds-form-details-summary:focus-visible{
  outline:2px solid var(--ds-color-primary);
  outline-offset:2px;
  border-radius:var(--ds-radius-sm);
}

/* ===== components/filters.css ===== */

.ds-filter-bar{
  display:flex;
  gap:var(--ds-space-3);
  flex-wrap:wrap;
  align-items:flex-end;
}

.ds-search-bar{
  width:100%;
  padding:var(--ds-space-2) 10px;
  border:1px solid var(--ds-color-border);
  border-radius:var(--ds-radius-sm);
  font-size:var(--ds-text-base);
  color:var(--ds-color-text);
  background:var(--ds-color-bg-surface);
  font-family:var(--ds-font-family);
}
.ds-search-bar:focus{
  outline:none;
  border-color:var(--ds-color-primary);
  box-shadow:var(--ds-shadow-focus);
}

/* En viewports angostos no hay espacio para que un input con min-width
   fijo (por ejemplo min-width:220px inline) y varios <select> convivan
   en una fila -- se apilan a ancho completo, uno por linea. */
@media(max-width:640px){
  .ds-filter-bar > *{
    min-width:0 !important;
    width:100%;
  }
}

/* ===== components/layout.css ===== */

.ds-page-header{ margin-bottom:var(--ds-space-6); }
.ds-page-header h1{
  font-size:var(--ds-text-4xl);
  font-weight:700;
  color:var(--ds-color-primary-dark);
}

.ds-page-header-breadcrumb{
  font-size:var(--ds-text-sm);
  color:var(--ds-color-text-muted);
  margin-bottom:var(--ds-space-1);
}
.ds-page-header-breadcrumb a{ color:var(--ds-color-primary); }

.ds-page-header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--ds-space-3);
}

.ds-page-header-desc{
  font-size:var(--ds-text-base);
  color:var(--ds-color-text-muted);
  margin-top:var(--ds-space-1);
}

.ds-page-header-actions{
  display:flex;
  gap:var(--ds-space-2);
  align-items:center;
  flex-wrap:wrap;
}

.ds-section-header{
  font-size:var(--ds-text-md);
  font-weight:600;
  color:var(--ds-color-primary-dark);
  margin-bottom:var(--ds-space-4);
}

.ds-section-header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:var(--ds-space-4);
}

/* ===== components/modals.css ===== */

.ds-modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,23,32,.45);
  z-index:var(--ds-z-modal);
  align-items:center;
  justify-content:center;
}
.ds-modal-overlay.ds-open{ display:flex; }

.ds-modal-box{
  background:var(--ds-color-bg-surface);
  border-radius:var(--ds-radius-lg);
  padding:var(--ds-space-5);
  width:420px;
  max-width:92vw;
  max-height:88vh;
  overflow:auto;
  box-shadow:var(--ds-shadow-modal);
}

/* ===== components/menus.css ===== */

.ds-dropdown{
  position:relative;
  display:inline-block;
}

.ds-dropdown-toggle{
  display:inline-block;
  padding:var(--ds-space-2) var(--ds-space-3);
  border:1px solid var(--ds-color-border);
  border-radius:var(--ds-radius-sm);
  background:var(--ds-color-bg-surface);
  color:var(--ds-color-text);
  font-family:var(--ds-font-family);
  font-size:var(--ds-text-base);
  cursor:pointer;
}
.ds-dropdown-toggle:hover{ background:var(--ds-color-bg-surface-alt); }

.ds-dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  min-width:180px;
  background:var(--ds-color-bg-surface);
  border:.5px solid var(--ds-color-border);
  border-radius:var(--ds-radius-md);
  box-shadow:var(--ds-shadow-modal);
  z-index:var(--ds-z-dropdown);
  padding:var(--ds-space-1) 0;
}
.ds-dropdown-menu.ds-open{ display:block; }

.ds-dropdown-item{
  display:block;
  width:100%;
  text-align:left;
  padding:var(--ds-space-2) var(--ds-space-3);
  font-size:var(--ds-text-base);
  color:var(--ds-color-text);
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--ds-font-family);
}
.ds-dropdown-item:hover{ background:var(--ds-color-bg-surface-alt); }
.ds-dropdown-item-danger{ color:var(--ds-color-danger-text); }

/* ===== components/alerts.css ===== */

.ds-alert{
  padding:10px var(--ds-space-4);
  border-radius:var(--ds-radius-md);
  font-size:var(--ds-text-base);
  margin-bottom:var(--ds-space-3);
}

.ds-alert-success{
  background:var(--ds-color-success-bg);
  color:var(--ds-color-success-text);
  border-left:3px solid #639922;
}
.ds-alert-danger{
  background:var(--ds-color-danger-bg);
  color:var(--ds-color-danger-text);
  border-left:3px solid var(--ds-color-danger-accent);
}
.ds-alert-warning{
  background:var(--ds-color-warning-bg-soft);
  color:var(--ds-color-warning-text);
  border-left:3px solid var(--ds-color-warning-border);
}
.ds-alert-info{
  background:var(--ds-color-info-bg);
  color:var(--ds-color-info-text);
  border-left:3px solid var(--ds-color-primary);
}

/* ===== components/states.css ===== */

.ds-empty-state{
  text-align:center;
  color:var(--ds-color-text-muted);
  padding:var(--ds-space-7);
  font-size:var(--ds-text-base);
}

.ds-empty-state-icon{
  font-size:28px;
  margin-bottom:var(--ds-space-2);
  opacity:.6;
}

.ds-loading{
  display:inline-flex;
  align-items:center;
  gap:var(--ds-space-2);
  color:var(--ds-color-text-muted);
  font-size:var(--ds-text-base);
}

.ds-spinner{
  width:16px;
  height:16px;
  border:2px solid var(--ds-color-border);
  border-top-color:var(--ds-color-primary);
  border-radius:50%;
  animation:ds-spin .6s linear infinite;
}

@keyframes ds-spin{
  to{ transform:rotate(360deg); }
}

/* ===== components/hover-card.css ===== */

.ds-hover-card{
  background:var(--ds-color-bg-surface);
  border:.5px solid var(--ds-color-border);
  border-radius:var(--ds-radius-lg);
  box-shadow:var(--ds-shadow-hover);
  padding:var(--ds-space-4);
  width:280px;
  font-family:var(--ds-font-family);
}

.ds-hover-card-header{
  display:flex;
  align-items:flex-start;
  gap:var(--ds-space-3);
  margin-bottom:var(--ds-space-3);
}
.ds-hover-card-icon{
  width:36px;
  height:36px;
  border-radius:var(--ds-radius-md);
  background:var(--ds-color-info-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--ds-text-xl);
  flex-shrink:0;
}
.ds-hover-card-titles{ flex:1; min-width:0; }
.ds-hover-card-title{
  font-size:var(--ds-text-md);
  font-weight:600;
  color:var(--ds-color-primary-dark);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ds-hover-card-subtitle{
  font-size:var(--ds-text-sm);
  color:var(--ds-color-text-muted);
  margin-top:2px;
}

.ds-hover-card-metrics{
  display:flex;
  gap:var(--ds-space-4);
  padding:var(--ds-space-2) 0;
  border-top:.5px solid var(--ds-color-border-lighter);
  border-bottom:.5px solid var(--ds-color-border-lighter);
  margin-bottom:var(--ds-space-3);
}
.ds-hover-card-metric-label{
  font-size:var(--ds-text-2xs);
  color:var(--ds-color-text-muted);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.ds-hover-card-metric-value{
  font-size:var(--ds-text-lg);
  font-weight:700;
  color:var(--ds-color-primary-dark);
}

.ds-hover-card-info{
  font-size:var(--ds-text-sm);
  color:var(--ds-color-text-muted);
  margin-bottom:var(--ds-space-1);
}

.ds-hover-card-actions{
  display:flex;
  gap:var(--ds-space-2);
  margin-top:var(--ds-space-3);
}

.ds-hover-card-anchor{ position:relative; display:inline-block; }
.ds-hover-card-popover{
  position:absolute;
  top:100%;
  left:0;
  margin-top:6px;
  z-index:var(--ds-z-dropdown);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity var(--ds-transition-base),transform var(--ds-transition-base),visibility var(--ds-transition-base);
}
.ds-hover-card-anchor:hover .ds-hover-card-popover{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* ===== components/quick-action-menu.css ===== */

.ds-qam-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0;
  border:1px solid transparent;
  border-radius:var(--ds-radius-sm);
  background:none;
  color:var(--ds-color-text-muted);
  font-size:var(--ds-text-xl);
  line-height:1;
  cursor:pointer;
}
.ds-qam-trigger:hover{
  background:var(--ds-color-bg-surface-alt);
  border-color:var(--ds-color-border);
  color:var(--ds-color-text);
}

/* ===== components/sidepanel.css ===== */

.ds-sidepanel-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,23,32,.45);
  z-index:var(--ds-z-modal);
}
@keyframes nx-panel-overlay-in{ from{ opacity:0 } to{ opacity:1 } }
.ds-sidepanel-overlay.ds-open{ display:block; animation:nx-panel-overlay-in var(--ds-motion-panel,.22s) var(--ds-motion-ease) both; }

.ds-sidepanel{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:420px;
  max-width:92vw;
  background:var(--ds-color-bg-surface);
  box-shadow:var(--ds-shadow-modal);
  z-index:calc(var(--ds-z-modal) + 1);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform var(--ds-motion-panel) var(--ds-motion-ease);
}
.ds-sidepanel-overlay.ds-open .ds-sidepanel{ transform:translateX(0); }

/* Variante MODAL CENTRADO (data-ds-panel-variant="center") -- para
   expedientes con mucha informacion (ej. Instalaciones): en vez del
   panel lateral, una tarjeta centrada, mas ancha, con scroll interno.
   Reusa TODO el mecanismo del sidepanel (fetch, ESC, clic afuera,
   submit, foco); solo cambia la presentacion. La clase .ds-panel-center
   la agrega/quita abrirSidepanel segun el disparador. */
.ds-sidepanel-overlay.ds-panel-center.ds-open{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 20px;
}
.ds-sidepanel-overlay.ds-panel-center .ds-sidepanel{
  position:relative;
  top:auto;
  right:auto;
  height:auto;
  max-height:92vh;
  width:1140px;
  max-width:96vw;
  border-radius:14px;
  transform:scale(.97);
  opacity:0;
  transition:transform var(--ds-motion-panel) var(--ds-motion-ease), opacity var(--ds-motion-panel) var(--ds-motion-ease);
}
.ds-sidepanel-overlay.ds-panel-center.ds-open .ds-sidepanel{
  transform:none;
  opacity:1;
}
@media (max-width:640px){
  .ds-sidepanel-overlay.ds-panel-center.ds-open{ padding:12px; }
  .ds-sidepanel-overlay.ds-panel-center .ds-sidepanel{ max-height:94vh; }
}
/* Foco programatico al abrir (ver _enfocarPanel en sidepanel.js) --
   mismo color que el resto de la app usa para foco de teclado, para
   que sea visible sin inventar un estilo nuevo. */
.ds-sidepanel:focus{
  outline:2px solid var(--ds-color-primary);
  outline-offset:-2px;
}

.ds-sidepanel-header{
  padding:var(--ds-space-5) var(--ds-space-6);
  border-bottom:.5px solid var(--ds-color-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
}
.ds-sidepanel-title{
  font-size:var(--ds-text-2xl);
  font-weight:700;
  color:var(--ds-color-primary-dark);
}
.ds-sidepanel-close{
  background:none;
  border:none;
  font-size:var(--ds-text-2xl);
  color:var(--ds-color-text-muted);
  cursor:pointer;
  line-height:1;
  padding:var(--ds-space-1);
}
.ds-sidepanel-close:hover{ color:var(--ds-color-text); }

.ds-sidepanel-body{
  flex:1;
  overflow-y:auto;
  padding:var(--ds-space-6);
}

.ds-sidepanel-footer{
  padding:var(--ds-space-4) var(--ds-space-6);
  border-top:.5px solid var(--ds-color-border);
  display:flex;
  gap:var(--ds-space-2);
  justify-content:flex-end;
  flex-shrink:0;
}

.ds-panel-cargando{
  display:flex;
  align-items:center;
  gap:var(--ds-space-2);
  color:var(--ds-color-text-muted);
  font-size:var(--ds-text-base);
}
.ds-panel-spinner{
  width:16px;
  height:16px;
  flex-shrink:0;
  border:2px solid var(--ds-color-border);
  border-top-color:var(--ds-color-primary);
  border-radius:50%;
  display:inline-block;
  animation:ds-panel-spin .6s linear infinite;
}
@keyframes ds-panel-spin{
  to{ transform:rotate(360deg); }
}
/* Transicion suave cada vez que se reemplaza el contenido del panel
   (carga inicial -> contenido, o contenido -> error de formulario) --
   se aplica automaticamente a lo que sea que el servidor haya
   devuelto, sin que cada pantalla migrada tenga que declararla. */
.ds-sidepanel-body > *{
  animation:ds-panel-fade-in var(--ds-transition-base) ease-out;
}
@keyframes ds-panel-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .ds-sidepanel{ transition:none; }
  .ds-sidepanel-overlay.ds-open{ animation:none; }
  .ds-panel-spinner{ animation:none; }
  .ds-sidepanel-body > *{ animation:none; }
}

/* Mientras un panel esta abierto, el listado de fondo no debe poder
   desplazarse (el panel tiene su propio scroll interno via
   .ds-sidepanel-body arriba) -- ver abrirSidepanel/cerrarSidepanelAbierto
   en static/js/design-system/sidepanel.js. */
body.ds-panel-open-body{
  overflow:hidden;
}

/* ===== components/timeline.css ===== */

.ds-timeline{
  display:flex;
  flex-direction:column;
}

.ds-timeline-item{
  position:relative;
  display:flex;
  gap:var(--ds-space-3);
  padding-bottom:var(--ds-space-5);
}
.ds-timeline-item:not(:last-child)::before{
  content:"";
  position:absolute;
  left:15px;
  top:32px;
  bottom:0;
  width:1px;
  background:var(--ds-color-border);
}

.ds-timeline-marker{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--ds-color-info-bg);
  color:var(--ds-color-info-text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--ds-text-md);
  flex-shrink:0;
  z-index:1;
}

.ds-timeline-content{ flex:1; min-width:0; padding-top:4px; }

.ds-timeline-meta{
  display:flex;
  align-items:center;
  gap:var(--ds-space-2);
  font-size:var(--ds-text-xs);
  color:var(--ds-color-text-muted);
  margin-bottom:2px;
}
.ds-timeline-usuario{ font-weight:600; color:var(--ds-color-text); }

.ds-timeline-accion{
  font-size:var(--ds-text-base);
  font-weight:600;
  color:var(--ds-color-text);
  margin-bottom:2px;
}

.ds-timeline-descripcion{
  font-size:var(--ds-text-sm);
  color:var(--ds-color-text-muted);
}

.ds-timeline-adjuntos{
  display:flex;
  gap:var(--ds-space-2);
  flex-wrap:wrap;
  margin-top:var(--ds-space-2);
}
.ds-timeline-adjunto{
  font-size:var(--ds-text-xs);
  color:var(--ds-color-primary);
  border:1px solid var(--ds-color-border);
  border-radius:var(--ds-radius-sm);
  padding:2px var(--ds-space-2);
}

/* ===== components/activity-item.css ===== */

.ds-activity-item{
  display:flex;
  align-items:flex-start;
  gap:var(--ds-space-3);
  padding:var(--ds-space-3) var(--ds-space-4);
  border:.5px solid var(--ds-color-border);
  border-radius:var(--ds-radius-md);
  background:var(--ds-color-bg-surface);
}

.ds-activity-icon{
  width:32px;
  height:32px;
  border-radius:var(--ds-radius-md);
  background:var(--ds-color-bg-surface-alt);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--ds-text-lg);
  flex-shrink:0;
}

.ds-activity-content{ flex:1; min-width:0; }

.ds-activity-header{
  display:flex;
  align-items:center;
  gap:var(--ds-space-2);
  margin-bottom:2px;
}
.ds-activity-title{
  font-size:var(--ds-text-base);
  font-weight:600;
  color:var(--ds-color-text);
}

.ds-activity-description{
  font-size:var(--ds-text-sm);
  color:var(--ds-color-text-muted);
  margin-bottom:var(--ds-space-1);
}

.ds-activity-date{
  font-size:var(--ds-text-xs);
  color:var(--ds-color-text-muted);
}

.ds-activity-action{ flex-shrink:0; }

/* ===== components/skeletons.css ===== */

.ds-skeleton{
  background:linear-gradient(90deg,
    var(--ds-color-border-lighter) 25%,
    var(--ds-color-border-light) 37%,
    var(--ds-color-border-lighter) 63%);
  background-size:400% 100%;
  animation:ds-skeleton-shimmer 1.4s ease infinite;
  border-radius:var(--ds-radius-sm);
}
@keyframes ds-skeleton-shimmer{
  0%{ background-position:100% 50%; }
  100%{ background-position:0 50%; }
}

.ds-skeleton-card{
  background:var(--ds-color-bg-surface);
  border:.5px solid var(--ds-color-border);
  border-radius:var(--ds-radius-lg);
  padding:var(--ds-space-5);
}
.ds-skeleton-card .ds-skeleton-line{ height:12px; margin-bottom:var(--ds-space-2); }
.ds-skeleton-card .ds-skeleton-line:last-child{ margin-bottom:0; width:60%; }
.ds-skeleton-card .ds-skeleton-title{ height:16px; width:50%; margin-bottom:var(--ds-space-3); }

.ds-skeleton-table{ width:100%; border-collapse:collapse; }
.ds-skeleton-table td{ padding:10px var(--ds-space-3); }
.ds-skeleton-table .ds-skeleton-line{ height:12px; }

.ds-skeleton-list{ display:flex; flex-direction:column; gap:var(--ds-space-3); }
.ds-skeleton-list-item{ display:flex; align-items:center; gap:var(--ds-space-3); }
.ds-skeleton-list-item .ds-skeleton-avatar{ width:32px; height:32px; border-radius:50%; flex-shrink:0; }
.ds-skeleton-list-item .ds-skeleton-line{ height:12px; flex:1; }

.ds-progress-bar{
  width:100%;
  height:6px;
  background:var(--ds-color-info-bg);
  border-radius:var(--ds-radius-pill);
  overflow:hidden;
}
.ds-progress-bar-fill{
  height:100%;
  width:calc(var(--ds-progress, 0) * 1%);
  background:var(--ds-color-primary);
  border-radius:var(--ds-radius-pill);
  transition:width var(--ds-transition-slow);
}

/* ===== components/confirmation-dialog.css ===== */

.ds-dialog-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin:0 auto var(--ds-space-4);
}
.ds-dialog-icon-danger{  background:var(--ds-color-danger-bg);  color:var(--ds-color-danger-text); }
.ds-dialog-icon-warning{ background:var(--ds-color-warning-bg); color:var(--ds-color-warning-text); }
.ds-dialog-icon-info{    background:var(--ds-color-info-bg);    color:var(--ds-color-info-text); }
.ds-dialog-icon-success{ background:var(--ds-color-success-bg); color:var(--ds-color-success-text); }

.ds-dialog-title{
  font-size:var(--ds-text-2xl);
  font-weight:700;
  color:var(--ds-color-text);
  text-align:center;
  margin-bottom:var(--ds-space-2);
}

.ds-dialog-message{
  font-size:var(--ds-text-base);
  color:var(--ds-color-text-muted);
  text-align:center;
  margin-bottom:var(--ds-space-5);
}

.ds-dialog-actions{
  display:flex;
  gap:var(--ds-space-2);
  justify-content:center;
}
.ds-dialog-actions .ds-btn{ flex:1; }

/* ===== components/toasts.css ===== */

.ds-toast-container{
  position:fixed;
  top:var(--ds-space-5);
  right:var(--ds-space-5);
  z-index:var(--ds-z-tooltip);
  display:flex;
  flex-direction:column;
  gap:var(--ds-space-2);
  width:320px;
  max-width:90vw;
}

.ds-toast{
  display:flex;
  align-items:flex-start;
  gap:var(--ds-space-2);
  padding:var(--ds-space-3) var(--ds-space-4);
  border-radius:var(--ds-radius-md);
  box-shadow:var(--ds-shadow-modal);
  font-size:var(--ds-text-base);
  opacity:0;
  transform:translateX(12px);
  transition:opacity var(--ds-transition-slow),transform var(--ds-transition-slow);
}
.ds-toast.ds-open{ opacity:1; transform:translateX(0); }

.ds-toast-icon{ flex-shrink:0; }
.ds-toast-message{ flex:1; }
.ds-toast-close{
  background:none;
  border:none;
  cursor:pointer;
  font-size:var(--ds-text-md);
  line-height:1;
  color:inherit;
  opacity:.6;
}
.ds-toast-close:hover{ opacity:1; }

.ds-toast-success{ background:var(--ds-color-success-bg); color:var(--ds-color-success-text); }
.ds-toast-info{    background:var(--ds-color-info-bg);    color:var(--ds-color-info-text); }
.ds-toast-warning{ background:var(--ds-color-warning-bg); color:var(--ds-color-warning-text); }
.ds-toast-danger{  background:var(--ds-color-danger-bg);  color:var(--ds-color-danger-text); }

/* ================= components/giras-dashboard.css (Control de Giras: Tablero/Estado de Resultados) ================= */

/* Componentes del Design System para el Tablero/Estado de Resultados de
   Control de Giras -- adaptacion de los patrones visuales del prototipo
   del cliente (tarjetas KPI con acento, insights accionables, ledger
   financiero) a los tokens claros de Nexora (ver tokens.css), NO al
   tema oscuro original. Prefijo ds- en todo, ninguna clase colisiona
   con main.css ni con el resto del Design System. */

/* Chip pequeño de solo lectura -- catalogos (roles, zonas, tipos de
   plan en Datos), codigos de gira sin provincia en el Mapa. */
.ds-tag{
  display:inline-block;
  padding:3px 9px;
  border-radius:var(--ds-radius-pill);
  background:var(--ds-color-bg-surface-alt);
  border:1px solid var(--ds-color-border);
  color:var(--ds-color-text);
  font-size:var(--ds-text-sm);
}

/* Grid de 2 columnas para tarjetas de catalogo (Datos y catalogos) --
   1 columna en viewports angostos. */
.ds-datos-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--ds-space-3); }
.ds-datos-grid > *{ min-width:0; }
@media(max-width:640px){
  .ds-datos-grid{ grid-template-columns:1fr; }
}

/* KPI con barra de acento -- extiende .ds-metric-card (metrics.css)
   agregando una franja de color a la izquierda, igual patron visual
   que el prototipo pero con los colores semanticos ya definidos en
   tokens.css (success/warning/danger/info/primary/purple). */
.ds-metric-card-accent{
  position:relative;
  padding-left:calc(var(--ds-space-4) + 3px);
  overflow:hidden;
}
.ds-metric-card-accent::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--ds-color-primary);
}
.ds-metric-card-accent.ds-accent-success::before{ background:#54B981; }
.ds-metric-card-accent.ds-accent-warning::before{ background:var(--ds-color-warning-border); }
.ds-metric-card-accent.ds-accent-danger::before{ background:var(--ds-color-danger-accent); }
.ds-metric-card-accent.ds-accent-info::before{ background:var(--ds-color-primary); }
.ds-metric-card-accent.ds-accent-purple::before{ background:var(--ds-color-purple-text); }
.ds-metric-card-accent.ds-accent-brass::before{ background:#C98A1F; }

.ds-metric-caption{
  font-size:var(--ds-text-xs);
  color:var(--ds-color-text-muted);
  margin-top:var(--ds-space-1);
}

/* Insights accionables -- tarjeta con borde izquierdo de color + icono
   circular + titulo + texto. */
.ds-insight-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--ds-space-3);
  margin-bottom:var(--ds-space-6);
}
/* min-width:0 -- sin esto, cada celda del grid nunca se encoge mas alla
   del min-content de su contenido, forzando scroll horizontal en
   viewports angostos (ver .ds-metric-grid en metrics.css). */
.ds-insight-grid > *, .ds-chart-grid > *{ min-width:0; }
.ds-insight-card{
  background:var(--ds-color-bg-surface);
  border:.5px solid var(--ds-color-border);
  border-left:3px solid var(--ds-color-text-muted);
  border-radius:var(--ds-radius-lg);
  padding:var(--ds-space-3) var(--ds-space-4);
  display:flex; gap:var(--ds-space-3); align-items:flex-start;
}
.ds-insight-card.ds-insight-pos{ border-left-color:#54B981; }
.ds-insight-card.ds-insight-pos .ds-insight-icon{ background:var(--ds-color-success-bg); color:var(--ds-color-text-positive); }
.ds-insight-card.ds-insight-opp{ border-left-color:var(--ds-color-primary); }
.ds-insight-card.ds-insight-opp .ds-insight-icon{ background:var(--ds-color-info-bg); color:var(--ds-color-primary-dark); }
.ds-insight-card.ds-insight-risk{ border-left-color:var(--ds-color-danger-accent); }
.ds-insight-card.ds-insight-risk .ds-insight-icon{ background:var(--ds-color-danger-bg); color:var(--ds-color-danger-strong); }
.ds-insight-card.ds-insight-info{ border-left-color:#C98A1F; }
.ds-insight-card.ds-insight-info .ds-insight-icon{ background:var(--ds-color-warning-bg-soft); color:#C98A1F; }
.ds-insight-icon{
  width:30px; height:30px; border-radius:var(--ds-radius-md); flex:none;
  display:grid; place-items:center; font-size:15px;
}
.ds-insight-title{ font-weight:600; font-size:var(--ds-text-base); color:var(--ds-color-text); overflow-wrap:anywhere; }
.ds-insight-text{ font-size:var(--ds-text-sm); color:var(--ds-color-text-muted); margin-top:2px; line-height:1.45; overflow-wrap:anywhere; }

/* Grid de graficos -- 2 columnas en escritorio, 1 en pantallas
   estrechas (ver media query al final). */
.ds-chart-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:var(--ds-space-3);
  margin-bottom:var(--ds-space-3);
}
.ds-chart-grid-even{ grid-template-columns:1fr 1fr; }
.ds-chart-box{ position:relative; height:260px; }

/* Ledger -- estado de resultados por gira, filas tipo libro contable. */
.ds-ledger-section{
  font-size:var(--ds-text-xs);
  font-weight:700;
  color:var(--ds-color-primary-dark);
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:var(--ds-space-3) 0 var(--ds-space-1);
  border-bottom:1px solid var(--ds-color-border-light);
  margin-bottom:var(--ds-space-1);
}
.ds-ledger-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:var(--ds-space-3);
  padding:var(--ds-space-1) 0;
  align-items:baseline;
  border-bottom:1px dashed var(--ds-color-border-lighter);
  font-size:var(--ds-text-base);
}
.ds-ledger-row .ds-ledger-qty{ font-size:var(--ds-text-xs); color:var(--ds-color-text-muted); min-width:60px; text-align:right; }
.ds-ledger-row .ds-ledger-amount{ font-weight:500; min-width:110px; text-align:right; font-variant-numeric:tabular-nums; }
.ds-ledger-row.ds-ledger-sub{ background:var(--ds-color-bg-surface-alt); font-weight:600; }
.ds-ledger-row.ds-ledger-grand{
  background:var(--ds-color-info-bg);
  border:none;
  border-radius:var(--ds-radius-md);
  padding:var(--ds-space-2) var(--ds-space-2);
  font-weight:700;
}
.ds-ledger-row.ds-ledger-grand .ds-ledger-amount{ font-size:var(--ds-text-2xl); }
.ds-ledger-row.ds-ledger-pending{ color:var(--ds-color-text-muted); font-style:italic; }

/* Chip de estado de conciliacion -- distingue Real / Estimada /
   Pendiente de conciliacion / Snapshot de cierre, para no mezclar
   cifras de distinta naturaleza sin avisar. */
.ds-fuente-chip{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 7px; border-radius:var(--ds-radius-pill);
  margin-left:6px; vertical-align:middle;
}
.ds-fuente-chip.ds-fuente-real{ background:var(--ds-color-success-bg); color:var(--ds-color-text-positive); }
.ds-fuente-chip.ds-fuente-estimada{ background:var(--ds-color-warning-bg-soft); color:#C98A1F; }
.ds-fuente-chip.ds-fuente-pendiente{ background:var(--ds-color-neutral-bg); color:var(--ds-color-neutral-text); }

/* Ranking horizontal (barras) -- reutilizado en Tablero (zonas) y en
   una futura vista de mapa. */
.ds-rank-list{ margin-top:var(--ds-space-2); }
.ds-rank-item{ display:flex; align-items:center; gap:var(--ds-space-2); padding:6px 0; }
.ds-rank-item .ds-rank-n{ font-size:var(--ds-text-xs); color:var(--ds-color-text-muted); width:16px; flex:none; }
.ds-rank-item .ds-rank-name{ font-size:var(--ds-text-sm); min-width:90px; flex:none; }
.ds-rank-item .ds-rank-bar{ flex:1; height:7px; border-radius:4px; background:var(--ds-color-bg-surface-alt); overflow:hidden; }
.ds-rank-item .ds-rank-bar i{ display:block; height:100%; background:var(--ds-color-primary); border-radius:4px; }
.ds-rank-item .ds-rank-value{ font-size:var(--ds-text-xs); color:var(--ds-color-text-muted); white-space:nowrap; min-width:70px; text-align:right; }

@media(max-width:1080px){
  .ds-insight-grid, .ds-chart-grid, .ds-chart-grid-even{ grid-template-columns:1fr; }
}
@media(max-width:560px){
  .ds-ledger-row{ grid-template-columns:1fr; gap:2px; }
  .ds-ledger-row .ds-ledger-qty, .ds-ledger-row .ds-ledger-amount{ text-align:left; min-width:0; }
}
@media(max-width:640px){
  .ds-rank-item{ flex-wrap:wrap; }
  .ds-rank-item .ds-rank-name{ min-width:0; flex:1 1 auto; }
  .ds-rank-item .ds-rank-bar{ flex-basis:100%; order:3; }
  .ds-rank-item .ds-rank-value{ min-width:0; }
  .ds-fuente-chip{ white-space:normal; max-width:100%; }
}

/* Utilidad de impresion -- usada por Estado de Resultados ("Imprimir")
   para ocultar navegacion/filtros/acciones y dejar solo el contenido
   financiero. Nueva clase, no afecta ninguna pantalla que no la use. */
@media print{
  .no-print{ display:none !important; }
}

/* Columna numerica alineada a la derecha en .ds-table -- no existia
   una utilidad para esto en Nexora (main.css no define .num); se
   agrega aqui porque el listado enriquecido de Giras y el Estado de
   Resultados la necesitan para las columnas de montos/cantidades. */
.ds-table th.num, .ds-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ===== components/giras-form.css ===== */

/* Formulario de Registrar/Editar Gira (Etapa B) -- layout de 2
   columnas (formulario + panel de Estado de Resultados en vivo,
   pegajoso en escritorio), 1 columna en tablet/movil. */

.ds-form-layout{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:var(--ds-space-4);
  align-items:start;
}
.ds-form-main{
  display:flex;
  flex-direction:column;
  gap:var(--ds-space-4);
  min-width:0;
}
.ds-form-sidebar{
  position:sticky;
  top:var(--ds-space-4);
  min-width:0;
}

@media(max-width:960px){
  .ds-form-layout{ grid-template-columns:1fr; }
  .ds-form-sidebar{ position:static; }
}

/* min-width:0 -- mismo fix que .ds-metric-grid: sin esto una celda del
   grid de 3 columnas nunca se encoge mas alla del min-content de su
   contenido en viewports angostos. */
.ds-form-grid > *{ min-width:0; }
@media(max-width:640px){
  .ds-form-grid{ grid-template-columns:1fr; }
}
.ds-field-col-2{ grid-column:span 2; }
@media(max-width:640px){
  .ds-field-col-2{ grid-column:span 1; }
}

/* Valor de solo lectura -- misma apariencia que un input pero sin
   editor, para campos derivados o congelados (codigo, provincia
   principal, estado, sociedad). */
.ds-input-disabled{
  padding:var(--ds-space-2) 10px;
  border:1px solid var(--ds-color-border);
  border-radius:var(--ds-radius-sm);
  font-size:var(--ds-text-base);
  color:var(--ds-color-text-muted);
  background:var(--ds-color-bg-surface-alt);
}

/* Secciones "bloqueadas" del formulario en modo Crear -- previsualizan
   la estructura del producto (Equipo/Vehiculos/Comercial/Presupuesto)
   sin fingir que ya hay datos que capturar. */
.ds-locked-section{
  opacity:.7;
  border-style:dashed;
}

/* Categorias de gasto del prototipo, deshabilitadas hasta integrar
   Contabilidad -- ver _gira_presupuesto.html. */
.ds-presupuesto-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--ds-space-3);
  border:none;
  padding:0;
  margin:0;
}
.ds-presupuesto-grid > *{ min-width:0; }
@media(max-width:640px){
  .ds-presupuesto-grid{ grid-template-columns:1fr; }
}

/* Panel de Estado de Resultados en vivo -- ver _gira_estado_vivo.html. */
.ds-estado-vivo-preview-row{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px dashed var(--ds-color-border-lighter);
  font-size:var(--ds-text-sm);
  color:var(--ds-color-text-muted);
}

/* ===== components/giras-mapa.css ===== */

/* Mapa interactivo de Control de Giras (Etapa C) -- layout de 2
   columnas (mapa + panel de detalle), 1 columna en tablet/movil. Ver
   static/js/giras-mapa.js para la logica; aqui solo estilos. */

.ds-mapa-layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:var(--ds-space-4);
  align-items:start;
}
/* min-width:0 -- mismo fix que .ds-form-layout/.ds-metric-grid: sin
   esto ninguna celda del grid se encoge mas alla del min-content de su
   contenido en viewports angostos. */
.ds-mapa-layout > *{ min-width:0; }
@media(max-width:960px){
  .ds-mapa-layout{ grid-template-columns:1fr; }
}

.ds-mapa-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--ds-space-2);
  margin-bottom:var(--ds-space-3);
}
.ds-mapa-toolbar-label{
  font-size:var(--ds-text-xs);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ds-color-text-muted);
}
.ds-mapa-seg{ display:flex; gap:4px; flex-wrap:wrap; }
.ds-mapa-seg button{
  padding:6px 12px;
  border:1px solid var(--ds-color-border);
  border-radius:var(--ds-radius-sm);
  background:var(--ds-color-bg-surface);
  color:var(--ds-color-text);
  font-size:var(--ds-text-sm);
  font-family:var(--ds-font-family);
  cursor:pointer;
  transition:background var(--ds-transition-fast),color var(--ds-transition-fast);
}
.ds-mapa-seg button:hover{ background:var(--ds-color-bg-hover-row); }
.ds-mapa-seg button.on{
  background:var(--ds-color-primary);
  color:#fff;
  border-color:var(--ds-color-primary);
}
.ds-mapa-seg button:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.ds-mapa-svg-holder{
  width:100%;
  max-width:480px;
  margin:0 auto;
}
.ds-mapa-svg{ width:100%; height:auto; display:block; }
.ds-mapa-provincia{ cursor:pointer; transition:opacity var(--ds-transition-fast); }
.ds-mapa-provincia:hover{ opacity:.82; }
.ds-mapa-zona{
  fill:var(--ds-color-primary-dark);
  stroke:#fff;
  stroke-width:1.5;
  cursor:pointer;
  opacity:.85;
  transition:opacity var(--ds-transition-fast),stroke-width var(--ds-transition-fast);
}
.ds-mapa-zona:hover{ opacity:1; stroke-width:2.5; }

.ds-mapa-legend{
  display:flex;
  align-items:center;
  gap:var(--ds-space-2);
  margin-top:var(--ds-space-3);
  font-size:var(--ds-text-xs);
  color:var(--ds-color-text-muted);
  flex-wrap:wrap;
}
.ds-mapa-legend-scale{ display:flex; border-radius:3px; overflow:hidden; }
.ds-mapa-legend-swatch{ width:22px; height:10px; display:inline-block; }
.ds-mapa-legend-max{ font-weight:600; color:var(--ds-color-text); }

.ds-mapa-tooltip{
  position:fixed;
  z-index:var(--ds-z-tooltip);
  background:var(--ds-color-text);
  color:#fff;
  padding:6px 10px;
  border-radius:var(--ds-radius-sm);
  font-size:var(--ds-text-sm);
  line-height:1.4;
  pointer-events:none;
  display:none;
  max-width:220px;
}

.ds-mapa-detalle-title{ margin:0 0 var(--ds-space-2); font-size:var(--ds-text-lg); }
.ds-mapa-detalle-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--ds-space-2);
}
.ds-mapa-detalle-metrics > div{
  background:var(--ds-color-bg-surface-alt);
  padding:var(--ds-space-2);
  border-radius:var(--ds-radius-sm);
}
.ds-mapa-detalle-metrics span{
  display:block;
  font-size:var(--ds-text-2xs);
  color:var(--ds-color-text-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.ds-mapa-detalle-metrics b{ font-size:var(--ds-text-lg); color:var(--ds-color-primary-dark); }
.ds-mapa-detalle-subtitle{
  margin-top:var(--ds-space-3);
  font-size:var(--ds-text-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ds-color-text-muted);
}
.ds-mapa-detalle-list{ list-style:none; margin:var(--ds-space-2) 0 0; padding:0; }
.ds-mapa-detalle-list li{
  display:flex;
  justify-content:space-between;
  gap:var(--ds-space-2);
  padding:7px 0;
  border-bottom:1px dashed var(--ds-color-border-lighter);
  font-size:var(--ds-text-base);
}
.ds-mapa-detalle-list li:not(.ds-mapa-detalle-empty){ cursor:pointer; }
.ds-mapa-detalle-list li span{ color:var(--ds-color-text-muted); white-space:nowrap; }
.ds-mapa-detalle-giras li a{ color:var(--ds-color-primary); font-weight:500; }
.ds-mapa-detalle-empty{ color:var(--ds-color-text-muted); font-size:var(--ds-text-sm); font-style:italic; }

.ds-mapa-cobertura-warning{
  border-color:var(--ds-color-warning-border);
  background:var(--ds-color-warning-bg-soft);
}

/* ===== components/giras-expediente.css ===== */

/* Expediente de Gira como dashboard ejecutivo -- chips de codigo, KPIs
   grandes, comparativas, mejor desempeño, stepper de estados. Reutiliza
   tokens.css y los tonos semanticos ya definidos (success/warning/
   danger/info/purple/brass), igual patron que giras-dashboard.css. */

/* Codigo separado en chips -- G / EAV / LIM / 2026 / #014. */
.ds-codigo-chips{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.ds-codigo-chip{
  font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;
  font-size:var(--ds-text-sm);
  font-weight:700;
  padding:3px 9px;
  border-radius:var(--ds-radius-sm);
  background:var(--ds-color-info-bg);
  color:var(--ds-color-primary-dark);
  letter-spacing:.02em;
}
.ds-codigo-chip.ds-codigo-chip-muted{
  background:var(--ds-color-bg-surface-alt);
  color:var(--ds-color-text-muted);
  font-weight:600;
}

/* KPI grandes del Resumen Ejecutivo -- version ampliada de
   .ds-metric-card-accent (giras-dashboard.css), con icono + valor mas
   grande + chip de fuente integrado. */
.ds-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--ds-space-3);
  margin-bottom:var(--ds-space-4);
}
.ds-kpi-grid > *{ min-width:0; }
.ds-kpi-card{
  position:relative;
  background:var(--ds-color-bg-surface);
  border:.5px solid var(--ds-color-border);
  border-radius:var(--ds-radius-lg);
  padding:var(--ds-space-4);
  overflow:hidden;
}
.ds-kpi-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--ds-color-primary);
}
.ds-kpi-card.ds-accent-success::before{ background:#54B981; }
.ds-kpi-card.ds-accent-warning::before{ background:var(--ds-color-warning-border); }
.ds-kpi-card.ds-accent-danger::before{ background:var(--ds-color-danger-accent); }
.ds-kpi-card.ds-accent-info::before{ background:var(--ds-color-primary); }
.ds-kpi-card.ds-accent-purple::before{ background:var(--ds-color-purple-text); }
.ds-kpi-card.ds-accent-brass::before{ background:#C98A1F; }
.ds-kpi-icon{ font-size:20px; line-height:1; margin-bottom:var(--ds-space-2); }
.ds-kpi-label{
  font-size:var(--ds-text-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ds-color-text-muted);
  margin-bottom:4px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.ds-kpi-value{
  font-size:26px;
  font-weight:700;
  color:var(--ds-color-primary-dark);
  line-height:1.15;
}
.ds-kpi-value.ds-valor-pendiente{ font-size:16px; font-weight:600; color:var(--ds-color-text-muted); font-style:italic; }
.ds-kpi-caption{ font-size:var(--ds-text-xs); color:var(--ds-color-text-muted); margin-top:4px; }

/* Comparativas -- esta gira vs promedio, con flecha de tendencia. */
.ds-comparativa-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--ds-space-3);
}
.ds-comparativa-grid > *{ min-width:0; }
.ds-comparativa-card{
  background:var(--ds-color-bg-surface);
  border:.5px solid var(--ds-color-border);
  border-radius:var(--ds-radius-lg);
  padding:var(--ds-space-4);
}
.ds-comparativa-titulo{ font-size:var(--ds-text-base); font-weight:600; color:var(--ds-color-text); margin-bottom:var(--ds-space-2); }
.ds-comparativa-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--ds-space-2);
  padding:5px 0;
  border-bottom:1px dashed var(--ds-color-border-lighter);
  font-size:var(--ds-text-sm);
}
.ds-comparativa-row:last-child{ border-bottom:none; }
.ds-comparativa-metrica{ color:var(--ds-color-text-muted); }
.ds-comparativa-valores{ display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.ds-comparativa-valor-gira{ font-weight:700; color:var(--ds-color-text); }
.ds-comparativa-valor-promedio{ font-size:var(--ds-text-xs); color:var(--ds-color-text-muted); }
.ds-tendencia{ font-weight:700; font-size:var(--ds-text-xs); border-radius:var(--ds-radius-pill); padding:1px 7px; }
.ds-tendencia.ds-tendencia-mejor{ background:var(--ds-color-success-bg); color:var(--ds-color-text-positive); }
.ds-tendencia.ds-tendencia-peor{ background:var(--ds-color-danger-bg); color:var(--ds-color-danger-strong); }
.ds-tendencia.ds-tendencia-neutral{ background:var(--ds-color-neutral-bg); color:var(--ds-color-neutral-text); }

/* Mejor desempeño -- vendedor / tecnico / vehiculo / proyecto / zona. */
.ds-mejor-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--ds-space-3);
}
.ds-mejor-grid > *{ min-width:0; }
.ds-mejor-card{
  background:var(--ds-color-bg-surface);
  border:.5px solid var(--ds-color-border);
  border-radius:var(--ds-radius-lg);
  padding:var(--ds-space-4);
}
.ds-mejor-eyebrow{ font-size:var(--ds-text-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--ds-color-text-muted); font-weight:600; }
.ds-mejor-nombre{ font-size:var(--ds-text-2xl); font-weight:700; color:var(--ds-color-primary-dark); margin:4px 0 var(--ds-space-2); }
.ds-mejor-metricas{ display:flex; gap:var(--ds-space-3); flex-wrap:wrap; }
.ds-mejor-metricas > div{ font-size:var(--ds-text-xs); color:var(--ds-color-text-muted); }
.ds-mejor-metricas b{ display:block; font-size:var(--ds-text-lg); color:var(--ds-color-text); font-weight:700; }

/* Stepper horizontal de estados -- Planeada -> Programada -> En curso ->
   Finalizada -> Conciliada -> Archivada, con el estado actual resaltado.
   Distinto de .ds-timeline (vertical, para el historial de auditoria). */
.ds-stepper{
  display:flex;
  align-items:flex-start;
  gap:0;
  overflow-x:auto;
  padding-bottom:4px;
}
.ds-stepper-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1;
  min-width:84px;
  position:relative;
  text-align:center;
}
.ds-stepper-step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:11px; left:56%; right:-44%;
  height:2px;
  background:var(--ds-color-border);
}
.ds-stepper-step.ds-stepper-done:not(:last-child)::after{ background:var(--ds-color-primary); }
.ds-stepper-dot{
  width:22px; height:22px; border-radius:50%;
  background:var(--ds-color-bg-surface-alt);
  border:2px solid var(--ds-color-border);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--ds-color-text-muted);
  z-index:1;
}
.ds-stepper-step.ds-stepper-done .ds-stepper-dot{ background:var(--ds-color-primary); border-color:var(--ds-color-primary); color:#fff; }
.ds-stepper-step.ds-stepper-actual .ds-stepper-dot{ background:#fff; border-color:var(--ds-color-primary); color:var(--ds-color-primary-dark); box-shadow:0 0 0 3px var(--ds-color-info-bg); }
.ds-stepper-step.ds-stepper-cancelada .ds-stepper-dot{ background:var(--ds-color-danger-bg); border-color:var(--ds-color-danger-accent); color:var(--ds-color-danger-strong); }
.ds-stepper-label{ font-size:var(--ds-text-xs); margin-top:6px; color:var(--ds-color-text-muted); font-weight:500; }
.ds-stepper-step.ds-stepper-actual .ds-stepper-label{ color:var(--ds-color-primary-dark); font-weight:700; }
.ds-stepper-fecha{ font-size:10px; color:var(--ds-color-text-muted); margin-top:2px; }

@media(max-width:640px){
  .ds-kpi-grid, .ds-comparativa-grid, .ds-mejor-grid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(220px,1fr);
    overflow-x:auto;
    padding-bottom:6px;
  }
  .ds-kpi-grid > *, .ds-comparativa-grid > *, .ds-mejor-grid > *{ min-width:220px; }
  .ds-stepper-step{ min-width:64px; }
  .ds-comparativa-row{ flex-wrap:wrap; }
  .ds-comparativa-metrica{ min-width:0; }
  .ds-comparativa-valores{ white-space:normal; flex-wrap:wrap; }
}

/* ===== components/module-header.css (KPI/encabezado/accesos rapidos -- compartido) ===== */

.ds-metric-card-accent-top{
  position:relative;
  padding-top:calc(var(--ds-space-3) + 3px);
  overflow:hidden;
  box-shadow:var(--ds-shadow-hover);
}
.ds-metric-card-accent-top::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--ds-color-primary);
}
.ds-metric-card-accent-top.ds-accent-success::before{ background:#54B981; }
.ds-metric-card-accent-top.ds-accent-warning::before{ background:var(--ds-color-warning-border); }
.ds-metric-card-accent-top.ds-accent-danger::before{ background:var(--ds-color-danger-accent); }
.ds-metric-card-accent-top.ds-accent-info::before{ background:var(--ds-color-primary); }
.ds-metric-card-accent-top.ds-accent-neutral::before{ background:var(--ds-color-text-muted); }
.ds-metric-card-accent-top .ds-metric-value{ font-size:var(--ds-text-4xl); }

.ds-figure-mono{
  font-family:var(--ds-font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-synthesis:none;
}

.ds-period-nav{
  display:flex;
  gap:6px;
}
.ds-period-nav-btn{
  border:1px solid var(--ds-color-border);
  background:var(--ds-color-bg-surface);
  font-size:var(--ds-text-sm);
  padding:6px 12px;
  border-radius:var(--ds-radius-sm);
  color:var(--ds-color-text);
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
}
.ds-period-nav-btn:hover{ background:var(--ds-color-bg-surface-alt); }
.ds-period-nav-btn.ds-current{
  background:var(--ds-color-info-bg);
  border-color:var(--ds-color-primary);
  color:var(--ds-color-primary-dark);
  font-weight:600;
}

.ds-module-header-title{
  margin:0;
  font-size:var(--ds-text-md);
  font-weight:600;
  color:var(--ds-color-primary-dark);
}

.ds-quick-access-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--ds-space-4);
}
.ds-quick-access-card{
  display:flex;
  align-items:flex-start;
  gap:var(--ds-space-3);
  padding:var(--ds-space-4);
  background:var(--ds-color-bg-surface);
  border:.5px solid var(--ds-color-border);
  border-radius:var(--ds-radius-lg);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  text-decoration:none;
  color:inherit;
  transition:border-color var(--ds-motion-card) var(--ds-motion-ease),
             transform var(--ds-motion-card) var(--ds-motion-ease),
             box-shadow var(--ds-motion-card) var(--ds-motion-ease);
}
.ds-quick-access-card:hover{
  border-color:var(--ds-color-primary);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(16,24,40,.08);
}
.ds-quick-access-card:focus-visible{
  outline:2px solid var(--ds-color-primary);
  outline-offset:2px;
}
.ds-quick-access-icon{
  width:36px;
  height:36px;
  border-radius:var(--ds-radius-md);
  background:var(--ds-color-info-bg);
  color:var(--ds-color-primary-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--ds-text-xl);
  flex-shrink:0;
  transition:transform var(--ds-motion-card) var(--ds-motion-ease),
             background var(--ds-motion-card) var(--ds-motion-ease),
             color var(--ds-motion-card) var(--ds-motion-ease);
}
.ds-quick-access-card:hover .ds-quick-access-icon{
  background:var(--ds-color-primary);
  color:#fff;
  transform:scale(1.06);
}
.ds-quick-access-title{
  font-size:var(--ds-text-base);
  font-weight:600;
  color:var(--ds-color-text);
}
.ds-quick-access-desc{
  font-size:var(--ds-text-sm);
  color:var(--ds-color-text-muted);
  margin-top:2px;
  line-height:1.4;
}

@media(max-width:640px){
  .ds-quick-access-grid{ grid-template-columns:1fr; }
}

/* Dashboard de sociedad -- jerarquia compacta: resultados, operacion y
   acciones. Estas clases son exclusivas del Dashboard para no alterar las
   tarjetas metricas que otros modulos ya consumen. */
.ds-dashboard-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--ds-space-4);margin:var(--ds-space-5) 0 var(--ds-space-3)}
.ds-dashboard-section-heading:first-child{margin-top:0}
.ds-dashboard-section-heading h3{margin:0;color:var(--ds-color-text);font-size:var(--ds-text-md);line-height:1.3}
.ds-dashboard-section-heading p{margin:3px 0 0;color:var(--ds-color-text-muted);font-size:var(--ds-text-sm)}
.ds-dashboard-financial-grid{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:var(--ds-space-4)}
.ds-dashboard-overview{margin-top:var(--ds-space-6)}
.ds-dashboard-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid var(--ds-color-border);border-radius:var(--ds-radius-lg);background:var(--ds-color-bg-surface)}
.ds-dashboard-summary-card{min-width:0;display:flex;flex-direction:column;gap:4px;padding:var(--ds-space-4) var(--ds-space-5);color:inherit;text-decoration:none;border-right:1px solid var(--ds-color-border);transition:background var(--ds-motion-fast) var(--ds-motion-ease)}
.ds-dashboard-summary-card:last-child{border-right:0}
.ds-dashboard-summary-card:hover{background:var(--ds-color-bg-surface-alt)}
.ds-dashboard-summary-card:focus-visible{outline:2px solid var(--ds-color-primary);outline-offset:-2px}
.ds-dashboard-summary-label{color:var(--ds-color-text-muted);font-size:var(--ds-text-sm);font-weight:600}
.ds-dashboard-summary-card strong{color:var(--ds-color-primary-dark);font-size:var(--ds-text-2xl);line-height:1.25}
.ds-dashboard-summary-card>span:last-child{color:var(--ds-color-text-muted);font-size:var(--ds-text-xs)}
.ds-dashboard-attention{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-4);margin-top:var(--ds-space-5);padding:var(--ds-space-3) var(--ds-space-4);border:1px solid var(--ds-color-warning-border);border-radius:var(--ds-radius-md);background:var(--ds-color-warning-bg)}
.ds-dashboard-attention-copy,.ds-dashboard-attention-actions{display:flex;align-items:center;gap:var(--ds-space-3)}
.ds-dashboard-attention-icon{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:var(--ds-color-warning-border);color:#fff;font-weight:700}
.ds-dashboard-attention h3{margin:0;color:var(--ds-color-text);font-size:var(--ds-text-sm)}
.ds-dashboard-attention p{margin:2px 0 0;color:var(--ds-color-text-muted);font-size:var(--ds-text-sm)}
.ds-dashboard-attention-actions a{white-space:nowrap;color:var(--ds-color-primary-dark);font-size:var(--ds-text-sm);font-weight:600;text-decoration:none}
.ds-dashboard-attention-actions a:hover{text-decoration:underline}
.ds-dashboard-actions-heading{margin-top:var(--ds-space-6)}
.ds-dashboard-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.ds-dashboard-quick-grid .ds-quick-access-card{box-shadow:none}
@media(max-width:1050px){.ds-dashboard-financial-grid,.ds-dashboard-overview-grid,.ds-dashboard-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-dashboard-overview-grid{overflow:visible;background:transparent;border:0;gap:var(--ds-space-3)}.ds-dashboard-summary-card{background:var(--ds-color-bg-surface);border:1px solid var(--ds-color-border);border-radius:var(--ds-radius-md)}}
@media(max-width:640px){.ds-dashboard-section-heading{align-items:flex-start}.ds-dashboard-financial-grid,.ds-dashboard-overview-grid,.ds-dashboard-quick-grid{grid-template-columns:1fr}.ds-dashboard-attention{align-items:flex-start;flex-direction:column}.ds-dashboard-attention-actions{padding-left:40px;flex-wrap:wrap}}

/* NOTA: la regla @view-transition + view-transition-name de
   components/motion.css NO se replica aqui a proposito -- este bundle
   (index.css) lo carga TODA la app sin condicion, y activar
   @view-transition aqui encenderia transiciones de documento en cada
   navegacion de Nexora, no solo en Dashboard/Ventas/Instalaciones. Esa
   parte se carga aparte, solo cuando modulo esta en ese conjunto (ver
   templates/base.html). */

/* ===== components/table-groups.css (cabecera de tabla con columnas agrupadas) ===== */

/* Cabecera que abarca varias columnas con un tinte de color -- para tablas
   con secciones logicas (ej. "Promedio mensual" / "Comparativo mensual" /
   "Totales" en la tabla de Asesores). Variantes info/success/neutral
   reutilizan los tokens semanticos ya definidos, sin inventar color nuevo.
   Selectores compuestos con ".ds-table th"/".ds-table td" a proposito --
   tables.css ya define background/text-align ahi (especificidad 0,1,1);
   una clase sola (0,1,0) pierde contra esa regla sin esta forma compuesta. */
.ds-table th.ds-table-group-th{
  text-align:center;
  padding:6px 0 2px 0;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  border-bottom:1px solid var(--ds-color-border-light);
}
.ds-table th.ds-table-group-th.ds-group-info{
  color:var(--ds-color-primary-dark);
  background:var(--ds-color-info-bg);
  border-left:1px solid var(--ds-color-primary);
  border-right:1px solid var(--ds-color-primary);
}
.ds-table th.ds-table-group-th.ds-group-success{
  color:var(--ds-color-success-text);
  background:var(--ds-color-success-bg);
  border-left:1px solid var(--ds-color-success-border);
  border-right:1px solid var(--ds-color-success-border);
}
.ds-table th.ds-table-group-th.ds-group-neutral{
  color:var(--ds-color-text);
  background:var(--ds-color-bg-surface-alt);
  border-left:1px solid var(--ds-color-border);
  border-right:1px solid var(--ds-color-border);
}

/* Celdas (th/td) que pertenecen a ese grupo de columnas -- mismo tinte
   tenue heredado a la fila de datos, para que el grupo se lea como una
   unidad visual de arriba a abajo. Se aplican junto a .num (giras-dashboard.css)
   cuando la columna es numerica. */
.ds-table th.ds-table-col-tint-info, .ds-table td.ds-table-col-tint-info{ background:rgba(24,95,165,.045); }
.ds-table th.ds-table-col-tint-success, .ds-table td.ds-table-col-tint-success{ background:rgba(84,185,129,.045); }
.ds-table th.ds-table-col-tint-neutral, .ds-table td.ds-table-col-tint-neutral{ background:rgba(26,35,50,.03); }
.ds-table-col-edge-l{ border-left:1px solid var(--ds-color-border); }
.ds-table-col-edge-r{ border-right:1px solid var(--ds-color-border); }

.ds-table td.ds-row-status{
  position:relative;
  width:4px;
  padding:0;
}
.ds-table td.ds-row-status::before{
  content:"";
  position:absolute;
  top:5px; bottom:5px; left:0;
  width:4px;
  background:var(--ds-color-border);
}
.ds-table td.ds-row-status.ds-accent-success::before{ background:#54B981; }
.ds-table td.ds-row-status.ds-accent-warning::before{ background:var(--ds-color-warning-border); }
.ds-table td.ds-row-status.ds-accent-danger::before{ background:var(--ds-color-danger-accent); }
.ds-table td.ds-row-status.ds-accent-neutral::before{ background:var(--ds-color-text-muted); }

/* ===== components/assistant.css (burbuja del Asistente Nexora -- infraestructura visual, sin logica de IA) ===== */

.ds-assistant-question-desc{
  margin:0;
  padding:0 var(--ds-space-5, 20px) var(--ds-space-3, 12px);
  font-size:var(--ds-text-sm, 12px);
  color:var(--ds-color-text-muted, #6b7a90);
  flex-shrink:0;
}

.ds-assistant-question-form{
  display:flex;
  align-items:flex-end;
  gap:var(--ds-space-2, 8px);
  padding:var(--ds-space-3, 12px) var(--ds-space-4, 16px);
  border-top:.5px solid var(--ds-color-border, #d0dce8);
  background:var(--ds-color-bg-surface, #fff);
  flex-shrink:0;
}

/* Etiqueta accesible pero oculta visualmente -- en un chat el placeholder
   ya comunica la funcion del campo, pero el <label> sigue existiendo para
   lectores de pantalla. */
.ds-assistant-question-label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.ds-assistant-question-input{
  flex:1;
  min-width:0;
  padding:9px 14px;
  border:1px solid var(--ds-color-border, #d0dce8);
  border-radius:999px;
  font-size:var(--ds-text-base, 13px);
  color:var(--ds-color-text, #1a2332);
  background:var(--ds-color-bg-surface-alt, #f8fafd);
  font-family:var(--ds-font-family, 'Inter', sans-serif);
  min-height:38px;
  transition:border-color var(--ds-transition-fast, .1s),box-shadow var(--ds-transition-fast, .1s);
}

.ds-assistant-question-input:focus{
  outline:none;
  border-color:var(--ds-color-primary, #185FA5);
  background:var(--ds-color-bg-surface, #fff);
  box-shadow:0 0 0 3px rgba(24,95,165,.1);
}

.ds-assistant-question-input:disabled{
  cursor:not-allowed;
  opacity:.6;
}

.ds-assistant-question-submit{
  flex-shrink:0;
  width:38px;
  height:38px;
  padding:0;
  border:none;
  border-radius:50%;
  background:var(--ds-color-primary, #185FA5);
  color:#fff;
  font-family:var(--ds-font-family, 'Inter', sans-serif);
  font-size:16px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background var(--ds-transition-fast, .1s),transform var(--ds-transition-fast, .1s);
}

.ds-assistant-question-submit:hover:not(:disabled){
  background:var(--ds-color-primary-dark, #0C447C);
  transform:scale(1.05);
}

.ds-assistant-question-submit:focus-visible{
  outline:2px solid var(--ds-color-primary, #185FA5);
  outline-offset:2px;
}

.ds-assistant-question-submit:disabled{
  cursor:not-allowed;
  opacity:.6;
}

@media(prefers-reduced-motion: reduce){
  .ds-assistant-question-input, .ds-assistant-question-submit{ transition:none; }
}

/* ===== Boton flotante ===== */
.ds-assistant{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:var(--ds-z-dropdown);
}
body.ds-assistant-hidden .ds-assistant{ display:none; }

.ds-assistant-bubble{
  width:52px;
  height:52px;
  border-radius:50%;
  border:none;
  background:var(--ds-color-primary-dark);
  color:#fff;
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(12,68,124,.28), 0 1px 3px rgba(16,24,40,.12);
  transition:transform var(--ds-motion-card) var(--ds-motion-ease),
             box-shadow var(--ds-motion-card) var(--ds-motion-ease),
             background var(--ds-motion-card) var(--ds-motion-ease);
  animation:ds-assistant-breathe 5s ease-in-out infinite;
}
.ds-assistant-bubble:hover{
  background:var(--ds-color-primary);
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 8px 22px rgba(12,68,124,.32), 0 2px 6px rgba(16,24,40,.16);
  animation-play-state:paused;
}
.ds-assistant-bubble:focus-visible{
  outline:2px solid var(--ds-color-primary);
  outline-offset:3px;
  animation-play-state:paused;
}

/* Mientras el chat esta abierto, la burbuja se encoge y desaparece (el
   panel del chat "ocupa su lugar"); al cerrar vuelve a crecer. */
.ds-assistant.ds-assistant-abierto .ds-assistant-bubble{
  transform:scale(0);
  opacity:0;
  pointer-events:none;
  animation:none;
}
.ds-assistant.ds-assistant-abierto .ds-assistant-tooltip{ opacity:0; }

/* Microanimacion muy discreta -- "respiracion" de la sombra, no del
   tamaño del boton, para no distraer ni sugerir una notificacion nueva. */
@keyframes ds-assistant-breathe{
  0%, 100%{ box-shadow:0 4px 14px rgba(12,68,124,.28), 0 1px 3px rgba(16,24,40,.12); }
  50%{ box-shadow:0 4px 18px rgba(12,68,124,.4), 0 1px 4px rgba(16,24,40,.16); }
}

.ds-assistant-tooltip{
  position:absolute;
  right:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%) translateX(4px);
  background:var(--ds-color-text);
  color:#fff;
  font-size:var(--ds-text-sm);
  font-weight:500;
  padding:6px 10px;
  border-radius:var(--ds-radius-sm);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--ds-motion-dropdown) var(--ds-motion-ease),
             transform var(--ds-motion-dropdown) var(--ds-motion-ease);
}
.ds-assistant:hover .ds-assistant-tooltip,
.ds-assistant-bubble:focus-visible + .ds-assistant-tooltip{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce){
  .ds-assistant-bubble{ animation:none; }
  .ds-assistant-tooltip{ transition:opacity var(--ds-motion-dropdown) linear; }
}

/* ===== Ventana de chat (widget acoplado, NO modal) ===== */
/* El overlay no tiene fondo ni captura clics: la app detras sigue
   interactiva (se puede scrollear y navegar con el chat abierto). Solo el
   dialogo, anclado abajo a la derecha, recibe eventos. */
.ds-assistant-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:var(--ds-z-modal, 1000);
  pointer-events:none;
}
.ds-assistant-overlay.ds-assistant-open{ display:block; }

.ds-assistant-dialog{
  pointer-events:auto;
  position:fixed;
  right:24px;
  bottom:24px;
  display:flex;
  flex-direction:column;
  width:400px;
  max-width:calc(100vw - 32px);
  height:620px;
  max-height:calc(100vh - 48px);
  background:var(--ds-color-bg-surface, #fff);
  border-radius:var(--ds-radius-lg, 10px);
  box-shadow:0 12px 40px rgba(12,68,124,.24), 0 4px 12px rgba(16,24,40,.16);
  overflow:hidden;
  transform-origin:bottom right;
  animation:ds-assistant-dialog-in var(--ds-motion-panel, .24s) var(--ds-motion-ease, cubic-bezier(.2,.7,.3,1)) both;
}
/* El boton redondo se "expande" hasta la forma del chat: arranca chico y
   redondo desde la esquina inferior derecha (donde vive la burbuja) y
   crece a la ventana. */
@keyframes ds-assistant-dialog-in{
  from{ opacity:0; transform:scale(.2) translateY(6px); border-radius:26px; }
  55%{ opacity:1; }
  to{ opacity:1; transform:scale(1) translateY(0); border-radius:var(--ds-radius-lg, 10px); }
}
/* Al restaurar tras navegar, el chat aparece ya abierto sin re-animar. */
.ds-assistant-overlay.ds-assistant-sin-anim .ds-assistant-dialog{ animation:none; }

/* Cierre: morph inverso -- el panel se encoge y se desvanece hacia la
   esquina (donde reaparece la burbuja). */
@keyframes ds-assistant-dialog-out{
  from{ opacity:1; transform:scale(1) translateY(0); border-radius:var(--ds-radius-lg, 10px); }
  to{ opacity:0; transform:scale(.2) translateY(6px); border-radius:26px; }
}
.ds-assistant-overlay.ds-assistant-cerrando .ds-assistant-dialog{
  animation:ds-assistant-dialog-out var(--ds-motion-panel, .2s) var(--ds-motion-ease, cubic-bezier(.2,.7,.3,1)) both;
}
.ds-assistant-dialog:focus{
  outline:none;
}
.ds-assistant-dialog[aria-busy="true"] .ds-assistant-log{ cursor:progress; }

.ds-assistant-dialog-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ds-space-3, 12px);
  padding:var(--ds-space-4, 16px) var(--ds-space-5, 20px);
  border-bottom:.5px solid var(--ds-color-border, #d0dce8);
  flex-shrink:0;
}
.ds-assistant-dialog-title{
  margin:0;
  font-size:var(--ds-text-xl, 16px);
  font-weight:700;
  color:var(--ds-color-primary-dark, #0C447C);
}
.ds-assistant-dialog-close{
  flex-shrink:0;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  border-radius:var(--ds-radius-sm, 6px);
  font-size:var(--ds-text-2xl, 18px);
  line-height:1;
  color:var(--ds-color-text-muted, #6b7a90);
  cursor:pointer;
}
.ds-assistant-dialog-close:hover{
  background:var(--ds-color-bg-surface-alt, #f8fafd);
  color:var(--ds-color-text, #1a2332);
}
.ds-assistant-dialog-close:focus-visible{
  outline:2px solid var(--ds-color-primary, #185FA5);
  outline-offset:2px;
}

/* Descripcion (subtitulo fijo debajo del header) y el contenedor de
   acciones legado -- el chat ya no muestra un menu de botones, asi que
   ambos quedan sin contenido; se conservan las reglas por compatibilidad
   con el marcado existente y se colapsan cuando estan vacios. */
.ds-assistant-dialog-desc{
  margin:0;
  padding:0 var(--ds-space-5, 20px);
  font-size:var(--ds-text-sm, 12px);
  color:var(--ds-color-text-muted, #6b7a90);
  flex-shrink:0;
}
.ds-assistant-dialog-desc:empty{ display:none; }
.ds-assistant-dialog-actions{ display:none; }

/* Log de mensajes desplazable -- ocupa el alto disponible entre el header
   y el compositor. */
.ds-assistant-log{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:var(--ds-space-2, 8px);
  padding:var(--ds-space-4, 16px) var(--ds-space-4, 16px) var(--ds-space-3, 12px);
  background:var(--ds-color-bg-surface-alt, #f8fafd);
  scroll-behavior:smooth;
}

.ds-assistant-msg{
  display:flex;
  max-width:100%;
}
.ds-assistant-msg-user{ justify-content:flex-end; }
.ds-assistant-msg-bot{ justify-content:flex-start; }

.ds-assistant-msg-body{
  max-width:82%;
  padding:9px 13px;
  border-radius:16px;
  font-size:var(--ds-text-base, 13px);
  line-height:1.45;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}
.ds-assistant-msg-user .ds-assistant-msg-body{
  background:var(--ds-color-primary, #185FA5);
  color:#fff;
  border-bottom-right-radius:5px;
}
.ds-assistant-msg-bot .ds-assistant-msg-body{
  background:var(--ds-color-bg-surface, #fff);
  color:var(--ds-color-text, #1a2332);
  border:1px solid var(--ds-color-border-lighter, #eef2f8);
  border-bottom-left-radius:5px;
}
.ds-assistant-msg-body p{ margin:0; }
.ds-assistant-msg-body p + .ds-assistant-section{ margin-top:var(--ds-space-3, 12px); }

/* Chips de sugerencia -- solo en el estado inicial, dentro de la primera
   burbuja del asistente. Ensenan de que se puede preguntar sin imponer un
   menu. */
.ds-assistant-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:var(--ds-space-3, 12px);
}
.ds-assistant-chip{
  padding:6px 11px;
  border:1px solid var(--ds-color-border, #d0dce8);
  border-radius:999px;
  background:var(--ds-color-bg-surface, #fff);
  color:var(--ds-color-primary-dark, #0C447C);
  font-family:var(--ds-font-family, 'Inter', sans-serif);
  font-size:var(--ds-text-sm, 12px);
  font-weight:500;
  cursor:pointer;
  transition:background var(--ds-transition-fast, .1s), border-color var(--ds-transition-fast, .1s);
}
.ds-assistant-chip:hover:not(:disabled){
  background:var(--ds-color-bg-surface-alt, #f8fafd);
  border-color:var(--ds-color-primary, #185FA5);
}
.ds-assistant-chip:focus-visible{
  outline:2px solid var(--ds-color-primary, #185FA5);
  outline-offset:2px;
}
.ds-assistant-chip:disabled{
  cursor:not-allowed;
  opacity:.6;
}

/* Indicador de "escribiendo" (tres puntos) mientras llega la respuesta. */
.ds-assistant-typing{
  display:inline-flex;
  gap:4px;
  align-items:center;
}
.ds-assistant-typing span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ds-color-text-muted, #6b7a90);
  animation:ds-assistant-typing 1s ease-in-out infinite;
}
.ds-assistant-typing span:nth-child(2){ animation-delay:.15s; }
.ds-assistant-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ds-assistant-typing{
  0%, 60%, 100%{ opacity:.3; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-3px); }
}

.ds-assistant-error{
  margin:0;
  font-size:var(--ds-text-base, 13px);
  color:var(--ds-color-danger-text, #791F1F);
}

/* Evidencia estructurada (resumen / alertas) dentro de una burbuja. */
.ds-assistant-section + .ds-assistant-section{
  margin-top:var(--ds-space-3, 12px);
  padding-top:var(--ds-space-3, 12px);
  border-top:.5px solid var(--ds-color-border-lighter, #eef2f8);
}
.ds-assistant-section-title{
  margin:0 0 var(--ds-space-2, 8px);
  font-size:var(--ds-text-xs, 11px);
  font-weight:600;
  color:var(--ds-color-text-muted, #6b7a90);
  text-transform:uppercase;
  letter-spacing:.4px;
}

.ds-assistant-metric-list{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  row-gap:6px;
}
.ds-assistant-metric-list dt{
  width:60%;
  font-size:var(--ds-text-sm, 12px);
  color:var(--ds-color-text-muted, #6b7a90);
}
.ds-assistant-metric-list dd{
  width:40%;
  margin:0;
  text-align:right;
  font-size:var(--ds-text-sm, 12px);
  font-weight:600;
  color:var(--ds-color-text, #1a2332);
}

/* Bloqueo de scroll del body mientras el chat esta abierto. */
body.ds-assistant-scroll-lock{ overflow:hidden; }

@media (max-width:480px){
  .ds-assistant-dialog{
    right:0;
    bottom:0;
    top:0;
    left:0;
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    border-radius:0;
  }
  .ds-assistant-dialog-close{ width:36px; height:36px; font-size:20px; }
}

@media (prefers-reduced-motion: reduce){
  .ds-assistant-dialog{ animation:none; opacity:1; transform:none; }
  .ds-assistant-log{ scroll-behavior:auto; }
  .ds-assistant-typing span{ animation:none; }
}