/*! Diseño 3G v1.1.0 — diseno-3g.css
   Sistema de diseño común de 3G Velarias. Estilo "mezcla": Google Workspace (riel con píldora, superficies
   limpias, botones píldora) + Apple (vidrio translúcido, esquinas muy redondas, interruptores tipo iOS).
   Color de acción: azul acero 3G #0e4e92. Guía completa en DESIGN.md.

   CONTRATO DEL INTERRUPTOR
   - Todo vive bajo html[data-diseno="3g"]. Sin ese atributo este archivo NO cambia nada de la página:
     ni tokens, ni elementos, ni clases del sistema. (La única regla fuera del atributo oculta .g3-si,
     que solo existe en el marcado nuevo. Desde v1.1.0 esa misma regla va también EN LÍNEA en el fragmento de
     <head> (G3.fragmentoHead), para que el marcado nuevo siga oculto aunque este archivo no cargue.)
   - Movimiento reducido: solo calma los componentes del paquete (.g3-*), nunca las animaciones propias del sistema.
   - Tokens: --g3-*. Componentes: .g3-*. Nunca colores literales en las pantallas: usa var(--g3-…).
   - Oscuro: html[data-g3-tema="oscuro"]; o sin data-g3-tema, la clase .dark, [data-theme="dark"] o
     [data-tema="oscuro"] que ya usa cada sistema; o html[data-g3-tema="auto"] sigue al sistema operativo.
     Sin nada de eso: claro.
   - Carga este archivo DESPUÉS del CSS del sistema. Supone html con font-size de 100 % (16 px). */

/* ============================================================================================
   1. TOKENS — claro
   ============================================================================================ */
:root[data-diseno="3g"] {
  color-scheme: light;
  /* Neutros sin tinte */
  --g3-fondo: #f5f5f5;
  --g3-superficie: #ffffff;
  --g3-contenedor: #efefef;
  --g3-contenedor-alto: #e5e5e5;
  --g3-tinta: #1f1f1f;
  --g3-tinta-2: #5e5e5e;
  --g3-tinta-3: #6b6b6b;
  --g3-linea: #e3e3e3;
  --g3-linea-fuerte: #c7c7c7;
  --g3-linea-campo: #8f8f8f;
  --g3-hover: rgba(0, 0, 0, 0.05);
  --g3-presionado: rgba(0, 0, 0, 0.09);
  --g3-segmento-activo: #ffffff;
  /* Acción: azul acero 3G */
  --g3-primario: #0e4e92;
  --g3-primario-hover: #0b3f77;
  --g3-sobre-primario: #ffffff;
  --g3-primario-suave: #d6e4f5;
  --g3-sobre-primario-suave: #062448;
  --g3-primario-tinte: rgba(14, 78, 146, 0.08);
  --g3-foco: rgba(14, 78, 146, 0.6);
  --g3-foco-anillo: rgba(14, 78, 146, 0.22);
  /* Marca: el rojo 3G solo vive en el logo (el del isologo original, #BE202E) */
  --g3-rojo-3g: #be202e;
  /* Estados */
  --g3-ok: #137333;           --g3-ok-suave: #e6f4ea;
  --g3-aviso: #8a5a00;        --g3-aviso-suave: #fbeac4;
  --g3-mal: #b3261e;          --g3-mal-suave: #fadedb;
  --g3-mal-hover: #8c1d18;    --g3-sobre-mal: #ffffff;
  --g3-neutro: #5e5e5e;       --g3-neutro-suave: #ebebeb;
  --g3-info: #1a5fb4;         --g3-info-suave: #dbe7fb;
  /* Tipos de trabajo */
  --g3-instalacion: #1a5fb4;    --g3-instalacion-suave: #dbe7fb;
  --g3-mantenimiento: #086b74;  --g3-mantenimiento-suave: #d2f0ee;
  --g3-garantia: #6b3fbf;       --g3-garantia-suave: #e9e1f8;
  /* Vidrio, velo y aviso flotante */
  --g3-vidrio: rgba(255, 255, 255, 0.72);
  --g3-vidrio-fuerte: rgba(255, 255, 255, 0.9);
  --g3-vidrio-borde: rgba(255, 255, 255, 0.6);
  --g3-desenfoque: blur(24px) saturate(1.7);
  --g3-velo: rgba(12, 12, 12, 0.32);
  --g3-flotante-fondo: #2b2b2b;
  --g3-flotante-tinta: #f2f2f2;
  --g3-flotante-accion: #9cc3f0;
  /* Sombras */
  --g3-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --g3-sombra-2: 0 2px 6px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
  --g3-sombra-3: 0 8px 24px rgba(0, 0, 0, 0.12), 0 24px 60px rgba(0, 0, 0, 0.14);
  /* Letras: Outfit para títulos, la del sistema para texto */
  --g3-f-titulo: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --g3-f-texto: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --g3-f-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  /* Tamaños de letra (mínimo 12 px) */
  --g3-t-min: 0.75rem;     /* 12 */
  --g3-t-ch: 0.8125rem;    /* 13 */
  --g3-t-base: 0.9375rem;  /* 15 */
  --g3-t-md: 1rem;         /* 16 */
  --g3-t-lg: 1.25rem;      /* 20 */
  --g3-t-xl: 1.875rem;     /* 30 */
  --g3-t-2xl: 2.5rem;      /* 40 */
  /* Radios */
  --g3-r-ch: 10px;
  --g3-r-md: 16px;
  --g3-r-gr: 22px;
  --g3-r-hoja: 28px;
  --g3-r-pildora: 999px;
  /* Espacios (= clases 1, 2, 3, 4, 6, 9 de Tailwind) */
  --g3-e1: 4px; --g3-e2: 8px; --g3-e3: 12px; --g3-e4: 16px; --g3-e6: 24px; --g3-e9: 36px;
  /* Medidas y movimiento */
  --g3-riel: 264px;
  --g3-barra-alto: 64px;
  /* Barra inferior de celular (v1.1.0). --g3-espacio-inferior = cuánto deben subir las barras de acción fijas
     del sistema para quedar ENCIMA de ella (0 cuando no hay barra inferior a la vista). */
  --g3-barra-inferior-alto: 78px; /* 6 + 64 (destino) + 6 + 2 de borde */
  --g3-espacio-inferior: 0px;
  --g3-z-barra-inferior: 40;
  --g3-curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --g3-rapido: 0.15s;
  --g3-normal: 0.25s;
  --g3-flecha-selector: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5e5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --g3-fondo-lanzador: radial-gradient(1200px 600px at 10% -10%, rgba(214, 228, 245, 0.9) 0%, transparent 60%), radial-gradient(900px 500px at 100% 0%, #ebebeb 0%, transparent 55%), var(--g3-fondo);
}

/* ============================================================================================
   2. TOKENS — oscuro (explícito, compatibilidad con el tema de cada sistema, y automático)
   ============================================================================================ */
:root[data-diseno="3g"][data-g3-tema="oscuro"],
:root[data-diseno="3g"]:not([data-g3-tema]):is(.dark, [data-theme="dark"], [data-tema="oscuro"]) {
  color-scheme: dark;
  --g3-fondo: #121212; --g3-superficie: #1c1c1c; --g3-contenedor: #262626; --g3-contenedor-alto: #303030;
  --g3-tinta: #e8e8e8; --g3-tinta-2: #b5b5b5; --g3-tinta-3: #949494;
  --g3-linea: #333333; --g3-linea-fuerte: #474747; --g3-linea-campo: #7a7a7a;
  --g3-hover: rgba(255, 255, 255, 0.06); --g3-presionado: rgba(255, 255, 255, 0.1); --g3-segmento-activo: #424242;
  --g3-primario: #9cc3f0; --g3-primario-hover: #b6d3f4; --g3-sobre-primario: #04213f;
  --g3-primario-suave: #173a63; --g3-sobre-primario-suave: #d6e4f5;
  --g3-primario-tinte: rgba(156, 195, 240, 0.12); --g3-foco: rgba(156, 195, 240, 0.7); --g3-foco-anillo: rgba(156, 195, 240, 0.25);
  --g3-rojo-3g: #d9203d;
  --g3-ok: #81c995; --g3-ok-suave: #1e3a2a; --g3-aviso: #f0c066; --g3-aviso-suave: #3b2f12;
  --g3-mal: #ffb4ab; --g3-mal-suave: #4a1c18; --g3-mal-hover: #ffcdc7; --g3-sobre-mal: #3a0b07;
  --g3-neutro: #b5b5b5; --g3-neutro-suave: #2b2b2b; --g3-info: #a8c8ff; --g3-info-suave: #1c2d47;
  --g3-instalacion: #a8c8ff; --g3-instalacion-suave: #1c2d47;
  --g3-mantenimiento: #73d6dc; --g3-mantenimiento-suave: #123a3c;
  --g3-garantia: #cdb6ff; --g3-garantia-suave: #2f2447;
  --g3-vidrio: rgba(30, 30, 30, 0.72); --g3-vidrio-fuerte: rgba(32, 32, 32, 0.92); --g3-vidrio-borde: rgba(255, 255, 255, 0.08);
  --g3-velo: rgba(0, 0, 0, 0.5);
  --g3-flotante-fondo: #e8e8e8; --g3-flotante-tinta: #1f1f1f; --g3-flotante-accion: #0e4e92;
  --g3-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --g3-sombra-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.35);
  --g3-sombra-3: 0 8px 24px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.5);
  --g3-flecha-selector: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5b5b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --g3-fondo-lanzador: radial-gradient(1200px 600px at 10% -10%, rgba(23, 58, 99, 0.75) 0%, transparent 60%), radial-gradient(900px 500px at 100% 0%, #222222 0%, transparent 55%), var(--g3-fondo);
}
@media (prefers-color-scheme: dark) {
  :root[data-diseno="3g"][data-g3-tema="auto"] {
    color-scheme: dark;
    --g3-fondo: #121212; --g3-superficie: #1c1c1c; --g3-contenedor: #262626; --g3-contenedor-alto: #303030;
    --g3-tinta: #e8e8e8; --g3-tinta-2: #b5b5b5; --g3-tinta-3: #949494;
    --g3-linea: #333333; --g3-linea-fuerte: #474747; --g3-linea-campo: #7a7a7a;
    --g3-hover: rgba(255, 255, 255, 0.06); --g3-presionado: rgba(255, 255, 255, 0.1); --g3-segmento-activo: #424242;
    --g3-primario: #9cc3f0; --g3-primario-hover: #b6d3f4; --g3-sobre-primario: #04213f;
    --g3-primario-suave: #173a63; --g3-sobre-primario-suave: #d6e4f5;
    --g3-primario-tinte: rgba(156, 195, 240, 0.12); --g3-foco: rgba(156, 195, 240, 0.7); --g3-foco-anillo: rgba(156, 195, 240, 0.25);
    --g3-rojo-3g: #d9203d;
    --g3-ok: #81c995; --g3-ok-suave: #1e3a2a; --g3-aviso: #f0c066; --g3-aviso-suave: #3b2f12;
    --g3-mal: #ffb4ab; --g3-mal-suave: #4a1c18; --g3-mal-hover: #ffcdc7; --g3-sobre-mal: #3a0b07;
    --g3-neutro: #b5b5b5; --g3-neutro-suave: #2b2b2b; --g3-info: #a8c8ff; --g3-info-suave: #1c2d47;
    --g3-instalacion: #a8c8ff; --g3-instalacion-suave: #1c2d47;
    --g3-mantenimiento: #73d6dc; --g3-mantenimiento-suave: #123a3c;
    --g3-garantia: #cdb6ff; --g3-garantia-suave: #2f2447;
    --g3-vidrio: rgba(30, 30, 30, 0.72); --g3-vidrio-fuerte: rgba(32, 32, 32, 0.92); --g3-vidrio-borde: rgba(255, 255, 255, 0.08);
    --g3-velo: rgba(0, 0, 0, 0.5);
    --g3-flotante-fondo: #e8e8e8; --g3-flotante-tinta: #1f1f1f; --g3-flotante-accion: #0e4e92;
    --g3-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --g3-sombra-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.35);
    --g3-sombra-3: 0 8px 24px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.5);
    --g3-flecha-selector: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5b5b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --g3-fondo-lanzador: radial-gradient(1200px 600px at 10% -10%, rgba(23, 58, 99, 0.75) 0%, transparent 60%), radial-gradient(900px 500px at 100% 0%, #222222 0%, transparent 55%), var(--g3-fondo);
  }
}

