/* ============================================================
   RealScan Pro — Sistema de Diseño de Lujo, Glassmorphism y HUD
   Desarrollado por Paco Iglesias • Escala 1:1 Calibrada
   ============================================================ */

:root {
  color-scheme: light dark;
  --brand-primary: #4f46e5;
  --brand-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%);
  --luxury-gold: #f59e0b;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  background-attachment: fixed;
}

/* Hoja A4 con iluminación ambiental y textura de papel */
.a4-sheet {
  aspect-ratio: 210 / 297;
  background: #ffffff;
  position: relative;
  box-shadow: 
    0 20px 40px -15px rgba(0,0,0,0.18),
    0 0 0 1px rgba(0,0,0,0.06),
    0 0 50px -10px rgba(79, 70, 229, 0.15);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.dark .a4-sheet {
  box-shadow: 
    0 25px 50px -12px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.1),
    0 0 60px -5px rgba(99, 102, 241, 0.25);
}

.a4-sheet:hover {
  box-shadow: 
    0 25px 50px -10px rgba(0,0,0,0.22),
    0 0 0 1px rgba(79, 70, 229, 0.3),
    0 0 60px -5px rgba(79, 70, 229, 0.25);
}

/* Glassmorphism Panel de Lujo */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.dark .glass-panel {
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Barra Flotante HUD Ergonómica */
.hud-bar {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 0 25px rgba(99, 102, 241, 0.3);
  border-radius: 9999px;
  padding: 0.4rem 0.75rem;
  max-width: calc(100vw - 1rem);
  width: max-content;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-bar:hover {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.6), 0 0 35px rgba(99, 102, 241, 0.5);
}

/* Dropzone interactivo con pulso */
.dropzone-active {
  border-color: #4f46e5 !important;
  background-color: #eef2ff !important;
  transform: scale(1.01);
}

.dark .dropzone-active {
  background-color: rgba(30,27,75,.65) !important;
}

/* ====== Botones y Selectores con Elevación y Relieve ====== */
.mode-btn, .format-btn, .photo-copies-btn, .pass-orient-btn {
  border: 2px solid rgb(226 232 240);
  background: #ffffff;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark .mode-btn, .dark .format-btn, .dark .photo-copies-btn, .dark .pass-orient-btn {
  border-color: rgb(51 65 85);
  background: rgba(30 41 59 / 0.85);
}

.mode-btn:hover:not(.is-active),
.format-btn:hover:not(.is-active),
.photo-copies-btn:hover:not(.is-active),
.pass-orient-btn:hover:not(.is-active) {
  border-color: rgb(199 210 254);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px -4px rgba(79, 70, 229, 0.1);
}

.dark .mode-btn:hover:not(.is-active),
.dark .format-btn:hover:not(.is-active),
.dark .photo-copies-btn:hover:not(.is-active),
.dark .pass-orient-btn:hover:not(.is-active) {
  border-color: rgb(99 102 241 / 0.6);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.4);
}

.mode-btn.is-active, .format-btn.is-active, .photo-copies-btn.is-active, .pass-orient-btn.is-active {
  border-color: rgb(79 70 229);
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.9) 0%, rgba(224, 231, 255, 0.6) 100%);
  box-shadow: 0 8px 20px -4px rgba(79, 70, 229, 0.25), 0 0 0 1px rgba(79, 70, 229, 0.2);
  transform: translateY(-1px);
}

.dark .mode-btn.is-active,
.dark .format-btn.is-active,
.dark .photo-copies-btn.is-active,
.dark .pass-orient-btn.is-active {
  border-color: rgb(129 140 248);
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.75) 0%, rgba(30, 27, 75, 0.85) 100%);
  box-shadow: 0 8px 25px -4px rgba(99, 102, 241, 0.4), 0 0 0 1px rgba(129, 140 248, 0.3);
  transform: translateY(-1px);
}

.mode-btn .active-badge,
.format-btn .active-badge { display: none; }
.mode-btn.is-active .active-badge,
.format-btn.is-active .active-badge { display: inline-block; }

