/* Cuentas 3G · pantallas de entrada (CTA-03). Encima de Diseño 3G v1.1.0 (copiado sin cambios en
   /web/diseno-3g/). Solo acomoda la tarjeta y el botón de Google; todo lo demás son clases g3-. */

:root[data-diseno="3g"] {
  /* Botón de Google: los colores de su guía de marca (tema claro), que no se cambian. */
  --c3g-google-fondo: #ffffff;
  --c3g-google-borde: #747775;
  --c3g-google-tinta: #1f1f1f;
  --c3g-google-hover: #f2f2f2;
}
:root[data-diseno="3g"][data-g3-tema="oscuro"] {
  /* Tema oscuro de la guía de Google. */
  --c3g-google-fondo: #131314;
  --c3g-google-borde: #8e918f;
  --c3g-google-tinta: #e3e3e3;
  --c3g-google-hover: #1f1f20;
}
@media (prefers-color-scheme: dark) {
  :root[data-diseno="3g"][data-g3-tema="auto"] {
    --c3g-google-fondo: #131314;
    --c3g-google-borde: #8e918f;
    --c3g-google-tinta: #e3e3e3;
    --c3g-google-hover: #1f1f20;
  }
}

[data-diseno="3g"] body { margin: 0; min-height: 100vh; min-height: 100dvh; }
/* Lo que la plantilla esconde (`hidden`) se queda escondido aunque su clase g3- le ponga display. */
[data-diseno="3g"] [hidden] { display: none !important; }

[data-diseno="3g"] .c3g-centro {
  box-sizing: border-box; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 32px 16px;
}
[data-diseno="3g"] .c3g-tarjeta { width: min(100%, 440px); padding: 32px; gap: 22px; }
[data-diseno="3g"] .c3g-cab { display: grid; gap: 6px; }
[data-diseno="3g"] .c3g-cab p { margin: 0; }
[data-diseno="3g"] .c3g-destino { margin: 0; padding: 10px 14px; border-radius: var(--g3-r-md); background: var(--g3-contenedor); color: var(--g3-tinta-2); font-size: var(--g3-t-ch); }
[data-diseno="3g"] .c3g-destino b { color: var(--g3-tinta); }
[data-diseno="3g"] .c3g-pie { margin: 0; font-size: var(--g3-t-ch); text-align: center; }
[data-diseno="3g"] .c3g-form { display: grid; gap: 14px; margin: 0; }

/* «Continuar con Google»: botón de píldora con la «G» oficial (DISEÑO §2.10). */
[data-diseno="3g"] .c3g-google {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 20px;
  border: 1px solid var(--c3g-google-borde); border-radius: var(--g3-r-pildora); background: var(--c3g-google-fondo);
  color: var(--c3g-google-tinta); font: 600 var(--g3-t-md)/1.2 var(--g3-f-texto); cursor: pointer;
  box-shadow: var(--g3-sombra-1); -webkit-tap-highlight-color: transparent;
  transition: background-color var(--g3-rapido), box-shadow var(--g3-rapido);
}
[data-diseno="3g"] .c3g-google:hover { background: var(--c3g-google-hover); box-shadow: var(--g3-sombra-2); }
[data-diseno="3g"] .c3g-google svg { width: 20px; height: 20px; flex: none; }
[data-diseno="3g"] .c3g-google[aria-busy="true"] { cursor: progress; opacity: 0.8; }

[data-diseno="3g"] .c3g-compartida { align-items: flex-start; font-size: var(--g3-t-ch); }
[data-diseno="3g"] .c3g-compartida .g3-casilla { margin-top: 1px; }
[data-diseno="3g"] .c3g-compartida small { display: block; font-size: var(--g3-t-min); }

/* Ícono grande de las pantallas de aviso («Sin acceso», «Demasiados intentos»). */
[data-diseno="3g"] .c3g-icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; }
[data-diseno="3g"] .c3g-icono svg, [data-diseno="3g"] .c3g-icono .g3-icono { width: 26px; height: 26px; }
[data-diseno="3g"] .c3g-icono--mal { background: var(--g3-mal-suave); color: var(--g3-mal); }
[data-diseno="3g"] .c3g-icono--aviso { background: var(--g3-aviso-suave); color: var(--g3-aviso); }
[data-diseno="3g"] .c3g-icono--ok { background: var(--g3-ok-suave); color: var(--g3-ok); }
[data-diseno="3g"] .c3g-acciones { display: grid; gap: 10px; }
[data-diseno="3g"] .c3g-acciones form { margin: 0; }

@media (max-width: 480px) {
  [data-diseno="3g"] .c3g-centro { align-items: start; padding-top: 48px; }
  [data-diseno="3g"] .c3g-tarjeta { padding: 26px 20px; }
}

/* Pantallas de trabajo (CTA-12 Aparatos; después, Personas de CTA-06): una columna de hasta 960 px. */
[data-diseno="3g"] .c3g-hoja { box-sizing: border-box; max-width: 960px; margin: 0 auto; padding: 24px 16px 72px; display: grid; gap: 20px; }
[data-diseno="3g"] .c3g-hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-diseno="3g"] .c3g-hoja .g3-tarjeta { padding: 22px; }
[data-diseno="3g"] .c3g-codigo { font: 600 1.375rem/1.2 var(--g3-f-mono); letter-spacing: 0.12em; text-transform: uppercase; }
[data-diseno="3g"] .c3g-hoja form { margin: 0; }

