/* Thot Creative · © 2026 Webs Creative LLC · Todos los derechos reservados
   Disposición: menú lateral, barra superior, contenido, acceso y portal del cliente. */

/* ================================================================ aplicación del despacho */
.gc-app { display: grid; grid-template-columns: var(--gc-ancho-menu) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns var(--gc-normal) var(--gc-curva); }
.gc-app.plegado { grid-template-columns: var(--gc-ancho-menu-plegado) minmax(0, 1fr); }

.gc-menu {
  position: sticky; top: 0; height: 100vh; z-index: var(--gc-z-menu); display: flex; flex-direction: column; gap: 6px;
  padding: 16px 12px; border-right: 1px solid var(--gc-borde);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gc-naranja) 5%, transparent), transparent 30%), var(--gc-cristal);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); overflow: hidden;
}
.gc-menu__marca { display: flex; align-items: center; gap: 12px; padding: 6px 8px 18px; color: var(--gc-texto); text-decoration: none !important; }
.gc-menu__marca svg { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--gc-naranja) 45%, transparent)); }
.gc-menu__nombre { font-family: var(--gc-fuente-titulos); font-weight: 700; font-size: 16px; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.gc-menu__nombre small { display: block; font-family: var(--gc-fuente); font-weight: 500; font-size: 11px; color: var(--gc-texto-tenue); letter-spacing: .02em; margin-top: 3px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.gc-menu__grupo { margin: 14px 10px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--gc-texto-tenue); font-weight: 600; white-space: nowrap; }
.gc-menu__enlaces { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; flex: 1; margin: 0 -4px; padding: 0 4px; }
.gc-menu__enlace {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: var(--gc-texto-suave);
  font-weight: 500; font-size: var(--gc-t-s); text-decoration: none !important; white-space: nowrap; transition: background var(--gc-rapido), color var(--gc-rapido);
}
.gc-menu__enlace .gc-i { width: 19px; height: 19px; }
/* Insignias del menú (D-217): mensajes sin leer y similares. Con el menú plegado, sobre el icono. */
.gc-menu__insignia { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--gc-naranja); color: #0B0D10; }
.plegado .gc-menu__insignia { position: absolute; top: 3px; left: 26px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; box-shadow: 0 0 0 2px var(--gc-superficie); }
.gc-menu__enlace:hover { background: var(--gc-hover); color: var(--gc-texto); }
.gc-menu__enlace.activo { color: var(--gc-texto); background: linear-gradient(90deg, color-mix(in srgb, var(--gc-naranja) 18%, transparent), color-mix(in srgb, var(--gc-naranja) 4%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc-naranja) 18%, transparent); }
.gc-menu__enlace.activo::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gc-naranja); box-shadow: 0 0 14px var(--gc-naranja); }
.gc-menu__enlace.activo .gc-i { color: var(--gc-enlace); }
.gc-menu__pie { padding-top: 10px; border-top: 1px solid var(--gc-borde); display: flex; flex-direction: column; gap: 4px; }
.plegado .gc-menu__nombre, .plegado .gc-menu__grupo, .plegado .gc-menu__texto, .plegado .gc-menu__pie .credit > span:first-child, .plegado .gc-menu__pie .wc-texto { display: none; }
.plegado .gc-menu__pie { align-items: center; }
.plegado .gc-menu__enlace { justify-content: center; padding: 11px 0; }
.plegado .gc-menu__marca { justify-content: center; padding-inline: 0; }