.pass-orient-btn .orient-check { display: none; }
.pass-orient-btn.is-active .orient-check { display: inline-block; }

/* ====== Tabs de categoría ====== */
.cat-tab {
  color: rgb(71 85 105);
  transition: all 0.2s ease;
}
.dark .cat-tab { color: rgb(148 163 184); }
.cat-tab:hover { color: rgb(15 23 42); }
.dark .cat-tab:hover { color: #ffffff; }
.cat-tab.is-active {
  background: #ffffff;
  color: rgb(67 56 202);
  box-shadow: 0 4px 12px -2px rgba(79, 70, 229, 0.15), 0 1px 3px rgba(0,0,0,0.06);
}
.dark .cat-tab.is-active {
  background: rgb(51 65 85);
  color: rgb(199 210 254);
  box-shadow: 0 4px 12px -2px rgba(0,0,0,0.4);
}

/* ====== Unit toggle ====== */
.unit-btn { color: rgb(71 85 105); font-weight: 500; transition: all 0.15s ease; }
.dark .unit-btn { color: rgb(203 213 225); }
.unit-btn.is-active { background: rgb(79 70 229); color: #ffffff; font-weight: 700; box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35); }

/* ====== Estado activo de las tarjetas de títulos ====== */
.mode-btn.is-active .title-main,
.format-btn.is-active .title-main,
.photo-copies-btn.is-active .title-main { color: rgb(30 27 75); }
.dark .mode-btn.is-active .title-main,
.dark .format-btn.is-active .title-main,
.dark .photo-copies-btn.is-active .title-main { color: rgb(238 242 255); }

/* Focus visible de accesibilidad */
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

/* Settings modal tabs */
.settings-tab-btn {
  color: rgb(100 116 139);
  transition: all 0.15s ease;
}
.dark .settings-tab-btn { color: rgb(148 163 184); }
.settings-tab-btn.is-active {
  background: #ffffff;
  color: rgb(67 56 202);
  box-shadow: 0 2px 8px -1px rgba(79, 70, 229, 0.18);
}
.dark .settings-tab-btn.is-active {
  background: rgb(30 41 59);
  color: rgb(199 210 254);
}

/* Indicador de Calibración 100% Pulsante */
@keyframes glowPulse {
  0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.5)); }
  50% { opacity: 1; filter: drop-shadow(0 0 14px rgba(16, 185, 129, 0.9)); }
}
.calibration-pulse {
  animation: glowPulse 2.8s infinite ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.animate-shake {
  animation: shake 0.35s ease-in-out;
}

/* Modal lock */
body.modal-open { overflow: hidden; }

/* Botones de Modo Ajuste (Fit / Cover) */
.fit-mode-btn {
  transition: all 0.15s ease;
}
.fit-mode-btn.is-active {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4338ca !important;
  box-shadow: 0 1px 3px rgba(79, 70, 229, 0.35);
}
.dark .fit-mode-btn.is-active {
  background-color: #6366f1 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.45);
}

/* Slider de Zoom de Alta Precisión */
.zoom-slider {
  accent-color: #4f46e5;
  transition: opacity 0.15s ease;
}
.dark .zoom-slider {
  accent-color: #818cf8;
}
.zoom-slider:hover {
  filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.5));
}

/* Botón Regla Milimétrica */
.grid-btn.is-active {
  background-color: #e0e7ff !important;
  color: #4338ca !important;
  border-color: #818cf8 !important;
}
.dark .grid-btn.is-active {
  background-color: rgba(49, 46, 129, 0.7) !important;
  color: #c7d2fe !important;
  border-color: #6366f1 !important;
}

