/* =============================================================================
   Tuerka Ticket — componentes (DESIGN.md § 6).
   Sin colores literales: todo por tokens. Nunca un botón verde.
   ========================================================================== */

/* Logo (lockup: símbolo + nombre) */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--luz); text-decoration: none; }
.logo:hover { color: var(--luz); }
.logo svg { width: 28px; height: 28px; color: var(--logo-simbolo); flex: none; }
.logo .nombre { font-stretch: 125%; text-transform: uppercase; font-size: 18px; letter-spacing: .02em; line-height: 1; }
.logo .nombre b { font-weight: 900; }
.logo .nombre span { font-weight: 300; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border-radius: var(--r-btn); border: 0;
  font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-1) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primario { background: var(--accion); color: var(--sobre-accion); }
.btn-primario:hover { background: var(--accion-hover); color: var(--sobre-accion); }
.btn-secundario { background: transparent; color: var(--luz); border: 1.5px solid var(--linea-3); }
.btn-secundario:hover { color: var(--luz); border-color: var(--luz); }
.btn-destructivo { background: var(--rojo); color: var(--noche); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--linea); color: var(--apagado); border-color: transparent; cursor: not-allowed; }
.btn-grande { min-height: 56px; padding: 0 28px; font-size: 18px; }

/* Estados (vocabulario de ESTADOS_PAGO.md): punto de color + texto normal.
   Sin cápsula, sin mayúsculas, sin mono. El texto va en Luz; el color lo lleva
   el punto (y el texto, solo en pagado y rechazado). */
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px; color: var(--luz); white-space: nowrap;
}
.badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.badge-pagado    { color: var(--verde); }
.badge-pendiente::before { background: var(--ambar); }
.badge-rechazado { color: var(--rojo); }
.badge-expirado, .badge-finalizado { color: var(--niebla); }
.badge-iniciado::before, .badge-borrador::before { background: transparent; border: 2px solid var(--niebla); width: 6px; height: 6px; }
.badge-en-venta::before, .badge-publicado::before { background: var(--aguamarina); }

/* Tarjetas y KPI */
.card { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-card); padding: 24px; min-width: 0; }
.kpi-valor { font-stretch: 125%; text-transform: uppercase; font-weight: 900; letter-spacing: -.03em; font-size: 32px; line-height: 1; margin-top: 12px; }
@media (min-width: 900px) { .kpi-valor { font-size: 40px; } }

/* Progreso */
.track { height: 6px; border-radius: 9px; background: var(--linea); overflow: hidden; }
.track > i { display: block; height: 100%; background: var(--accion); border-radius: 9px; }

/* Filtros: control segmentado rectangular (solo donde haya filtros reales) */
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: var(--r-btn); border: 1px solid var(--linea-2); background: transparent;
  color: var(--bruma); font-size: 15px; cursor: pointer;
}
.chip:hover { border-color: var(--luz); color: var(--luz); }
.chip[aria-pressed="true"] { border-color: var(--aguamarina); color: var(--luz); }

/* Formularios */
.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo label { font-size: 15px; font-weight: 600; color: var(--bruma); }
.input {
  width: 100%; min-height: 50px; padding: 0 16px; border-radius: var(--r-input);
  border: 1px solid var(--linea-2); background: var(--panel-2); color: var(--luz);
  font: inherit; font-size: 16px;
}
.input:focus { outline: 2px solid var(--foco); outline-offset: 1px; border-color: transparent; }
.campo .error { font-size: 15px; color: var(--rojo); }

/* Velo: texto sobre escenas 3D o imágenes (DESIGN.md § 6.11) */
.velo { background: var(--velo); border: 1px solid var(--linea); border-radius: var(--r-stage); }


