/* Paleta y tipografias de hackvlc.es (themes/hackvlc/assets/css/maker-theme.css). */
:root {
  --verde: #9BC53D;
  --verde-osc: #7FA82E;
  --naranja: #FFA630;
  --naranja-osc: #E08A14;
  --bg: #FAFAF7;
  --bg-alt: #FFFFFF;
  --texto: #1A1F2C;
  --texto-suave: #5B6470;
  --titulo: #14192A;
  --borde: #E5E8DF;
  --papel: #FFFFFF;
  --tinta: #14192A;
  --radio: 16px;
  --radio-sm: 10px;
  --f-cuerpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-titulo: 'Space Grotesk', var(--f-cuerpo);
  --f-mono: 'Fira Mono', ui-monospace, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10141C;
    --bg-alt: #181E2A;
    --texto: #E7EAF0;
    --texto-suave: #9AA3B2;
    --titulo: #F4F6FA;
    --borde: #2A3242;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--texto);
  font: 16px/1.5 var(--f-cuerpo);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

.pagina {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- cabecera ---------- */
.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.cabecera .logo { display: block; height: 26px; width: auto; }

.estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 3px 11px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--texto-suave);
  font: 600 12.5px/1.2 var(--f-cuerpo);
  white-space: nowrap;
}

.estado::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--texto-suave);
  flex: none;
}

.estado[data-abierto='true'] { color: var(--verde-osc); border-color: var(--verde); }
.estado[data-abierto='true']::before { background: var(--verde); animation: latido 1.6s ease-in-out infinite; }
.estado[data-abierto='false']::before { background: var(--naranja); }
.estado:empty { visibility: hidden; }

@keyframes latido { 50% { opacity: .35; } }

/* ---------- titulares ---------- */
.titular {
  margin: 4px 0 0;
  color: var(--titulo);
  font: 700 clamp(30px, 9vw, 40px)/1.05 var(--f-titulo);
  letter-spacing: -.02em;
}

.titular .resalte { color: var(--naranja); }

.entradilla {
  margin: 0;
  color: var(--texto-suave);
  font-size: 15.5px;
  line-height: 1.45;
}

.entradilla strong { color: var(--texto); font-weight: 600; }

/* ---------- lienzo ---------- */
.lienzo {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 58dvh;
  margin: 0 auto;
  border-radius: var(--radio);
  background:
    radial-gradient(circle, #D9DDD0 1px, transparent 1.4px) 0 0 / 20px 20px,
    var(--papel);
  box-shadow: 0 0 0 1px var(--borde), 0 8px 28px rgba(20, 25, 42, .08);
  touch-action: none;
  overflow: hidden;
}

.lienzo canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }

.lienzo .pista {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #9AA197;
  font: 500 15px var(--f-mono);
  pointer-events: none;
  transition: opacity .2s;
}

.lienzo[data-vacio='false'] .pista { opacity: 0; }

/* Mientras la IA piensa: el dibujo se atenua y un brillo recorre el papel */
.lienzo .pensando {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 24px;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 166, 48, .22) 50%, transparent 70%) -100% 0 / 200% 100% no-repeat,
    rgba(255, 255, 255, .72);
  color: #14192A;
  font: 600 15px var(--f-mono);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.lienzo[data-pensando='true'] .pensando { opacity: 1; animation: brillo 1.4s linear infinite; }

