@font-face {
  font-family: "Malvinas Argentinas 26";
  src: url("assets/MalvinasArgentinas26-Regular.woff2?v=0.31") format("woff2"), url("assets/MalvinasArgentinas26-Regular.ttf?v=0.31") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: dark;
  --ink: #071c35;
  --paper: #f7fbff;
  --cream: #d9ecfa;
  --muted: #a8c5dc;
  --line: rgba(198, 225, 244, .24);
  --hot: #f6c445;
  --sky: #75aadb;
  --navy: #0d426c;
  --radius: 3px;
  --preview-dock-height: 14rem;
  font-family: Georgia, "Times New Roman", serif;
  background: var(--ink);
  color: var(--paper);
}

* { box-sizing: border-box; }

body { min-width: 320px; margin: 0; overflow: hidden; background: var(--ink); }

button, textarea, select, input { font: inherit; }

button { cursor: pointer; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { height: 100dvh; display: grid; grid-template-columns: minmax(19rem, 25rem) minmax(0, 1fr); overflow: hidden; }

.controls { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; height: 100dvh; border-right: 1px solid var(--line); background: var(--ink); overflow: hidden; }

.controls-scroll { min-height: 0; padding: clamp(1.35rem, 3vw, 3rem); overflow-y: auto; overscroll-behavior: contain; }

.brand { padding-bottom: 2rem; border-bottom: 1px solid var(--line); }

.eyebrow { margin: 0 0 .45rem; color: var(--hot); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }

h1, h2, p { margin-top: 0; }

.brand h1 { margin-bottom: .7rem; color: var(--paper); font-family: "Malvinas Argentinas 26", sans-serif; font-size: clamp(2.65rem, 4.8vw, 4.5rem); line-height: .78; letter-spacing: .04em; }

.brand-note { max-width: 38ch; margin-bottom: 0; color: var(--muted); font-size: .93rem; line-height: 1.35; }

.control-group { padding: 1.35rem 0; border-bottom: 1px solid var(--line); }

.section-heading { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .8rem; }

.section-heading span { color: var(--hot); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; }

.section-heading h2 { margin: 0; color: var(--paper); font-size: 1.05rem; font-weight: 400; }

textarea, select, input[type="number"] { width: 100%; border: 1px solid rgba(217, 236, 250, .42); border-radius: var(--radius); background: transparent; color: var(--paper); }

textarea { min-height: 5.55rem; height: 5.55rem; padding: .6rem .7rem; resize: vertical; font-family: "Malvinas Argentinas 26", sans-serif; font-size: 1.1rem; line-height: .9; letter-spacing: .02em; }

.message-editor { display: grid; grid-template-columns: minmax(0, 1fr) 5.8rem; gap: .65rem; align-items: stretch; }

.effect-picker { display: grid; grid-template-rows: 1fr 1fr; gap: .4rem; }

.effect-picker input { position: absolute; opacity: 0; pointer-events: none; }

.effect-picker label { display: grid; min-height: 0; place-items: center; padding: .4rem; border: 1px solid rgba(217, 236, 250, .42); border-radius: var(--radius); color: var(--muted); font-size: .72rem; text-align: center; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }

.effect-picker input:checked + label { border-color: var(--paper); background: var(--paper); color: var(--ink); font-weight: 700; }

textarea:focus, select:focus, input:focus-visible, button:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }

.microcopy, .export-note, .status { margin: .55rem 0 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .67rem; line-height: 1.5; }

.select-wrap { display: grid; gap: .42rem; color: var(--cream); font-size: .8rem; }

select { padding: .7rem 2rem .7rem .75rem; appearance: auto; color-scheme: dark; }

.size-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: .55rem; margin-top: .75rem; color: var(--cream); }

.size-pair[hidden] { display: none; }

.size-pair label { display: grid; gap: .35rem; font-size: .72rem; }

.size-pair input { padding: .6rem; }

.size-pair > span { padding-bottom: .65rem; color: var(--muted); }

.color-pair { display: grid; grid-template-columns: repeat(2, max-content); gap: 1.15rem; margin-top: .8rem; }

.color-pair label { display: grid; grid-template-columns: max-content 2rem; align-items: center; gap: .45rem; color: var(--cream); font-size: .78rem; }

.color-pair input { width: 2rem; height: 1.75rem; padding: 0; border: 0; border-radius: 2px; background: transparent; cursor: pointer; }

.range-wrap { display: grid; gap: .45rem; margin-top: .95rem; color: var(--cream); font-size: .78rem; }

.range-wrap[hidden] { display: none; }

.range-wrap span { display: flex; justify-content: space-between; }

output { color: var(--hot); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; }