/* Cartelera: afiche real al lado de cada evento */
.cartelera { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; text-align: left; }
@media (min-width: 900px) { .cartelera { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.cartelera a {
  display: flex; gap: 20px; align-items: center; padding: 12px; color: var(--luz); text-decoration: none;
  border: 1px solid var(--linea); border-radius: var(--r-card); background: var(--panel);
  transition: transform var(--dur-2) var(--ease);
}
.cartelera a:hover { transform: translateY(-3px); }
.cartelera a:hover b { color: var(--aguamarina); }
.cartelera-afiche { flex: none; width: 112px; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: var(--r-tile); border: 1px solid var(--linea-2); }
.cartelera-sin { display: flex; align-items: flex-end; padding: 12px; background: var(--panel-3); color: var(--enlace); font-size: 40px; line-height: 1; overflow: hidden; }
.cartelera-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cartelera-texto b { font-size: 20px; line-height: 1.2; }
.cartelera-texto span { font-size: 16px; color: var(--bruma); }
.cartelera-texto .cartelera-org { color: var(--niebla); font-size: 15px; }
@media (min-width: 900px) { .cartelera-afiche { width: 160px; } .cartelera-texto b { font-size: 22px; } }

/* Avisos (panel y página pública) */
.aviso { padding: 16px; border-radius: var(--r-input); font-size: 16px; line-height: 1.5; }
.aviso-info { background: var(--aguamarina-10); color: var(--luz); border: 1px solid var(--aguamarina); }
.aviso-error { background: var(--rojo-10); color: var(--luz); border: 1px solid var(--rojo); }
.misma-transferencia { margin: 8px 0 16px; }
/* Historia 20: lenguaje de acciones (DESIGN § 6.14). Íconos de web/img/iconos.svg */
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.i.izq{transform:rotate(180deg)}.i.abajo{transform:rotate(90deg)}
.btn-terciario,.btn-icono,.fila-tocable{text-decoration:none;cursor:pointer;transition:transform var(--dur-1) var(--ease)}
.btn-terciario{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-btn);background:none;color:var(--enlace);font:inherit;font-size:17px;font-weight:700;line-height:1.2}
.btn-terciario:hover{background:color-mix(in srgb,var(--enlace) 12%,transparent);color:var(--enlace-hover)}
.btn-terciario:active{background:color-mix(in srgb,var(--enlace) 20%,transparent);transform:scale(.97)}
.btn-terciario.neutro{color:var(--luz)}.btn-terciario.neutro .i{color:var(--niebla)}
.btn-terciario.neutro:hover{background:color-mix(in srgb,var(--luz) 8%,transparent)}
.btn-terciario.peligro{color:var(--rojo)}
.btn-terciario .i.mueve,.fila-tocable .ft-fin{transition:transform var(--dur-2) var(--ease)}
.btn-terciario:hover .i.mueve,.fila-tocable:hover .ft-fin{transform:translateX(3px)}
.btn-terciario:disabled,.btn-icono:disabled{color:var(--apagado);background:none;transform:none;cursor:not-allowed}
.al-inicio{margin-left:-12px}
.fila-tocable{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 12px;margin:0 -12px;border-radius:var(--r-btn);color:var(--luz)}
.fila-tocable>.i:first-child{color:var(--niebla)}
.ft-texto{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ft-rotulo{font-size:15px;color:var(--niebla)}.ft-dato{font-size:17px;font-weight:600;overflow-wrap:anywhere}
.ft-fin{color:var(--enlace)}
.fila-tocable:hover{background:color-mix(in srgb,var(--luz) 6%,transparent);color:var(--luz)}
.fila-tocable:focus-visible{outline-offset:-2px}
.btn-icono{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:var(--r-btn);background:none;color:var(--luz)}
.btn-icono .i{width:22px;height:22px}
.btn-icono:hover{background:color-mix(in srgb,var(--luz) 9%,transparent);color:var(--luz)}
.btn-icono:active{transform:scale(.94)}
.migas ol{list-style:none;margin:0 0 0 -6px;padding:0;display:flex;flex-wrap:wrap;align-items:center;font-size:15px}
.migas li{display:inline-flex;align-items:center;color:var(--niebla)}
.migas li+li::before{content:"›"/"";padding:0 2px}
.migas a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;border-radius:6px;color:var(--niebla);text-decoration:none}
.migas a:hover{color:var(--luz);background:color-mix(in srgb,var(--luz) 8%,transparent)}
.migas [aria-current]{padding:0 6px;color:var(--luz);font-weight:700}
@media (max-width:899px){.migas li{display:none}.migas li:nth-last-child(2){display:inline-flex}.migas li:nth-last-child(2)::before{content:"‹"/"";padding-right:4px}}
p a:not([class]),.prosa a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
p a:not([class]):hover,.prosa a:not([class]):hover{text-decoration-thickness:2px}
/* Selector de tema (historia 19) */
.tema{position:relative}
.tema>summary{list-style:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-btn);color:var(--luz);cursor:pointer}
.tema>summary::-webkit-details-marker{display:none}
.tema>summary:hover,.tema[open]>summary{background:color-mix(in srgb,var(--luz) 9%,transparent)}
.tema-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:300px;max-width:calc(100vw - 32px);padding:6px;display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--linea-2);border-radius:var(--r-tile)}
.tema-op{display:flex;align-items:center;gap:14px;min-height:52px;padding:8px 12px;border:0;border-radius:var(--r-btn);background:none;color:var(--luz);font:inherit;font-size:17px;font-weight:600;text-align:left;cursor:pointer}
.tema-op span{display:flex;flex-direction:column;line-height:1.3}.tema-op small{font-size:15px;font-weight:400;color:var(--niebla)}
.tema-op:hover{background:color-mix(in srgb,var(--luz) 6%,transparent)}
.tema-op[aria-pressed="true"]{font-weight:800;color:var(--foco)}
.ev-marca{display:flex;align-items:center;gap:8px}
/* Microinteracciones (historia 20, DESIGN § 9): solo transform y opacity, sin rebote; responden a una acción.
   Con movimiento reducido base.css deja cada una en su último cuadro. */