@keyframes brillo { to { background-position: 200% 0, 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .lienzo[data-pensando='true'] .pensando { animation: none; }
}

.lienzo .otra {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #E5E8DF;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #14192A;
  font: 600 13.5px var(--f-cuerpo);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lienzo .otra:disabled { opacity: .45; }

/* ---------- version: a mano, limpio, con IA ---------- */
.versiones {
  display: flex;
  padding: 3px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--bg-alt);
}

.versiones button {
  flex: 1;
  min-height: 38px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--texto-suave);
  font: 600 14px var(--f-cuerpo);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.versiones button[aria-checked='true'] {
  background: var(--titulo);
  color: var(--bg);
}

.versiones button:disabled { cursor: default; opacity: .5; }
.versiones button[aria-checked='true']:disabled { opacity: .35; }

/* ---------- botones ---------- */
.acciones { display: flex; gap: 10px; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--bg-alt);
  color: var(--texto);
  font: 600 15px var(--f-cuerpo);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.boton svg { width: 20px; height: 20px; }

.boton:disabled { opacity: .45; cursor: default; }
.boton:not(:disabled):active { transform: translateY(1px); }

.boton.principal {
  flex: 1;
  border-color: var(--naranja);
  background: var(--naranja);
  color: #1A1206;
}

@media (hover: hover) {
  .boton.principal:not(:disabled):hover { background: var(--naranja-osc); border-color: var(--naranja-osc); }
}

.boton.ancho { width: 100%; }

.aviso { margin: 0; min-height: 1.5em; color: #D14343; font-size: 14px; text-align: center; }
.aviso:empty { display: none; }

/* ---------- ticket ---------- */
.ticket {
  position: relative;
  border-radius: var(--radio);
  background: var(--papel);
  color: #1A1F2C;
  box-shadow: 0 0 0 1px var(--borde), 0 8px 28px rgba(20, 25, 42, .10);
  overflow: hidden;
}

.ticket-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px 0;
  font: 500 12px var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5B6470;
}

.ticket-numero { color: var(--naranja-osc); font: 700 22px var(--f-mono); letter-spacing: 0; }

.ticket-dibujo { display: block; width: 62%; margin: 6px auto 12px; aspect-ratio: 1; }

.ticket-pie {
  padding: 14px 18px 18px;
  border-top: 2px dashed #E5E8DF;
  text-align: center;
}

.ticket-pie p { margin: 0; }
.ticket-pie .pequeno { color: #5B6470; font-size: 14px; }
.ticket-pie .fecha { margin: 4px 0 2px; color: #14192A; font: 700 21px/1.2 var(--f-titulo); }
.ticket-pie .fecha::first-letter { text-transform: uppercase; }

.dentro {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--verde);
  border-radius: var(--radio-sm);
  color: var(--texto);
  font-weight: 600;
  text-align: center;
}

.dentro[hidden] { display: none; }

/* ---------- franja: quien esta detras del cartel ---------- */
.franja {
  background: #14192A;
  color: #E7EAF0;
  border-bottom: 1px solid transparent;
}

.franja-dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 560px;
  min-height: 42px;
  margin: 0 auto;
  padding: 6px 16px;
  font: 13px/1.3 var(--f-cuerpo);
}

.franja a { color: inherit; text-decoration: none; }

.franja-nombre { min-width: 0; }
.franja-nombre strong { font-weight: 600; color: #FFFFFF; }
.franja-claim { color: #9AA3B2; }

.franja-web {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--verde);
  color: #14192A !important;
  font: 700 13px var(--f-mono);
}

.franja-web svg { width: 14px; height: 14px; }

@media (hover: hover) {
  .franja-web:hover { background: var(--verde-osc); }
  .franja-nombre:hover strong { text-decoration: underline; text-underline-offset: 3px; }
}

@media (max-width: 400px) {
  .franja-claim { display: none; }
}

@media (prefers-color-scheme: dark) {
  .franja { background: var(--bg-alt); border-bottom-color: var(--borde); }
}

/* ---------- que es el hackerspace ---------- */
.hackerspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  padding-top: 26px;
  border-top: 2px dashed var(--borde);
  scroll-margin-top: 16px;
}

.antetitulo {
  margin: 0 0 -8px;
  color: var(--verde-osc);
  font: 700 12px var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.subtitular {
  margin: 0;
  color: var(--titulo);
  font: 700 clamp(24px, 7vw, 30px)/1.1 var(--f-titulo);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.subtitular .resalte { color: var(--naranja); }

.temas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.temas li {
  padding: 4px 11px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--texto);
  font: 500 12.5px/1.4 var(--f-mono);
}

.apartado {
  margin: 8px 0 -4px;
  color: var(--titulo);
  font: 700 19px/1.2 var(--f-titulo);
}

.fichas {
  display: grid;
  gap: 10px;
  margin: 0;
}

.ficha {
  padding: 13px 15px 14px;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--verde);
  border-radius: var(--radio-sm);
  background: var(--bg-alt);
}

.ficha dt {
  margin-bottom: 3px;
  color: var(--texto-suave);
  font: 500 11.5px var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ficha dd { margin: 0; font-size: 15px; }
.ficha dd strong { color: var(--titulo); font-weight: 600; }
.ficha .ficha-nota { color: var(--texto-suave); font-size: 14px; }
.ficha dd + dd:not(.ficha-nota) { margin-top: 6px; }

.enlace {
  color: var(--titulo);
  font-weight: 600;
  text-decoration-color: var(--verde);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.boton.verde {
  border-color: var(--verde);
  background: var(--verde);
  color: #14192A;
}

@media (hover: hover) {
  .boton.verde:hover { background: var(--verde-osc); border-color: var(--verde-osc); }
}

.socio {
  margin: -2px 0 0;
  color: var(--texto-suave);
  font-size: 14px;
  text-align: center;
  text-wrap: pretty;
}

.socio a { color: var(--texto); font-weight: 600; text-underline-offset: 3px; }

@media (min-width: 520px) {
  .fichas { grid-template-columns: 1fr 1fr; }
  .fichas .ficha:first-child { grid-column: 1 / -1; }
}

/* ---------- pie ---------- */
.pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin-top: 4px;
  color: var(--texto-suave);
  font-size: 13.5px;
}

.pie a { text-decoration-color: var(--borde); text-underline-offset: 3px; }

.pie-redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }

.pie-redes a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.pie-legal { flex-basis: 100%; margin: 0; font-size: 12.5px; text-align: center; }

.pie:has(.pie-redes) {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}

[hidden] { display: none !important; }

/* ---------- muro ---------- */
.muro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.muro li {
  position: relative;
  border-radius: var(--radio-sm);
  background: var(--papel);
  box-shadow: 0 0 0 1px var(--borde);
}

.muro img { display: block; width: 100%; aspect-ratio: 1; padding: 8px; }

.muro .num {
  position: absolute;
  left: 7px;
  bottom: 5px;
  color: #9AA197;
  font: 500 10.5px var(--f-mono);
}

.muro .ploteado {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
}

.vacio { margin: 24px 0; color: var(--texto-suave); text-align: center; }

.paso { display: flex; flex-direction: column; gap: 14px; }
.boton.mitad { flex: 1; }