input[type="range"] { width: 100%; accent-color: var(--hot); }

.site-footer { padding: 1.45rem 0 .4rem; color: var(--muted); }

.site-footer .eyebrow { margin-bottom: .35rem; }

.site-footer h2 { margin: 0 0 .8rem; color: var(--paper); font-size: 1.02rem; font-weight: 400; }

.font-downloads { display: flex; flex-wrap: wrap; gap: .45rem; }

.font-download { display: inline-flex; align-items: center; min-height: 2.15rem; padding: .4rem .6rem; border: 1px solid rgba(217, 236, 250, .42); border-radius: var(--radius); color: var(--paper); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; transition: border-color .18s ease, background .18s ease, color .18s ease; }

.font-download:hover { border-color: var(--hot); background: var(--hot); color: var(--ink); }

.font-origin, .site-credit { margin: .85rem 0 0; font-size: .75rem; line-height: 1.45; }

.site-credit { padding-top: .85rem; border-top: 1px solid var(--line); color: var(--cream); }

.site-footer a:not(.font-download) { color: var(--hot); text-decoration-color: rgba(246, 196, 69, .55); text-underline-offset: .16em; }

.site-footer a:not(.font-download):hover { color: var(--paper); }

.actions { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; padding: .85rem clamp(1.35rem, 3vw, 3rem) calc(.85rem + env(safe-area-inset-bottom)); }

.button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.65rem; margin: 0; padding: .35rem .25rem; border: 1px solid var(--hot); border-radius: var(--radius); background: var(--hot); color: var(--ink); font-size: .72rem; font-weight: 700; line-height: 1.1; transition: transform .18s ease, background .18s ease, color .18s ease; }

.button:hover { border-color: var(--paper); background: #ffd760; transform: translateY(-1px); }

.button[disabled] { cursor: wait; opacity: .55; transform: none; }

.button-icon { width: 1.18rem; height: 1.18rem; margin-right: .34rem; object-fit: contain; }

.actions .export-note, .actions .status { grid-column: 1 / -1; margin: 0; }

.actions .export-note { padding-top: .12rem; }

.status { min-height: 1.5rem; color: var(--cream); }

.workbench { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.25rem; height: 100dvh; min-height: 0; padding: clamp(1.35rem, 3.5vw, 3.5rem); overflow: hidden; background: var(--navy); }

.workbench::before { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("assets/malvinas-contour.png"), linear-gradient(rgba(217, 236, 250, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 236, 250, .075) 1px, transparent 1px); background-position: center 52%, 0 0, 0 0; background-repeat: no-repeat, repeat, repeat; background-size: min(74vw, 60rem) auto, 2.2rem 2.2rem, 2.2rem 2.2rem; opacity: .48; content: ""; }

.workbench-header, .poster-stage, .privacy-note { position: relative; z-index: 1; }

.workbench-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }

.workbench-header h2 { margin: 0; color: var(--paper); font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 400; }

.preview-meta { display: flex; align-items: center; gap: .7rem; }

.preview-meta > p { margin: 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }

.preview-toggle { display: none; border: 0; background: transparent; color: var(--paper); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; }

.preview-toggle b { margin-left: .3rem; color: var(--hot); font-size: .9rem; }

.poster-stage { display: grid; min-height: 0; place-items: center; padding: clamp(.3rem, 2vw, 1.75rem); overflow: hidden; border: 1px solid var(--line); background: rgba(4, 28, 54, .28); }

canvas { display: block; max-width: 100%; max-height: min(72dvh, 48rem); width: auto; height: auto; box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, .36); }

.canvas-loading { position: absolute; color: var(--paper); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }

.canvas-loading[hidden] { display: none; }

.privacy-note { margin: 0; color: var(--muted); font-size: .76rem; }

.privacy-note span { color: var(--sky); font-size: .62rem; vertical-align: 1px; }