/* Botones de Selección de Papel (A4, Carta, Oficio, Legal) */
.paper-size-btn {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dark .paper-size-btn {
  background-color: rgba(30, 41, 59, 0.7);
  border-color: #334155;
  color: #cbd5e1;
}
.paper-size-btn:hover {
  border-color: #6366f1;
  transform: translateY(-1px);
}
.paper-size-btn.is-active {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(99, 102, 241, 0.08)) !important;
  border-color: #4f46e5 !important;
  color: #4338ca !important;
  box-shadow: 0 0 0 1.5px #4f46e5, 0 3px 6px rgba(79, 70, 229, 0.15);
}
.dark .paper-size-btn.is-active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(129, 140, 248, 0.12)) !important;
  border-color: #818cf8 !important;
  color: #e0e7ff !important;
  box-shadow: 0 0 0 1.5px #818cf8, 0 4px 10px rgba(99, 102, 241, 0.25);
}

/* ============================================================
   WORKSTATION LAYOUT & ERGONOMÍA (ETAPA 3)
   ============================================================ */

html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Contenedor de escenario amplio con fondo de estudio */
.stage-canvas-area {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  padding: 1.5rem 1rem;
  border-radius: 1.25rem;
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.05) 0%, rgba(241, 245, 249, 0.9) 100%);
  border: 1px solid rgba(226, 232, 240, 0.8);
  min-height: 520px;
  width: 100%;
  position: relative;
}

.dark .stage-canvas-area {
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.08) 0%, rgba(2, 6, 23, 0.75) 100%);
  border-color: rgba(51, 65, 85, 0.6);
}

/* Tamaño de la hoja en escritorio: amplia y nítida (>540px) */
@media (min-width: 1024px) {
  .a4-sheet {
    width: 560px !important;
    max-width: 580px !important;
    min-width: 540px !important;
  }
}

@media (max-width: 1023px) {
  .a4-sheet {
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* Escala dinámica del lienzo de previsualización (Stage Zoom) */
.stage-sheet-wrapper {
  transform-origin: top center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  justify-content: center;
  width: 100%;
}

.stage-sheet-wrapper[data-sheet-zoom="fit"] {
  transform: scale(1);
}
.stage-sheet-wrapper[data-sheet-zoom="75"] {
  transform: scale(0.75);
}
.stage-sheet-wrapper[data-sheet-zoom="100"] {
  transform: scale(1);
}
.stage-sheet-wrapper[data-sheet-zoom="125"] {
  transform: scale(1.25);
}

/* Botones de Intención Rápida */
.intent-card {
  border: 2px solid rgb(226, 232, 240);
  background: #ffffff;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.dark .intent-card {
  border-color: rgb(51, 65, 85);
  background: rgba(30, 41, 59, 0.7);
}
.intent-card:hover {
  border-color: rgb(199, 210, 254);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px -2px rgba(79, 70, 229, 0.12);
}
.dark .intent-card:hover {
  border-color: rgb(99, 102, 241, 0.6);
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.4);
}
.intent-card.is-active {
  border-color: rgb(79, 70, 229);
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.95) 0%, rgba(224, 231, 255, 0.7) 100%);
  box-shadow: 0 4px 14px -2px rgba(79, 70, 229, 0.25);
}
.dark .intent-card.is-active {
  border-color: rgb(129, 140, 248);
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.7) 0%, rgba(30, 27, 75, 0.8) 100%);
  box-shadow: 0 4px 18px -2px rgba(99, 102, 241, 0.35);
}

/* Stepper Móvil */
.mobile-step-tab {
  transition: all 0.2s ease;
  border-bottom: 2.5px solid transparent;
}
.mobile-step-tab.is-active {
  border-bottom-color: #4f46e5;
  color: #4f46e5;
  font-weight: 700;
}
.dark .mobile-step-tab.is-active {
  border-bottom-color: #818cf8;
  color: #818cf8;
}

@media (max-width: 1023px) {
  .mob-pane:not(.mob-pane-active) {
    display: none !important;
  }
}


/* Guides assist editing without contaminating exported images. */
@media print {.preview-only {display:none !important;}}
@media (max-width:1023px) {
 body[data-mobile-step="1"] .hud-bar, body[data-mobile-step="2"] .hud-bar {display:none;}
 header .app-version-label,header #appVersionHeader {display:none;}
 header button {min-height:32px;min-width:32px;}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}}