/* ============================================================================================
   3. MOSTRAR / OCULTAR SEGÚN EL INTERRUPTOR
   .g3-si = solo con Diseño 3G encendido (marcado nuevo). .g3-no = solo con el diseño de siempre.
   Sirve para Next.js/SSR: se pintan las dos versiones y el CSS decide, sin parpadeo ni error de hidratación.
   ============================================================================================ */
:root:not([data-diseno="3g"]) .g3-si { display: none !important; }
[data-diseno="3g"] .g3-no { display: none !important; }

/* ============================================================================================
   4. BASE (especificidad baja: las clases del sistema siguen mandando)
   ============================================================================================ */
:where([data-diseno="3g"]) body {
  background-color: var(--g3-fondo);
  color: var(--g3-tinta);
  font-family: var(--g3-f-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where([data-diseno="3g"]) :is(h1, h2, h3) { font-family: var(--g3-f-titulo); letter-spacing: -0.01em; }
[data-diseno="3g"] :focus-visible { outline: 3px solid var(--g3-foco); outline-offset: 2px; }
[data-diseno="3g"] ::selection { background: var(--g3-primario-suave); color: var(--g3-sobre-primario-suave); }
[data-diseno="3g"] [class*="g3-"],
[data-diseno="3g"] [class*="g3-"]::before,
[data-diseno="3g"] [class*="g3-"]::after { box-sizing: border-box; }
[data-diseno="3g"] .g3-icono { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }

/* ---------- Utilidades ---------- */
[data-diseno="3g"] .g3-tenue { color: var(--g3-tinta-2); }
[data-diseno="3g"] .g3-chico { font-size: var(--g3-t-ch); }
[data-diseno="3g"] .g3-mono { font-family: var(--g3-f-mono); font-size: max(12px, 0.9em); }
[data-diseno="3g"] .g3-num { font-variant-numeric: tabular-nums; }
[data-diseno="3g"] .g3-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
[data-diseno="3g"] .g3-pila { display: grid; gap: 12px; align-content: start; min-width: 0; }
[data-diseno="3g"] .g3-oculto-visual {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[data-diseno="3g"] .g3-fondo-lanzador { background: var(--g3-fondo-lanzador); background-attachment: fixed; }
[data-diseno="3g"] .g3-etiqueta { font-size: var(--g3-t-min); font-weight: 600; color: var(--g3-tinta-2); letter-spacing: 0.02em; }

/* ============================================================================================
   5. ARMAZÓN: marco, riel lateral, barra superior de vidrio, área de trabajo, barra inferior de celular
   ============================================================================================ */
[data-diseno="3g"] .g3-marco { display: grid; grid-template-columns: var(--g3-riel) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
[data-diseno="3g"] .g3-columna { min-width: 0; display: flex; flex-direction: column; }
[data-diseno="3g"] .g3-principal { padding: 20px 28px 72px; min-width: 0; flex: 1; }

[data-diseno="3g"] .g3-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--g3-tinta); text-decoration: none; font: 600 1.125rem/1.2 var(--g3-f-titulo); min-width: 0; }
[data-diseno="3g"] .g3-logo:hover { text-decoration: none; }
/* v1.2.0: la marca es el ISOLOGO ORIGINAL de 3G (Logos 3G › Isologo red and white: letras blancas y el cuadro rojo
   #BE202E) sobre un cuadro oscuro, incrustado aquí para que ningún sistema tenga que copiar un archivo aparte. El texto
   «3G» del HTML se queda para lectores de pantalla y no se ve. Los archivos sueltos están en marca/. */
[data-diseno="3g"] .g3-logo-marca {
  display: block; width: 36px; height: 36px; border-radius: 11px; flex: none; overflow: hidden;
  background: #111614 url("data:image/svg+xml,%3Csvg width='1800' height='972' viewBox='0 0 1800 972' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M1357.13 568.052C1357.52 575.787 1358.29 581.589 1358.29 587.391C1358.29 646.954 1357.91 706.518 1358.68 766.082C1358.68 778.072 1354.81 786.194 1346.3 793.93C1296.02 841.117 1236.46 870.125 1168.39 879.021C1050.42 894.879 939.413 873.993 839.624 807.854C735.194 738.234 674.083 639.219 657.451 515.063C640.82 393.615 664.027 279.902 737.128 179.34C809.842 79.1641 910.791 23.4681 1032.24 6.06309C1133.58 -8.63447 1232.2 3.35562 1324.64 50.1558C1430.62 103.918 1499.08 187.849 1526.15 304.656C1531.18 326.702 1526.93 332.504 1504.5 332.504C1436.42 332.504 1367.96 332.504 1298.73 332.504C1296.02 327.089 1293.31 322.061 1290.99 316.646C1266.24 260.95 1223.69 227.687 1164.52 214.923C1123.52 206.027 1082.52 206.801 1042.68 218.017C951.403 244.318 901.122 306.976 884.49 398.256C876.755 441.575 878.688 484.507 893.773 525.893C924.328 609.824 985.826 656.237 1072.85 670.161C1102.25 674.802 1131.25 674.029 1159.88 668.614C1216.73 657.784 1261.99 629.162 1294.86 581.202C1301.82 571.532 1308.79 566.891 1320.78 567.665C1332.38 568.438 1344.37 568.052 1357.13 568.052Z' fill='white'/%3E %3Cpath d='M1799.22 552.967C1719.54 552.967 1642.19 552.967 1564.83 552.967C1560.58 539.817 1559.03 405.992 1562.9 373.502C1568.31 373.115 1574.12 372.342 1579.92 372.342C1644.9 372.342 1709.87 372.342 1774.85 372.342C1797.29 372.342 1799.99 375.049 1799.99 397.482C1799.99 443.38 1799.99 489.149 1799.99 534.789C1799.99 540.203 1799.61 545.232 1799.22 552.967Z' fill='%23BE202E'/%3E %3Cpath d='M206.468 612.917C210.722 624.908 213.43 634.577 216.911 643.86C228.514 675.189 250.56 695.688 283.436 703.424C316.313 711.546 349.189 712.706 381.291 701.103C420.743 686.792 442.015 655.463 439.308 616.012C437.761 589.324 424.224 569.985 402.564 555.674C381.678 541.75 358.085 535.562 332.944 534.788C309.737 534.015 286.531 534.788 263.324 534.402C245.145 534.402 242.051 531.694 242.051 513.902C241.793 470.841 241.793 427.78 242.051 384.718C242.051 367.313 245.532 364.606 263.711 364.606C284.21 364.219 304.709 365.38 325.208 363.832C340.293 363.059 355.764 360.738 369.688 355.71C408.753 341.786 429.252 308.523 426.158 267.525C423.45 227.687 398.696 199.452 357.698 190.556C335.265 185.914 312.832 187.075 291.172 194.81C256.749 207.187 237.023 231.941 228.901 266.364C227.354 272.166 226.58 277.968 225.42 285.316C219.231 285.703 213.43 286.477 207.628 286.477C151.932 286.477 96.2359 286.477 40.5399 286.477C18.1067 286.477 15.0125 282.609 17.3332 260.563C31.644 127.124 124.857 30.043 258.296 9.93052C324.822 -0.125707 390.574 2.58176 454.392 25.7884C537.55 55.9571 595.566 110.88 619.547 197.905C631.537 241.997 631.923 286.864 621.094 331.343C612.198 368.861 594.019 401.737 566.171 428.811C562.303 432.421 558.565 436.16 554.955 440.028C554.568 440.414 554.181 441.188 553.407 443.122C558.436 446.603 563.464 450.857 568.492 454.725C621.094 494.563 647.781 547.165 650.102 612.917C654.357 726.243 591.312 816.363 490.75 860.842C420.356 892.171 346.095 898.36 270.673 891.011C249.787 889.077 228.514 885.209 208.402 879.408C95.8491 848.079 30.0969 773.044 4.9563 660.104C3.40919 653.142 2.24886 646.18 1.08852 638.832C-2.0057 615.625 0.314954 612.917 23.1349 612.917C38.2192 612.917 53.3036 612.917 68.7747 612.917C107.968 612.917 147.033 612.917 185.968 612.917C192.544 612.917 199.119 612.917 206.468 612.917Z' fill='white'/%3E %3Cpath d='M1374.92 970.687C1374.92 831.447 1374.92 694.528 1374.92 554.901C1278.23 554.901 1182.69 554.901 1086 554.901C1085.23 547.939 1084.07 543.298 1083.68 539.043C1083.68 491.341 1083.68 443.638 1083.68 395.935C1084.07 376.596 1087.93 372.342 1106.89 372.342C1246.13 372.342 1385.37 372.342 1524.61 372.342C1543.95 372.342 1547.81 376.21 1547.81 395.935C1548.07 579.526 1548.07 763.117 1547.81 946.707C1547.81 967.593 1543.95 971.848 1523.83 971.848C1478.97 971.848 1433.71 971.848 1388.85 971.848C1384.98 971.848 1381.11 971.074 1374.92 970.687Z' fill='white'/%3E %3C/svg%3E") center / 78% auto no-repeat;
  color: transparent; font-size: 0; line-height: 0; user-select: none;
  /* El filo claro de 1 px solo se nota en oscuro, donde el cuadro se perdería contra el fondo. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 6px rgba(17, 22, 20, 0.22);
}
[data-diseno="3g"] .g3-logo small { display: block; font: 500 var(--g3-t-min)/1.3 var(--g3-f-texto); color: var(--g3-tinta-2); }

/* Riel lateral con selección en píldora */
[data-diseno="3g"] .g3-riel {
  padding: 12px 12px 20px; display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; min-width: 0;
}
[data-diseno="3g"] .g3-riel .g3-logo { padding: 6px 12px 14px; }
[data-diseno="3g"] .g3-riel-grupo { font-size: var(--g3-t-min); font-weight: 600; color: var(--g3-tinta-2); padding: 14px 16px 6px; letter-spacing: 0.02em; }
[data-diseno="3g"] .g3-riel-item {
  display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 16px; width: 100%;
  border: 0; border-radius: var(--g3-r-pildora); background: transparent; color: var(--g3-tinta);
  font: 500 var(--g3-t-base)/1.25 var(--g3-f-texto); text-align: left; text-decoration: none; cursor: pointer;
}
[data-diseno="3g"] .g3-riel-item:hover { background: var(--g3-contenedor-alto); text-decoration: none; }
[data-diseno="3g"] .g3-riel-item:is([aria-current="page"], [aria-current="true"], .g3-riel-item--activo) {
  background: var(--g3-primario-suave); color: var(--g3-sobre-primario-suave); font-weight: 650;
}
[data-diseno="3g"] .g3-riel-item .g3-insignia { margin-left: auto; }
[data-diseno="3g"] .g3-riel-pie { margin-top: auto; padding: 12px 4px 0; display: grid; gap: 6px; font-size: var(--g3-t-ch); color: var(--g3-tinta-2); }

/* Botón grande de "Nuevo" (como Redactar de Gmail) */
[data-diseno="3g"] .g3-nuevo {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 22px 0 16px; margin: 0 0 12px 4px;
  border: 0; border-radius: 18px; background: var(--g3-superficie); color: var(--g3-tinta); box-shadow: var(--g3-sombra-2);
  font: 600 var(--g3-t-base)/1.2 var(--g3-f-texto); cursor: pointer; align-self: flex-start; text-decoration: none;
}
[data-diseno="3g"] .g3-nuevo:hover { background: var(--g3-contenedor); text-decoration: none; }

/* Barra superior de vidrio */
[data-diseno="3g"] .g3-barra {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px;
  min-height: var(--g3-barra-alto); padding: 10px 24px;
  background: var(--g3-vidrio); -webkit-backdrop-filter: var(--g3-desenfoque); backdrop-filter: var(--g3-desenfoque);
  border-bottom: 1px solid var(--g3-linea);
}
[data-diseno="3g"] .g3-barra-titulo { display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 1.125rem/1.2 var(--g3-f-titulo); margin: 0; }
[data-diseno="3g"] .g3-barra-acciones { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
[data-diseno="3g"] .g3-logo--movil { display: none; }

/* Buscador de la barra y búsqueda de filtros */
[data-diseno="3g"] .g3-busca { position: relative; flex: 1 1 220px; min-width: 0; max-width: 380px; }
[data-diseno="3g"] .g3-busca > :is(svg, .g3-icono) { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--g3-tinta-2); pointer-events: none; z-index: 1; }
[data-diseno="3g"] .g3-busca input {
  width: 100%; min-height: 40px; margin: 0; border: 0; border-radius: var(--g3-r-pildora);
  background: var(--g3-contenedor); color: var(--g3-tinta); padding: 0 14px 0 40px;
  font: 400 var(--g3-t-base)/1.3 var(--g3-f-texto); -webkit-appearance: none; appearance: none;
}
[data-diseno="3g"] .g3-busca input::placeholder { color: var(--g3-tinta-3); opacity: 1; }
[data-diseno="3g"] .g3-busca input:focus { background: var(--g3-superficie); box-shadow: 0 0 0 2px var(--g3-primario), var(--g3-sombra-2); outline: none; }
[data-diseno="3g"] .g3-busca--grande { max-width: 640px; }
[data-diseno="3g"] .g3-busca--grande input { min-height: 46px; padding-left: 48px; font-size: var(--g3-t-md); }
[data-diseno="3g"] .g3-busca--grande > :is(svg, .g3-icono) { left: 16px; width: 20px; height: 20px; }

/* Barra inferior de celular (solo ≤ 860 px, o siempre con --siempre) */
[data-diseno="3g"] .g3-barra-inferior { display: none; }
[data-diseno="3g"] .g3-barra-inferior.g3-barra-inferior--siempre {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: var(--g3-z-barra-inferior);
  background: var(--g3-vidrio); -webkit-backdrop-filter: var(--g3-desenfoque); backdrop-filter: var(--g3-desenfoque);
  border: 1px solid var(--g3-vidrio-borde); border-radius: 26px; box-shadow: var(--g3-sombra-2); padding: 6px;
  max-width: 640px; margin: 0 auto;
}
:root[data-diseno="3g"]:has(.g3-barra-inferior--siempre:not([hidden])) {
  --g3-espacio-inferior: calc(var(--g3-barra-inferior-alto) + 18px + env(safe-area-inset-bottom, 0px));
}
/* Barras de acción fijas del sistema («Confirmar», «Guardar»…): quedan encima de la barra inferior.
   En una barra pegada abajo (bottom: 0) basta la clase; con separación propia: --g3-separacion-inferior: 16px. */
[data-diseno="3g"] .g3-sobre-barra-inferior { bottom: calc(var(--g3-espacio-inferior) + var(--g3-separacion-inferior, 0px)); }
[data-diseno="3g"] .g3-barra-inferior > :is(a, button) {
  box-sizing: content-box; /* explícito: así mide 64 px con o sin clase g3- y --g3-barra-inferior-alto es exacto */
  display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 6px 2px;
  border: 0; border-radius: 20px; background: transparent; color: var(--g3-tinta-2); cursor: pointer;
  font: 600 var(--g3-t-min)/1.2 var(--g3-f-texto); text-decoration: none; position: relative; min-width: 0;
}
[data-diseno="3g"] .g3-barra-inferior > :is(a, button) > :is(svg, .g3-icono) { width: 22px; height: 22px; }
[data-diseno="3g"] .g3-barra-inferior > :is(a, button):is([aria-current="page"], [aria-current="true"]) { color: var(--g3-sobre-primario-suave); background: var(--g3-primario-suave); }
[data-diseno="3g"] .g3-barra-inferior .g3-insignia { position: absolute; top: 2px; left: calc(50% + 6px); }

/* ---------- Página ---------- */
[data-diseno="3g"] .g3-pantalla { display: grid; gap: 20px; max-width: 1320px; width: 100%; min-width: 0; }
[data-diseno="3g"] .g3-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; padding-top: 4px; }
[data-diseno="3g"] .g3-cab > div:first-child { min-width: 0; }
[data-diseno="3g"] :is(.g3-cab h1, .g3-titulo) { font: 600 var(--g3-t-xl)/1.15 var(--g3-f-titulo); letter-spacing: -0.01em; margin: 0; color: var(--g3-tinta); }
[data-diseno="3g"] .g3-cab p { color: var(--g3-tinta-2); margin: 6px 0 0; max-width: 72ch; }
[data-diseno="3g"] .g3-cab-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
[data-diseno="3g"] .g3-seccion-titulo { font: 600 1.1875rem/1.25 var(--g3-f-titulo); margin: 0; color: var(--g3-tinta); }
[data-diseno="3g"] .g3-subtitulo { font: 600 var(--g3-t-md)/1.3 var(--g3-f-titulo); margin: 0; color: var(--g3-tinta); }
[data-diseno="3g"] .g3-miga { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--g3-t-ch); color: var(--g3-tinta-2); }
[data-diseno="3g"] .g3-miga a { color: var(--g3-tinta-2); text-decoration: none; }
[data-diseno="3g"] .g3-miga a:hover { color: var(--g3-primario); text-decoration: underline; }
[data-diseno="3g"] .g3-rejilla { display: grid; gap: 14px; min-width: 0; }
[data-diseno="3g"] .g3-rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
[data-diseno="3g"] .g3-rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
[data-diseno="3g"] .g3-rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
[data-diseno="3g"] .g3-rejilla--principal { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }

/* ============================================================================================
   6. COMPONENTES
   ============================================================================================ */

/* ---------- Botones píldora ---------- */
[data-diseno="3g"] .g3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px; margin: 0; border: 1px solid var(--g3-linea-fuerte); border-radius: var(--g3-r-pildora);
  background: transparent; color: var(--g3-primario); font: 600 var(--g3-t-base)/1.2 var(--g3-f-texto);
  white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--g3-rapido), color var(--g3-rapido), box-shadow var(--g3-rapido), border-color var(--g3-rapido);
}
[data-diseno="3g"] .g3-btn:hover { background: var(--g3-primario-tinte); text-decoration: none; }
[data-diseno="3g"] .g3-btn:active { background: var(--g3-presionado); }
[data-diseno="3g"] .g3-btn > :is(svg, .g3-icono) { width: 18px; height: 18px; flex: none; }
[data-diseno="3g"] .g3-btn--primario { background: var(--g3-primario); border-color: var(--g3-primario); color: var(--g3-sobre-primario); box-shadow: var(--g3-sombra-1); }
[data-diseno="3g"] .g3-btn--primario:hover { background: var(--g3-primario-hover); border-color: var(--g3-primario-hover); }
[data-diseno="3g"] .g3-btn--primario:active { background: var(--g3-primario-hover); box-shadow: none; }
[data-diseno="3g"] .g3-btn--tonal { background: var(--g3-primario-suave); border-color: transparent; color: var(--g3-sobre-primario-suave); }
[data-diseno="3g"] .g3-btn--tonal:hover { background: var(--g3-primario-suave); box-shadow: var(--g3-sombra-1); }
[data-diseno="3g"] .g3-btn--fantasma { background: transparent; border-color: transparent; }
[data-diseno="3g"] .g3-btn--neutro { color: var(--g3-tinta); }
[data-diseno="3g"] .g3-btn--peligro { color: var(--g3-mal); border-color: var(--g3-mal); }
[data-diseno="3g"] .g3-btn--peligro:hover { background: var(--g3-mal-suave); }
[data-diseno="3g"] .g3-btn--peligro-lleno { background: var(--g3-mal); border-color: var(--g3-mal); color: var(--g3-sobre-mal); }
[data-diseno="3g"] .g3-btn--peligro-lleno:hover { background: var(--g3-mal-hover); border-color: var(--g3-mal-hover); }
[data-diseno="3g"] .g3-btn--ch { min-height: 34px; padding: 0 14px; font-size: var(--g3-t-ch); }
[data-diseno="3g"] .g3-btn--gr { min-height: 52px; padding: 0 24px; font-size: var(--g3-t-md); }
[data-diseno="3g"] .g3-btn--bloque { width: 100%; }
[data-diseno="3g"] .g3-btn:is(:disabled, [aria-disabled="true"]) { opacity: 0.45; cursor: not-allowed; box-shadow: none; pointer-events: none; }
[data-diseno="3g"] .g3-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
[data-diseno="3g"] .g3-btn[aria-busy="true"]::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; animation: g3-gira 0.8s linear infinite;
}
@media (pointer: coarse) {
  [data-diseno="3g"] .g3-btn { min-height: 44px; }
  [data-diseno="3g"] .g3-btn--ch { min-height: 38px; }
}

