body{margin:0;background:#20252c;font-family:Arial,sans-serif}.reference{color:#fff;text-align:center;padding:10px;font-size:14px}.device{width:1024px;margin:0 auto;box-shadow:0 0 0 1px #607080}button{cursor:pointer}
#dialogo-completo button.dialogue-cell{border:1px solid #8296ae;background:#f8fafc;border-radius:6px;padding:3px;gap:2px;overflow:hidden;color:#12283f;box-shadow:0 2px 3px #0004}
#dialogo-completo .caption{color:#12283f;text-shadow:none;width:100%;background:#f8fafc;font-weight:700}
#dialogo-completo .face,#dialogo-completo .charla .face{background:#fff;border-radius:3px}
#dialogo-completo .cells{gap:4px}


#dialogo-completo{--pic:96px;color:#e1e9f2;font:14px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif;background:radial-gradient(at 17% 2%,rgba(25,157,255,.38),transparent 31%),radial-gradient(at 79% -8%,rgba(53,221,255,.22),transparent 29%),radial-gradient(at 83% 94%,rgba(255,171,62,.16),transparent 31%),radial-gradient(at 15% 108%,rgba(16,99,226,.25),transparent 34%),linear-gradient(#071b3a,#04122b 45%,#020817);padding:24px;border-radius:16px;max-width:1024px;margin:auto}
#dialogo-completo *{box-sizing:border-box}
#dialogo-completo header{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-right:90px;min-height:58px;margin-bottom:12px}
#dialogo-completo h2{margin:0;font-size:24px;font-weight:700;letter-spacing:.3px}
#dialogo-completo button,#dialogo-completo select{font:600 12px/1.2 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#e1e9f2;background:#132b4a;border:1px solid #6a86a7;border-radius:10px;min-height:48px;padding:8px 12px}
#dialogo-completo button:focus-visible,#dialogo-completo select:focus-visible{outline:3px solid #8bdcff;outline-offset:3px}
#dialogo-completo button:disabled{opacity:.45}
#dialogo-completo .composer{display:grid;grid-template-columns:minmax(0,1fr) 80px 80px 80px;gap:8px;min-height:76px;padding:8px;background:linear-gradient(#1c3859,#112440);border:1px solid #57728f;border-radius:16px}
#dialogo-completo .phrase{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:60px;padding:3px 6px;overflow-wrap:anywhere}
#dialogo-completo .composer button{background:#f2f8fc;color:#102c50;font-size:11px;padding:5px}
#dialogo-completo .composer .speak{background:linear-gradient(#1666a8,#062e5d);border-color:#86d3ff;color:#fff}
#dialogo-completo .token{display:grid;justify-items:center;max-width:104px;text-align:center;font-size:11px}
#dialogo-completo .token img{width:40px;height:40px;object-fit:contain;background:white;border-radius:4px}
#dialogo-completo .status{font-size:12px;min-height:30px;padding:7px 0;color:#c1d0df;overflow-wrap:anywhere}
#dialogo-completo .columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#dialogo-completo section{min-width:0}
#dialogo-completo h3{font-size:13px;margin:3px 0 14px;text-align:center;font-weight:600;color:#c5d9eb}
#dialogo-completo .cells{display:grid;grid-template-columns:repeat(4,var(--pic));column-gap:12px;row-gap:18px;justify-content:center;align-content:start;min-height:278px;touch-action:pan-y}
#dialogo-completo button.dialogue-cell{width:var(--pic);height:130px;min-height:130px;padding:0;border:0;border-radius:0;background:transparent;color:#e1e9f2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;position:relative;font-size:12px;font-weight:600}
#dialogo-completo .dialogue-cell[hidden]{display:none}
#dialogo-completo .face{width:var(--pic);height:var(--pic);min-height:var(--pic);display:flex;align-items:center;justify-content:center;background:white;border-radius:5px;box-shadow:0 10px 24px #0005,0 0 0 1px #ffffff38;color:#111;overflow:hidden}
#dialogo-completo .face img{width:100%;height:100%;object-fit:contain}
#dialogo-completo .face.text-only{font-size:36px;font-weight:700}
#dialogo-completo .caption{display:block;width:100%;min-height:30px;max-height:30px;padding:0 2px;font-size:12px;line-height:14px;text-align:center;text-wrap:balance;white-space:normal;overflow-wrap:normal;text-shadow:0 2px 5px #000b}
#dialogo-completo .navigation .face::after{content:'↗';position:absolute;top:3px;right:4px;color:#102c50;background:#fff;border-radius:3px;padding:0 2px;font-size:15px}
#dialogo-completo .pager{display:flex;justify-content:center;align-items:center;gap:12px;margin:10px 0 0;height:48px}
#dialogo-completo .pager button{width:44px;height:44px;min-height:44px;border:2px solid #86d3ff;border-radius:50%;background:linear-gradient(#1666a8,#062e5d);font-size:26px;padding:0}
#dialogo-completo .page-number{min-width:70px;text-align:center;font-size:13px}
#dialogo-completo details{border-top:1px solid #3d5673;margin-top:16px;padding-top:4px}
#dialogo-completo summary{min-height:44px;padding:12px 0;font-size:13px}
#dialogo-completo .settings{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#dialogo-completo label{display:grid;gap:6px;font-size:13px;min-width:0}
#dialogo-completo select{font-weight:400;font-size:14px;max-width:100%;width:100%;min-width:0}
#dialogo-completo .source{font-size:11px;color:#a7bacd;margin-top:8px}
@media(max-width:890px){#dialogo-completo .columns{grid-template-columns:1fr}#dialogo-completo section+section{border-top:1px solid #3d5673;padding-top:18px}}
@media(max-width:540px){#dialogo-completo{padding:16px}#dialogo-completo header{padding-right:0}#dialogo-completo .composer{grid-template-columns:repeat(3,1fr)}#dialogo-completo .phrase{grid-column:1/-1}#dialogo-completo .settings{grid-template-columns:1fr}}

#dialogo-completo{padding:12px;max-width:1400px}
#dialogo-completo header{min-height:32px;margin-bottom:6px}
#dialogo-completo h2{font-size:20px}
#dialogo-completo .composer{min-height:64px}
#dialogo-completo .phrase{min-height:46px}
#dialogo-completo .status{min-height:22px;padding:3px 0}
#dialogo-completo .columns{grid-template-columns:46fr 54fr;gap:10px}
#dialogo-completo h3{margin:0 0 5px;font-size:11px}
#dialogo-completo .cells{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;min-height:0}
#dialogo-completo button.dialogue-cell{width:100%;height:auto;min-height:0;aspect-ratio:1;gap:2px;padding:2px;border-radius:5px;background:#10233d;justify-content:flex-start;overflow:hidden}
#dialogo-completo .face{width:calc(100% - 26px);height:auto;min-height:0;aspect-ratio:1;flex-shrink:0;box-shadow:none;border-radius:4px}
#dialogo-completo .caption{font-size:11px;line-height:12px;min-height:0;max-height:none;padding:0;overflow-wrap:anywhere;text-wrap:balance}
#dialogo-completo .charla .face{width:calc(100% - 38px)}
#dialogo-completo .face.text-only{font-size:23px}
#dialogo-completo .source{margin-top:6px}
@media(max-width:700px){#dialogo-completo .columns{grid-template-columns:1fr}#dialogo-completo section+section{border-top:1px solid #3d5673;padding-top:10px}}
@media(max-width:430px){#dialogo-completo .cells{grid-template-columns:repeat(4,minmax(0,1fr))}}

#dialogo-completo{width:1024px;max-width:none;min-height:768px;box-sizing:border-box;border-radius:0;padding:10px}
#dialogo-completo .columns{grid-template-columns:46fr 54fr;gap:6px}
#dialogo-completo .cells{gap:3px;grid-template-columns:repeat(7,minmax(0,1fr))}
#dialogo-completo button.dialogue-cell{padding:2px;gap:2px;display:flex;aspect-ratio:1;overflow:visible}
#dialogo-completo .face,#dialogo-completo .charla .face{width:100%;height:auto;aspect-ratio:auto;flex:1;min-height:0;overflow:hidden;background:white}
#dialogo-completo .face img{width:100%;height:100%;object-fit:contain;min-height:0}
#dialogo-completo .caption{flex:0 0 auto;line-height:12px;font-size:11px;overflow-wrap:anywhere;text-wrap:balance}
#dialogo-completo section+section{border:0;padding:0}


#dialogo-completo button.dialogue-cell{border:1px solid #8ca0b8;background:#f8fafc;border-radius:6px;padding:2px;gap:1px;overflow:hidden;color:#12283f;box-shadow:0 2px 3px #0004}
#dialogo-completo .caption{color:#12283f;text-shadow:none;width:100%;background:#f8fafc;font-weight:600;letter-spacing:-.3px}
#dialogo-completo .face,#dialogo-completo .charla .face{background:#fff;border-radius:3px}
#dialogo-completo .cells{gap:4px}


body{background:#071b3a}.reference{display:none}.device{width:100%;margin:0;box-shadow:none}
#dialogo-completo{width:100%;max-width:none;min-height:100vh}
#dialogo-completo .columns{grid-template-columns:46fr 54fr}
#dialogo-completo .cells{grid-template-columns:repeat(7,minmax(0,1fr))}
#dialogo-completo button.dialogue-cell{height:var(--cell-size,75px);aspect-ratio:auto;max-width:100%;width:var(--cell-size,75px);justify-self:center}
#dialogo-completo .caption{overflow-wrap:normal;word-break:normal;hyphens:none;letter-spacing:0;font-size:12px;line-height:1.08}
#dialogo-completo .face{flex:1;min-height:0}


#dialogo-completo .js-top{display:flex;align-items:center;justify-content:space-between;gap:20px;height:88px;padding:4px 24px}
#dialogo-completo .js-brand{width:195px;height:65px;object-fit:contain}
#dialogo-completo .js-roots{display:flex;gap:9px}
#dialogo-completo .js-roots button{display:flex;align-items:center;gap:9px;width:150px;height:64px;border:0;background:#ffffff12;border-radius:13px;padding:8px;box-shadow:0 7px 16px #0002;color:white;font-weight:700}
#dialogo-completo .js-roots img{width:48px;height:48px;object-fit:contain;background:white;border-radius:6px}
#dialogo-completo .js-place{border:2px solid #ffffff30;border-radius:30px;opacity:1;background:#06142a;width:137px;font-size:14px}
#dialogo-completo .js-place small{display:block;font-size:9px;margin-top:5px}
#dialogo-completo .js-section{font-size:12px;font-weight:700;text-align:center;margin-bottom:4px;color:#cadcec}
#dialogo-completo .composer{max-width:1070px;margin:auto}
#dialogo-completo .status{text-align:center}
#dialogo-completo .js-dock{display:flex;justify-content:center;gap:8px;width:max-content;margin:10px auto 0;padding:8px 7px;border:2px solid #617b94;border-radius:18px;background:#061326;box-shadow:0 8px 20px #0006}
#dialogo-completo .js-dock button{background:none;border:0;padding:0;min-height:0;display:flex;flex-direction:column;align-items:center;gap:4px;width:82px}
#dialogo-completo .js-dock button span{display:grid;place-items:center;width:82px;height:50px;background:linear-gradient(135deg,#fff,#e3f3ff);border-radius:12px;color:#18355c;font-size:35px}
#dialogo-completo .js-dock small{font-size:10px;color:white;font-weight:700;white-space:nowrap}
#dialogo-completo .source{text-align:center;font-size:9px;margin-top:3px}
@media(max-width:1100px){#dialogo-completo .js-top{padding:0 8px;gap:10px}#dialogo-completo .js-brand{width:165px}#dialogo-completo .js-roots button{width:125px}}


#dialogo-completo{padding:6px}
#dialogo-completo .js-top{height:64px}
#dialogo-completo .js-roots button{height:54px}
#dialogo-completo .js-roots img{height:42px;width:42px}
#dialogo-completo .composer{min-height:44px;padding:4px}
#dialogo-completo .phrase{min-height:34px}
#dialogo-completo .composer button{min-height:36px}
#dialogo-completo .status{display:none}
#dialogo-completo h3{margin:3px 0}
#dialogo-completo .js-dock{margin-top:6px;padding:5px 7px}
#dialogo-completo .js-dock button span{height:42px}
#dialogo-completo .js-section{margin:0;font-size:11px}


#dialogo-completo .js-top{padding-left:3%;padding-right:3%}
#dialogo-completo .columns{display:grid;grid-template-columns:max-content max-content;justify-content:center;gap:8px;margin:0 auto;width:94%;max-width:1200px}
#dialogo-completo .cells{justify-content:center;gap:4px;width:max-content}
#dialogo-completo button.dialogue-cell{background:var(--category-color,#fff);border:1px solid #ffffff65;box-shadow:0 4px 9px #0004}
#dialogo-completo .dialogue-cell .face,#dialogo-completo .dialogue-cell .caption{background:transparent;color:#10243a}
#dialogo-completo .face img{mix-blend-mode:multiply;background:transparent}
#dialogo-completo button.dialogue-cell:disabled{opacity:1}
#dialogo-completo .js-dock{max-width:calc(100vw - 32px);gap:8px;background:rgba(3,18,43,.78);box-shadow:0 16px 42px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.1)}
#dialogo-completo .js-dock button[disabled]{opacity:1}




#dialogo-completo{background:transparent;min-height:0;padding:0 0 8px;border-radius:0}
#dialogo-completo .columns{width:94%;margin:auto}
#dialogo-completo .cells .dialogue-cell{flex:none;transform:none}
#dialogo-completo .face{display:flex}
#dialogo-completo .caption{display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
#dialogo-completo .composer{width:74%;max-width:1070px}


#dialogo-completo .return-charla{min-height:20px;padding:1px 10px;font-size:11px;background:#183858;color:#fff;border:1px solid #7394b6;border-radius:5px}


#dialogo-completo .columns{grid-template-columns:max-content max-content max-content;align-items:start}
#dialogo-completo .columns h3{height:26px;min-height:26px;margin:0 0 4px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
#dialogo-completo .return-charla{height:24px;min-height:24px;margin:0}


#dialogo-completo .columns[hidden],#dialogo-completo .keyboard-panel[hidden]{display:none!important}
#dialogo-completo .dialogue-cell{padding:1px!important;gap:1px!important}
#dialogo-completo .caption{font-size:8px;line-height:1.05;font-weight:600}
#dialogo-completo .dialogue-cell:has(.text-only) .caption{display:none}
#dialogo-completo .face.text-only{font-size:26px}
#dialogo-completo .keyboard-panel{width:90%;max-width:1100px;margin:8px auto}
#dialogo-completo .keyboard-panel>.return-charla{display:block;margin:0 auto 6px}
#dialogo-completo .key-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;margin:5px 0}
#dialogo-completo .key-row button{height:clamp(36px,7vh,60px);min-height:36px;background:#fff;color:#10243a;font-size:24px;border-radius:6px;border:1px solid #aec0cf;padding:1px}
#dialogo-completo .key-special{grid-template-columns:1fr 1fr 1fr 5fr 1fr 1fr 1fr 1fr}
#dialogo-completo .key-special .space-key{font-size:12px}
#dialogo-completo .keyboard-panel button:active{background:#c8e8ff}


#dialogo-completo .personal-photo .face img{mix-blend-mode:normal;object-fit:contain}
#dialogo-completo .personal-photo .face{background:transparent}

#dialogo-completo .status[data-state="error"]{display:block;position:fixed;bottom:110px;left:20%;right:20%;background:#fff;color:#7b2020;padding:8px;z-index:10;border-radius:8px}
#dialogo-completo[hidden]{display:none!important}
body.view-dialogo .aac-view,body.view-dialogo .board-grid-stage{display:none!important}
body.view-dialogo #dialogo-completo{display:block;width:100%;margin:auto}
body.view-dialogo .categories{display:none!important}
body.view-dialogo .aac-root-toolbar{display:flex!important}
#dialogo-completo .dialogue-title{font-size:12px;text-align:center;margin:0 0 4px;color:#cadcec}
#dialogo-completo .status[data-state="pending"]{display:block;position:fixed;bottom:110px;left:20%;right:20%;background:#fff;color:#183858;padding:8px;z-index:10;border-radius:8px}
#dialogo-completo .columns{overflow:visible}
#dialogo-completo .caption{overflow-wrap:normal;word-break:normal;hyphens:none}
#dialogo-completo .personal-photo .face{font-size:28px}
