/* Tarjeta digital de Nexbyte. La idea visual: una credencial colgada de su cinta, sobre papel. */
:root {
  --papel: #edeae3; --papel-2: #e3dfd5; --hoja: #fbfaf7;
  --tinta: #0e1626; --tinta-2: #1b2740; --gris: #586074; --gris-2: #8a90a0;
  --azul: #2b63f0; --azul-2: #1d49c2; --cian: #19c2de;
  --linea: rgba(14, 22, 38, .15);
  --ancha: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --mx: 50%; --my: 30%; --rx: 0deg; --ry: 0deg;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; color: var(--tinta); background: var(--papel);
  font: 400 17px/1.5 var(--ancha); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-image: radial-gradient(rgba(14, 22, 38, .11) 1px, transparent 1.2px); background-size: 22px 22px;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.mono { font: 500 11.5px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }

.pagina { max-width: 480px; margin: 0 auto; padding: 0 20px 56px; overflow-x: clip; }

/* ───── Portada: cinta + credencial ───── */
.portada { display: grid; justify-items: center; padding-bottom: 8px; }
.cuelga { position: relative; width: min(100%, 348px); transform-origin: 50% -140px; animation: caer 1.5s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes caer {
  0% { transform: translateY(-110%) rotate(-7deg); }
  45% { transform: translateY(0) rotate(4.5deg); }
  68% { transform: rotate(-2.4deg); }
  85% { transform: rotate(1deg); }
  100% { transform: rotate(0); }
}
.cinta {
  width: 38px; height: 58px; margin: 0 auto; position: relative;
  background-color: var(--azul);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='74'%3E%3Ctext transform='translate(24 70) rotate(-90)' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='10.5' letter-spacing='2.6' fill='%23ffffff' fill-opacity='.92'%3ENEXBYTE%3C/text%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(0, 0, 0, .2), transparent 22%, transparent 78%, rgba(0, 0, 0, .22));
  box-shadow: 0 0 0 100vh transparent;
}
.cinta::before { content: ''; position: absolute; left: 0; right: 0; top: -100vh; height: 100vh; background: inherit; }
.broche { width: 54px; height: 30px; margin: -2px auto -15px; position: relative; z-index: 3; }

.volteo { perspective: 1300px; }
.credencial {
  position: relative; aspect-ratio: 348 / 512; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .75s cubic-bezier(.3, 1.25, .4, 1);
}
.credencial.gira { transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + 180deg)); }
.credencial.viva { transition: transform .12s linear; }
.volteo { touch-action: pan-y; }
.credencial { will-change: transform; }
.cara {
  position: absolute; inset: 0; border-radius: 26px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 34px 50px -28px rgba(14, 22, 38, .55), 0 6px 14px -6px rgba(14, 22, 38, .3);
}
.frente { background: var(--hoja); display: flex; flex-direction: column; padding: 44px 22px 0; }
.reverso { background: var(--tinta); color: #fff; transform: rotateY(180deg); display: grid; align-content: center; justify-items: center; gap: 18px; padding: 54px 26px 30px; text-align: center; }
.ranura { position: absolute; left: 50%; top: 15px; width: 58px; height: 13px; margin-left: -29px; border-radius: 99px; background: var(--papel); box-shadow: inset 0 2px 3px rgba(14, 22, 38, .4); z-index: 2; }
.reverso .ranura { background: #070b14; box-shadow: inset 0 2px 3px #000; }
/* brillo fijo y suave: sin modos de fusión, para que no pese */
.cara::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .0) 30%, rgba(255, 255, 255, .22) 48%, rgba(255, 255, 255, 0) 62%); }
/* se mece sola con una animación del navegador (no usa JavaScript); al tocarla manda el dedo */
.credencial:not(.viva):not(.gira) { animation: vaiven 9s ease-in-out 1.6s infinite; }
@keyframes vaiven { 0%, 100% { transform: rotateX(0) rotateY(0); } 25% { transform: rotateX(1.6deg) rotateY(-5.5deg); } 75% { transform: rotateX(-1.4deg) rotateY(5.5deg); } }

.marca { display: flex; align-items: center; justify-content: space-between; }
.marca .logo { display: flex; align-items: center; gap: 9px; font: 800 17px/1 var(--ancha); font-stretch: 122%; letter-spacing: .02em; text-decoration: none; }
.marca .logo svg { width: 30px; height: 30px; }
.marca .logo b { color: var(--azul); font-weight: 800; }
.marca .mono { color: var(--gris); }

.retrato { position: relative; margin-top: 16px; border-radius: 16px; overflow: hidden; aspect-ratio: 304 / 208; background: linear-gradient(160deg, #cfdcf7, #e6eefc 60%, #d3f0f6); }
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.retrato .mono { position: absolute; right: 9px; bottom: 9px; background: var(--tinta); color: #fff; padding: 5px 8px 4px; border-radius: 6px; font-size: 10px; }
.retrato i { position: absolute; width: 13px; height: 13px; border: 1.5px solid var(--tinta); opacity: .55; }
.retrato i:nth-of-type(1) { left: 9px; top: 9px; border-right: 0; border-bottom: 0; }
.retrato i:nth-of-type(2) { right: 9px; top: 9px; border-left: 0; border-bottom: 0; }
.retrato i:nth-of-type(3) { left: 9px; bottom: 9px; border-right: 0; border-top: 0; }

.nombre { margin: 15px 0 0; font: 800 44px/.9 var(--ancha); font-stretch: 118%; letter-spacing: -.035em; }
.nombre small { display: block; font: 500 11.5px/1 var(--mono); letter-spacing: .12em; color: var(--azul-2); margin-bottom: 8px; text-transform: uppercase; }
.oficio { margin: 10px 0 0; color: var(--gris); font-size: 14.5px; line-height: 1.35; max-width: 26ch; }
.banda {
  margin: auto -22px 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; color: #fff;
  background: linear-gradient(100deg, var(--tinta) 0 45%, var(--azul-2) 45% 94%, var(--cian) 94%);
  
}
.banda .mono { font-size: 10.5px; }

.girar {
  position: absolute; right: 12px; top: 7px; z-index: 4; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--linea);
  background: rgba(251, 250, 247, .9); display: grid; place-items: center; cursor: pointer; transition: transform .25s, background .2s;
}
.girar:hover { transform: rotate(-25deg); background: #fff; }
.girar svg { width: 17px; height: 17px; }
.credencial.gira ~ .girar { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }

.reverso .qr { width: min(88%, 268px); background: #fff; border-radius: 20px; padding: 14px; }
.reverso h2 { margin: 0; font: 700 21px/1.12 var(--ancha); font-stretch: 112%; letter-spacing: -.02em; max-width: 14ch; }
.reverso .mono { color: #9fb2d9; }

/* ───── Saludo y acciones ───── */
.saludo { text-align: center; margin: 22px auto 0; max-width: 30ch; }
.saludo h1 { margin: 0; font: 700 25px/1.08 var(--ancha); font-stretch: 112%; letter-spacing: -.025em; }
.saludo h1 span { display: block; }
.saludo p { margin: 8px 0 0; color: var(--gris); font-size: 15.5px; } .saludo p:empty { display: none; }

.acciones { width: min(100%, 348px); margin: 18px auto 0; display: grid; gap: 14px; }
.toca { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--tinta-2); font-size: 14.5px; font-weight: 600; }
.toca svg { width: 22px; height: 22px; color: var(--azul); }
.credencial { cursor: pointer; -webkit-tap-highlight-color: transparent; }

.turno { background: var(--tinta); color: #fff; border-radius: 22px; padding: 16px 16px 16px; display: grid; gap: 9px; transition: box-shadow .4s; }
.turno.ahora { box-shadow: 0 0 0 4px rgba(25, 194, 222, .55); }
.turno .mono { color: var(--cian); font-size: 10.5px; padding-left: 2px; }
.turno input { width: 100%; min-height: 48px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07); color: #fff; font: 500 16px/1 var(--ancha); padding: 0 14px; }
.turno input::placeholder { color: #8b97b5; }
.turno input:focus { outline: 0; border-color: var(--cian); }
.turno button { min-height: 52px; border: 0; border-radius: 14px; background: #25d366; color: #06230f; font: 800 15.5px/1 var(--ancha); font-stretch: 106%; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; }
.turno button:active { transform: translateY(2px); }
.turno button svg { width: 23px; height: 23px; flex: none; }

.redes { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.redes a { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--hoja); border: 1.5px solid var(--linea); color: var(--tinta); }
.redes a:active { background: #fff; border-color: var(--tinta); }
.redes svg { width: 18px; height: 18px; }
.redes a.grande { width: 54px; height: 54px; background: #25d366; border-color: #25d366; color: #fff; }
.redes a.grande svg { width: 29px; height: 29px; }

.resumen { margin: 30px auto 0; text-align: center; display: grid; justify-items: center; gap: 6px; max-width: 348px; }
.resumen p { margin: 0; font: 700 19px/1.15 var(--ancha); font-stretch: 110%; letter-spacing: -.02em; max-width: 24ch; text-wrap: balance; }
.ir { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--mono); text-decoration: none; padding: 10px 0 8px; border-bottom: 2px solid var(--azul); }
.ir svg { width: 15px; height: 15px; }
.resumen .mini { margin-top: 18px; color: var(--gris); font-size: 10.5px; text-decoration: none; padding: 8px; }

@media (max-width: 359px) { .nombre { font-size: 40px; } .frente { padding-inline: 18px; } .banda { margin-inline: -18px; padding-inline: 18px; } .redes a { width: 36px; height: 36px; } .redes a.grande { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .cuelga, .credencial { animation: none !important; } .credencial { transition: none; } }

/* ───── Página del QR (para mostrar en pantalla) ───── */
body.solo-qr { background: var(--tinta); color: #fff; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px); min-height: 100dvh; display: grid; place-items: center; }
.mostrar { display: grid; justify-items: center; gap: 22px; padding: 28px 24px; text-align: center; width: min(100%, 420px); }
.mostrar .logo { display: flex; align-items: center; gap: 10px; font: 800 19px/1 var(--ancha); font-stretch: 122%; }
.mostrar .logo svg { width: 34px; height: 34px; }
.mostrar .logo b { color: var(--cian); }
.mostrar .qr { width: 100%; background: #fff; border-radius: 30px; padding: 22px; box-shadow: 0 0 0 8px rgba(43, 99, 240, .35); }
.mostrar h1 { margin: 0; font: 800 30px/1 var(--ancha); font-stretch: 116%; letter-spacing: -.03em; }
.mostrar p { margin: 0; color: #b7c3dc; }
.mostrar a { color: var(--cian); font: 500 13px/1 var(--mono); }

/* ───── Boceto editable (/boceto) ───── */
.boceto { padding-top: 62px; }
.boceto .cuelga, .boceto .credencial { animation: none !important; }
.boceto .girar { display: none; } .boceto .saludo:has(:not(:empty)) { display: block; } .boceto [contenteditable]:empty::before { content: '(vacío: escribe aquí)'; color: var(--gris-2); font-weight: 400; font-size: 13px; letter-spacing: 0; }
.boceto [contenteditable] { outline: 1.5px dashed rgba(43, 99, 240, .45); outline-offset: 3px; border-radius: 4px; cursor: text; min-width: 1.2em; display: inline-block; }
.boceto p[contenteditable], .boceto h2[contenteditable], .boceto h3[contenteditable], .boceto li b[contenteditable] { display: block; }
.boceto [contenteditable]:hover { outline-color: var(--azul); background: rgba(43, 99, 240, .07); }
.boceto [contenteditable]:focus { outline: 2.5px solid var(--azul); background: rgba(255, 255, 255, .55); }
.boceto .turno [contenteditable]:focus, .boceto .wa [contenteditable]:focus, .boceto .banda [contenteditable]:focus, .boceto .retrato [contenteditable]:focus { background: rgba(255, 255, 255, .14); }
.boceto [contenteditable].cambio { outline-style: solid; outline-color: #e08a00; }
.b-barra { position: fixed; inset: 0 0 auto; z-index: 60; background: var(--tinta); color: #fff; display: flex; align-items: center; gap: 10px; padding: 9px 14px; flex-wrap: wrap; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }
.b-barra b { font: 700 14px/1.2 var(--ancha); font-stretch: 110%; }
.b-barra span { color: #b7c3dc; font-size: 12.5px; flex: 1 1 180px; line-height: 1.3; }
.b-barra button, .b-mas, .b-quitar { font: 600 12.5px/1 var(--ancha); border-radius: 10px; cursor: pointer; }
.b-barra button { border: 0; padding: 10px 13px; background: rgba(255, 255, 255, .13); color: #fff; }
.b-barra button.principal { background: var(--cian); color: var(--tinta); }
.b-mas { display: block; margin: 16px 0 0; padding: 12px 16px; border: 1.5px dashed var(--azul); background: none; color: var(--azul-2); width: 100%; }
.b-quitar { position: absolute; right: 0; top: 14px; z-index: 5; width: 30px; height: 30px; border: 0; background: #d83a3a; color: #fff; font-size: 17px; line-height: 1; display: grid; place-items: center; }
.boceto .obra { position: relative; } .boceto .obra .b-quitar { top: -14px; right: -6px; }
.boceto .lista li { padding-right: 40px; }
.b-aviso { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 70; background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 14px; max-width: calc(100vw - 32px); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7); }