/* ── Personas y accesos y «Tu cuenta» (CTA-06) ──────────────────────────────────────────────── */
[data-diseno="3g"] .c3g-hoja--ancha { max-width: 1180px; }
[data-diseno="3g"] .c3g-hoja--cuenta { max-width: 760px; }
[data-diseno="3g"] .c3g-yo { color: inherit; text-decoration: none; }
/* En celular las pestañas bajan a otro renglón: nada se sale de la pantalla. */
[data-diseno="3g"] .c3g-pestanas { flex-wrap: wrap; overflow: visible; }
[data-diseno="3g"] .c3g-sin-margen { margin: 0; }
[data-diseno="3g"] .c3g-lista { gap: 16px; }
[data-diseno="3g"] .c3g-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
[data-diseno="3g"] .c3g-buscar { display: flex; gap: 8px; flex: 1 1 260px; max-width: 420px; }
[data-diseno="3g"] .c3g-buscar .g3-entrada { min-width: 0; }
[data-diseno="3g"] .c3g-etiquetas { display: inline-flex; flex-wrap: wrap; gap: 4px; }
[data-diseno="3g"] .c3g-enlace-fuerte { color: var(--g3-tinta); font-weight: 600; text-decoration: none; }
[data-diseno="3g"] .c3g-enlace-fuerte:hover { color: var(--g3-primario); text-decoration: underline; }
[data-diseno="3g"] .c3g-columna { display: grid; gap: 20px; align-content: start; min-width: 0; }
[data-diseno="3g"] .c3g-lista-simple { border-radius: var(--g3-r-md); }
[data-diseno="3g"] .c3g-lista-simple .g3-fila-cuerpo > small { white-space: normal; }
[data-diseno="3g"] .c3g-ficha-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
[data-diseno="3g"] .c3g-flecha { color: var(--g3-tinta-3); }
[data-diseno="3g"] .c3g-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 2px 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
[data-diseno="3g"] .c3g-casillas > legend { margin: 0 0 6px; padding: 0; }
[data-diseno="3g"] .c3g-niveles { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px 16px; }
[data-diseno="3g"] .c3g-lugares { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
[data-diseno="3g"] .c3g-lugares .g3-opcion { align-items: flex-start; }
[data-diseno="3g"] .c3g-lugares .g3-casilla { margin-top: 2px; }
[data-diseno="3g"] .c3g-lugares :is(.g3-opcion, .c3g-lugar-hecho) > span { display: grid; gap: 2px; min-width: 0; }
[data-diseno="3g"] .c3g-lugares small { color: var(--g3-tinta-2); font-size: var(--g3-t-ch); }
[data-diseno="3g"] .c3g-lugar-hecho { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; }
[data-diseno="3g"] .c3g-lugar-hecho > :is(svg, .g3-icono) { width: 20px; height: 20px; flex: none; color: var(--g3-ok); }
[data-diseno="3g"] .c3g-acciones-cuenta { display: flex; flex-wrap: wrap; gap: 8px; }
[data-diseno="3g"] .c3g-saludo { padding: 24px; gap: 16px; }
[data-diseno="3g"] .c3g-saludo-cab { display: flex; align-items: center; gap: 14px; }
[data-diseno="3g"] .c3g-salir { margin: 0; }
[data-diseno="3g"] .c3g-csv { min-height: 180px; font-size: max(12px, 0.85rem); }
[data-diseno="3g"] .c3g-archivo { padding-top: 9px; }
[data-diseno="3g"] .c3g-matriz tfoot td { font-weight: 600; color: var(--g3-tinta-2); }
[data-diseno="3g"] .c3g-enlaces-baja { display: grid; gap: 8px; }
@media (max-width: 860px) {
  [data-diseno="3g"] .c3g-hoja .g3-rejilla--principal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  [data-diseno="3g"] .c3g-buscar { max-width: none; }
  [data-diseno="3g"] .c3g-saludo { padding: 20px; }
}
[data-diseno="3g"] .c3g-que-pasa { display: grid; gap: 8px; }
[data-diseno="3g"] .c3g-ficha-estado { margin-top: -8px; }
/* Llaves y enlaces vivos (CTA-10): en celular el segmentado baja a otro renglón y las fechas no se parten. */
[data-diseno="3g"] .c3g-segmentado-envuelve { flex-wrap: wrap; overflow: visible; border-radius: 20px; }
@media (min-width: 721px) {
  [data-diseno="3g"] .c3g-llaves-sistema :is(td[data-etq="Creada"], td[data-etq="Último uso"], td[data-etq="Vence"]) { white-space: nowrap; }
}
/* Alta de las personas que ya existen (CTA-11): guía de columnas, avisos de la vista previa y «Quién falta por entrar». */
[data-diseno="3g"] .c3g-guia dd { font-weight: 400; }
[data-diseno="3g"] .c3g-guia dt { color: var(--g3-tinta); font-weight: 600; }
[data-diseno="3g"] .c3g-pie-izq { justify-content: flex-start; }
[data-diseno="3g"] .c3g-avisos { display: grid; gap: 4px; margin: 6px 0 0; padding: 0 0 0 18px; color: var(--g3-aviso); font-size: var(--g3-t-ch); }
[data-diseno="3g"] .c3g-nota { display: block; margin-top: 6px; color: var(--g3-tinta-2); font-size: var(--g3-t-ch); }
[data-diseno="3g"] .c3g-falta-kpi { gap: 6px; }
[data-diseno="3g"] .c3g-falta-kpi .g3-progreso { margin: 4px 0 2px; }
[data-diseno="3g"] .c3g-falta-kpi[aria-current="true"] { border-color: var(--g3-primario); box-shadow: inset 0 0 0 1px var(--g3-primario); }
[data-diseno="3g"] .c3g-guia-niveles { display: grid; gap: 4px; margin: 6px 0 0; padding: 0 0 0 16px; }
[data-diseno="3g"] :is(.c3g-avisos, .c3g-guia-niveles) li, [data-diseno="3g"] .c3g-nota { overflow-wrap: anywhere; }
[data-diseno="3g"] .g3-tabla .c3g-celda-larga { min-width: 260px; }
@media (max-width: 720px) {
  [data-diseno="3g"] .g3-tabla--tarjetas td.c3g-celda-larga { display: grid; gap: 4px; min-width: 0; text-align: left; }
}