.gc-principal { min-width: 0; display: flex; flex-direction: column; }
.gc-barra {
  position: sticky; top: 0; z-index: var(--gc-z-barra); height: var(--gc-alto-barra); display: flex; align-items: center; gap: 12px; padding: 0 24px;
  background: color-mix(in srgb, var(--gc-fondo) 72%, transparent); border-bottom: 1px solid var(--gc-borde);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
}
.gc-barra__buscar {
  display: flex; align-items: center; gap: 10px; flex: 0 1 440px; height: 40px; padding: 0 12px; border-radius: var(--gc-radio); border: 1px solid var(--gc-borde-fuerte);
  background: var(--gc-campo); color: var(--gc-texto-tenue); font-size: var(--gc-t-s); text-align: left; transition: border-color var(--gc-rapido), box-shadow var(--gc-normal);
}
.gc-barra__buscar:hover { border-color: color-mix(in srgb, var(--gc-naranja) 50%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc-naranja) 8%, transparent); color: var(--gc-texto-suave); }
.gc-barra__buscar span { flex: 1; }
.gc-barra__acciones { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.gc-barra__campana { position: relative; }
.gc-barra__campana .punto { position: absolute; top: 6px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--gc-naranja); color: var(--gc-sobre-acento); font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--gc-fondo), 0 0 12px color-mix(in srgb, var(--gc-naranja) 80%, transparent); }
.gc-barra__usuario { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: var(--gc-radio-pildora); border: 1px solid transparent; background: none; color: var(--gc-texto); }
.gc-barra__usuario:hover { background: var(--gc-hover); border-color: var(--gc-borde); }
.gc-barra__usuario .nombre { font-size: var(--gc-t-s); font-weight: 600; line-height: 1.1; text-align: left; }
.gc-barra__usuario .rol { font-size: 11px; color: var(--gc-texto-tenue); }
/* Banda del servicio (aviso de Webs Creative, solo lectura, últimos días de prueba) bajo la barra superior */
.gc-banda-servicio { display: grid; gap: 1px; border-bottom: 1px solid var(--gc-borde); }
.gc-banda-servicio__linea { --bs: var(--gc-info); --bs-fondo: var(--gc-info-fondo); display: flex; align-items: center; gap: 10px; padding: 8px 24px; background: var(--bs-fondo); color: var(--gc-texto); font-size: var(--gc-t-s); }
.gc-banda-servicio__linea > .gc-icono:first-child, .gc-banda-servicio__linea > svg:first-child { color: var(--bs); flex: none; }
.gc-banda-servicio--aviso { --bs: var(--gc-aviso); --bs-fondo: var(--gc-aviso-fondo); }
.gc-banda-servicio--peligro { --bs: var(--gc-peligro); --bs-fondo: var(--gc-peligro-fondo); }
@media (max-width: 720px) { .gc-banda-servicio__linea { padding: 8px 14px; flex-wrap: wrap; } }
.gc-contenido { flex: 1; width: 100%; max-width: 1560px; margin: 0 auto; padding: 28px 28px 48px; }
.gc-pie-app { padding: 18px 28px 26px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--gc-texto-tenue); font-size: var(--gc-t-xs); border-top: 1px solid var(--gc-borde); }

/* Cabecera de página */
.gc-cabecera { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.gc-cabecera__miga { display: flex; align-items: center; gap: 6px; font-size: var(--gc-t-xs); color: var(--gc-texto-tenue); margin-bottom: 6px; }
.gc-cabecera__miga a { color: var(--gc-texto-suave); }
.gc-cabecera h1 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2rem); }
.gc-cabecera p { margin: 6px 0 0; color: var(--gc-texto-suave); }
.gc-cabecera__acciones { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* Menú del usuario y avisos */
.gc-desplegable { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 300px; padding: 8px; border-radius: var(--gc-radio-l); background: var(--gc-cristal-fuerte); border: 1px solid var(--gc-borde-fuerte); box-shadow: var(--gc-sombra-l); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); animation: gc-entrar-arriba var(--gc-normal) var(--gc-curva); }
.gc-desplegable--ancho { width: 380px; }
.gc-aviso-item { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px; border-radius: 12px; font-size: var(--gc-t-s); color: var(--gc-texto); text-decoration: none !important; }
.gc-aviso-item:hover { background: var(--gc-hover); }
.gc-aviso-item.nueva { background: var(--gc-seleccion); }

@media (max-width: 1100px) {
  .gc-app, .gc-app.plegado { grid-template-columns: minmax(0, 1fr); }
  .gc-menu { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-102%); transition: transform var(--gc-normal) var(--gc-curva); box-shadow: var(--gc-sombra-l); background: var(--gc-cristal-fuerte); }
  .gc-app.menu-abierto .gc-menu { transform: none; }
  .plegado .gc-menu__nombre, .plegado .gc-menu__grupo, .plegado .gc-menu__texto { display: initial; }
  .gc-contenido { padding: 20px 16px 40px; }
  .gc-barra { padding: 0 14px; }
}
@media (max-width: 640px) {
  .gc-barra__buscar span, .gc-barra__buscar kbd, .gc-barra__usuario .nombre, .gc-barra__usuario .rol { display: none; }
  .gc-barra__buscar { flex: 0 0 40px; padding: 0; justify-content: center; }
  .gc-cabecera__acciones { margin-left: 0; width: 100%; }
}

