/* Sistema de diseño "Yema" para mockups de pantallas del app móvil INSIGNIA.
   Compartido entre index.php (hero) y manual-insignia.php (guía de pantallas). */
.maq{
  --bg:#FDFCFA; --surface:#FFFFFF; --surface-hi:#FFF3E0;
  --line:#EEEAE3; --text:#1B1F24; --text-dim:#99A0A8;
  --amber:#FF9E1B; --amber-deep:#F28705; --amber-dim:#FFF3E0;
  --teal:#00C2A8; --teal-soft:#E0F7F2; --red:#FF4D5E;
  --rojo-marca:#E52528;
  --r-card:18px; --r-btn:14px;
  font-family:'Inter',system-ui,sans-serif;
}
.maq *{box-sizing:border-box}
.maq .phone-wrap{display:flex;flex-direction:column;gap:10px}
.maq .phone-label{font-size:13px;font-weight:700;color:#4b5058;text-align:center}
.maq .phone-sub{font-size:11.5px;color:#9aa0a8;text-align:center;margin-top:-6px;max-width:260px;align-self:center}
.maq .phone{
  width:270px;height:560px;background:var(--bg);color:var(--text);
  border-radius:32px;border:8px solid #23262b;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  overflow:hidden;position:relative;display:flex;flex-direction:column;
}
.maq .statusbar{
  height:26px;flex:none;display:flex;justify-content:space-between;align-items:center;
  padding:0 16px;font-size:10px;color:var(--text-dim);background:var(--bg);
}
.maq .screen{flex:1;display:flex;flex-direction:column;padding:18px 18px 16px;overflow:hidden}
.maq .t-giant{font-size:56px;font-weight:200;letter-spacing:-2px;line-height:1}
.maq .t-big{font-size:24px;font-weight:300}
.maq .t-title{font-size:16px;font-weight:700}
.maq .t-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim)}
.maq .t-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--text-dim)}
.maq .dim{color:var(--text-dim)}
.maq .btn{
  background:var(--amber);border-radius:var(--r-btn);padding:13px;
  color:#fff;font-size:15px;font-weight:700;text-align:center;
  box-shadow:0 6px 12px rgba(255,158,27,.35);
}
.maq .btn.disabled{opacity:.45;box-shadow:none}
.maq .input{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-btn);
  padding:12px 14px;font-size:14px;color:var(--text);
}
.maq .input .ph{color:var(--text-dim)}
.maq .card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px;display:flex;align-items:center;gap:10px;
}
.maq .dot{width:8px;height:8px;border-radius:50%;flex:none}
.maq .dot.on{background:var(--teal)}
.maq .dot.off{background:var(--text-dim)}
.maq .chev{color:var(--text-dim);font-size:18px;margin-left:auto}
.maq .badge{
  display:inline-flex;align-items:center;gap:5px;font-size:10px;
  padding:4px 9px;border-radius:999px;
}
.maq .badge.on{background:rgba(79,209,197,.15);color:var(--teal)}
.maq .badge.off{background:var(--surface);color:var(--text-dim);border:1px solid var(--line)}
.maq .badge .dot{width:6px;height:6px}
.maq .alarm{
  background:rgba(242,109,109,.12);border-radius:var(--r-btn);
  padding:9px;text-align:center;color:var(--red);font-weight:600;font-size:12px;
}
.maq .spinner{
  width:30px;height:30px;border-radius:50%;
  border:3px solid var(--amber-dim);border-top-color:var(--amber);
  animation:maq-spin 1s linear infinite;
}
@keyframes maq-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.maq .spinner{animation:none}}
.maq .gota{
  background:var(--rojo-marca);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 8px rgba(229,37,40,.35);
  border-radius:50% 50% 50% 0;
}
.maq .wordmark{font-weight:800;letter-spacing:-1.5px}
.maq .ring-wrap{position:relative;display:flex;align-items:center;justify-content:center;margin:10px 0 4px}
.maq .ring-center{position:absolute;text-align:center}
.maq .step-btn{
  width:46px;height:46px;border-radius:50%;background:var(--surface);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:300;
}
.maq .switch{width:44px;height:26px;border-radius:999px;position:relative;flex:none}
.maq .switch .knob{width:20px;height:20px;border-radius:50%;position:absolute;top:3px}
.maq .switch.on{background:var(--amber-dim)}
.maq .switch.on .knob{background:var(--amber);right:3px}
.maq .switch.off{background:var(--line)}
.maq .switch.off .knob{background:var(--text-dim);left:3px}
.maq .fab{margin-top:auto}
.maq .check{font-size:52px;line-height:1}
.maq .fila{display:flex;gap:22px;overflow-x:auto;padding:10px 4px 18px;-webkit-overflow-scrolling:touch}
.maq .fila::-webkit-scrollbar{height:8px}
.maq .fila::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.maq .phone-wrap{flex-shrink:0}
@media(max-width:640px){
  .maq .phone{transform:scale(.92);transform-origin:top left}
}