/* Botón de ícono redondo (con insignia opcional) */
[data-diseno="3g"] .g3-btn-icono {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; flex: none;
  border: 0; border-radius: var(--g3-r-pildora); background: transparent; color: var(--g3-tinta-2); cursor: pointer; text-decoration: none;
}
[data-diseno="3g"] .g3-btn-icono:hover { background: var(--g3-contenedor-alto); color: var(--g3-tinta); }
[data-diseno="3g"] .g3-btn-icono > :is(svg, .g3-icono) { width: 20px; height: 20px; }
[data-diseno="3g"] .g3-btn-icono > .g3-insignia { position: absolute; top: 0; right: 0; border: 2px solid var(--g3-superficie); }

/* Insignia (número de pendientes) */
[data-diseno="3g"] .g3-insignia {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--g3-r-pildora);
  background: var(--g3-mal); color: var(--g3-sobre-mal); font: 700 var(--g3-t-min)/1 var(--g3-f-texto); font-variant-numeric: tabular-nums; flex: none;
}
[data-diseno="3g"] .g3-insignia--neutra { background: var(--g3-contenedor-alto); color: var(--g3-tinta-2); }
[data-diseno="3g"] .g3-insignia--primaria { background: var(--g3-primario); color: var(--g3-sobre-primario); }

