/* Estilos específicos para el componente App */
.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Elimina fondo azul y recuadros detrás del canvas */
body, html, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff; /* Fondo blanco puro */
}

.App-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.app-header {
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* =========================
   Login Page / Loading
   ========================= */
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.login-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 500px;
  width: 100%;
}

.login-title { margin-bottom: 1rem; color: #333; font-size: 2rem; font-weight: bold; }
.login-text { margin-bottom: 2rem; color: #666; font-size: 1.1rem; }

.button-row { display: flex; gap: 1rem; justify-content: center; margin-bottom: 2rem; }

.btn { cursor: pointer; font-weight: 600; border-radius: 8px; padding: 0.75rem 1.5rem; font-size: 1rem; border: none; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(102, 126, 234, .35); }
.btn-secondary { background: transparent; color: #667eea; border: 2px solid #667eea; }
.btn-secondary:hover { background: rgba(102,126,234,.08); }

.login-hint { font-size: .9rem; color: #888; border-top: 1px solid #eee; padding-top: 1rem; }

/* Loading Screen */
.loading-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.loading-card { background: #fff; padding: 2rem; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.1); text-align: center; }
.spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #667eea; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Header buttons */
.header-actions button { margin-left: 16px; padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; color: #fff; }
.btn-admin { background: #007bff; }
.btn-profile { background: #7c3aed; }
.btn-logout { background: #dc3545; }

/* =========================
   CANVAS TARJETA REALISTA - ESTILO PROFESIONAL
   ========================= */

/* Área del canvas con fondo profesional */
.canvas-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  padding: 2rem;
  overflow: hidden;
  position: relative;
  min-height: 500px;
}

/* Paneles laterales - OPTIMIZADOS PARA ANCHO REDUCIDO */
.sidebar-left {
  flex-shrink: 0;
  width: 192px;
  background-color: #ffffff;
  border-right: 1px solid #d1d5db;
  overflow-y: auto;
}

.sidebar-right {
  flex-shrink: 0;
  width: 288px;
  background-color: #ffffff;
  border-left: 1px solid #d1d5db;
  overflow-y: auto;
  padding: 1rem;
}

/* Contenedor principal con marco elegante */
.canvas-wrapper { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; position: relative; background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; border: none !important; backdrop-filter: none !important; transition: none !important; }

/* Elimina pseudo-elementos, sombra y fondo en canvas-wrapper, canvas-container, canvas-area */
.canvas-wrapper::before,
.canvas-wrapper::after,
.canvas-container::before,
.canvas-container::after,
.canvas-area::before,
.canvas-area::after { display: none !important; content: none !important; background: none !important; box-shadow: none !important; border: none !important; }

.canvas-wrapper,
.canvas-container,
.canvas-area { background: none !important; box-shadow: none !important; border: none !important; }

/* Canvas container - La tarjeta real */
.canvas-container { position: relative; border-radius: 40px; background: none !important; box-shadow: none !important; border: none !important; overflow: visible; }

/* CORRECCIÓN: Asegurar que solo el canvas visible esté en el DOM flow */
.canvas-instance-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.2s ease-in-out; }
.canvas-instance-wrapper.visible { opacity: 1; visibility: visible; z-index: 10; pointer-events: auto; }
.canvas-instance-wrapper.hidden { opacity: 0; visibility: hidden; z-index: 1; pointer-events: none; }

/* Forzar visibilidad del canvas activo */
.canvas-instance-wrapper.visible .canvas-component-container { display: flex !important; opacity: 1 !important; z-index: 100 !important; }
.canvas-instance-wrapper.visible .canvas-component-container canvas { display: block !important; opacity: 1 !important; visibility: visible !important; }

/* Overlay de transición: solo visible cuando está activo */
.canvas-transition-overlay { pointer-events: none !important; opacity: 0 !important; z-index: 1 !important; transition: opacity 0.2s ease; }
.canvas-transition-overlay.active { opacity: 1 !important; z-index: 20 !important; pointer-events: auto !important; }

/* Canvas fondo blanco y no transparente */
.canvas-component-container,
.canvas-component-container canvas { background: #fff !important; opacity: 1 !important; }

/* Asegura que el canvas nunca esté tapado por overlays no activos */
.canvas-status-indicator { pointer-events: none !important; opacity: 0 !important; z-index: 1 !important; }
.canvas-status-indicator.show { opacity: 1 !important; z-index: 20 !important; pointer-events: auto !important; }

/* Responsive adjustments */
@media (max-width: 1200px) { .canvas-component-container { width: 646px; height: 406px; } }
@media (max-width: 900px) { .canvas-component-container { width: 480px; height: 302px; } }
@media (max-width: 600px) { .canvas-component-container { width: 320px; height: 202px; } }

.canvas-component-container.visible { opacity: 1 !important; pointer-events: auto !important; z-index: 100 !important; display: flex !important; }
.canvas-component-container.hidden { opacity: 0; pointer-events: none; z-index: 5; display: none !important; }
.canvas-component-container canvas { display: block !important; opacity: 1 !important; z-index: 101 !important; }

.card-designer-container { height: 100%; display: flex; flex-direction: column; }