/* =================================================================== */
/* Milhouse – main.css (ordenado, comentado y formateado en una línea) */
/* Estilo: .selector { prop: value; prop: value; }                     */
/* =================================================================== */

/* === Variables ========================================================= */
:root                                      { --color-content: #000000; --color-accent: #368CF5; --color-base: #E6D9CD; --spacing: 24px; --interface-height: 100px; --footer-height: calc(60px + (var(--spacing) * 2)); --font-size: 16px; }

/* === Reset & Base ========================================================= */
*                                          { margin: 0; padding: 0; box-sizing: border-box; }
h1, h2, h3, h4                             { font-family: 'Inter', sans-serif; font-size: var(--font-size); font-weight: normal; }
html, body                                 { height: 100dvh; overflow: hidden; }
body                                       { font-family: 'Inter', sans-serif; background-color: var(--color-base); color: var(--color-content); overflow-x: hidden; font-size: var(--font-size); }
section                                    { min-height: 100dvh; overflow: hidden; display: none; height: 100dvh; transition: opacity 0.3s ease; position: relative; padding: var(--interface-height) 0 70px; text-align: center; flex-direction: column; }
section.active                             { display: flex; }

/* === Layout & Structure ========================================================= */
.section-content                           { flex: 1 0 0; display: flex; flex-direction: column; gap: var(--spacing); }
.padding-h                                 { padding-left: var(--spacing); padding-right: var(--spacing); }

/* === Buttons ========================================================= */
.button                                    { display: flex; justify-content: center; align-items: center; gap: calc(var(--spacing) / 2); padding: 0 10px 0 24px; height: 60px; font-size: 18px; border: none; border-radius: 999px; cursor: pointer; transition: background 0.2s ease; }
.button .icon                              { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 100px; padding: 8px; background-color: var(--color-base); }
.button.black                              { background-color: var(--color-content); color: var(--color-base); }
.button.black:hover                        { opacity: 0.7; }
.button.blue                               { background-color: var(--color-accent); color: var(--color-base); }
.button.blue:hover                         { opacity: 0.7; }

/* === Navigation ========================================================= */
.nav-icon                                  { position: fixed; top: var(--spacing); background: none; border: none; cursor: pointer; z-index: 10; border-radius: 100px; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; }
.nav-icon svg                              { fill: var(--color-content); }
.nav-back                                  { left: var(--spacing); fill: var(--color-content); border: 1px solid; }
.nav-info                                  { right: var(--spacing); fill: var(--color-base); background-color: var(--color-content); }
.nav-info svg                              { fill: var(--color-base); }

/* === Drawing Tools ========================================================= */
#draw-tools                                { bottom: var(--spacing); left: 0; width: 100%; display: flex; justify-content: center; gap: 0.5rem; align-items: center; padding-bottom: var(--spacing); }
.tools                                     { background-color: var(--color-content); padding: 8px; border-radius: 8px; gap: 8px; display: flex; justify-content: center; }
.picker                                    { display: block; height: 35px; width: 35px; box-shadow: none; border: 8px solid var(--color-base); appearance: none; border-radius: 100px; }
.tool                                      { display: flex; justify-content: center; align-items: center; border: none; background: var(--color-base); border-radius: 100px; cursor: pointer; width: 35px; height: 35px; }
.tool:hover                                { opacity: 0.7; }
.tool.active                               { background: var(--color-accent); color: var(--color-base); }
.tool.disabled                             { background: var(--color-content); color: var(--color-content); cursor: not-allowed; pointer-events: none; }
.send                                      { display: flex; justify-content: center; align-items: center; border: none; background: var(--color-accent); border-radius: 100px; cursor: pointer; width: 51px; height: 51px; }
#custom-cursor                             { position: absolute; pointer-events: none; border-radius: 50%; border: 1px solid var(--color-content); z-index: 1000; display: none; transform: translate(-50%, -50%); }

/* === Preview Etiqueta ========================================================= */
#preview-etiqueta                          { flex: 1; margin: 0 auto; display: flex; justify-content: center; align-items: center; position: relative; }
#preview-etiqueta .label                   { position: absolute; width: 110%; left: -5%; top: 0; mix-blend-mode: multiply; }
#preview-etiqueta .preview-result          { position: relative; height: 100%; }
#preview-etiqueta img                      { width: auto; height: 100%; pointer-events: none; }
.label                                     { position: absolute; left: 0; top: 0; width: 100%; }

/* === Forms ========================================================= */
form                                       { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.8rem; max-width: 300px; align-items: center; width: 100%; margin: 0 auto; }

/* === Mockup ========================================================= */
#mockup-image                              { display: block; height: 30vh; margin: 0 auto; object-fit: cover; object-position: center; width: auto !important; }

/* === Sharing & Actions ========================================================= */
.share-buttons                             { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1rem; }
.share-buttons a                           { text-decoration: none; color: var(--color-content); padding: 0.6rem 1rem; border-radius: 999px; font-size: 0.9rem; transition: background 0.2s ease; border: 1px solid; }
.share-buttons a:hover                     { opacity: 0.7; }
.action-buttons                            { display: flex; justify-content: center; gap: 1rem; padding: var(--spacing) 0 var(--spacing); left: 0; width: 100%; }

/* === Gallery ========================================================= */
#gallery-list                              { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--spacing); margin-top: 2rem; }
.gallery-item                              { display: flex; flex-direction: column; align-items: center; text-align: center; }
.gallery-item img                          { max-width: 100%; border-radius: 8px; margin-bottom: 0.5rem; transform: scale(1.2); transform-origin: center; }
.gallery-item span                         { font-size: 0.85rem; color: var(--color-content); }
#gallery-sentinel                          { height: 1px; }
#gallery-loader                            { text-align: center; padding: 1rem; font-size: 0.9rem; color: var(--color-content); }
#gallery                                   { height: 100%; overflow-y: scroll; }
#loading-post                              { display: none; margin-top: 2rem; text-align: center; color: var(--color-content); font-size: 1rem; font-weight: 500; }
#loading-post .spinner                     { display: block; margin: 0 auto 1rem auto; }

/* === Etiqueta Stage ========================================================= */
#etiqueta-wrapper                          { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; overflow: hidden; min-height: 0; }
#etiqueta-container                        { margin: 0 auto; background-color: var(--color-base); border: 2px dashed var(--color-content); border-radius: 12px; width: auto; height: auto; max-width: 100%; box-sizing: border-box; position: relative; aspect-ratio: 3 / 4; max-height: 100%; }
#etiqueta-container canvas                 { display: block; width: 100% !important; height: 100% !important; }

/* === Landing ========================================================= */
#landing .logo                             { position: absolute; top: calc(var(--interface-height) + 4vh); width: 100vw; z-index: -1; }
#landing .logo img                         { height: auto; width: 100%; }

/* === Create ========================================================= */
#create .section-content                   { display: flex; flex-direction: column; gap: var(--spacing); }
#create .etiqueta-wrapper                  { flex: 1 0 0; position: relative; }

/* === Post — Preview altura primero (sin vh) ========================= */
/* Scopeado a #post para no interferir con el resto de secciones */
#post                                      { display: flex; flex-direction: column; }
#post .section-content                     { flex: 1 1 auto; min-height: 0; display: flex; grid-template-rows: auto 1fr auto; }
#post #preview-etiqueta                    { min-height: 0; display: grid; place-items: center; align-content: center; }
#post #preview-etiqueta .preview-result    { height: 100%; max-width: 100%; display: flex; place-items: center; overflow: hidden; line-height: 0; }
#post #preview-etiqueta .preview-result > img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* === Dummy Gallery ========================================================= */
.dummy-gallery                             { flex: 1 0 0; position: relative; overflow: hidden; width: 100%; display: flex; pointer-events: none; }
.dummy-gallery .dummy-track                { display: flex; align-items: center; gap: 40px; will-change: transform; }
.dummy-gallery .item                       { height: 100%; border-radius: 12px; overflow: hidden; }
.dummy-gallery .item img                   { display: block; height: 100%; width: auto; }

/* === Otros (revisar y recolocar si procede) ========================= */
input[type="text"], input[type="email"]    { padding: 6px 0; font-size: 1rem; border: none; background: transparent; border-bottom: 1px solid var(--color-content); border-radius: 0; width: 100%; }

/* === Post — Fix vertical overflow ultra-estricto ====================== */
/* 1) La zona del preview no puede desbordar nunca */
#post #preview-etiqueta {
  overflow: hidden;               /* recorte por si algo se escapa */
  display: grid;
  place-items: center;
}