.odsg-sg { --sg-green: var(--ui-green); --sg-dark: var(--ui-forest); --sg-paper: #faf9f5; --sg-border: var(--ui-border); box-sizing: border-box; min-width: 0; max-width: none; width: 100%; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; color: #2e3430; font: 16px/1.6 "ODSG Public Sans", system-ui, sans-serif; text-align: left; }
.odsg-sg *, .odsg-sg *::before, .odsg-sg *::after { box-sizing: border-box; }
.odsg-sg [hidden] { display: none !important; }
.odsg-sg :is(h2,h3,p,fieldset,legend) { margin: 0; padding: 0; border: 0; font-family: inherit; color: inherit; }
.odsg-sg fieldset { min-width: 0; }
.odsg-sg legend, .odsg-sg h3 { float: none; width: auto; font: 700 20px/1.3 "ODSG Archivo", sans-serif; margin-bottom: 16px; color: #161a17; }
.odsg-sg .sg-template-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-bottom: 28px; }
.odsg-sg .sg-template { position: relative; min-width: 0; margin: 0; cursor: pointer; }
.odsg-sg .sg-template-content { display: grid; height: 100%; grid-template-columns: 54px minmax(0,1fr); grid-template-rows: auto 1fr auto; gap: 4px 10px; padding: 12px; border: 1px solid var(--sg-border); background: white; border-radius: var(--ui-card-radius); }
.odsg-sg .sg-template-content strong { font-size: 14px; line-height: 1.3; color: #161a17; }
.odsg-sg .sg-template-description { font-size: 14px; line-height: 1.45; color: #5f6862; }
.odsg-sg .sg-selected { visibility: hidden; font-size: 14px; color: var(--sg-dark); font-weight: 700; grid-column: 2; }
.odsg-sg .sg-template input:checked + .sg-template-content { border-color: var(--sg-green); box-shadow: inset 0 0 0 1px var(--sg-green); background: var(--ui-selected); }
.odsg-sg .sg-template input:checked + .sg-template-content .sg-selected { visibility: visible; }
.odsg-sg .sg-template input:focus-visible + .sg-template-content { outline: 3px solid var(--ui-green); outline-offset: 3px; }
.odsg-sg .sg-thumbnail { display: block; position: relative; width: 54px; height: 68px; align-self: center; grid-row: 1 / 4; overflow: hidden; border: 1px solid #dcdfd8; pointer-events: none; }
.odsg-sg .sg-thumbnail > .sg-art { transform: scale(.05); transform-origin: top left; }
.odsg-sg .sg-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.odsg-sg .sg-controls { min-width: 0; }
.odsg-sg .sg-fields { display: grid; gap: 16px; }
.odsg-sg .sg-field { display: flex; flex-direction: column; gap: 5px; }
.odsg-sg label { font-size: 14px; font-weight: 600; }
.odsg-sg :is(.sg-input,.sg-photo-file) { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: var(--ui-control-height); margin: 0; border: 1px solid var(--ui-input-border); border-radius: var(--ui-input-radius); background: #fff; color: #161a17; padding: 12px; font: 400 16px/1.5 "ODSG Public Sans", system-ui, sans-serif; box-shadow: none; }
.odsg-sg textarea { resize: vertical; }
.odsg-sg .sg-counter { align-self: flex-end; font-size: 14px; color: var(--ui-muted); }
.odsg-sg .sg-photo-controls { margin-top: 24px; }
.odsg-sg .sg-photo-file { font-size: 14px; margin-top: 6px; }
.odsg-sg .sg-photo-file::file-selector-button { min-height: var(--ui-control-height); padding: 10px 14px; margin-right: 8px; border: 1px solid var(--sg-green); border-radius: var(--ui-action-radius); background: white; color: var(--sg-dark); font: inherit; cursor: pointer; }
.odsg-sg .sg-help { font-size: 14px; color: #5f6862; line-height: 1.6; margin: 10px 0; }
.odsg-sg .sg-zoom-label { display: flex; justify-content: space-between; margin-top: 16px; font-size: 14px; }
.odsg-sg .sg-zoom { display: block; width: 100%; height: 40px; margin: 0; accent-color: var(--sg-green); }
.odsg-sg .sg-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.odsg-sg .sg-button { display: inline-flex; min-height: var(--ui-control-height); justify-content: center; align-items: center; border: 1px solid var(--sg-green); border-radius: var(--ui-action-radius); padding: 11px 18px; margin: 0; background: var(--sg-green); color: #fff; font: 600 15px/1.4 "ODSG Public Sans", system-ui, sans-serif; text-decoration: none; letter-spacing: normal; text-transform: none; box-shadow: none; cursor: pointer; }
.odsg-sg .sg-button:hover { background: var(--ui-hover); color: #fff; }
.odsg-sg .sg-button.sg-quiet { color: var(--sg-dark); background: transparent; }
.odsg-sg .sg-button.sg-quiet:hover { background: var(--ui-sage); }
.odsg-sg :is(button,input):disabled { opacity: .5; cursor: not-allowed; }
.odsg-sg :is(button,input,textarea,select,a):focus-visible { outline: 3px solid var(--ui-green); outline-offset: 3px; }
.odsg-sg .sg-output { position: sticky; top: 25px; min-width: 0; }
.odsg-sg .sg-preview-panel { min-width: 0; padding: 18px; border: 1px solid var(--sg-border); border-radius: var(--ui-card-radius); background: white; }
.odsg-sg .sg-preview-shell { position: relative; overflow: hidden; width: 100%; background: var(--ui-sage); }
.odsg-sg .sg-preview-scale { width: 1080px; transform-origin: top left; }
.odsg-sg .sg-message { margin: 12px 0; padding: 10px 12px; background: var(--ui-selected); border: 1px solid #a8c9b1; color: var(--sg-dark); font-size: 14px; line-height: 1.5; border-radius: var(--ui-input-radius); overflow-wrap: anywhere; }
.odsg-sg .sg-message[data-tone="error"] { color: #a62d15; border-color: #a62d15; background: #fff5f1; }
.odsg-sg .sg-make-another { display: block; min-height: var(--ui-control-height); padding: 10px 16px; margin: 8px auto 0; background: none; border: 0; color: #5f6862; font: inherit; font-size: 14px; text-decoration: underline; box-shadow: none; cursor: pointer; }
.odsg-sg .sg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.odsg-sg.sg-compact .sg-layout { display: block; }
.odsg-sg.sg-compact .sg-output { position: static; }
.odsg-sg.sg-compact .sg-preview-panel { position: static; margin-top: 24px; }
.odsg-sg.sg-narrow .sg-preview-panel { padding: 12px; }

.odsg-sg .sg-formats { margin-bottom: 16px; }

.odsg-sg .sg-download-section { margin-top: var(--ui-section-gap); padding-top: var(--ui-section-gap); border-top: 1px solid var(--ui-border); min-width: 0; }
.odsg-sg .sg-actions { width: 100%; max-width: 420px; margin: 0 auto; }
.odsg-sg .sg-download { width: 100%; min-height: var(--ui-control-height); white-space: normal; }