:root {
  --bg: #14121f;
  --deep: #050d1b;
  --card: #232036;
  --input: #302d46;
  --accent: #a78bfa;
  --orange: #ffa538;
  --muted: #a59eb9;
  --blue: #2a7eff;
  --green: #46dc78;
  --red: #ff4337;
  --text: #ffffff;
  --soft: #d2cde6;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
body { min-height: 100vh; overscroll-behavior: none; }
button, input, textarea, select { font: inherit; }
button, .btn, .selector, .picker { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.app-home { min-height: 100dvh; padding: calc(46px + env(safe-area-inset-top)) 22px calc(12px + env(safe-area-inset-bottom)); background: var(--deep) url('/assets/volta_home_bg.png') center/cover no-repeat; display: flex; flex-direction: column; align-items: stretch; }
.home-title { text-align: center; font-size: 46px; line-height: 1; font-weight: 800; color: var(--blue); text-shadow: 0 4px 12px #000; letter-spacing: .04em; }
.bolt-row { display: flex; align-items: center; gap: 12px; padding: 6px 58px 0; }
.bolt-row:before, .bolt-row:after { content: ""; height: 1px; flex: 1; background: #ffd200; }
.bolt { color: #ffd200; font-size: 25px; text-shadow: 0 3px 6px #000; }
.subtitle { margin-top: 4px; text-align: center; font-size: 18px; font-weight: 700; text-shadow: 0 2px 5px #000; }
.home-spacer { height: 115px; flex: 0 0 auto; }
.status-home { display:none; text-align:center; color:#ebeeff; font-size:13px; text-shadow:0 1px 4px #000; margin: 8px 0; }
.home-actions { display:flex; flex-direction:column; gap:10px; }
.btn3d { width:100%; min-height:68px; border: 1px solid rgba(255,255,255,.55); border-radius: 9px; color:white; text-align:left; padding: 0 20px 5px 30px; font-size:22px; font-weight:800; text-shadow:0 3px 4px rgba(0,0,0,.85); box-shadow: 0 7px 0 rgba(0,0,0,.9), 0 12px 18px rgba(0,0,0,.35); display:flex; align-items:center; gap:16px; transition: transform .08s, box-shadow .08s, filter .08s; cursor:pointer; }
.btn3d:active { transform: translateY(5px) scale(.99); box-shadow: 0 2px 0 rgba(0,0,0,.9), 0 5px 8px rgba(0,0,0,.35); }
.btn-purple { background: linear-gradient(#c6aaff, #aa58ff, #5217b2, #34105f); }
.btn-green { background: linear-gradient(#7bf29a, #2dd24c, #0d7626, #084817); }
.btn-red { background: linear-gradient(#ff8a80, #ff4337, #b91914, #70110d); }
.btn-orange { background: linear-gradient(#ffc064, #ff9b00, #dc6800, #8f4400); }
.btn-blue { background: linear-gradient(#5a9fff, #0a77ff, #0046b9, #00295f); }
.btn-cyan { background: linear-gradient(#6de8ff, #00a9d4, #005c96, #00344f); }
.btn-gray { background: linear-gradient(#b4b4c8, #7d7d96, #46465a, #282836); }
.btn-small { align-self:center; min-height:42px; width:230px; padding:0 12px 3px; justify-content:center; font-size:13px; margin-top:auto; }
.footer { margin-top: 12px; text-align:center; }
.footer-row { display:flex; align-items:center; gap:14px; margin-top:8px; }
.footer-row:before { content:""; flex:1; height:1px; background:#2080ff; }
.footer-row:after { content:""; flex:1; height:1px; background:#ffd200; }
.footer-volta { color:var(--blue); font-size:23px; font-weight:800; text-shadow:0 2px 6px #000; }
.footer-copy { font-size:16px; text-shadow:0 2px 5px #000; }
.version { opacity:.42; font-size:9px; margin-top:4px; }
.screen { min-height:100dvh; background:var(--bg); padding: calc(28px + env(safe-area-inset-top)) 28px calc(96px + env(safe-area-inset-bottom)); }
.header { display:flex; align-items:center; margin-bottom:14px; }
.logo-bolt { width:64px; min-width:64px; min-height:56px; display:grid; place-items:center; font-size:32px; color:#ffd200; background:#322754; }
.header-title { padding-left:18px; }
.header-title strong { display:block; color:#bea5ff; font-size:26px; }
.header-title span { color:#d3d3d3; font-size:13px; }
.kicker { color:var(--muted); font-size:11px; letter-spacing:.08em; margin-bottom:18px; }
.card { background:var(--card); padding:18px 22px; margin: 0 0 18px; border-radius:0; }
.card h2 { margin:0 0 14px; color:var(--orange); font-size:18px; }
label { display:block; margin: 12px 0 7px; color:#d8d2ee; font-size:14px; font-weight:600; }
input:not([type="radio"]):not([type="file"]), textarea, select, .selector, .picker { width:100%; min-height:44px; border:0; border-radius:6px; background:var(--input); color:white; padding:10px 12px; outline: none; }
textarea { min-height: 94px; resize: vertical; }
select { appearance:auto; }
.selector, .picker { display:flex; align-items:center; color:#b4aacd; }
.selector.has-value, .picker.has-value, .operario-select.has-value { color:white; }
.operario-select option { color:#111; background:#fff; }
.radio-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:flex-start; padding:4px 0 0; }
.radio-row label { display:flex; align-items:center; gap:7px; margin:0; color:white; min-width:70px; flex:0 1 auto; white-space:nowrap; }
input[type="radio"] { width:22px; height:22px; min-width:22px; min-height:22px; margin:0; padding:0; accent-color: var(--blue); flex:0 0 auto; }
.file-box { margin-top: 8px; }
.file-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.file-row button { background:var(--accent); color:#14121f; border:0; border-radius:6px; padding:10px 12px; font-weight:800; flex:1 1 145px; }
.file-help { color:#bdb6d2; font-size:12px; line-height:1.35; margin-top:7px; }
.file-count { color:#d2cde6; font-size:13px; margin-top:8px; }
.thumbs { display:flex; gap:12px; overflow-x:auto; padding:10px 0 2px; }
.thumb { position:relative; width:92px; min-width:92px; height:92px; background:#191726; overflow:hidden; display:grid; place-items:center; }
.thumb img, .thumb video { width:100%; height:100%; object-fit:cover; }
.thumb .fileicon { color:#c6b9ff; font-size:30px; }
.thumb .size { position:absolute; bottom:0; left:0; right:0; font-size:10px; text-align:center; background:rgba(0,0,0,.7); padding:3px 0; }
.thumb button { position:absolute; right:0; top:0; width:28px; height:28px; border:0; background:#be465a; color:white; font-size:18px; font-weight:800; }
.primary { width:100%; border:0; border-radius:6px; background:var(--accent); color:#14121f; font-weight:900; font-size:15px; padding:14px; margin: 2px 0 12px; }
.secondary { width:100%; border:0; border-radius:6px; background:#545466; color:white; font-weight:800; padding:12px; margin-bottom:12px; }
.status { min-height:22px; color:#d2cde6; font-size:13px; }
.inline-status { color:#fff; font-size:14px; text-align:center; text-shadow:0 1px 4px #000; margin: 8px 0; }
.modal { position:fixed; inset:0; background:var(--bg); z-index:50; display:flex; align-items:center; justify-content:center; padding:28px; }
.modal-card { width:100%; max-width:520px; text-align:center; }
.modal-title { font-size:23px; font-weight:800; margin-bottom:16px; }
.modal-title.ok { color:var(--green); }
.modal-title.err { color:#ff7878; }
.spinner { width:64px; height:64px; margin: 0 auto 18px; border: 6px solid rgba(255,255,255,.18); border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal-msg { color:#d2cde6; font-size:16px; margin-bottom:14px; line-height:1.35; }
.modal-warn { color:#ffe0b0; background:rgba(255,165,56,.12); border:1px solid rgba(255,165,56,.35); border-radius:8px; padding:10px; font-size:13px; line-height:1.35; margin: 0 0 14px; }
.modal-actions { display:flex; flex-direction:column; gap:10px; }
.modal-btn { display:none; width:100%; border:0; border-radius:6px; background:var(--green); color:#14121f; font-weight:900; padding:13px; }
.modal-retry { background:var(--accent); }
.modal-btn.show { display:block; }
.register-box { min-height:100dvh; background: var(--deep) url('/assets/volta_home_bg.png') center/cover no-repeat; padding: calc(52px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; justify-content:center; }
.register-card { background:rgba(20,18,31,.92); border:1px solid rgba(255,255,255,.13); padding:22px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.register-card h1 { margin:0 0 8px; color:#fff; }
.register-card p { color:#d3d3d3; font-size:14px; }
.notice { background:rgba(255,165,56,.12); border:1px solid rgba(255,165,56,.4); padding:10px; font-size:13px; margin:12px 0; color:#ffe0b0; }
.hidden { display:none !important; }
@media (max-width: 390px) {
  .home-title { font-size:40px; }
  .subtitle { font-size:16px; }
  .home-spacer { height:90px; }
  .btn3d { font-size:19px; padding-left:22px; min-height:64px; }
  .screen { padding-left:18px; padding-right:18px; }
  .card { padding-left:16px; padding-right:16px; }
}

.modal-wake{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#d9e8ff;
  font-weight:700;
  font-size:14px;
  line-height:1.25;
}
.modal-wake.wake-ok{
  background:rgba(0,180,90,.18);
  color:#d7ffe8;
}
.modal-wake.wake-warn{
  background:rgba(255,170,0,.18);
  color:#fff1c2;
}

.history-screen { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
.history-status { margin: 2px 0 10px; }
.history-list { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.history-card { background:rgba(35,32,54,.96); border:1px solid rgba(205,200,235,.35); border-radius:10px; padding:14px; box-shadow:0 5px 14px rgba(0,0,0,.28); }
.history-card-top { display:flex; gap:10px; justify-content:space-between; align-items:flex-start; color:#fff; margin-bottom:8px; }
.history-card-top strong { color:#ffc064; font-size:15px; }
.history-card-top span { color:#d9d5ea; font-size:13px; white-space:nowrap; }
.history-line { color:#f5f4fb; font-size:14px; line-height:1.35; margin:4px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.history-line b { color:#c9b8ff; }
.history-work { margin-top:8px; }


/* PWA Universal BETA v1: elementos de prueba sin alterar los estilos funcionales existentes */
.beta-banner{
  display:inline-block;
  align-self:center;
  margin-top:8px;
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.5px;
  background:rgba(0,0,0,.28);
  color:#fff;
}
.beta-notice{font-weight:700;}
.beta-kicker{letter-spacing:.6px;}
.beta-diag-btn{margin-top:6px;}
.diag-grid{display:grid;gap:0;border:1px solid rgba(255,255,255,.10);border-radius:10px;overflow:hidden;}
.diag-row{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:12px;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;line-height:1.35;}
.diag-row:last-child{border-bottom:0;}
.diag-row strong{opacity:.82;}
.diag-row span{overflow-wrap:anywhere;word-break:break-word;}
@media (max-width:420px){
  .diag-row{grid-template-columns:1fr;gap:3px;}
}

/* PWA Universal BETA v3: pantalla completa y distribución vertical equilibrada, sin scroll. */
.app-home-registered {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  padding-top: calc(clamp(12px, 2.2dvh, 28px) + env(safe-area-inset-top));
  padding-bottom: calc(clamp(6px, 1.2dvh, 12px) + env(safe-area-inset-bottom));
}
.app-home-registered .home-title {
  font-size: clamp(34px, 5.3dvh, 46px);
}
.app-home-registered .bolt-row {
  padding-top: 2px;
}
.app-home-registered .bolt {
  font-size: clamp(19px, 2.8dvh, 25px);
}
.app-home-registered .subtitle {
  margin-top: 1px;
  font-size: clamp(14px, 2.15dvh, 18px);
}
.app-home-registered .beta-banner {
  margin-top: clamp(3px, .7dvh, 7px);
  padding: 3px 9px;
  font-size: 9px;
}
.app-home-registered .home-spacer {
  height: auto;
  min-height: 8px;
  max-height: none;
  flex: 1 1 0;
}
.app-home-registered .home-bottom-spacer {
  min-height: 0;
  flex: 1 1 0;
}
.app-home-registered .status-home {
  margin: 2px 0;
  font-size: 11px;
}
.app-home-registered .home-actions {
  gap: clamp(6px, .9dvh, 9px);
}
.app-home-registered .home-actions .btn3d {
  min-height: clamp(50px, 7.2dvh, 64px);
  padding: 0 18px 4px 24px;
  font-size: clamp(17px, 2.65dvh, 21px);
  gap: 13px;
  box-shadow: 0 5px 0 rgba(0,0,0,.9), 0 9px 14px rgba(0,0,0,.32);
}
.app-home-registered > .btn-small {
  min-height: clamp(34px, 4.7dvh, 40px);
  width: min(230px, 68vw);
  margin-top: clamp(4px, .7dvh, 7px);
  padding-bottom: 2px;
  font-size: clamp(11px, 1.65dvh, 13px);
  box-shadow: 0 4px 0 rgba(0,0,0,.9), 0 7px 10px rgba(0,0,0,.28);
}
.app-home-registered .beta-diag-btn {
  margin-top: clamp(4px, .7dvh, 7px);
}
.app-home-registered .footer {
  margin-top: clamp(4px, .8dvh, 8px);
  flex: 0 0 auto;
}
.app-home-registered .footer-row {
  margin-top: 2px;
  gap: 10px;
}
.app-home-registered .footer-volta {
  font-size: clamp(18px, 2.7dvh, 23px);
}
.app-home-registered .footer-copy {
  font-size: clamp(12px, 1.9dvh, 16px);
  line-height: 1.1;
}
.app-home-registered .version {
  font-size: clamp(7px, 1.1dvh, 9px);
  margin-top: 2px;
  line-height: 1.05;
}

/* En pantallas particularmente bajas compactamos un poco más, sin cambiar la lógica. */
@media (max-height: 760px) {
  .app-home-registered .bolt-row { padding-left: 76px; padding-right: 76px; }
  .app-home-registered .home-spacer { min-height: 4px; max-height: none; flex: 1 1 0; }
  .app-home-registered .home-bottom-spacer { min-height: 0; flex: 1 1 0; }
  .app-home-registered .home-actions .btn3d { min-height: 48px; }
  .app-home-registered > .btn-small { min-height: 32px; }
  .app-home-registered .footer-row { margin-top: 0; }
}