/* =============================================================================
 *  perfil.css — la tarjeta de biomecánica y el perfil público
 *
 *  🔴 TRAÍDO TAL CUAL de la maqueta del taller
 *  «Informes + NFC/Diseño Infografías Bicicletas/entrega/perfil-nfc/index.html»,
 *  que ya estaba diseñada y probada. NO se ha rediseñado nada: el 20-sep-2026
 *  escribí una versión mía y Alfonso lo paró — *«has puesto la versión antigua…
 *  revisa la carpeta, está todo ahí porque ya se probó y salió bien todo»*.
 *
 *  La tarjeta es la reproducción de la TARJETA FÍSICA que él entrega: logo,
 *  lema, contacto, redes, sedes y el QR. En el papel los dos cuadros van EN
 *  BLANCO y se rellenan a boli; aquí los pinta la web con las medidas de ese
 *  estudio.
 *
 *  🔴 UNA TARJETA POR INFORME (decisión suya, 19-sep): los dos cuadros son las
 *  medidas DE ESE estudio, y quien tiene tres estudios tiene tres juegos.
 *
 *  Esta hoja NO se carga nunca dentro del club: define su propia paleta en
 *  :root y le cambiaría el fondo entero. Vive solo en /profile/.
 * ===========================================================================*/

/* ══════════════════════════════════════════════════════════════════════════
   PALETA · los colores del club, en dos bloques, como manda estilo.css
   🔴 Ni un color escrito a mano por debajo de aquí: todo con var().
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --navy:#1a1a2e; --coral:#e63946; --coral-hover:#c5303c;
  --fondo:#14141f; --panel:#1f1f33; --panel-2:#26263d;
  --texto:#f2f2f7; --suave:#a9a9bd; --borde:#33334d;
  --coral-texto:#ff6b75;        /* CORAL cuando es LETRA. De noche aclara */
  --sobre-color:#ffffff;
}
:root[data-tema="dia"]{
  --fondo:#f3f4f6; --panel:#ffffff; --panel-2:#f7f8fa;
  --texto:#1a1a2e; --suave:#5b6370; --borde:#e0e2e8;
  --coral-texto:#c5303c;        /* 🔴 de día OSCURECE, o no llega al contraste */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo); color:var(--texto);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
h1,h2{font-weight:800; letter-spacing:-.01em; margin:0}
.envoltorio{max-width:1180px; margin:0 auto; padding:0 16px 56px}

.marca{background:var(--navy); margin:0 -16px; padding:22px 16px 20px; text-align:center; position:relative}
.marca .logo{font-size:21px; font-weight:800; color:#fff; letter-spacing:-.02em}
.marca .logo b{color:var(--coral)}
.marca .lema{font-size:10px; letter-spacing:.38em; color:var(--coral); margin-top:5px; text-transform:uppercase}
/* El botón de día/noche, tal cual lo dibujó el taller. Aquí es un formulario
   —lo decide el servidor— así que el que se ve es el <button> de dentro. */
.tema-form{position:absolute; right:12px; top:12px; margin:0}
.tema{
  background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff;
  border-radius:999px; width:34px; height:34px; font-size:15px; cursor:pointer;
  line-height:1; padding:0;
}
.tema:hover{border-color:var(--coral)}
.tema{
  position:absolute; right:12px; top:12px; background:transparent;
  border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:999px;
  width:34px; height:34px; font-size:15px; cursor:pointer;
}

.pantalla{display:none; animation:entra .28s ease}
.pantalla.activa{display:block}
@keyframes entra{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ── la puerta ────────────────────────────────────────────────────────── */
.puerta{
  background:var(--panel); border:1px solid var(--borde); border-radius:16px;
  padding:30px 24px; margin:28px auto 0; max-width:460px; text-align:center;
}
.puerta .chip{font-size:34px; line-height:1; margin-bottom:14px}
.puerta h2{font-size:20px; margin-bottom:8px}
.puerta p{color:var(--suave); font-size:14.5px; margin:0 auto 20px; max-width:38ch}
.puerta input{
  width:100%; padding:14px 15px; font-size:16px; text-align:center;
  background:var(--panel-2); color:var(--texto);
  border:1.5px solid var(--borde); border-radius:10px; margin-bottom:12px;
}
.puerta input:focus{outline:none; border-color:var(--coral)}
.puerta input.codigo{letter-spacing:.5em; font-weight:800; font-size:26px; padding-left:.5em}
.btn{
  width:100%; padding:14px; font-size:16px; font-weight:700; cursor:pointer;
  background:var(--coral); color:var(--sobre-color); border:none; border-radius:10px;
}
.btn:hover{background:var(--coral-hover)}
.nota{font-size:12.5px; color:var(--suave); margin-top:14px}
.nota b{color:var(--coral-texto)}
/* 🔴 LE FALTABA EL HUECO DE ABAJO (3-oct-2026).
   Tenían razón y yo miré la hoja equivocada: el `.aviso` de `estilo.css` SÍ
   tiene `margin-bottom: 20px`, pero `alta.php`, `perfil.php` y
   `registrarse.php` NO cargan esa hoja — cargan ésta y `alta.css`—, así que
   el aviso quedaba pegado a lo de debajo.

   🔴 Y DONDE EL AVISO ES LO ÚLTIMO, SÍ SE NOTA — aquí ponía que no, y era
   falso: se midió. Dejaba la tarjeta con 50 px por abajo y
   30 por arriba, o sea descuadrada. Pasa en «Esto ya está hecho» del alta y en
   la pantalla del código del chip. Lo arregla el `:last-child` de abajo. */
.aviso{
  background:var(--panel-2); border-left:3px solid var(--coral);
  padding:11px 13px; border-radius:0 8px 8px 0; margin:16px 0 20px;
  font-size:12.5px; color:var(--suave); text-align:left;
}
/* 🔴 Y SI ES LO ÚLTIMO DE LA TARJETA, SIN HUECO: el relleno de `.puerta` ya
   pone el suyo, y los dos juntos descuadran la caja (50 px abajo contra 30
   arriba). Se vio midiéndolo. */
.puerta > .aviso:last-child{ margin-bottom:0 }

/* ── ficha ────────────────────────────────────────────────────────────── */
.saludo{padding:26px 0 4px}
.saludo h1{font-size:26px}
.saludo p{color:var(--suave); margin:6px 0 0; font-size:14.5px}

/* ── informes ─────────────────────────────────────────────────────────── */
.seccion-tit{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--suave); margin:30px 0 12px}
.informe{background:var(--panel); border:1px solid var(--borde); border-radius:14px; margin-bottom:12px; overflow:hidden}
.informe-cab{padding:15px 17px; cursor:pointer; display:flex; align-items:center; gap:12px}
.informe-cab:hover{background:var(--panel-2)}
.pin{
  background:var(--coral); color:var(--sobre-color); font-size:10px; font-weight:800;
  padding:4px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
}
.pin.otro{background:var(--panel-2); color:var(--suave); border:1px solid var(--borde)}
.informe-cab .qué{flex:1; min-width:0}
.informe-cab .qué b{display:block; font-size:15px}
.informe-cab .qué span{font-size:12.5px; color:var(--suave)}
.flecha{color:var(--suave); font-size:13px; transition:transform .2s}
.informe.abierto .flecha{transform:rotate(90deg)}

/* Lo que se despliega: su TARJETA y, debajo, la pantalla de verdad — que no es
   una copia, es `carretera/index.html` y compañía, con sus cinco vistas, su 3D,
   su lupa y su lista a la derecha. El visor se carga al abrir la ficha. */
.desplegado{display:none; border-top:1px solid var(--borde); padding:18px 17px 0; background:var(--panel-2)}
.informe.abierto .desplegado{display:block}
.desplegado .tarjeta{margin:0 auto 18px}
.visor{background:#fff; border-radius:12px 12px 0 0; overflow:hidden}
/* 🔴 ALTO FIJO. NO SE AJUSTA SOLO. Y ESTO YA SE PROBÓ DOS VECES.

   El taller lo dejó escrito en su maqueta: *«lo intenté midiendo el contenido
   y ajustando el iframe sobre la marcha: con eso el 3D NO ARRANCABA. El visor
   coloca el dibujo y la lista en una rejilla, y `three-d-stage` se ESTIRA a la
   altura de la fila; si cambio esa altura justo mientras se monta el lienzo
   WebGL, el 3D se queda a medias»*.

   El 20-sep-2026 lo volví a intentar igual —un guion que medía y avisaba al
   marco—, razonando que el 3D se dimensiona por su ANCHO y que tocar solo el
   alto era inofensivo. No lo era: en la rejilla del visor la fila estira el
   elemento, así que el alto del marco SÍ le llega. Alfonso lo vio a la
   primera: *«el 3D no funciona»*. Se quitó.

   Así que el número va a mano, y lo que no quepa se desplaza dentro del
   recuadro — que es justo lo que decidió el taller: *«lo de dentro se
   desplaza si hace falta, como cualquier pantalla»*.
   🟡 Si sobra hueco o falta, se cambia AQUÍ. Nada de medir en marcha. */
.visor iframe{width:100%; height:4300px; border:0; display:block}
@media(max-width:820px){ .visor iframe{height:3400px} }

.no-descarga{
  background:var(--panel-2); border:1px solid var(--borde); border-radius:10px;
  padding:13px 15px; margin-top:18px; font-size:13px; color:var(--suave);
  display:flex; gap:11px; align-items:flex-start; max-width:680px;
}
.no-descarga b{color:var(--texto)}

.acciones{display:grid; gap:9px; margin-top:12px; max-width:560px}
.accion{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:var(--panel); border:1px solid var(--borde); border-radius:12px;
  color:var(--texto); text-decoration:none; font-weight:600; font-size:14.5px;
}
.accion:hover{border-color:var(--coral); background:var(--panel-2)}
.accion.fuerte{background:var(--coral); border-color:var(--coral); color:var(--sobre-color)}
/* ── los logos de las redes, con el color de cada marca ── */
.accion .ic{width:20px; height:20px}
.accion.fuerte .ic{color:#fff}
.red .ic{width:22px; height:22px}
.t-tel{text-decoration:none; display:inline-block}
.accion .fl{margin-left:auto; color:var(--suave); font-size:13px}
.accion.fuerte .fl{color:#fff; opacity:.75}
.redes{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:12px; max-width:560px}
.red{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:13px 6px;
  background:var(--panel); border:1px solid var(--borde); border-radius:12px;
  color:var(--texto); text-decoration:none; font-size:11px; font-weight:600;
}
.red:hover{border-color:var(--coral)}

.sedes{text-align:center; margin-top:30px; padding-top:20px; border-top:1px solid var(--borde); font-size:12.5px; color:var(--suave)}
.sedes b{color:var(--coral-texto); font-weight:700}
.maqueta{background:#f5c518; color:#1a1a2e; text-align:center; font-size:11.5px; font-weight:700; padding:7px 12px}
@media(max-width:560px){ .redes{grid-template-columns:repeat(2,1fr)} }
/* una red cuya cuenta no está comprobada: se ve, pero no lleva a ningún sitio */
.red.apagada{opacity:.45;cursor:not-allowed}

/* ── Abrir y cerrar SIN JavaScript ────────────────────────────────────────────
   En la maqueta del taller cada ficha se abría con JavaScript, añadiendo la
   clase `.abierto`. En el club no puede haber un script dentro de la página
   —`script-src 'self'`— y un fichero .js aparte para abrir un desplegable que
   el navegador ya sabe hacer solo sería ruido. Se usa <details>.

   🔴 Estas reglas NO cambian el diseño: traducen «abierto» a «details[open]».
   Si algún día se vuelve al JavaScript, las de arriba siguen valiendo. */
.informe details > summary { list-style: none; }
.informe details > summary::-webkit-details-marker { display: none; }
.informe details[open] .desplegado { display: block; }
.informe details[open] .flecha { transform: rotate(90deg); }