/* ---------- Chips (filtros) ---------- */
[data-diseno="3g"] .g3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
[data-diseno="3g"] .g3-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; margin: 0;
  border: 1px solid var(--g3-linea-fuerte); border-radius: var(--g3-r-ch); background: transparent; color: var(--g3-tinta-2);
  font: 600 var(--g3-t-ch)/1.2 var(--g3-f-texto); white-space: nowrap; cursor: pointer; text-decoration: none;
}
[data-diseno="3g"] .g3-chip:hover { background: var(--g3-hover); color: var(--g3-tinta); }
[data-diseno="3g"] .g3-chip:is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"], .g3-chip--activo) {
  background: var(--g3-primario-suave); border-color: transparent; color: var(--g3-sobre-primario-suave);
}
[data-diseno="3g"] .g3-chip:is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"], .g3-chip--activo)::before {
  content: ""; width: 5px; height: 10px; margin: -3px 2px 0 1px; flex: none;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
[data-diseno="3g"] .g3-chip .g3-insignia { min-width: 18px; height: 18px; background: var(--g3-contenedor-alto); color: var(--g3-tinta-2); }
@media (pointer: coarse) { [data-diseno="3g"] .g3-chip { min-height: 38px; } }

/* ---------- Estados (punto + texto) ---------- */
[data-diseno="3g"] .g3-estado {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--g3-r-pildora);
  background: var(--g3-neutro-suave); color: var(--g3-neutro); font: 600 var(--g3-t-min)/1.35 var(--g3-f-texto); white-space: nowrap;
}
[data-diseno="3g"] .g3-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
[data-diseno="3g"] .g3-estado--ok { background: var(--g3-ok-suave); color: var(--g3-ok); }
[data-diseno="3g"] .g3-estado--aviso { background: var(--g3-aviso-suave); color: var(--g3-aviso); }
[data-diseno="3g"] .g3-estado--mal { background: var(--g3-mal-suave); color: var(--g3-mal); }
[data-diseno="3g"] .g3-estado--info { background: var(--g3-info-suave); color: var(--g3-info); }
[data-diseno="3g"] .g3-estado--neutro { background: var(--g3-neutro-suave); color: var(--g3-neutro); }