@media (max-width: 820px) {
  body { overflow: auto; }
  .app-shell { display: block; height: auto; min-height: 100dvh; overflow: visible; }
  .controls { display: block; height: auto; min-height: 100dvh; border-right: 0; border-bottom: 0; overflow: visible; }
  .controls-scroll { padding: clamp(1.35rem, 3vw, 3rem); padding-bottom: calc(var(--preview-dock-height) + 7rem + env(safe-area-inset-bottom)); overflow: visible; scroll-padding-bottom: calc(var(--preview-dock-height) + 7rem + env(safe-area-inset-bottom)); }
  .actions { position: fixed; right: .75rem; bottom: calc(var(--preview-dock-height) + 1rem + env(safe-area-inset-bottom)); left: .75rem; z-index: 25; padding: .55rem 0; }
  .actions .button { min-height: 2.45rem; font-size: .69rem; }
  .actions .export-note { display: none; }
  .actions .status { min-height: 1rem; font-size: .6rem; line-height: 1.25; text-align: center; }
  .workbench { position: fixed; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); left: .75rem; z-index: 20; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0; height: auto; min-height: 0; padding: 0; overflow: hidden; border: 1px solid rgba(217, 236, 250, .34); box-shadow: 0 1.15rem 3rem rgba(0, 0, 0, .42); background: rgba(8, 48, 81, .97); backdrop-filter: blur(14px); transition: inset .28s ease, height .28s ease, border-radius .28s ease; }
  .workbench::before { background-size: min(116vw, 32rem) auto, 1.7rem 1.7rem, 1.7rem 1.7rem; opacity: .36; }
  .workbench-header { align-items: center; min-height: 2.75rem; padding: .62rem .75rem; border-bottom: 1px solid var(--line); }
  .workbench-header .eyebrow { display: none; }
  .workbench-header h2 { font-size: 1rem; }
  .preview-meta { gap: .55rem; }
  .preview-meta > p { font-size: .62rem; }
  .preview-toggle { display: inline-flex; align-items: center; padding: .25rem; }
  .poster-stage { height: clamp(8.75rem, 35vw, 12rem); padding: .35rem; border: 0; background: rgba(4, 28, 54, .36); }
  .poster-stage canvas { width: auto; height: 100%; max-width: 100%; max-height: none; box-shadow: 0 .55rem 1.4rem rgba(0, 0, 0, .34); }
  .privacy-note { display: none; }
  .workbench.is-expanded { top: max(.65rem, env(safe-area-inset-top)); bottom: max(.65rem, env(safe-area-inset-bottom)); height: auto; border-radius: var(--radius); }
  .workbench.is-expanded .workbench-header { min-height: 3.5rem; padding: .8rem 1rem; }
  .workbench.is-expanded .workbench-header .eyebrow { display: block; margin-bottom: .18rem; font-size: .58rem; }
  .workbench.is-expanded .workbench-header h2 { font-size: 1.3rem; }
  .workbench.is-expanded .poster-stage { height: auto; min-height: 0; padding: .75rem; }
  .workbench.is-expanded .poster-stage canvas { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 7rem); }
  .workbench.is-expanded .privacy-note { position: absolute; right: 1rem; bottom: .75rem; left: 1rem; display: block; margin: 0; padding: .55rem .65rem; border: 1px solid var(--line); background: rgba(7, 28, 53, .78); font-size: .68rem; }
  body.preview-expanded { --expanded-actions-space: 4.75rem; overflow: hidden; }
  body.preview-expanded .actions { bottom: max(.65rem, env(safe-area-inset-bottom)); }
  body.preview-expanded .workbench.is-expanded { bottom: calc(var(--expanded-actions-space) + env(safe-area-inset-bottom)); }

  /* Mientras se edita el mensaje, la app mide el viewport visible y reserva
     este espacio para que la bandera quede completa, arriba del teclado. */
  body.message-editing .actions { display: none; }
  body.message-editing .workbench {
    top: var(--message-preview-top, 14rem);
    bottom: calc(var(--keyboard-inset, 0px) + .5rem + env(safe-area-inset-bottom));
    height: auto;
    border-radius: var(--radius);
  }
  body.message-editing .workbench-header { min-height: 2.25rem; padding: .4rem .65rem; }
  body.message-editing .workbench-header h2 { font-size: .9rem; }
  body.message-editing .preview-meta > p { font-size: .58rem; }
  body.message-editing .preview-toggle { display: none; }
  body.message-editing .poster-stage { height: auto; min-height: 0; padding: .3rem; }
}

@media (max-width: 480px) {
  .controls-scroll { padding: 1.15rem; padding-bottom: calc(var(--preview-dock-height) + 7rem + env(safe-area-inset-bottom)); }
  .workbench { padding: 0; }
  .brand { padding-bottom: 1.55rem; }
  .brand h1 { font-size: 3.1rem; }
  .color-pair { gap: .35rem; }
  .message-editor { grid-template-columns: minmax(0, 1fr) 5.1rem; gap: .5rem; }
  .effect-picker label { font-size: .67rem; }
  .actions { right: .5rem; bottom: calc(var(--preview-dock-height) + .8rem + env(safe-area-inset-bottom)); left: .5rem; gap: .32rem; padding: .45rem; }
  .actions .button { min-height: 2.3rem; font-size: .62rem; }
  .button-icon { width: 1rem; height: 1rem; margin-right: .24rem; }
  body.preview-expanded { --expanded-actions-space: 4.15rem; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }