/* ============================================================
   EDITOR.CSS
   Estilos exclusivos del editor visual (editor.html): pantalla de
   login, layout de paneles tipo Canva, y los estados de arrastre
   sobre la tarjeta. No afecta card.html / card.css del sitio
   público, que siguen intactos.
   ============================================================ */

* { box-sizing: border-box; }

.editor-body {
  margin: 0;
  font-family: 'Jost', sans-serif;
  background: #f3f1ec;
  color: #2a2822;
  min-height: 100vh;
}

/* ---------------- LOGIN ---------------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 10%, #fbf3e4 0%, transparent 45%),
    radial-gradient(ellipse at 85% 90%, #f3e8d2 0%, transparent 55%),
    #fdfbf6;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 24px 60px -24px rgba(110, 84, 38, 0.35), 0 0 0 1px rgba(201,161,92,0.12);
  padding: 40px 32px 32px;
  text-align: center;
}
.login-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3a3530;
}
.login-mark em { font-style: italic; text-transform: none; }
.login-sub {
  font-size: 12.5px;
  color: #8a7f6e;
  margin: 8px 0 28px;
}
.login-field {
  display: block;
  text-align: left;
  margin-bottom: 16px;
}
.login-field span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a7f6e;
  margin-bottom: 6px;
}
.login-field input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #e6ddc9;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fffdf8;
  color: #2a2822;
}
.login-field input:focus {
  outline: none;
  border-color: #c9a15c;
  box-shadow: 0 0 0 3px rgba(201,161,92,0.15);
}
.login-pass-wrap { position: relative; }
.login-pass-wrap input { padding-right: 42px; }
.login-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: #a89a7d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.login-eye:hover { background: #f3e8d2; color: #8a6e3d; }
.login-eye svg { width: 19px; height: 19px; }

.login-submit {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: none;
  border-radius: 6px;
  background: #8a6e3d;
  color: #fffdf8;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease;
}
.login-submit:hover { background: #6e5426; }
.login-submit:disabled { opacity: 0.6; cursor: default; }

.login-error {
  min-height: 18px;
  font-size: 12.5px;
  color: #b64e3f;
  margin: 12px 0 0;
}

/* ---------------- APP SHELL ---------------- */
.editor-app { min-height: 100vh; display: flex; flex-direction: column; }