/* ---------- Tipo de trabajo: instalación azul, mantenimiento turquesa, garantía lila ---------- */
[data-diseno="3g"] .g3-tipo {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px;
  background: var(--g3-neutro-suave); color: var(--g3-neutro); font: 600 var(--g3-t-min)/1.35 var(--g3-f-texto); white-space: nowrap;
}
[data-diseno="3g"] .g3-tipo--instalacion { background: var(--g3-instalacion-suave); color: var(--g3-instalacion); }
[data-diseno="3g"] .g3-tipo--mantenimiento { background: var(--g3-mantenimiento-suave); color: var(--g3-mantenimiento); }
[data-diseno="3g"] .g3-tipo--garantia { background: var(--g3-garantia-suave); color: var(--g3-garantia); }

/* ---------- Tarjeta ---------- */
[data-diseno="3g"] .g3-tarjeta {
  display: grid; gap: 12px; align-content: start; min-width: 0; padding: 18px;
  background: var(--g3-superficie); color: var(--g3-tinta); border: 1px solid var(--g3-linea); border-radius: var(--g3-r-gr);
}
[data-diseno="3g"] .g3-tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-width: 0; }
[data-diseno="3g"] .g3-tarjeta-cab :is(h2, h3) { font: 600 1.0625rem/1.3 var(--g3-f-titulo); margin: 0; }
[data-diseno="3g"] .g3-tarjeta--vidrio {
  background: var(--g3-vidrio); -webkit-backdrop-filter: var(--g3-desenfoque); backdrop-filter: var(--g3-desenfoque);
  border-color: var(--g3-vidrio-borde); border-radius: var(--g3-r-hoja); box-shadow: var(--g3-sombra-2);
}
[data-diseno="3g"] .g3-tarjeta--hundida { background: var(--g3-contenedor); border-color: transparent; }
[data-diseno="3g"] :is(a.g3-tarjeta, button.g3-tarjeta, .g3-tarjeta--clic) { cursor: pointer; text-decoration: none; text-align: left; font: inherit; transition: box-shadow var(--g3-rapido), border-color var(--g3-rapido); }
[data-diseno="3g"] :is(a.g3-tarjeta, button.g3-tarjeta, .g3-tarjeta--clic):hover { box-shadow: var(--g3-sombra-2); border-color: var(--g3-linea-fuerte); text-decoration: none; }

/* ---------- KPI (número grande) ---------- */
[data-diseno="3g"] .g3-kpi {
  display: grid; gap: 2px; align-content: start; min-width: 0; padding: 16px 18px;
  background: var(--g3-superficie); color: var(--g3-tinta); border: 1px solid var(--g3-linea); border-radius: var(--g3-r-gr);
  text-decoration: none;
}
[data-diseno="3g"] .g3-kpi-valor { font: 600 2rem/1.1 var(--g3-f-titulo); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
[data-diseno="3g"] .g3-kpi-texto { font-size: var(--g3-t-ch); color: var(--g3-tinta-2); }
[data-diseno="3g"] .g3-kpi-cambio { font-size: var(--g3-t-ch); font-weight: 600; color: var(--g3-tinta-2); }
[data-diseno="3g"] .g3-kpi-cambio--sube { color: var(--g3-ok); }
[data-diseno="3g"] .g3-kpi-cambio--baja { color: var(--g3-mal); }
[data-diseno="3g"] a.g3-kpi:hover { border-color: var(--g3-linea-fuerte); box-shadow: var(--g3-sombra-2); }

/* ---------- Tabla (y en celular, tarjetas) ---------- */
[data-diseno="3g"] .g3-tabla {
  overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0;
  background: var(--g3-superficie); border: 1px solid var(--g3-linea); border-radius: var(--g3-r-gr);
}
[data-diseno="3g"] .g3-tabla table { width: 100%; border-collapse: collapse; font-size: 0.875rem; color: var(--g3-tinta); }
[data-diseno="3g"] .g3-tabla :is(th, td) { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--g3-linea); }
[data-diseno="3g"] .g3-tabla th { font-size: var(--g3-t-ch); font-weight: 600; color: var(--g3-tinta-2); white-space: nowrap; background: var(--g3-superficie); }
[data-diseno="3g"] .g3-tabla th[aria-sort] { cursor: pointer; }
[data-diseno="3g"] .g3-tabla tbody tr:last-child > td { border-bottom: 0; }
[data-diseno="3g"] .g3-tabla tbody tr:hover { background: var(--g3-hover); }
[data-diseno="3g"] .g3-tabla tbody tr[aria-selected="true"] { background: var(--g3-primario-tinte); }
[data-diseno="3g"] .g3-tabla td small { display: block; color: var(--g3-tinta-2); font-size: var(--g3-t-ch); }
[data-diseno="3g"] .g3-tabla :is(th, td).g3-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-diseno="3g"] .g3-tabla .g3-celda-acciones { white-space: nowrap; text-align: right; }
[data-diseno="3g"] .g3-tabla--fija th { position: sticky; top: 0; z-index: 1; }
@media (max-width: 720px) {
  [data-diseno="3g"] .g3-tabla--tarjetas { overflow: visible; background: transparent; border: 0; border-radius: 0; }
  [data-diseno="3g"] .g3-tabla--tarjetas thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  [data-diseno="3g"] .g3-tabla--tarjetas :is(table, tbody, tr, td) { display: block; }
  [data-diseno="3g"] .g3-tabla--tarjetas tbody { display: grid; gap: 10px; }
  [data-diseno="3g"] .g3-tabla--tarjetas tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px;
    background: var(--g3-superficie); border: 1px solid var(--g3-linea); border-radius: var(--g3-r-md);
  }
  [data-diseno="3g"] .g3-tabla--tarjetas tbody tr:hover { background: var(--g3-superficie); }
  [data-diseno="3g"] .g3-tabla--tarjetas td { padding: 0; border: 0; min-width: 0; white-space: normal; }
  [data-diseno="3g"] .g3-tabla--tarjetas td[data-etq] { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; }
  [data-diseno="3g"] .g3-tabla--tarjetas td[data-etq]::before { content: attr(data-etq); flex: none; text-align: left; font-size: var(--g3-t-min); font-weight: 600; color: var(--g3-tinta-3); }
  [data-diseno="3g"] .g3-tabla--tarjetas td.g3-celda-titulo { grid-column: 1; font-weight: 600; }
  [data-diseno="3g"] .g3-tabla--tarjetas td.g3-celda-titulo small { font-weight: 400; }
  [data-diseno="3g"] .g3-tabla--tarjetas td.g3-celda-estado { grid-column: 2; grid-row: 1; justify-self: end; }
  [data-diseno="3g"] .g3-tabla--tarjetas td.g3-celda-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; text-align: left; }
  [data-diseno="3g"] .g3-tabla--tarjetas td.g3-num { white-space: normal; }
}

