.mvz-wrap{--navy:#10244a;--blue:#1768e9;--gold:#f4cf35;--ink:#17345f;--cream:#fffaf0;--green:#249447;--red:#d9363e;font-family:'Josefin Sans',Arial,sans-serif;color:var(--ink);max-width:1600px;margin:4px auto;padding:0 6px;box-sizing:border-box}
.mvz-wrap *{box-sizing:border-box}
.mvz-card{overflow:hidden;border:1px solid #d8e0ec;border-radius:14px;background:var(--cream);box-shadow:0 8px 20px rgba(16,36,74,.12)}
.mvz-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;background:var(--navy);color:#fff}
.mvz-title-block h1{margin:0;color:#fff;font-size:clamp(20px,2.5vw,30px);line-height:1.05}
.mvz-wrap .eyebrow{margin:0 0 2px;color:#a9c8ff;font-size:11px;font-weight:800;letter-spacing:.08em}
.mvz-wrap .subtitle{margin:4px 0 0;color:#a9c8ff;font-size:12px}
.mvz-identity{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:9px 18px;border-bottom:1px solid #d8e0ec;background:#fff}
.mvz-identity h2{margin:0;flex:0 0 auto;font-size:14px;color:var(--navy)}
.mvz-mode-toggle{display:flex;gap:3px;background:#eef2fa;border-radius:8px;padding:3px;flex:0 0 auto}
.mvz-mode-btn{border:0;border-radius:6px;padding:6px 9px;font-size:11px;font-weight:800;color:var(--ink);background:transparent;cursor:pointer}
.mvz-mode-btn.activo{background:var(--gold);color:var(--navy)}
.mvz-selector{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:700;white-space:nowrap;flex:0 1 auto;max-width:100%}
.mvz-selector[hidden]{display:none}
.mvz-selector select{flex:0 1 auto;min-width:0;width:auto;max-width:100%;padding:5px 7px;border:1px solid #bbc9dd;border-radius:6px;background:#fff;color:var(--navy);font:inherit;text-overflow:ellipsis}
.mvz-layout{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:16px;padding:12px}
.records-panel{order:1;flex:0 1 220px;min-width:0;display:flex;flex-direction:column;gap:10px}
.records-panel .identity-panel,.records-panel .records{margin:0;padding:12px 14px;border:1px solid #d5dce7;border-radius:10px;background:#fff}
.records-panel .records{flex:1;display:flex;flex-direction:column;min-height:0}
.records-panel h3{margin:0 0 8px;color:var(--navy);font-size:14px}
.mvz-fields-stack{display:flex;flex-direction:column;gap:7px}
.mvz-fields-stack label{display:block;font-size:12px;font-weight:700}
.mvz-fields-stack input{width:100%;margin-top:3px;padding:6px 8px;border:1px solid #bbc9dd;border-radius:6px;font:inherit}
.records-panel ol{margin:0;padding:0 0 0 18px;font-size:12px;line-height:1.7;color:var(--ink);overflow:auto;flex:1}
.records-panel li{margin:0 0 2px;overflow-wrap:anywhere}
.mvz-main{flex:1 1 300px;min-width:0;order:2}
.mvz-pregunta{min-height:44px;padding:10px 16px;margin-bottom:10px;border:1px solid #d5dce7;border-radius:10px;background:#fff;text-align:center;box-shadow:0 3px 7px rgba(16,36,74,.07);color:var(--navy);font-size:clamp(16px,2.2vw,22px);font-weight:800}
.mvz-canvas-wrap{border:5px solid var(--blue);border-radius:12px;background:#0b1a3a;box-shadow:inset 0 0 0 2px #133b90,0 4px 9px rgba(16,36,74,.2);padding:8px;display:flex;justify-content:center}
#mvz-canvas{width:100%;max-width:800px;height:auto;display:block;border-radius:6px}
.mvz-controles-tactiles{display:flex;justify-content:center;gap:6px;margin-top:8px}
.mvz-controles-tactiles button{border:1px solid #a9bad7;border-radius:7px;background:#fff;color:var(--navy);padding:8px 16px;font-size:16px;font-weight:800;cursor:pointer}
.mvz-controles-tactiles button:hover{filter:brightness(1.08)}
.mvz-sidebar{order:3;flex:0 1 220px;min-width:0;display:flex;flex-direction:column;gap:7px}
.mvz-stat{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:40px;padding:7px 10px;border:1px solid #cfd9e9;border-radius:8px;background:#fff;font-size:13px}
.mvz-stat span{font-weight:700;white-space:nowrap;flex:0 0 auto}
.mvz-stat strong{color:var(--blue);font-size:18px;white-space:nowrap}
.mvz-stat.mvz-stat-wrap strong{font-size:14px;text-align:right;white-space:normal;overflow-wrap:break-word;min-width:0}
.mvz-button{width:100%;padding:9px 10px;border:0;border-radius:8px;background:var(--blue);color:#fff;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.mvz-button:hover{filter:brightness(1.08)}
.mvz-button:disabled{cursor:not-allowed;opacity:.55}
.mvz-button.activo{background:var(--gold);color:var(--navy)}
.status{margin:0;padding:0 18px 9px;color:#5c6e89;font-size:11px}
.records-status{margin:0;padding:0 18px 9px;color:#55719a;font-size:11px;font-weight:700}
.feedback{min-height:16px;margin:0 18px 6px;color:#61708a;font-size:12px;font-weight:700}
.feedback.ok{color:var(--green)}
.feedback.error{color:var(--red)}
.summary{margin:0 12px 12px;padding:14px;border:2px solid var(--green);border-radius:10px;background:#effaf1;text-align:center}
.summary[hidden]{display:none}
.summary strong{display:block;margin:0 0 5px;color:var(--green)}
.summary p{margin:0 0 10px;font-size:13px}
.summary button{border:0;border-radius:8px;padding:8px 14px;background:var(--blue);color:#fff;font-size:12px;font-weight:800;cursor:pointer}
.mvz-footer{display:flex;justify-content:space-between;gap:8px;padding:9px 18px;color:#5c6e89;font-size:11px;border-top:1px solid #d8e0ec}
.mvz-footer strong{color:var(--navy)}
@media(max-width:1100px){
  .mvz-wrap{max-width:900px}
  .mvz-layout{padding:10px}
  .mvz-main{order:1;flex:1 1 100%}
  .records-panel{order:2;flex:1 1 100%;max-width:none;flex-direction:row;flex-wrap:wrap}
  .records-panel .identity-panel,.records-panel .records{flex:1 1 240px}
  .mvz-sidebar{order:3;flex:1 1 100%;display:grid;grid-template-columns:repeat(60,1fr);gap:6px}
  .mvz-sidebar .mvz-stat{grid-column:span 15}
  .mvz-sidebar .mvz-stat-wrap{grid-column:span 60}
  .mvz-sidebar .mvz-button{grid-column:span 20}
}
@media(max-width:800px){
  .mvz-identity{flex-direction:column;align-items:stretch}
  .mvz-footer{flex-direction:column}
}
.mvz-aviso-giro{display:none;margin:0;padding:18px 16px;border:2px solid var(--gold);border-radius:10px;background:#fff;color:var(--navy);text-align:center;font-size:15px;font-weight:800;line-height:1.3}
@media(max-width:699px){
  .mvz-aviso-giro{display:block}
  .mvz-pregunta,.mvz-canvas-wrap,.mvz-controles-tactiles,.mvz-main .feedback{display:none}
}
@media(max-width:560px){
  .mvz-head{padding:10px 12px}
  .mvz-title-block h1{font-size:19px}
  .mvz-wrap .subtitle{font-size:10px}
  .records-panel{flex-direction:column}
  .records-panel .identity-panel,.records-panel .records{flex:0 0 auto}
  .mvz-sidebar{grid-template-columns:repeat(2,1fr)}
  .mvz-sidebar .mvz-stat{grid-column:span 1}
  .mvz-sidebar .mvz-stat-wrap{grid-column:span 2}
  .mvz-sidebar .mvz-button{grid-column:span 1}
  .mvz-sidebar #mvz-btn-iniciar{grid-column:span 2}
  .mvz-controles-tactiles button{padding:8px 14px;font-size:14px}
}