.editor-topbar {
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  background: #fffdf8;
  border-bottom: 1px solid #e6ddc9;
}
.editor-topbar-left { display: flex; align-items: baseline; gap: 8px; }
.editor-logo { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: #3a3530; }
.editor-logo em { font-style: italic; }
.editor-logo-sub { font-size: 11px; color: #a8653f; letter-spacing: 0.06em; text-transform: uppercase; }

.editor-topbar-center { display: flex; align-items: center; gap: 10px; }
.editor-select, .editor-upload-btn {
  font-family: inherit;
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid #e6ddc9;
  background: #fff;
  color: #3a3530;
  cursor: pointer;
}
.editor-upload-btn { display: inline-flex; align-items: center; }
.editor-upload-btn:hover, .editor-select:hover { border-color: #c9a15c; }

.editor-topbar-right { display: flex; align-items: center; gap: 10px; }
.editor-user { font-size: 12px; color: #8a7f6e; }
.editor-btn-ghost, .editor-btn-primary {
  font-family: inherit;
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}
.editor-btn-ghost { background: transparent; border-color: #e6ddc9; color: #5c5346; }
.editor-btn-ghost:hover { border-color: #c9a15c; }
.editor-btn-primary { background: #8a6e3d; color: #fffdf8; font-weight: 500; }
.editor-btn-primary:hover { background: #6e5426; }

.editor-body-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr 300px;
  min-height: 0;
}

/* ---------------- PANELES LATERALES ---------------- */
.editor-panel {
  background: #fffdf8;
  border-right: 1px solid #e6ddc9;
  overflow-y: auto;
  padding: 16px;
}
.editor-panel-props { border-right: none; border-left: 1px solid #e6ddc9; }

.editor-panel-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8653f;
  margin: 0 0 6px;
}
.editor-panel-title-mt { margin-top: 22px; }
.editor-panel-hint { font-size: 11.5px; color: #a89a7d; margin: 0 0 12px; line-height: 1.4; }

.layer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #5c5346;
  cursor: pointer;
  border: 1px solid transparent;
}
.layer-item:hover { background: #fbf3e4; }
.layer-item.active { background: #f3e8d2; border-color: #c9a15c; color: #3a3530; font-weight: 500; }
.layer-item .layer-dot { width: 6px; height: 6px; border-radius: 50%; background: #c9a15c; flex: none; }

.editor-view-toggle { display: flex; gap: 4px; }
.editor-reset-btn { width: 100%; text-align: center; }
.view-toggle-btn {
  flex: 1;
  padding: 7px 4px;
  border-radius: 6px;
  border: 1px solid #e6ddc9;
  background: #fff;
  color: #8a7f6e;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.view-toggle-btn.active { background: #8a6e3d; color: #fffdf8; border-color: #8a6e3d; }

/* ---------------- CANVAS CENTRAL ---------------- */
.editor-canvas-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background:
    repeating-conic-gradient(#eae6db 0% 25%, #f3f1ec 0% 50%) 50% / 18px 18px;
  overflow: auto;
  padding: 20px;
}
.editor-stage-frame {
  position: relative;
  width: 300px;
  flex: none;
  box-shadow: 0 30px 70px -30px rgba(30,26,18,0.45);
  border-radius: 6px;
  overflow: hidden;
  background: #fdfbf6;
}
.editor-embedded-stage {
  position: relative !important;
  inset: auto !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: auto !important;
}
.editor-embedded-stage.reveal-scene { padding: 24px; }

.std-card.free-layout {
  width: 100%;
}

/* FIX: dentro del editor, .std-card debe llenar exactamente el
   ancho de su marco (.editor-stage-frame), no el `width: min(400px,
   90vw)` pensado para la página pública (card.css). Sin esto, en
   pantallas donde 90vw > 400px la tarjeta se renderiza a 400px reales
   mientras el marco visible solo mide 300px y recorta (overflow:
   hidden) todo lo que se sale — dando la impresión de una imagen
   "cortada" cuando en realidad es la tarjeta completa desbordándose
   fuera de vista. */
.editor-stage-frame .std-card {
  width: 100%;
  max-width: 100%;
}

.editable-el {
  cursor: grab;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s ease;
  user-select: none;
}
.editable-el:hover { outline-color: rgba(201,161,92,0.55); }
.editable-el.selected { outline: 2px solid #a8653f; outline-offset: 2px; }
.editable-el.dragging { cursor: grabbing; opacity: 0.92; z-index: 30; }

.editor-scratch-preview { pointer-events: none; }

.editor-canvas-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------------- PANEL DE PROPIEDADES ---------------- */
.prop-section { margin-bottom: 22px; }
.prop-section-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8653f;
  margin: 0 0 10px;
}
.prop-empty { font-size: 12.5px; color: #a89a7d; line-height: 1.5; }

.prop-field { margin-bottom: 12px; }
.prop-field label {
  display: block;
  font-size: 11px;
  color: #8a7f6e;
  margin-bottom: 5px;
}
.prop-field input[type="text"],
.prop-field input[type="number"],
.prop-field select,
.prop-field textarea {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid #e6ddc9;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  color: #2a2822;
}
.prop-field textarea { resize: vertical; min-height: 44px; }
.prop-field input:focus, .prop-field select:focus, .prop-field textarea:focus {
  outline: none; border-color: #c9a15c; box-shadow: 0 0 0 3px rgba(201,161,92,0.15);
}
.prop-row { display: flex; gap: 8px; }
.prop-row .prop-field { flex: 1; }

.prop-color-field { display: flex; align-items: center; gap: 8px; }
.prop-color-field input[type="color"] {
  width: 34px; height: 34px; border: 1px solid #e6ddc9; border-radius: 6px; padding: 2px; cursor: pointer; background: #fff;
}
.prop-color-field input[type="text"] { flex: 1; }

.prop-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.prop-swatch {
  aspect-ratio: 1; border-radius: 6px; border: 2px solid transparent; cursor: pointer; position: relative;
}
.prop-swatch.active { border-color: #3a3530; }
.prop-swatch span {
  position: absolute; inset: 3px; border-radius: 4px;
}

.prop-thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.prop-thumb {
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #f3f1ec;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.prop-thumb.active { border-color: #a8653f; }
.prop-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.prop-upload {
  display: block;
  text-align: center;
  font-size: 12px;
  padding: 9px;
  border: 1px dashed #d8c9a3;
  border-radius: 6px;
  color: #8a6e3d;
  cursor: pointer;
  background: #fbf3e4;
}
.prop-upload:hover { background: #f3e8d2; }

.prop-toggle-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.prop-toggle-row span { font-size: 12.5px; color: #5c5346; }
.prop-switch { position: relative; width: 38px; height: 22px; flex: none; }
.prop-switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; }
.prop-switch-track {
  position: absolute; inset: 0; background: #e6ddc9; border-radius: 20px; transition: background 0.2s ease;
}
.prop-switch-track::after {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform 0.2s ease;
}
.prop-switch input:checked ~ .prop-switch-track { background: #8a6e3d; }
.prop-switch input:checked ~ .prop-switch-track::after { transform: translateX(16px); }

.prop-note {
  font-size: 11.5px;
  color: #a89a7d;
  line-height: 1.5;
  margin-top: 4px;
}

@media (max-width: 980px) {
  .editor-body-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .editor-panel-layers { display: none; }
}