/* ---------- Lista y fila ---------- */
[data-diseno="3g"] .g3-lista {
  display: grid; margin: 0; padding: 0; list-style: none; overflow: hidden; min-width: 0;
  background: var(--g3-superficie); border: 1px solid var(--g3-linea); border-radius: var(--g3-r-gr);
}
[data-diseno="3g"] .g3-fila {
  display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 16px; margin: 0;
  border-bottom: 1px solid var(--g3-linea); color: var(--g3-tinta); text-decoration: none;
}
[data-diseno="3g"] .g3-fila:last-child { border-bottom: 0; }
[data-diseno="3g"] .g3-fila-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--g3-contenedor); color: var(--g3-tinta-2); flex: none; }
[data-diseno="3g"] .g3-fila-cuerpo { display: grid; gap: 2px; min-width: 0; flex: 1; }
[data-diseno="3g"] .g3-fila-cuerpo > :is(b, strong) { font-weight: 600; overflow-wrap: anywhere; }
[data-diseno="3g"] .g3-fila-cuerpo > small { color: var(--g3-tinta-2); font-size: var(--g3-t-ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-diseno="3g"] .g3-fila-der { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
[data-diseno="3g"] :is(a.g3-fila, button.g3-fila, .g3-fila--clic) { cursor: pointer; }
[data-diseno="3g"] :is(a.g3-fila, button.g3-fila, .g3-fila--clic):hover { background: var(--g3-hover); text-decoration: none; }
[data-diseno="3g"] button.g3-fila { width: 100%; border: 0; border-bottom: 1px solid var(--g3-linea); background: transparent; text-align: left; font: inherit; }
[data-diseno="3g"] button.g3-fila:last-child { border-bottom: 0; }
[data-diseno="3g"] .g3-fila[aria-current="true"] { background: var(--g3-primario-tinte); }

/* ---------- Franja de color a la izquierda (tipo de trabajo o estado) — va después de tarjeta, kpi y fila para ganarles ---------- */
[data-diseno="3g"] [class*="g3-franja--"] { border-left-width: 4px; border-left-style: solid; border-left-color: var(--g3-linea-fuerte); }
[data-diseno="3g"] .g3-franja--instalacion { border-left-color: var(--g3-instalacion); }
[data-diseno="3g"] .g3-franja--mantenimiento { border-left-color: var(--g3-mantenimiento); }
[data-diseno="3g"] .g3-franja--garantia { border-left-color: var(--g3-garantia); }
[data-diseno="3g"] .g3-franja--mal { border-left-color: var(--g3-mal); }
[data-diseno="3g"] .g3-franja--aviso { border-left-color: var(--g3-aviso); }
[data-diseno="3g"] .g3-franja--ok { border-left-color: var(--g3-ok); }

/* ---------- Pestañas (primer nivel) ---------- */
[data-diseno="3g"] .g3-pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--g3-linea); overflow-x: auto; scrollbar-width: none; min-width: 0; }
[data-diseno="3g"] .g3-pestanas::-webkit-scrollbar { display: none; }
[data-diseno="3g"] .g3-pestanas > :is(button, a) {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; margin: 0;
  border: 0; border-radius: 12px 12px 0 0; background: transparent; color: var(--g3-tinta-2);
  font: 600 var(--g3-t-base)/1.2 var(--g3-f-texto); white-space: nowrap; text-decoration: none; cursor: pointer; flex: none;
}
[data-diseno="3g"] .g3-pestanas > :is(button, a):hover { background: var(--g3-hover); color: var(--g3-tinta); }
[data-diseno="3g"] .g3-pestanas > :is(button, a):is([aria-selected="true"], [aria-current="page"], [aria-current="true"]) { color: var(--g3-primario); }
[data-diseno="3g"] .g3-pestanas > :is(button, a):is([aria-selected="true"], [aria-current="page"], [aria-current="true"])::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--g3-primario);
}
[data-diseno="3g"] .g3-pestanas .g3-insignia { background: var(--g3-contenedor-alto); color: var(--g3-tinta-2); }
[data-diseno="3g"] .g3-panel { display: grid; gap: 16px; min-width: 0; }
[data-diseno="3g"] .g3-panel[hidden] { display: none; }

/* ---------- Segmentado (segundo nivel y vistas) ---------- */
[data-diseno="3g"] .g3-segmentado {
  display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border-radius: var(--g3-r-pildora); background: var(--g3-contenedor-alto); vertical-align: middle; justify-self: start;
}
[data-diseno="3g"] .g3-segmentado::-webkit-scrollbar { display: none; }
[data-diseno="3g"] .g3-segmentado > :is(button, a, label) {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; margin: 0; flex: none;
  border: 0; border-radius: var(--g3-r-pildora); background: transparent; color: var(--g3-tinta-2);
  font: 600 var(--g3-t-ch)/1.2 var(--g3-f-texto); white-space: nowrap; text-decoration: none; cursor: pointer;
}
[data-diseno="3g"] .g3-segmentado > :is(button, a, label):hover { color: var(--g3-tinta); }
[data-diseno="3g"] .g3-segmentado > :is(button, a, label):is([aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], [aria-current="page"], [aria-current="true"], :has(input:checked)) {
  background: var(--g3-segmento-activo); color: var(--g3-tinta); box-shadow: var(--g3-sombra-1);
}
[data-diseno="3g"] .g3-segmentado > label > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
[data-diseno="3g"] .g3-segmentado > label:has(input:focus-visible) { outline: 3px solid var(--g3-foco); outline-offset: 1px; }
[data-diseno="3g"] .g3-segmentado > * > :is(svg, .g3-icono) { width: 16px; height: 16px; }

/* ---------- Formulario: campo, etiqueta, entrada, selector, área ---------- */
[data-diseno="3g"] .g3-formulario { display: grid; gap: 16px; min-width: 0; }
[data-diseno="3g"] .g3-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px 16px; }
[data-diseno="3g"] .g3-campo { display: grid; gap: 6px; min-width: 0; align-content: start; }
[data-diseno="3g"] .g3-campo--ancho { grid-column: 1 / -1; }
[data-diseno="3g"] .g3-etq { font: 600 var(--g3-t-ch)/1.3 var(--g3-f-texto); color: var(--g3-tinta-2); }
[data-diseno="3g"] .g3-etq small { font-weight: 500; color: var(--g3-tinta-3); font-size: var(--g3-t-min); }
[data-diseno="3g"] :is(.g3-entrada, .g3-selector, .g3-area) {
  width: 100%; min-height: 44px; margin: 0; padding: 0 12px;
  border: 1px solid var(--g3-linea-campo); border-radius: 12px; background-color: var(--g3-superficie); color: var(--g3-tinta);
  font: 400 var(--g3-t-base)/1.4 var(--g3-f-texto); transition: border-color var(--g3-rapido), box-shadow var(--g3-rapido);
}
[data-diseno="3g"] :is(.g3-entrada, .g3-selector, .g3-area):hover { border-color: var(--g3-tinta-2); }
[data-diseno="3g"] :is(.g3-entrada, .g3-selector, .g3-area):focus { border-color: var(--g3-primario); box-shadow: 0 0 0 3px var(--g3-foco-anillo); outline: 2px solid transparent; }
[data-diseno="3g"] :is(.g3-entrada, .g3-area)::placeholder { color: var(--g3-tinta-3); opacity: 1; }
[data-diseno="3g"] .g3-selector {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: var(--g3-flecha-selector); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
}
[data-diseno="3g"] .g3-area { min-height: 96px; padding: 10px 12px; resize: vertical; }
[data-diseno="3g"] :is(.g3-entrada, .g3-selector, .g3-area):disabled { background-color: var(--g3-contenedor); color: var(--g3-tinta-3); border-color: var(--g3-linea-fuerte); cursor: not-allowed; }
[data-diseno="3g"] :is(.g3-entrada, .g3-selector, .g3-area)[aria-invalid="true"] { border-color: var(--g3-mal); }
[data-diseno="3g"] :is(.g3-entrada, .g3-selector, .g3-area)[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--g3-mal-suave); }
[data-diseno="3g"] .g3-ayuda { font-size: var(--g3-t-ch); color: var(--g3-tinta-3); }
[data-diseno="3g"] .g3-error-campo { display: flex; align-items: flex-start; gap: 6px; font-size: var(--g3-t-ch); font-weight: 600; color: var(--g3-mal); }
[data-diseno="3g"] .g3-error-campo > :is(svg, .g3-icono) { width: 16px; height: 16px; margin-top: 1px; }
[data-diseno="3g"] .g3-opcion { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; color: var(--g3-tinta); }
[data-diseno="3g"] .g3-casilla { width: 20px; height: 20px; margin: 0; accent-color: var(--g3-primario); flex: none; cursor: pointer; }
[data-diseno="3g"] .g3-form-pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 4px; }

/* ---------- Interruptor tipo iOS (input checkbox con role="switch") ---------- */
[data-diseno="3g"] .g3-interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--g3-tinta); font-weight: 500; }
[data-diseno="3g"] .g3-interruptor input {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; margin: 0; cursor: pointer;
  width: 46px; height: 28px; border-radius: var(--g3-r-pildora); border: 0;
  background: radial-gradient(circle at center, #ffffff 0 10.5px, rgba(0, 0, 0, 0.16) 11px, transparent 12.5px) left center / 28px 28px no-repeat var(--g3-contenedor-alto);
  box-shadow: inset 0 0 0 1px var(--g3-linea-campo);
  transition: background-color var(--g3-normal), background-position var(--g3-normal) var(--g3-curva), box-shadow var(--g3-normal);
}
[data-diseno="3g"] .g3-interruptor input:checked { background-color: var(--g3-primario); background-position: right center; box-shadow: none; }
[data-diseno="3g"] .g3-interruptor input:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Caja / aviso dentro de la página ---------- */
[data-diseno="3g"] .g3-caja {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--g3-r-md);
  background: var(--g3-contenedor); color: var(--g3-tinta); font-size: 0.875rem; min-width: 0;
}
[data-diseno="3g"] .g3-caja > :is(svg, .g3-icono) { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--g3-tinta-2); }
[data-diseno="3g"] .g3-caja-cuerpo { display: grid; gap: 4px; min-width: 0; flex: 1; }
[data-diseno="3g"] .g3-caja-cuerpo > :is(b, strong) { font-weight: 600; }
[data-diseno="3g"] .g3-caja-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; align-self: center; }
[data-diseno="3g"] .g3-caja--info { background: var(--g3-info-suave); }
[data-diseno="3g"] .g3-caja--info > :is(svg, .g3-icono) { color: var(--g3-info); }
[data-diseno="3g"] .g3-caja--aviso { background: var(--g3-aviso-suave); }
[data-diseno="3g"] .g3-caja--aviso > :is(svg, .g3-icono) { color: var(--g3-aviso); }
[data-diseno="3g"] .g3-caja--mal { background: var(--g3-mal-suave); }
[data-diseno="3g"] .g3-caja--mal > :is(svg, .g3-icono) { color: var(--g3-mal); }
[data-diseno="3g"] .g3-caja--ok { background: var(--g3-ok-suave); }
[data-diseno="3g"] .g3-caja--ok > :is(svg, .g3-icono) { color: var(--g3-ok); }