/* ================================================================ acceso (pantalla de entrada) */
.gc-acceso { position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); overflow: hidden; }
.gc-acceso__escena { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 52px; isolation: isolate; }
.gc-acceso__lienzo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.gc-acceso__escena::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--gc-fondo) 78%, transparent) 0%, color-mix(in srgb, var(--gc-fondo) 35%, transparent) 42%, transparent 62%, var(--gc-fondo) 100%), radial-gradient(ellipse at 62% 50%, transparent 35%, var(--gc-fondo) 95%); }
.gc-acceso__marca { display: flex; align-items: center; gap: 14px; }
.gc-acceso__marca svg { width: 48px; height: 48px; filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--gc-naranja) 55%, transparent)); }
.gc-acceso__marca b { font-family: var(--gc-fuente-titulos); font-size: 20px; letter-spacing: -.01em; }
.gc-acceso__lema { max-width: 560px; text-shadow: 0 2px 24px var(--gc-fondo), 0 0 2px var(--gc-fondo); }
.gc-acceso__lema p { text-shadow: 0 1px 12px var(--gc-fondo), 0 0 1px var(--gc-fondo); }
.gc-acceso__lema h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; margin-bottom: 18px; }
.gc-acceso__lema p { font-size: var(--gc-t-l); color: var(--gc-texto-suave); max-width: 470px; }
.gc-acceso__cifras { display: flex; gap: 34px; flex-wrap: wrap; }
.gc-acceso__cifras div { display: flex; flex-direction: column; }
.gc-acceso__cifras b { font-family: var(--gc-fuente-titulos); font-size: 26px; font-weight: 600; }
.gc-acceso__cifras span { font-size: var(--gc-t-xs); color: var(--gc-texto-tenue); text-transform: uppercase; letter-spacing: .1em; }
.gc-acceso__panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 40px clamp(24px, 5vw, 64px); background: color-mix(in srgb, var(--gc-superficie) 55%, transparent); border-left: 1px solid var(--gc-borde); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.gc-acceso__formulario { width: 100%; max-width: 400px; margin: 0 auto; display: grid; gap: 18px; }
.gc-acceso__formulario h2 { font-size: var(--gc-t-2xl); margin: 0; letter-spacing: -.02em; }
.gc-acceso__logo-despacho { max-height: 56px; max-width: 220px; object-fit: contain; margin-bottom: 4px; }
.gc-acceso__pie { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; }
@media (max-width: 900px) {
  .gc-acceso { grid-template-columns: 1fr; }
  .gc-acceso__escena { min-height: 260px; padding: 28px 24px; }
  .gc-acceso__lema h1 { font-size: 2rem; }
  .gc-acceso__cifras { display: none; }
  .gc-acceso__panel { border-left: 0; padding-bottom: 90px; }
}

