/* Estética tomada del sitio de GEFU: fondo lino, grafito y arena, Plus Jakarta Sans, bloques redondeados. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin.woff2) format('woff2');
}

:root {
  --grafito: #2B2C26; --grafito-2: #3A3B34;
  --arena: #987E5D; --arena-osc: #75603F; --arena-claro: #BCA484; --arena-hover: #5C4B31; --arena-suave: #EDE5DA;
  --lino: #F6F5F1; --lino-2: #EFECE5; --lino-3: #E6E2D9; --blanco: #FFFFFF;
  --texto: #2B2C26; --texto-2: #5D6058; --claro: #E9E8E4; --claro-2: #B8B7AF; --linea: #E0DCD2;
  --ok-f: #DDEBDD; --ok-t: #2E5A30; --aut-f: #F3E6D9; --aut-t: #7A4F31; --err-f: #F6E1DC; --err-t: #9A3412;
  --fuente: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; min-height: 100dvh; background: var(--lino); color: var(--texto); font-family: var(--fuente); font-size: 16px; line-height: 1.6; overflow-x: clip }
a { color: var(--arena-osc); font-weight: 600 }
:focus-visible { outline: 2px solid var(--arena); outline-offset: 3px }
[hidden] { display: none !important }
.c { width: min(1200px, 100% - 32px); margin-inline: auto }
h1, h2 { margin: 0; letter-spacing: -.02em; text-wrap: balance }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 700; line-height: 1.05 }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.6rem); font-weight: 700; line-height: 1.2 }
p { margin: 0 0 1em }
.ac { color: var(--arena) }
.eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--arena-osc); margin-bottom: 12px }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; padding: 13px 22px; border-radius: 10px; border: 1.5px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, opacity .15s }
.btn-p { background: var(--arena-osc); color: #fff }
.btn-p:hover { background: var(--arena-hover) }
.btn-s { border-color: var(--grafito); color: var(--grafito); background: transparent }
.btn-s:hover { background: var(--grafito); color: var(--claro) }
.btn-sm { padding: 9px 14px; font-size: 14px }
.btn[disabled] { opacity: .6; cursor: progress }

/* Encabezado */
.hdr { position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top, 0px); background: rgba(246, 245, 241, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea) }
.hdr .c { display: flex; align-items: center; gap: 12px; padding-block: 14px }
.hdr .logo { height: 38px; width: auto; margin-right: auto; display: block }
.estado { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--texto-2); background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px; padding: 7px 12px; cursor: pointer }
.estado:hover { border-color: var(--arena) }
.estado .punto { width: 8px; height: 8px; border-radius: 50%; background: #3F8B45; box-shadow: 0 0 0 3px var(--ok-f) }
.estado.offline .punto { background: var(--arena); box-shadow: 0 0 0 3px var(--aut-f) }
.estado.sincronizando .punto { animation: latido 1s ease-in-out infinite }
.badge { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--arena-osc); color: #fff; font-size: 12px; text-align: center }
@keyframes latido { 50% { opacity: .3 } }

/* Layout */
.layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: start; padding-block: clamp(32px, 5vw, 64px) calc(clamp(40px, 6vw, 80px) + env(safe-area-inset-bottom, 0px)) }
.intro { position: sticky; top: 100px }
.bajada { font-size: clamp(1rem, 1.4vw, 1.1rem); color: var(--texto-2); margin: 20px 0 28px; max-width: 46ch }
.pasos { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 16px; counter-reset: p }
.pasos li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center }
.pasos li::before { counter-increment: p; content: counter(p); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--arena); color: var(--arena-osc); display: grid; place-items: center; font-weight: 700; background: var(--blanco) }
.pasos b { line-height: 1.3 }
.pasos span { font-size: 14px; color: var(--texto-2); line-height: 1.4 }
.contacto { font-size: 14px; color: var(--texto-2) }
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr) }
  .intro { position: static }
  .pasos { display: none }
}

/* Tarjeta del formulario */
.card { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; padding: clamp(20px, 4vw, 36px); box-shadow: 0 30px 60px -40px rgba(43, 44, 38, .35) }
.card h2 { margin-bottom: 4px }
.sub-form { color: var(--texto-2); font-size: 14.5px; margin-bottom: 22px }
.nota-offline { display: flex; gap: 10px; align-items: flex-start; background: var(--aut-f); color: var(--aut-t); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; margin-bottom: 20px }
.nota-offline .ico { margin-top: 1px }