/* ---------- Vacío ---------- */
[data-diseno="3g"] .g3-vacio {
  display: grid; justify-items: center; align-content: center; gap: 8px; padding: 40px 16px; text-align: center;
  border-radius: var(--g3-r-gr); background: var(--g3-contenedor); color: var(--g3-tinta-2);
}
[data-diseno="3g"] .g3-vacio > :is(svg, .g3-icono) { width: 40px; height: 40px; color: var(--g3-tinta-3); }
[data-diseno="3g"] .g3-vacio > :is(b, strong) { font: 600 1.0625rem/1.3 var(--g3-f-titulo); color: var(--g3-tinta); }
[data-diseno="3g"] .g3-vacio > p { margin: 0; max-width: 46ch; }
[data-diseno="3g"] .g3-vacio > .g3-btn { margin-top: 6px; }

/* ---------- Progreso ---------- */
[data-diseno="3g"] .g3-progreso { height: 8px; border-radius: var(--g3-r-pildora); background: var(--g3-contenedor-alto); overflow: hidden; min-width: 0; }
[data-diseno="3g"] .g3-progreso > span { display: block; height: 100%; width: var(--g3-valor, 0%); border-radius: inherit; background: var(--g3-primario); transition: width var(--g3-normal) var(--g3-curva); }
[data-diseno="3g"] .g3-progreso--ok > span { background: var(--g3-ok); }
[data-diseno="3g"] .g3-progreso--aviso > span { background: var(--g3-aviso); }
[data-diseno="3g"] .g3-progreso--mal > span { background: var(--g3-mal); }
[data-diseno="3g"] .g3-progreso--indeterminado > span { width: 40%; animation: g3-recorre 1.4s var(--g3-curva) infinite; }

/* ---------- Esqueleto (cargando) ---------- */
[data-diseno="3g"] .g3-esqueleto {
  display: block; min-height: 1em; border-radius: 8px; color: transparent !important;
  background: linear-gradient(90deg, var(--g3-contenedor) 0%, var(--g3-contenedor-alto) 50%, var(--g3-contenedor) 100%);
  background-size: 200% 100%; animation: g3-brillo 1.4s linear infinite;
}

/* ---------- Avatar ---------- */
[data-diseno="3g"] .g3-avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--g3-primario-suave); color: var(--g3-sobre-primario-suave); font: 650 var(--g3-t-min)/1 var(--g3-f-texto);
}
[data-diseno="3g"] .g3-avatar--gr { width: 44px; height: 44px; font-size: 0.875rem; }
/* Sesión en la barra superior (v1.1.0): avatar + nombre; en celular solo el avatar, nunca se esconde. */
[data-diseno="3g"] .g3-sesion {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; min-width: 40px; padding: 3px; margin: 0; flex: none;
  border: 0; border-radius: var(--g3-r-pildora); background: transparent; color: var(--g3-tinta); cursor: pointer;
  font: 500 var(--g3-t-ch)/1.2 var(--g3-f-texto); text-decoration: none;
}
[data-diseno="3g"] .g3-sesion:hover { background: var(--g3-contenedor-alto); text-decoration: none; }
[data-diseno="3g"] .g3-sesion:hover .g3-avatar { box-shadow: 0 0 0 3px var(--g3-primario-tinte); }
[data-diseno="3g"] .g3-sesion-nombre { padding-right: 10px; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Menú (más acciones) ---------- */
[data-diseno="3g"] .g3-menu {
  display: grid; gap: 2px; min-width: 220px; padding: 6px; margin: 0; list-style: none; z-index: 70;
  background: var(--g3-vidrio-fuerte); -webkit-backdrop-filter: var(--g3-desenfoque); backdrop-filter: var(--g3-desenfoque);
  border: 1px solid var(--g3-vidrio-borde); border-radius: 18px; box-shadow: var(--g3-sombra-3); color: var(--g3-tinta);
}
[data-diseno="3g"] .g3-menu :is(button, a) {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; margin: 0;
  border: 0; border-radius: 12px; background: transparent; color: var(--g3-tinta); text-align: left; text-decoration: none;
  font: 500 var(--g3-t-base)/1.2 var(--g3-f-texto); cursor: pointer;
}
[data-diseno="3g"] .g3-menu :is(button, a):hover { background: var(--g3-hover); }
[data-diseno="3g"] .g3-menu .g3-menu-peligro { color: var(--g3-mal); }
[data-diseno="3g"] .g3-menu hr { border: 0; border-top: 1px solid var(--g3-linea); margin: 4px 6px; }

/* ---------- Línea de tiempo ---------- */
[data-diseno="3g"] .g3-linea-tiempo { display: grid; margin: 0; padding: 0; list-style: none; }
[data-diseno="3g"] .g3-evento { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
[data-diseno="3g"] .g3-evento::before { content: ""; width: 10px; height: 10px; margin: 6px 0 0 4px; border-radius: 50%; background: var(--g3-primario); box-shadow: 0 0 0 4px var(--g3-primario-suave); }
[data-diseno="3g"] .g3-evento::after { content: ""; position: absolute; left: 8px; top: 22px; bottom: 0; width: 2px; background: var(--g3-linea); }
[data-diseno="3g"] .g3-evento:last-child::after { display: none; }
[data-diseno="3g"] .g3-evento > div { display: grid; gap: 2px; min-width: 0; }
[data-diseno="3g"] .g3-evento small { color: var(--g3-tinta-2); font-size: var(--g3-t-ch); }

/* ---------- Cajón (hoja lateral de vidrio) y diálogo ----------
   Úsalos con <dialog> (showModal) o con un <div> y el atributo [open] más un .g3-velo. En celular el cajón sale de abajo. */
[data-diseno="3g"] .g3-velo { position: fixed; inset: 0; z-index: 900; background: var(--g3-velo); }
[data-diseno="3g"] .g3-cajon {
  position: fixed; inset: 10px 10px 10px auto; z-index: 901; display: flex; flex-direction: column;
  width: min(480px, calc(100% - 20px)); height: auto; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden;
  background: var(--g3-vidrio-fuerte); -webkit-backdrop-filter: var(--g3-desenfoque); backdrop-filter: var(--g3-desenfoque);
  border: 1px solid var(--g3-vidrio-borde); border-radius: var(--g3-r-hoja); box-shadow: var(--g3-sombra-3); color: var(--g3-tinta);
  animation: g3-entra-der var(--g3-normal) var(--g3-curva);
}
[data-diseno="3g"] .g3-cajon:not([open]) { display: none; }
[data-diseno="3g"] .g3-cajon--ancho { width: min(760px, calc(100% - 20px)); }
[data-diseno="3g"] .g3-dialogo {
  position: fixed; inset: 0; z-index: 901; display: flex; flex-direction: column;
  width: min(460px, calc(100% - 32px)); height: max-content; max-width: none; max-height: min(88dvh, 760px); margin: auto; padding: 0; overflow: hidden;
  background: var(--g3-vidrio-fuerte); -webkit-backdrop-filter: var(--g3-desenfoque); backdrop-filter: var(--g3-desenfoque);
  border: 1px solid var(--g3-vidrio-borde); border-radius: var(--g3-r-hoja); box-shadow: var(--g3-sombra-3); color: var(--g3-tinta);
  animation: g3-aparece var(--g3-normal) var(--g3-curva);
}
[data-diseno="3g"] .g3-dialogo:not([open]) { display: none; }
[data-diseno="3g"] .g3-dialogo--ancho { width: min(640px, calc(100% - 32px)); }
[data-diseno="3g"] :is(dialog.g3-cajon, dialog.g3-dialogo)::backdrop { background: rgba(12, 12, 12, 0.36); }
[data-diseno="3g"] .g3-cajon-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 12px; }
[data-diseno="3g"] .g3-cajon-cab :is(h2, h3) { font: 600 var(--g3-t-lg)/1.25 var(--g3-f-titulo); margin: 0; min-width: 0; }
[data-diseno="3g"] .g3-cajon-cuerpo { display: grid; gap: 14px; align-content: start; grid-auto-rows: max-content; padding: 6px 20px 20px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
[data-diseno="3g"] .g3-cajon-pie {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: auto;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--g3-linea);
}

/* ---------- Aviso flotante (para React/HTML propios; G3.aviso() dibuja el mismo) ---------- */
[data-diseno="3g"] .g3-avisos { position: fixed; left: 24px; bottom: 24px; z-index: 1000; display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); pointer-events: none; }
[data-diseno="3g"] .g3-aviso-flotante {
  display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 16px; border-radius: 14px; pointer-events: auto;
  background: var(--g3-flotante-fondo); color: var(--g3-flotante-tinta); box-shadow: var(--g3-sombra-3);
  font: 500 0.875rem/1.4 var(--g3-f-texto); animation: g3-sube var(--g3-normal) var(--g3-curva);
}
[data-diseno="3g"] .g3-aviso-flotante > span { flex: 1; min-width: 0; }
[data-diseno="3g"] .g3-aviso-flotante button {
  flex: none; min-height: 36px; padding: 0 12px; margin: 0; border: 0; border-radius: var(--g3-r-pildora); background: transparent;
  color: var(--g3-flotante-accion); font: 700 var(--g3-t-ch)/1 var(--g3-f-texto); cursor: pointer;
}