/* ================================================================ portal del cliente (móvil primero) */
.gc-portal-app { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.gc-portal-barra { position: sticky; top: 0; z-index: var(--gc-z-barra); display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--gc-fondo) 78%, transparent); border-bottom: 1px solid var(--gc-borde); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.gc-portal-barra__despacho { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gc-portal-barra__despacho img { height: 34px; max-width: 140px; object-fit: contain; }
.gc-portal-barra__despacho b { font-family: var(--gc-fuente-titulos); font-size: var(--gc-t-m); }
.gc-portal-contenido { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 18px 16px 28px; }
.gc-portal-navegacion { position: fixed; z-index: var(--gc-z-barra); left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: var(--gc-cristal-fuerte); border-top: 1px solid var(--gc-borde); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
/* Cuatro secciones y «Más» en el móvil (portal.js): los rótulos nunca parten línea, así la barra no crece ni tapa el pie. */
.gc-portal-navegacion a, .gc-portal-navegacion__mas { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 12px; color: var(--gc-texto-tenue); font: inherit; font-size: 11px; font-weight: 600; text-decoration: none !important; min-width: 0; max-width: 96px; background: none; border: 0; cursor: pointer; }
.gc-portal-navegacion a > span, .gc-portal-navegacion__mas > span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gc-portal-navegacion .gc-i { width: 22px; height: 22px; flex: none; }
.gc-portal-navegacion .activo { color: var(--gc-marca-texto); }
/* Lo enfocado nunca queda detrás de la barra fija: abajo en el móvil, arriba (cabecera y navegación) en pantallas anchas. */
:root:has(.gc-portal-app) { scroll-padding-top: calc(80px + env(safe-area-inset-top)); scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { :root:has(.gc-portal-app) { scroll-padding-bottom: 0; scroll-padding-top: 132px; } }
.gc-portal-navegacion .activo .gc-i { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gc-marca) 70%, transparent)); }
.gc-portal-navegacion__mas:focus-visible, .gc-portal-navegacion a:focus-visible { outline: 2px solid var(--gc-marca); outline-offset: 2px; }
.gc-portal-navegacion a > span.gc-portal-navegacion__icono, .gc-portal-navegacion__mas > span.gc-portal-navegacion__icono { position: relative; display: inline-flex; overflow: visible; max-width: none; }
.gc-portal-insignia { position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--gc-peligro); color: var(--gc-sobre-color); font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--gc-superficie); }
.gc-portal-insignia:empty { min-width: 10px; width: 10px; height: 10px; padding: 0; top: -2px; right: -4px; }
.gc-portal-insignia--linea { position: static; box-shadow: none; }
.gc-portal-mas { position: fixed; inset: 0; z-index: calc(var(--gc-z-barra) - 1); display: flex; align-items: flex-end; background: color-mix(in srgb, #000 38%, transparent); animation: gc-aparecer var(--gc-rapido, .15s) ease-out; }
.gc-portal-mas__hoja { width: 100%; display: grid; gap: 4px; padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--gc-superficie); border-top: 1px solid var(--gc-borde); box-shadow: var(--gc-sombra); }
.gc-portal-mas__hoja a { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 14px; color: var(--gc-texto); font-weight: 600; text-decoration: none !important; }
.gc-portal-mas__hoja a .gc-i { width: 22px; height: 22px; color: var(--gc-texto-tenue); }
.gc-portal-mas__hoja a.activo, .gc-portal-mas__hoja a.activo .gc-i { color: var(--gc-marca-texto); }
.gc-portal-mas__hoja a.activo { background: color-mix(in srgb, var(--gc-marca) 10%, transparent); }
.gc-portal-pie { padding: 18px 16px 8px; display: flex; justify-content: center; }
.gc-portal-hero { position: relative; overflow: hidden; border-radius: var(--gc-radio-xl); padding: 22px; margin-bottom: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--gc-marca) 30%, var(--gc-superficie)), var(--gc-superficie) 70%); border: 1px solid color-mix(in srgb, var(--gc-marca) 30%, var(--gc-borde)); box-shadow: var(--gc-sombra); }
.gc-portal-hero h1 { font-size: 1.6rem; margin: 0 0 4px; }
.gc-portal-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; border: 22px solid color-mix(in srgb, var(--gc-marca) 22%, transparent); }
.gc-portal-accion { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--gc-radio-l); background: var(--gc-superficie); border: 1px solid var(--gc-borde); color: var(--gc-texto); text-decoration: none !important; box-shadow: var(--gc-sombra-s); transition: transform var(--gc-rapido), box-shadow var(--gc-normal); }
.gc-portal-accion:active { transform: scale(.98); }
.gc-portal-pendiente { align-items: center; }
.gc-portal-pendiente--enlace { color: var(--gc-texto); text-decoration: none !important; cursor: pointer; transition: transform var(--gc-rapido); }
.gc-portal-pendiente--enlace:active { transform: scale(.99); }
.gc-portal-pendiente--enlace:focus-visible { outline: 2px solid var(--gc-marca); outline-offset: 2px; }
.gc-portal-accion .icono { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--gc-marca) 15%, transparent); color: var(--gc-marca-texto); flex: none; }
@media (min-width: 900px) {
  .gc-portal-navegacion { position: sticky; top: 64px; bottom: auto; justify-content: center; gap: 6px; border-top: 0; border-bottom: 1px solid var(--gc-borde); }
  .gc-portal-navegacion a, .gc-portal-navegacion__mas { flex: 0 1 auto; flex-direction: row; font-size: var(--gc-t-s); gap: 8px; padding: 6px 10px; max-width: none; }
  .gc-portal-mas { z-index: var(--gc-z-barra); align-items: flex-start; justify-content: center; padding-top: 124px; background: color-mix(in srgb, #000 18%, transparent); }
  .gc-portal-mas__hoja { width: min(360px, 92vw); padding: 8px; border-radius: var(--gc-radio-l); border: 1px solid var(--gc-borde); }
  .gc-portal-app { padding-bottom: 0; }
}

/* Contenido + columna lateral pegajosa (formularios con vista previa, expediente) */
@media (max-width: 1100px) {
  .formulario-cliente, .gc-con-lateral { grid-template-columns: minmax(0, 1fr) !important; }
  .formulario-cliente aside, .gc-con-lateral aside { position: static !important; }
}
.gc-con-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }

/* Cabecera del expediente */
.gc-expediente-cabecera { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 24px; margin-bottom: 18px; border-radius: var(--gc-radio-xl); }
.gc-expediente-cabecera::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 220px at 0% 0%, color-mix(in srgb, var(--gc-naranja) 16%, transparent), transparent 70%), radial-gradient(500px 240px at 100% 100%, color-mix(in srgb, var(--gc-cian) 10%, transparent), transparent 70%); }
.gc-expediente-cabecera h1 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.gc-expediente-datos { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; font-size: var(--gc-t-s); color: var(--gc-texto-suave); }
.gc-expediente-datos span { display: inline-flex; align-items: center; gap: 6px; }
.gc-dato { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px dashed var(--gc-borde); }
.gc-dato:last-child { border-bottom: 0; }
.gc-dato dt { font-size: var(--gc-t-xs); color: var(--gc-texto-tenue); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.gc-dato dd { margin: 0; font-size: var(--gc-t-s); }
.gc-lista-datos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
@media (max-width: 720px) { .gc-lista-datos { grid-template-columns: 1fr; } }
.gc-fila-elemento { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--gc-radio-l); border: 1px solid var(--gc-borde); background: var(--gc-superficie); transition: border-color var(--gc-rapido), transform var(--gc-rapido); }
.gc-fila-elemento:hover { border-color: var(--gc-borde-fuerte); }
.gc-fila-elemento + .gc-fila-elemento { margin-top: 10px; }
/* Una fila que ya no vale (servicio inactivo, obligación desactivada, token revocado) se apaga sin bajar la opacidad: sus textos siguen a 4,5:1 y lo que
   la distingue no es solo el color (borde de rayas y texto «inactivo», «desactivada» o «revocado»). */
