/* Studio · Correos. Same palette and controls as the document designer (studio.css); only the layout is its own. */
.studio-top>.studio-modes{width:auto;margin-right:0}
.studio-modes{display:inline-flex;border:1px solid #ced8d1;border-radius:10px;padding:3px;background:#fff;gap:3px;flex-shrink:0}
.studio-page .studio-modes button{border:0;min-height:32px;padding:6px 14px;border-radius:7px;background:transparent}
.studio-page .studio-modes button[aria-pressed=true]{background:#1e4c3e;color:#fff}
.studio-page .studio-modes button[aria-pressed=true]:hover:not(:disabled){background:#143d30}

.mail-kinds{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.studio-page .mail-kind{border-radius:20px;padding:7px 14px;min-height:34px}
.studio-page .mail-kind[aria-pressed=true]{background:#eef3ec;border-color:#286b57;color:#183a38}
.mail-loading,.mail-note{color:#64756d;font-size:13px;line-height:1.6}
.mail-note{margin:16px 0 0}
.mail-heading p{max-width:760px;color:#64756d;margin:0;line-height:1.6}
.mail-heading{padding-right:190px}

.mail-library{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.mail-card{display:flex;flex-direction:column;padding:22px;transition:border-color .2s,box-shadow .2s}
.mail-card h3{font-size:19px;margin:10px 0 8px;overflow-wrap:anywhere}
.mail-card.is-active{border-color:#286b57;box-shadow:0 0 0 1px #286b57 inset}
.mail-card.is-highlighted{box-shadow:0 0 0 3px #c8a565}
.mail-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mail-badge{background:#286b57;color:#fff;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;white-space:nowrap}
.studio-card p.mail-subject{font-size:13px;min-height:0;margin:0 0 16px;overflow-wrap:anywhere}
.mail-subject span,.mail-rendered-subject span{font-weight:700;color:#244637}
.mail-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.studio-card p.mail-card-logo{font-size:12px;min-height:0;margin:-8px 0 16px;color:#286b57;font-weight:600}
.mail-confirm{margin-top:auto;background:#fff5f4;border:1px solid #edcccc;border-radius:10px;padding:12px}
.studio-card .mail-confirm p{min-height:0;margin:0 0 10px;color:#6b3030;font-size:13px}
.mail-confirm button{margin:0 8px 0 0}

.mail-toolbar input{flex:1 1 220px;min-width:0}
.mail-meta{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;padding:12px 16px;background:#fff;border:1px solid #dae1d8;border-top:0}
.mail-meta label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#6c7d65}
.mail-subject-field{flex:1 1 360px;min-width:0}
.mail-subject-field input{width:100%}
.studio-page .mail-meta input[type=color],.studio-page .mail-block-body input[type=color]{width:56px;height:36px;padding:3px}
.mail-readonly{flex-basis:100%;margin:0;font-size:12px;color:#5b492b;background:#f4ead6;border-radius:8px;padding:8px 12px}

.mail-layout{display:grid;grid-template-columns:230px minmax(0,1fr) minmax(320px,.95fr);border:1px solid #dae1d8;border-top:0;border-radius:0 0 12px 12px;background:#fff;align-items:start}
.mail-layout h2{font-size:14px;margin:0}
.mail-palette,.mail-blocks,.mail-preview{padding:14px;min-width:0}
.mail-palette{border-right:1px solid #e0e6dd;position:sticky;top:0;max-height:100vh;overflow:auto}
.mail-palette h2{margin-top:6px}
.mail-palette h2+.mail-tip{margin-top:4px}
.mail-palette h3{font-size:10px;text-transform:uppercase;letter-spacing:1px;margin:14px 0 6px;color:#768573}
.mail-tip{font-size:11px;color:#788575;line-height:1.5;margin:6px 0 10px}
.studio-page .mail-palette-block{display:block;width:100%;text-align:left;margin-bottom:6px;font-weight:500;font-size:12px}
.mail-chip-hint:empty{display:none}
.mail-chip-hint{font-size:11px;color:#5b492b;background:#f4ead6;border-radius:6px;padding:6px 8px}
.mail-chips{display:flex;flex-wrap:wrap;gap:6px}
.studio-page .mail-chip{border-radius:16px;padding:4px 10px;min-height:28px;font-size:11px;font-weight:500;background:#eef3ec;border-color:#cfdcd2;cursor:grab}
.studio-page .mail-chip:active{cursor:grabbing}
[draggable=true]{-webkit-user-drag:element}

.mail-blocks{border-right:1px solid #e0e6dd}
.mail-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.mail-counter{font-size:11px;color:#788575}
.mail-block-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mail-block{border:1px solid #dce2da;border-radius:10px;background:#fbfcfa;position:relative}
.mail-block.is-dragging{opacity:.5}
.mail-block.drop-before::before,.mail-block.drop-after::after,.mail-dropzone.drop-before::before{content:"";position:absolute;left:0;right:0;height:3px;background:#286b57;border-radius:2px}
.mail-block.drop-before::before{top:-7px}
.mail-block.drop-after::after{bottom:-7px}
.mail-block-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #e6ebe4}
.mail-block-head strong{font-size:13px;flex:1;min-width:0}
.mail-handle{cursor:grab;color:#8a9a88;font-size:14px;letter-spacing:-2px;padding:2px 4px;user-select:none}
.mail-block-tools{display:flex;gap:4px}
.studio-page .mail-icon{min-height:28px;padding:2px 9px;font-size:13px}
.mail-block-body{padding:10px;display:grid;gap:8px}
.mail-block-body label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#6c7d65;min-width:0}
.mail-block-body :is(input:not([type=checkbox]):not([type=color]),select,textarea){width:100%;min-width:0}
.mail-block-body textarea{resize:vertical;min-height:70px;line-height:1.5}
.mail-block-body select[multiple]{padding:4px}
.mail-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end}
.mail-row>label:first-child{flex:1 1 160px}
.mail-block-body .mail-check{flex-direction:row;align-items:center;gap:8px;color:#244637}
.mail-check input{width:16px;height:16px;margin:0;accent-color:#286b57}
.mail-dropzone{position:relative;margin-top:10px;border:1px dashed #b9cebd;border-radius:10px;padding:14px;text-align:center;font-size:12px;color:#788575}
.mail-dropzone.drop-before{background:#eef3ec;border-color:#286b57}
.mail-dropzone.drop-before::before{display:none}
.mail-hints:empty{display:none}
.mail-hints{margin-top:12px;background:#f4ead6;border-radius:8px;padding:10px 14px;color:#5b492b;font-size:12px}
.mail-hints ul{margin:6px 0 0;padding-left:18px;line-height:1.6}

.mail-preview{position:sticky;top:0;display:flex;flex-direction:column;gap:6px;background:#f6f7f2;border-radius:0 0 12px 0}
.mail-preview .mail-tip{margin:0}
.studio-page .mail-toggle[aria-pressed=true]{background:#1e4c3e;color:#fff;border-color:#1e4c3e}
.mail-rendered-subject{font-size:13px;margin:0;overflow-wrap:anywhere}
.mail-rendered-subject:empty{display:none}
.mail-preview iframe{width:100%;height:min(70vh,720px);border:1px solid #d1d9ce;border-radius:6px;background:#fff}
.mail-plain{white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border:1px solid #d1d9ce;border-radius:6px;padding:14px;font-size:12px;line-height:1.6;max-height:70vh;overflow:auto;margin:0}
.mail-logo{margin-top:8px;border-top:1px solid #dce5de;padding-top:10px}
.mail-logo h3{font-size:13px;margin:0 0 4px}
.mail-logo img{display:block;max-width:120px;max-height:60px;object-fit:contain;background:#fff;border:1px solid #dce2da;border-radius:6px;padding:4px;margin:6px 0}
.mail-logo-actions{display:flex;gap:8px;flex-wrap:wrap}
.mail-preview .mail-logo-state{margin:0 0 8px;color:#6b5a2e}

@media(max-width:1250px){
 .mail-layout{grid-template-columns:210px minmax(0,1fr)}
 .mail-preview{grid-column:1/-1;position:static;border-top:1px solid #e0e6dd;border-radius:0 0 12px 12px}
 .mail-blocks{border-right:0}
}
@media(max-width:800px){
 .studio-modes{order:-1}
 .mail-heading{padding-right:0}
 .mail-layout{grid-template-columns:minmax(0,1fr)}
 .mail-palette{position:static;max-height:none;border-right:0;border-bottom:1px solid #e0e6dd}
 .mail-palette-blocks,.studio-page .mail-palette-block{display:inline-block;width:auto;margin:0 6px 6px 0}
 .mail-toolbar input{flex-basis:100%}
 .mail-preview iframe{height:60vh}
 .mail-library{grid-template-columns:minmax(0,1fr)}
 .mail-meta{padding:10px}
}