/* ---------- Vista previa → confirmar ---------- */
[data-diseno="3g"] .g3-previa { display: grid; gap: 14px; min-width: 0; }
[data-diseno="3g"] .g3-antes-despues {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 16px; border-radius: var(--g3-r-md); background: var(--g3-contenedor);
}
[data-diseno="3g"] .g3-antes-despues > div { display: grid; gap: 2px; text-align: center; min-width: 0; }
[data-diseno="3g"] .g3-antes-despues .g3-valor { font: 600 1.5rem/1.15 var(--g3-f-titulo); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
[data-diseno="3g"] .g3-antes-despues small { color: var(--g3-tinta-2); font-size: var(--g3-t-ch); }
[data-diseno="3g"] .g3-antes-despues > :is(svg, .g3-icono) { color: var(--g3-tinta-3); }
[data-diseno="3g"] .g3-datos { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 0.875rem; }
[data-diseno="3g"] .g3-datos dt { color: var(--g3-tinta-2); font-weight: 500; }
[data-diseno="3g"] .g3-datos dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
[data-diseno="3g"] .g3-datos dd.g3-mal { color: var(--g3-mal); }
[data-diseno="3g"] .g3-datos dd.g3-ok { color: var(--g3-ok); }
[data-diseno="3g"] .g3-pasa { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
[data-diseno="3g"] .g3-pasa > li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; }
[data-diseno="3g"] .g3-pasa > li::before { content: ""; width: 8px; height: 8px; margin: 6px 0 0 4px; border-radius: 50%; background: var(--g3-primario); }
[data-diseno="3g"] .g3-cambios { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--g3-linea); border-radius: var(--g3-r-md); overflow: hidden; font-size: 0.875rem; }
[data-diseno="3g"] .g3-cambio { display: grid; grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--g3-linea); }
[data-diseno="3g"] .g3-cambio:last-child { border-bottom: 0; }
[data-diseno="3g"] .g3-cambio > b { font-weight: 600; color: var(--g3-tinta-2); }
[data-diseno="3g"] .g3-cambio del { color: var(--g3-tinta-2); text-decoration: line-through; overflow-wrap: anywhere; }
[data-diseno="3g"] .g3-cambio ins { color: var(--g3-tinta); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
[data-diseno="3g"] .g3-cambio > :is(svg, .g3-icono) { width: 16px; height: 16px; color: var(--g3-tinta-3); }
[data-diseno="3g"] .g3-firma { display: flex; align-items: center; gap: 8px; font-size: var(--g3-t-ch); color: var(--g3-tinta-2); }
[data-diseno="3g"] .g3-firma > :is(svg, .g3-icono) { width: 16px; height: 16px; }

/* ============================================================================================
   7. ADAPTACIÓN: laptop, tableta y celular
   ============================================================================================ */
@media (max-width: 1100px) {
  [data-diseno="3g"] .g3-rejilla--principal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  [data-diseno="3g"] .g3-marco { grid-template-columns: minmax(0, 1fr); }
  [data-diseno="3g"] .g3-marco > .g3-riel { display: none; }
  [data-diseno="3g"] .g3-riel[data-abierto] {
    display: flex; position: fixed; inset: 0 auto 0 0; z-index: 902; width: min(300px, 86vw); height: 100dvh;
    background: var(--g3-vidrio-fuerte); -webkit-backdrop-filter: var(--g3-desenfoque); backdrop-filter: var(--g3-desenfoque);
    border-right: 1px solid var(--g3-vidrio-borde); box-shadow: var(--g3-sombra-3); animation: g3-entra-izq var(--g3-normal) var(--g3-curva);
  }
  [data-diseno="3g"] .g3-barra { padding: 8px 14px; flex-wrap: wrap; row-gap: 8px; min-height: 56px; }
  [data-diseno="3g"] .g3-logo--movil { display: inline-flex; }
  [data-diseno="3g"] .g3-barra .g3-busca--grande { order: 5; flex-basis: 100%; max-width: none; }
  [data-diseno="3g"] .g3-principal { padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
  [data-diseno="3g"] :is(.g3-cab h1, .g3-titulo) { font-size: 1.5rem; }
  [data-diseno="3g"] .g3-barra-inferior {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: var(--g3-z-barra-inferior);
    background: var(--g3-vidrio); -webkit-backdrop-filter: var(--g3-desenfoque); backdrop-filter: var(--g3-desenfoque);
    border: 1px solid var(--g3-vidrio-borde); border-radius: 26px; box-shadow: var(--g3-sombra-2); padding: 6px;
  }
  [data-diseno="3g"] .g3-avisos { left: 16px; right: 16px; width: auto; bottom: calc(16px + var(--g3-avisos-extra, 0px) + env(safe-area-inset-bottom, 0px)); }
  [data-diseno="3g"] body:has(.g3-barra-inferior) .g3-avisos { --g3-avisos-extra: 80px; }
  :root[data-diseno="3g"]:has(.g3-barra-inferior:not([hidden])) {
    --g3-espacio-inferior: calc(var(--g3-barra-inferior-alto) + 18px + env(safe-area-inset-bottom, 0px));
  }
  [data-diseno="3g"] .g3-sesion-nombre { display: none; }
}
@media (max-width: 720px) {
  [data-diseno="3g"] .g3-cajon,
  [data-diseno="3g"] .g3-cajon--ancho {
    inset: auto 0 0 0; width: 100%; max-height: 92dvh; border-radius: var(--g3-r-hoja) var(--g3-r-hoja) 0 0; border-bottom: 0;
    animation-name: g3-entra-abajo;
  }
  [data-diseno="3g"] .g3-cab-acciones { width: 100%; }
  [data-diseno="3g"] .g3-rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  [data-diseno="3g"] .g3-kpi { padding: 14px; }
  [data-diseno="3g"] .g3-kpi-valor { font-size: 1.625rem; }
  [data-diseno="3g"] .g3-cambio { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  [data-diseno="3g"] .g3-cambio > b { grid-column: 1 / -1; }
  [data-diseno="3g"] .g3-datos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  [data-diseno="3g"] .g3-datos dd { margin-bottom: 8px; }
  [data-diseno="3g"] .g3-solo-escritorio { display: none !important; }
}
@media (min-width: 721px) {
  [data-diseno="3g"] .g3-solo-celular { display: none !important; }
}

/* Sin vidrio (navegadores viejos): superficies sólidas para que el texto se lea */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-diseno="3g"] :is(.g3-barra, .g3-barra-inferior, .g3-tarjeta--vidrio, .g3-cajon, .g3-dialogo, .g3-menu, .g3-riel[data-abierto]) { background: var(--g3-superficie); }
}

/* ============================================================================================
   8. MOVIMIENTO
   ============================================================================================ */
@keyframes g3-gira { to { transform: rotate(360deg); } }
@keyframes g3-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes g3-recorre { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes g3-entra-der { from { transform: translateX(32px); opacity: 0; } }
@keyframes g3-entra-izq { from { transform: translateX(-32px); opacity: 0; } }
@keyframes g3-entra-abajo { from { transform: translateY(40px); opacity: 0; } }
@keyframes g3-aparece { from { transform: scale(0.97); opacity: 0; } }
@keyframes g3-sube { from { transform: translateY(12px); opacity: 0; } }
/* Movimiento reducido: SOLO los componentes del paquete (clases que empiezan con g3-) y su ::before/::after.
   Las animaciones propias de cada sistema (p. ej. el pulso de alerta de Ventas) se quedan como están.
   La variante g3: de Tailwind no cuenta (la clase empieza con «g3:»). */
@media (prefers-reduced-motion: reduce) {
  [data-diseno="3g"] :is([class^="g3-"], [class*=" g3-"]),
  [data-diseno="3g"] :is([class^="g3-"], [class*=" g3-"])::before,
  [data-diseno="3g"] :is([class^="g3-"], [class*=" g3-"])::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}