@keyframes mi-entra{from{opacity:0;transform:translateY(-4px)}}
@keyframes mi-baja{from{opacity:0;transform:translateY(-6px)}}
@keyframes mi-resalte{to{opacity:0}}
@keyframes mi-aparece{from{opacity:0;transform:scale(.7)}}
@keyframes mi-pulso{from{opacity:.8}to{opacity:0;transform:scale(1.06)}}
@keyframes mi-sube-n{from{opacity:.2;transform:translateY(6px)}}
@keyframes mi-baja-n{from{opacity:.2;transform:translateY(-6px)}}
@keyframes mi-fundido{from{opacity:.35}}
@keyframes mi-entra-t{from{opacity:0;transform:translateY(8px)}}
@keyframes mi-sale-t{to{opacity:0;transform:scale(.98)}}
@keyframes mi-vaiven{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.aviso-info[role=status],.aviso-ok[role=status]{animation:mi-entra var(--dur-2) var(--ease) both}
.recien{position:relative}
.recien::after{content:"";position:absolute;inset:0;border-radius:var(--r-btn);background:color-mix(in srgb,var(--foco) 16%,transparent);pointer-events:none;animation:mi-resalte var(--dur-resalte) var(--ease) both}
.item-form,.abre[open]>.cuerpo{animation:mi-baja var(--dur-2) var(--ease) both}
.copiado .i{color:var(--foco);animation:mi-aparece var(--dur-2) var(--ease) both}
.ev-tipo,.plantilla-op,.pg-opcion{position:relative}
.ev-tipo::after,.plantilla-op::after,.pg-opcion::after{content:"";position:absolute;inset:-1.5px;border-radius:inherit;border:2px solid var(--foco);opacity:0;pointer-events:none}
.ev-tipo:has(input:checked:focus)::after,.plantilla-op:has(input:checked:focus)::after,
#m-pse:checked:focus~.pg-op-pse::after,#m-efecty:checked:focus~.pg-op-efecty::after,#m-qr:checked:focus~.pg-op-qr::after,
.pulso::after{animation:mi-pulso var(--dur-3) var(--ease) both}
.mi-sube{animation:mi-sube-n var(--dur-2) var(--ease) both}.mi-baja{animation:mi-baja-n var(--dur-2) var(--ease) both}
.mi-cambia{display:inline-block;animation:mi-fundido var(--dur-2) var(--ease) both}
.mi-entra{animation:mi-entra-t var(--dur-2) var(--ease) both}.mi-sale{animation:mi-sale-t var(--dur-2) var(--ease) both;pointer-events:none}
.vaiven{animation:mi-vaiven var(--dur-3) var(--ease-io) both}
dialog.confirmar,dialog.ejemplo-pl{opacity:0;transform:translateY(16px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
dialog.confirmar[open],dialog.ejemplo-pl[open]{opacity:1;transform:none}
@starting-style{dialog.confirmar[open],dialog.ejemplo-pl[open]{opacity:0;transform:translateY(16px)}}
/* Pago confirmado: el único momento de marca fuera de la landing (600 ms) */
.marca-pagado{display:flex;align-items:center;gap:18px;margin:0 0 20px;padding:18px;border:1px solid var(--linea-2);border-radius:var(--r-tile);background:var(--panel)}
.marca-pagado .sim{position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center}
.marca-pagado .tuerca{width:56px;height:56px;color:var(--luz)}
/* patrón: el destello verde detrás de la tuerca, solo en el pago confirmado (§ 9) */
.marca-pagado .destello{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--verde) 55%,transparent),transparent);opacity:0;pointer-events:none}
.marca-pagado .txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.marca-pagado .pagado{display:inline-flex;align-items:center;gap:8px;color:var(--verde);font-weight:800;font-size:22px}
.marca-pagado .pagado svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.marca-pagado .pagado path{stroke-dasharray:22;stroke-dashoffset:0}
.marca-pagado .txt>span:last-child{color:var(--bruma);font-size:15px;overflow-wrap:anywhere}
.marca-pagado.ahora .tuerca{animation:mi-aprieta 400ms var(--ease) both}
.marca-pagado.ahora .destello{animation:mi-destella 300ms ease-out 300ms both}
.marca-pagado.ahora .pagado path{animation:mi-traza 320ms var(--ease) 280ms both}
@keyframes mi-aprieta{from{transform:rotate(-60deg) scale(1.08)}}
@keyframes mi-destella{40%{opacity:1}0%,100%{opacity:0}}
@keyframes mi-traza{from{stroke-dashoffset:22}}