.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.campo.ancho { grid-column: 1 / -1 }
@media (max-width: 600px) { .grid { grid-template-columns: minmax(0, 1fr) } }
label { font-size: 14px; font-weight: 600 }
label i { color: var(--arena-osc); font-style: normal }
input, select, textarea { font: inherit; font-size: 16px; color: var(--texto); background: var(--lino); border: 1.5px solid var(--linea); border-radius: 10px; padding: 11px 13px; width: 100%; min-width: 0; transition: border-color .15s, background-color .15s }
input::placeholder, textarea::placeholder { color: #8C8E85 }
input:hover, select:hover, textarea:hover { border-color: var(--claro-2) }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--arena-osc); background: var(--blanco); box-shadow: 0 0 0 3px var(--arena-suave) }
input[aria-invalid="true"] { border-color: var(--err-t); background: #FFF9F7 }
select { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375603F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px }
textarea { resize: vertical; min-height: 90px }
input[type="date"] { min-height: 48px }

.error { color: var(--err-t); font-size: 13px; font-weight: 500; line-height: 1.35 }
.error:empty { display: none }
.error-general { background: var(--err-f); border-radius: 10px; padding: 10px 14px; margin: 16px 0 0 }

.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; font-weight: 500; font-size: 14px; color: var(--texto-2); line-height: 1.45; cursor: pointer }
.check input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--arena-osc); padding: 0 }
.check + .error { display: block; margin: 6px 0 0 32px }
.check + .error:empty { display: none }

.enviar { width: 100%; margin-top: 22px; padding-block: 15px }
.enviar .ico { width: 16px; height: 16px }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

/* Éxito */
.exito { text-align: center; padding: clamp(24px, 6vw, 56px) 8px; outline: none }
.exito-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-f); color: var(--ok-t); display: inline-grid; place-items: center; margin-bottom: 18px }
.exito.offline .exito-ico { background: var(--aut-f); color: var(--aut-t) }
.exito-ico .ico { width: 30px; height: 30px; stroke-width: 2.2 }
.exito h2 { margin-bottom: 10px }
.exito p { color: var(--texto-2); max-width: 44ch; margin-inline: auto; margin-bottom: 24px }

/* Diálogo de sincronización */
.sync { width: min(520px, 100% - 32px); max-height: min(640px, 100dvh - 32px); border: 1px solid var(--linea); border-radius: 18px; padding: 24px; background: var(--blanco); color: var(--texto); box-shadow: 0 40px 80px -30px rgba(43, 44, 38, .45) }
.sync::backdrop { background: rgba(43, 44, 38, .45); backdrop-filter: blur(2px) }
.sync[open] { display: flex; flex-direction: column }
.sync-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px }
.cerrar { border: 0; background: transparent; color: var(--texto-2); width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; cursor: pointer }
.cerrar:hover { background: var(--lino-2) }
.sync-estado { font-size: 14px; color: var(--texto-2) }
.contadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px }
.contadores div { background: var(--lino); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px }
.contadores dt { font-size: 12.5px; color: var(--texto-2) }
.contadores dd { margin: 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums }
.registros { list-style: none; margin: 0 0 16px; padding: 0; overflow-y: auto; min-height: 0; flex: 1; border-top: 1px solid var(--lino-2) }
.registros li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--lino-2); font-size: 14px }
.registros li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.registros li small { grid-column: 1; color: var(--texto-2); font-size: 12.5px }
.registros li .pill { grid-row: 1 / span 2; grid-column: 2 }
.registros li .err { grid-column: 1 / -1; color: var(--err-t); font-size: 12.5px }
.registros li .descartar { grid-column: 1 / -1; justify-self: start; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--arena-osc); text-decoration: underline; cursor: pointer }
.registros .vacio { display: block; color: var(--texto-2); text-align: center; padding: 18px 0 }
.pill { display: inline-block; white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600 }
.pill.pendiente { background: var(--aut-f); color: var(--aut-t) }
.pill.sincronizado { background: var(--ok-f); color: var(--ok-t) }
.pill.error { background: var(--err-f); color: var(--err-t) }
.sync-acciones { display: flex; flex-wrap: wrap; gap: 10px }

/* Modo embebido (iframe en el sitio): sólo la tarjeta. */
.is-embed body { background: transparent; min-height: 0 }
.is-embed .hdr, .is-embed .intro { display: none }
.is-embed .layout { display: block; width: 100%; padding: 0 }
.is-embed .card { box-shadow: none }

/* Modo kiosco: tablet en un evento; botones más grandes. */
.is-kiosk .intro .contacto { display: none }
.is-kiosk input, .is-kiosk select, .is-kiosk textarea { padding-block: 14px }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }