/* Puerta de tablets · diseño aprobado (lienzo «Puerta de tablets Tabitas»).
   Horizontal: 3 tarjetas en fila. Vertical: apiladas. */
:root {
  --verde: #2D6A4F; --verde-osc: #1B4332;
  --fondo: #F4F1EA; --tinta: #1B1F1D; --tinta2: #4A524E; --tinta3: #5A625E;
  --linea: #CFC9BC; --gris: #9AA39E; --crema: #E7E1D3;
  --hielo: #CFE4EC; --hielo-t: #0F2A36; --hielo-t2: #24434F;
  --miel: #F6DFA8; --miel-t: #3D2600; --miel-t2: #5A3D0A;
  --error: #8A2B1E; --ok: #2F9E5B; --naranja: #F3DCC2; --naranja-t: #8A4B0F;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --texto: 'DM Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--fondo); color: var(--tinta); font-family: var(--texto);
  -webkit-font-smoothing: antialiased; overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
.cargando { height: 100vh; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--tinta3); }

/* ── Pantalla con cabecera (botones, sin conexión) ── */
.pantalla { height: 100vh; display: flex; flex-direction: column; padding: clamp(20px, 4vh, 40px) clamp(20px, 4.5vw, 56px) clamp(16px, 3vh, 32px); }
.cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { display: flex; align-items: center; gap: 16px; }
.logo {
  width: 64px; height: 64px; border-radius: 18px; background: var(--verde); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--display); font-weight: 800; font-size: 34px;
}
.logo.grande { width: 84px; height: 84px; border-radius: 24px; font-size: 46px; }
.marca-nom { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.01em; }
.marca-local { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--tinta2); margin-top: 2px; }
.reloj { text-align: right; }
.reloj-h { font-family: var(--display); font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.reloj-d { font-size: 18px; color: var(--tinta2); margin-top: 6px; }

.centro { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; min-height: 0; }
.pregunta { font-family: var(--display); font-weight: 600; font-size: 30px; color: #3A423E; }
.apps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 28px; }
.app {
  border: none; border-radius: 28px; height: clamp(220px, 38vh, 300px); padding: 36px; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .08s;
}
.app:active { transform: scale(.98); }
.app[disabled] { opacity: .6; }
.app-nom { display: block; font-family: var(--display); font-weight: 800; font-size: 44px; }
.app-sub { display: block; font-size: 19px; margin-top: 6px; }
.app svg { width: 72px; height: 72px; }
.app-fichaje { background: var(--verde); color: #fff; }
.app-fichaje .app-sub { opacity: .9; }
.app-appcc { background: var(--hielo); color: var(--hielo-t); }
.app-appcc .app-sub { color: var(--hielo-t2); }
.app-resenas { background: var(--miel); color: var(--miel-t); }
.app-resenas .app-sub { color: var(--miel-t2); }
.sin-apps { font-size: 22px; color: var(--tinta2); line-height: 1.5; }

.pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--tinta3); }
.salir { background: transparent; border: 2px solid var(--linea); color: var(--tinta2); border-radius: 12px; padding: 10px 18px; font-size: 16px; font-weight: 700; min-height: 44px; }
.salir:active { background: var(--crema); }
.punto { display: inline-flex; align-items: center; gap: 10px; }
.punto::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.punto.mal::before { background: var(--error); }

/* Vertical: tarjetas apiladas, icono a la izquierda */
@media (orientation: portrait) {
  .apps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .app { flex-direction: row; align-items: center; justify-content: flex-start; gap: 32px; height: clamp(150px, 19vh, 250px); padding: 32px 36px; }
  .app svg { width: 88px; height: 88px; flex-shrink: 0; }
  .app-nom { font-size: 50px; }
  .reloj-h { font-size: 48px; }
  .pie-info { display: none; }
}

/* ── Activar ── */
.activar { height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; overflow-y: auto; }
.activar-caja { width: min(760px, 100%); display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }
.titulo { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 5vw, 52px); letter-spacing: -0.02em; line-height: 1.05; }
.texto { font-size: 21px; color: var(--tinta2); line-height: 1.45; margin-top: 12px; }
.aviso {
  background: #F7E1DC; color: var(--error); border-radius: 16px; padding: 14px 20px; font-size: 18px; font-weight: 500; line-height: 1.4;
}
.codigo { position: relative; display: flex; align-items: center; gap: 14px; }
.codigo-grupo { display: flex; gap: 10px; }
.casilla {
  width: clamp(48px, 6vw, 74px); height: clamp(62px, 8vw, 92px); border-radius: 16px; background: #fff; border: 2px solid var(--linea);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(30px, 3.6vw, 44px);
}
.casilla.llena { border-color: var(--verde); }
.casilla.cursor { border: 3px solid #E0A526; }
.guion { width: 22px; height: 5px; border-radius: 3px; background: var(--gris); }
.codigo input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: none;
  text-transform: uppercase;
}
.boton {
  width: min(420px, 100%); height: 76px; border: none; border-radius: 20px; background: var(--verde); color: #fff;
  font-weight: 700; font-size: 24px;
}
.boton[disabled] { opacity: .45; }
.nota { font-size: 17px; color: var(--tinta3); line-height: 1.5; }
.error { color: var(--error); font-size: 18px; font-weight: 500; min-height: 24px; }

/* ── PIN de salida ── */
.pin-fondo { height: 100vh; background: #1F2A25; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pin-caja {
  width: min(1040px, 100%); background: var(--fondo); border-radius: 36px; padding: 48px 56px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px;
}
.pin-izq { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.candado { width: 64px; height: 64px; border-radius: 18px; background: var(--crema); color: var(--verde); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.pin-izq .titulo { font-size: 46px; }
.pin-izq .texto { font-size: 20px; margin-top: 16px; }
.puntos { display: flex; gap: 16px; min-height: 26px; }
.puntos span { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--gris); }
.puntos span.on { background: var(--verde); border-color: var(--verde); }
.volver { align-self: flex-start; background: none; border: none; font-size: 19px; font-weight: 700; color: var(--verde); padding: 12px 0; }
.teclado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tecla { height: clamp(72px, 12vh, 104px); border: none; border-radius: 22px; background: #fff; font-family: var(--display); font-weight: 600; font-size: 38px; }
.tecla:active { background: var(--crema); }
.tecla.borrar { background: var(--crema); color: #3A423E; display: flex; align-items: center; justify-content: center; }
.tecla.salir { background: var(--verde); color: #fff; font-family: var(--texto); font-weight: 700; font-size: 24px; }
@media (orientation: portrait) {
  .pin-caja { grid-template-columns: minmax(0, 1fr); padding: 40px; gap: 32px; }
}

/* ── Sin conexión ── */
.sinred { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.sinred-icono { width: 120px; height: 120px; border-radius: 50%; background: var(--naranja); color: var(--naranja-t); display: flex; align-items: center; justify-content: center; }
.reintento { display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--tinta3); }
.sinred .boton { width: min(400px, 100%); height: 72px; font-size: 22px; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.sinred .boton svg { width: 30px; height: 30px; }
.boton.secundario { background: transparent; color: var(--verde); border: 2px solid var(--verde); margin-top: 0; }
.pie-centro { justify-content: center; text-align: center; }