/* =========================================================
   ClockZur · Estilos específicos de la HOME (portada).
   Componentes propios .czr-* (el sistema base .avz-* vive en design-system.css).
   Los .czr-* son nombres únicos de la home: no necesitan scope.
   El ocultado de cabecera SÍ se acota a la portada (body.home o la página Inicio).
   ========================================================= */

/* Hero a dos columnas: texto + panel mock del producto */
.czr-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}
@media (max-width: 860px) {
  .czr-hero-grid { grid-template-columns: 1fr; }
}

.czr-hero-note {
  font-size: .85rem; color: rgba(255,255,255,.6); margin: 1rem 0 0;
}

/* ---- Panel mock "Estado del equipo" (firma visual del hero) ---- */
.czr-mock {
  background: var(--avz-ink-3);
  border: 1px solid rgba(12,207,207,.22);
  border-radius: var(--avz-radius);
  box-shadow: var(--avz-shadow-lg);
  padding: 1.25rem; max-width: 420px; width: 100%; margin-inline: auto;
}
.czr-mock__head {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; color: var(--avz-cian);
}
.czr-mock__head svg { width: 22px; height: 22px; }
.czr-mock__head strong { color: var(--avz-cian); font-size: 1.05rem; }
.czr-mock__label {
  font-size: .78rem; color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .6rem;
}
.czr-row {
  display: flex; align-items: center; gap: .7rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(12,207,207,.18);
  border-radius: var(--avz-radius-sm);
  padding: .8rem .9rem; margin-bottom: .6rem;
}
.czr-row:last-child { margin-bottom: 0; }
.czr-row__who { font-weight: 600; font-size: .9rem; flex: 1; color: #fff; }
.czr-pin { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.czr-pin--on { background: #22C55E; box-shadow: 0 0 8px rgba(34,197,94,.6); }
.czr-pin--off { background: rgba(255,255,255,.3); }
.czr-chip {
  font-size: .72rem; font-weight: 600; padding: .2rem .6rem;
  border-radius: 999px; white-space: nowrap;
}
.czr-chip--done { background: rgba(34,197,94,.12); color: #4ade80; }
.czr-chip--ok { background: var(--avz-cian-soft); color: var(--avz-cian); }
.czr-chip--warn { background: rgba(255,176,32,.12); color: var(--avz-amber); }
.czr-chip--idle { font-size: .72rem; color: rgba(255,255,255,.55); }

/* ---- Mockup de móvil con mapa GPS (firma visual de geolocalización) ----
   Marco de teléfono + pantalla de mapa (el mapa en sí es SVG inline en el HTML).
   Reutiliza tokens del sistema: cian, ink-3, glow. Sustituible por captura real. */
.czr-device {
  position: relative; width: 100%; max-width: 300px; margin-inline: auto;
  padding: .7rem .7rem 1rem; border-radius: 32px;
  background: linear-gradient(160deg, #11202c, var(--avz-ink-2));
  border: 1px solid rgba(12,207,207,.28);
  box-shadow: var(--avz-shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
}
.czr-device::before { /* muesca superior */
  content: ""; position: absolute; top: .7rem; left: 50%; transform: translateX(-50%);
  width: 78px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.18);
}
.czr-device__screen {
  margin-top: 1.1rem; border-radius: 22px; overflow: hidden;
  background: var(--avz-ink-3); border: 1px solid rgba(12,207,207,.16);
}
.czr-device__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem; border-bottom: 1px solid rgba(12,207,207,.14);
}
.czr-device__bar svg { width: 18px; height: 18px; color: var(--avz-cian); flex-shrink: 0; }
.czr-device__title { font-weight: 600; font-size: .82rem; color: #fff; flex: 1; line-height: 1.2; }
.czr-device__title span { display: block; font-weight: 400; font-size: .72rem; color: rgba(255,255,255,.55); }

/* Lienzo del mapa */
.czr-gps { position: relative; aspect-ratio: 5 / 6; background: #0a131c; }
.czr-gps svg { display: block; width: 100%; height: 100%; }
.czr-gps__fence { transform-origin: center; animation: czrFence 3.2s ease-in-out infinite; }
@keyframes czrFence { 0%,100% { opacity: .85; } 50% { opacity: .35; } }
.czr-gps__ping { transform-origin: center; animation: czrPing 3.2s ease-out infinite; }
@keyframes czrPing { 0% { opacity: .5; transform: scale(.4); } 80%,100% { opacity: 0; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
  .czr-gps__fence, .czr-gps__ping { animation: none; }
  .czr-gps__ping { opacity: 0; }
}

/* Leyenda dentro/fuera bajo el mapa */
.czr-gps__legend {
  display: flex; gap: 1rem; flex-wrap: wrap;
  padding: .7rem .85rem; border-top: 1px solid rgba(12,207,207,.14);
}
.czr-gps__key { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; color: rgba(255,255,255,.7); }
.czr-gps__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.czr-gps__dot--in { background: #22C55E; box-shadow: 0 0 8px rgba(34,197,94,.6); }
.czr-gps__dot--out { background: var(--avz-amber); box-shadow: 0 0 8px rgba(255,176,32,.55); }

/* ---- Mockup de tablet en modo kiosko (pantalla de fichaje con PIN) ----
   Reutiliza el marco .czr-device; el contenido .czr-kiosk__* es propio. home.css
   se enqueua global, así que está disponible en /fichaje-modo-kiosko/. */
.czr-device--tablet { max-width: 360px; border-radius: 30px; }
.czr-kiosk { padding: 1.15rem 1.15rem 1.3rem; }
.czr-kiosk__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.czr-kiosk__site { font-weight: 700; font-size: .92rem; color: #fff; }
.czr-kiosk__time { font-weight: 700; font-size: .92rem; color: var(--avz-cian); font-variant-numeric: tabular-nums; }
.czr-kiosk__prompt { text-align: center; font-size: .95rem; color: rgba(255,255,255,.82); margin: 0 0 .9rem; }
.czr-kiosk__pin { display: flex; justify-content: center; gap: .6rem; margin-bottom: 1.2rem; }
.czr-kiosk__dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(12,207,207,.5); }
.czr-kiosk__dot.is-on { background: var(--avz-cian); border-color: var(--avz-cian); box-shadow: 0 0 8px var(--avz-cian-glow); }
.czr-kiosk__keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.czr-kiosk__keypad span {
  display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 12px;
  font-size: 1.15rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.05); border: 1px solid rgba(12,207,207,.18);
}
.czr-kiosk__key--ghost { background: transparent; border-color: transparent; }
.czr-kiosk__key--ok { color: #04222b; background: var(--avz-cian); border-color: transparent; box-shadow: 0 0 12px var(--avz-cian-glow); }
.czr-kiosk__toast {
  display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; padding: .6rem .8rem;
  border-radius: 10px; font-size: .8rem; color: #a7f3d6;
  background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.3);
}
.czr-kiosk__check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #22C55E; color: #04222b; font-size: .72rem; font-weight: 800; flex-shrink: 0; }

/* ---- Mockup "Registro de jornada" (páginas de normativa) ----
   Panel tipo documento: tabla de fichajes + exportar + sello inalterable. */
.czr-registro, .czr-cartera {
  background: var(--avz-ink-3); border: 1px solid rgba(12,207,207,.22);
  border-radius: var(--avz-radius); box-shadow: var(--avz-shadow-lg);
  padding: 1.25rem; max-width: 420px; width: 100%; margin-inline: auto;
}
.czr-registro__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.czr-registro__head strong { color: #fff; font-size: 1.05rem; }
.czr-registro__seal {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700;
  color: #a7f3d6; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3);
  padding: .25em .6em; border-radius: 999px;
}
.czr-registro__row {
  display: grid; grid-template-columns: 1.4fr .8fr .8fr .7fr; gap: .5rem; align-items: center;
  padding: .55rem .2rem; border-bottom: 1px solid rgba(12,207,207,.1);
  font-size: .82rem; color: rgba(255,255,255,.85);
}
.czr-registro__row span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.7); }
.czr-registro__row--head { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.5); border-bottom: 1px solid rgba(12,207,207,.22); }
.czr-registro__row--head span:not(:first-child) { color: rgba(255,255,255,.5); }
.czr-registro__export {
  display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem;
  padding: .6rem; border-radius: var(--avz-radius-sm); font-size: .85rem; font-weight: 700;
  color: #04222b; background: var(--avz-cian); box-shadow: 0 6px 18px var(--avz-cian-glow);
}
.czr-registro__export svg { width: 15px; height: 15px; }
.czr-registro__foot { text-align: center; font-size: .72rem; color: rgba(255,255,255,.5); margin: .7rem 0 0; }

/* ---- Mockup "Cartera de clientes" (página de gestorías) ---- */
.czr-cartera__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; color: #fff; }
.czr-cartera__head strong { font-size: 1.05rem; }
.czr-cartera__head span { font-size: .78rem; color: var(--avz-cian); }
.czr-cartera__row {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  padding: .7rem .9rem; margin-bottom: .5rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(12,207,207,.14); border-radius: var(--avz-radius-sm);
}
.czr-cartera__row:last-child { margin-bottom: 0; }
.czr-cartera__name { font-weight: 600; font-size: .9rem; color: #fff; }
.czr-cartera__pill { font-size: .72rem; font-weight: 700; padding: .25em .7em; border-radius: 999px; white-space: nowrap; }
.czr-cartera__pill.is-ok { color: #4ade80; background: rgba(34,197,94,.12); }
.czr-cartera__pill.is-warn { color: var(--avz-amber); background: rgba(255,176,32,.12); }

/* La portada va a sangre y sin título del theme (refuerza los post-meta
   _generate-disable-headline / _generate-full-width-content). Acotado a la
   portada (.home) y a la página Inicio (page-id-11) para no afectar a interiores. */
body.home .entry-header,
body.home .page-header,
body.page-id-11 .entry-header,
body.page-id-11 .page-header { display: none; }

/* Red de seguridad: portada SIN barra lateral y a ancho completo, aunque el
   meta _generate-sidebar-layout no se aplicara. Acotado a la portada.
   Forzamos .site-content a bloque (sin flex) para que el contenido ocupe el
   100% y el footer global caiga a lo ancho debajo, en vez de colarse en el
   hueco derecho que dejó la barra lateral oculta. */
body.home .site-content,
body.page-id-11 .site-content { display: block !important; }
body.home #right-sidebar,
body.home #left-sidebar,
body.page-id-11 #right-sidebar,
body.page-id-11 #left-sidebar { display: none !important; }
body.home #primary.content-area,
body.page-id-11 #primary.content-area { width: 100% !important; max-width: 100% !important; float: none !important; }

/* GeneratePress (separate-containers + right-sidebar) deja en .site-main un
   `margin: 20px` y solo anula el margin-left, conservando `margin-right: 20px`
   como canaleta hacia la barra lateral. En la portada ocultamos esa barra y
   vamos a sangre, así que ese margen derecho dejaba el lienzo oscuro 20px corto
   por la derecha y asomaba el fondo claro del body (la franja blanca). Anulamos
   los márgenes laterales para que el contenido full-width llegue a ambos bordes.
   Verticales (20px) intactos: no afectan al borde y mantienen el ritmo de GP. */
body.home #primary .site-main,
body.page-id-11 #primary .site-main { margin-left: 0 !important; margin-right: 0 !important; }

/* Footer del sitio: siempre a lo ancho y por debajo del contenido en la home. */
body.home .avz-footer,
body.page-id-11 .avz-footer { clear: both !important; width: 100% !important; float: none !important; }