.gc-fila-elemento--apagada { border-style: dashed; background: transparent; }
.gc-fila-elemento--apagada b, .gc-fila-elemento--apagada .cifra { color: var(--gc-texto-suave); font-weight: 500; }
.gc-fila-elemento--apagada .gc-kpi__icono, .gc-fila-elemento--apagada .gc-modelo { filter: saturate(.25); }

.gc-barra__usuario .nombre, .gc-barra__usuario .rol { display: block; }
@media (max-width: 640px) {
  .gc-barra__usuario-texto { display: none; }
  .gc-escalonado.rejilla-4, .rejilla-4.gc-kpis-movil { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gc-kpi { min-height: 118px; padding: 14px; }
  .gc-kpi__cabecera { font-size: 12px; gap: 8px; }
  .gc-kpi__icono { width: 30px; height: 30px; border-radius: 10px; }
  .gc-kpi__valor { font-size: 1.7rem; }
  .gc-kpi__detalle { font-size: 11px; }
  .gc-hero { padding: 22px 20px; }
}

/* Saltar al contenido (WCAG 2.4.1): invisible hasta que recibe el foco con el teclado, el primero de la página. */
.gc-saltar { position: fixed; top: 10px; left: 10px; z-index: 200; padding: 10px 16px; border: 0; border-radius: var(--gc-radio-s); background: var(--gc-naranja); color: var(--gc-sobre-acento); font: 600 var(--gc-t-s) var(--gc-fuente); cursor: pointer; transform: translateY(-160%); transition: transform var(--gc-rapido) ease-out; }
.gc-saltar:focus-visible { transform: translateY(0); outline: 2px solid var(--gc-texto); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .gc-saltar { transition: none; } }
#contenido:focus, #contenido:focus-visible { outline: none; } /* el contenedor recibe el foco solo al saltar: no es un control y no lleva anillo */

/* Lo enfocado con el teclado nunca queda detrás de la barra superior fija de la aplicación (WCAG 2.4.11). */
:root:has(.gc-app) { scroll-padding-top: 88px; }