@font-face{font-family:Inter;src:url('/assets/fonts/inter-latin-400-normal.woff2');font-display:swap} @font-face{font-family:Space;font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations')} :root{--orange:#f65b16;--ink:#30312f;--muted:#696b68;--line:#ffffff80;--surface:#ffffff65;--ease:cubic-bezier(.2,.8,.2,1)} *{box-sizing:border-box}body{margin:0;padding:32px 26px;background:#e4e5e2;color:var(--ink);font:14px/1.55 Inter,Arial,sans-serif;min-height:100vh;background-image:radial-gradient(ellipse at 0% 20%,#ffad7960,transparent 38%),radial-gradient(ellipse at 100% 80%,#faf8f2,transparent 60%),linear-gradient(105deg,#dadcd9,#ecece8 48%,#dfe0df);background-attachment:fixed}body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 2px),#ffffff30 calc(20% - 1px),#b7b9b629 20%)}button,input,textarea,select{font:inherit}button,a,input,select,textarea,[contenteditable]{outline-offset:4px}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:#ffffff9c;border:1px solid #ffffff90;border-radius:100px;padding:11px 20px;transition:background-color .18s,border-color .18s,box-shadow .18s,color .18s;font-size:12px;font-weight:600}button:hover{background:#fff;box-shadow:0 7px 22px #39372d0a}button:active{box-shadow:inset 0 1px 4px #00000012}button:disabled{opacity:.55;cursor:wait;transform:none}a{color:inherit}h1,h2,h3{font-family:Space,Arial,sans-serif;line-height:1.13;font-weight:600}h1{font-size:39px;letter-spacing:-1.8px;margin:8px 0 12px}h2{font-size:25px;letter-spacing:-.7px}h3{font-size:18px;letter-spacing:-.4px}.primary{background:#FF5900;color:#fff;border-color:#FF5900;font-weight:600;box-shadow:0 6px 15px #ff59001e}.primary:hover{background:#FF5900;color:#fff;border-color:#FF5900;box-shadow:0 9px 25px #ff590040}.primary:active{box-shadow:inset 0 2px 5px #71300020}.danger{color:#b33324}.muted,small{color:var(--muted)}small{font-size:11px}.eyebrow{font-size:9px;letter-spacing:1.65px;font-weight:600;margin:0 0 10px;line-height:1.5}.accent{color:var(--orange)}.ui-icon{display:inline-block;width:18px;height:18px;flex-shrink:0;fill:currentColor;vertical-align:middle;pointer-events:none}.brand{display:flex;align-items:center;text-decoration:none}.brand .wordmark{width:151px;height:26px}.brand .ui-icon{margin:0}button .ui-icon,a .ui-icon{width:12px;height:16px;margin-left:10px;transition:transform .3s var(--ease)}button:hover>.ui-icon,a:hover>.ui-icon{transform:translateX(3px)}.back-arrow{transform:rotate(180deg);margin:0 7px 0 0!important}button:hover>.back-arrow{transform:rotate(180deg) translateX(3px)}.shell{max-width:1450px;margin:0 auto;min-height:calc(100vh - 64px);border:1px solid #ffffff75;border-radius:30px;background:linear-gradient(125deg,#e7e8e5bb,#f4f0e9b5);box-shadow:0 25px 80px #484c4416,0 1px 0 #ffffffbb inset;backdrop-filter:blur(30px)}.app-header{min-height:91px;padding:20px 30px;display:flex;align-items:center;gap:26px}.studio-label{font:600 10px Space;letter-spacing:1px;background:#ffffff50;padding:10px 18px;border-radius:30px;white-space:nowrap}.studio-label span{color:#737571;margin-left:3px}.app-header nav{display:flex;align-items:center;gap:8px;margin:auto}.nav-item{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 13px;border-color:transparent;background:transparent;font-size:11px;font-weight:400;white-space:nowrap}.nav-item .ui-icon{margin:0;width:16px;height:16px;color:#777b76}.nav-item.active{background:#ffffffa8;box-shadow:0 4px 14px #54554e08}.nav-item.active .ui-icon{color:var(--orange)}.nav-item.active span{color:#a83b0b}.profile-button{display:flex;align-items:center;gap:12px;border:0;padding:0;background:transparent;font-size:9px;letter-spacing:.5px;white-space:nowrap}.profile-button:hover{background:transparent;box-shadow:none}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#6c3b24;background:linear-gradient(130deg,#fff4e9,#efc5a8);border:2px solid #fff9;font:600 11px Space}.main{background:linear-gradient(130deg,#ffffff73,#f4f3ef8c);border-radius:28px;min-width:0;min-height:calc(100vh - 157px);padding:0 32px 20px}.topline{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid #8a8d8312;padding:18px 0;margin-bottom:26px;color:#6d716c;font-size:10px}.topline a{text-decoration:none;white-space:nowrap}.search-trigger{display:flex;align-items:center;gap:12px;background:transparent;border:0;padding:0;font-size:11px;font-weight:400;color:#6a6f67;min-height:26px}.search-trigger:hover{background:transparent;box-shadow:none;transform:none;color:#bc440d}.search-symbol{width:13px;height:13px;border:1.4px solid currentColor;border-radius:50%;display:inline-block;position:relative;margin:0 4px;flex-shrink:0}.search-symbol:after{content:'';width:5px;height:1px;background:currentColor;position:absolute;right:-4px;bottom:-2px;transform:rotate(45deg)}kbd{font:9px Inter;color:#8c8f87;background:#fff7;padding:3px 6px;border-radius:5px;margin-left:16px}.view-content{animation:page-enter .55s var(--ease) both}.title-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:28px 0}.title-row p{margin:0;color:var(--muted);font-size:12px}.actions{display:flex;gap:9px;flex-wrap:wrap}.dashboard-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:34px 0 28px}.welcome{display:flex;align-items:center;gap:20px}.welcome h1{margin:5px 0 8px}.welcome p:last-child{font-size:12px;margin:0}.welcome-mark{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#ffffff,#ffe3cc 45%,#e99b67);box-shadow:0 1px 2px #fff inset,0 9px 22px #bd7d3726;position:relative;flex-shrink:0}.welcome-mark .ui-icon{width:43px;height:43px;color:#d9581c;animation:emblem-arrive 1.2s var(--ease) both}.publication-summary{display:flex;align-items:center;gap:11px}.publication-summary strong{font-size:11px;font-weight:600}.publication-summary small{display:block;font-size:9px;margin-top:4px}.live-dot{width:6px;height:6px;background:#d76028;border-radius:50%;box-shadow:0 0 0 4px #ec7c3320}.round-link{width:38px;height:38px;border:1px solid #fff;background:#fff5;border-radius:50%;display:grid;place-items:center;text-decoration:none;margin-left:14px}.round-link .ui-icon{margin:0}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}.stat{text-align:left;border-radius:20px;padding:18px 23px;background:#ffffff45;box-shadow:0 1px 0 #fff7 inset;font-weight:400;position:relative;overflow:hidden;animation:card-enter .7s var(--ease) both}.stat:nth-child(2){animation-delay:65ms}.stat:nth-child(3){animation-delay:130ms}.stat-label{display:flex;align-items:center;justify-content:space-between;color:#62665f;font-size:11px}.stat-label .ui-icon{color:#93988d;width:9px;height:12px}.stat b{display:block;font:500 40px/1.1 Space;letter-spacing:-2px;margin:14px 0 8px}.stat small{font-size:9px}.stat:hover{background:#fff9;box-shadow:0 12px 30px #4a4f420d}.creation-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:12px;margin-bottom:22px}.feature-card,.create-card{border-radius:23px;min-height:226px;overflow:hidden;position:relative;border:1px solid #fff5;animation:card-enter .7s var(--ease) .12s both}.feature-card{display:grid;grid-template-columns:44% 56%;background:linear-gradient(110deg,#cdd1c9,#e0e3dc)}.feature-visual{position:relative;overflow:hidden;min-width:0}.feature-visual>img{width:100%;height:100%;position:absolute;object-fit:cover;transition:transform 1s var(--ease)}.feature-card:hover .feature-visual>img{transform:scale(1.045)}.feature-visual>.ui-icon{width:90px;height:90px;position:absolute;top:25%;left:20%;color:#6e7969}.image-tag{position:absolute;top:15px;left:15px;font-size:8px;letter-spacing:1px;color:#fff;background:#20272360;backdrop-filter:blur(15px);border:1px solid #ffffff45;padding:5px 9px;border-radius:30px}.feature-copy{padding:28px 22px;align-self:center}.feature-copy h2{font-size:23px;margin:15px 0 22px}.feature-copy .eyebrow{font-size:8px;letter-spacing:1px;color:#5c6558}.pill-button{font-size:10px;padding:10px 16px;white-space:nowrap}.create-card{padding:30px;display:flex;align-items:center;justify-content:space-between;background:radial-gradient(ellipse at 5% 30%,#ffaf6980,transparent 60%),linear-gradient(110deg,#e9d2c0,#f0e6da);animation-delay:.18s}.create-card>div:not(.orb){position:relative;z-index:1;margin-left:auto}.create-card h2{font-size:30px;margin:8px 0 22px;letter-spacing:-1px}.create-card .eyebrow{font-size:8px;letter-spacing:1.2px;color:#785844}.create-card .primary{font-size:10px}.orb{position:absolute;left:20px;top:24px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 30% 23%,#fffaf2 0%,#fbd3a1 20%,#f99855 45%,#d45b23 70%,#ffc285 90%);box-shadow:inset -15px -12px 24px #97481344,inset 8px 8px 25px #fff9,9px 18px 34px #9a4e1825;transform:rotate(-18deg);animation:orb-settle 1.4s var(--ease) both}.orb:after{content:'';position:absolute;inset:12px;border-radius:50%;border:1px solid #fff5;border-right-color:#bc5a1a30;transform:rotate(-30deg) scaleX(.6)}.orb span{position:absolute;inset:29px 13px;border:1px solid #ffe8c288;border-radius:50%;transform:rotate(30deg)}.orb .ui-icon{position:absolute;width:82px;height:82px;left:49px;top:49px;color:#fff3dfb0;filter:drop-shadow(1px 2px 1px #bd572c40)}.card-index{position:absolute;bottom:15px;left:24px;font-size:7px;color:#805d4599;letter-spacing:1px}.panel{background:#ffffff52;border:1px solid #ffffff90;border-radius:22px;padding:25px;box-shadow:0 1px 0 #fff8 inset}.panel h2,.panel h3{margin-top:0}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px}.section-heading h2{font-size:21px;margin:0}.section-heading .eyebrow{font-size:8px;color:#7a7e74;margin-bottom:7px}.text-button{background:transparent;border-color:transparent;font-size:10px;color:#666d60}.text-button:hover{background:#fff8;box-shadow:none}.recent{display:grid}.recent a{padding:13px 0;border-bottom:1px solid #969b8d16;text-decoration:none;display:flex;justify-content:space-between;align-items:center;gap:15px;border-radius:10px;transition:background-color .18s}.recent a:last-child{border:0}.recent a:hover{background:#ffffff73}.recent-name{display:flex;align-items:center;gap:14px;min-width:0}.recent-name img,.recent-placeholder{width:46px;height:43px;border-radius:11px;object-fit:cover;background:#e2e5dc;flex-shrink:0}.recent-placeholder{display:grid;place-items:center}.recent-name strong{font-size:11px;font-weight:500;display:block}.recent-name small{display:block;font-size:9px;margin-top:4px}.recent-end{display:flex;align-items:center;gap:20px}.recent-end>.ui-icon{color:#7a8174;width:9px;height:12px}.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;font-size:9px;background:#e5e8e1;color:#56614d;white-space:nowrap}.badge:before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor}.badge.published{background:#e8ede1;color:#4c6341}.badge.draft{background:#fbe6d3;color:#98541d}.app-footer{display:flex;justify-content:space-between;align-items:center;margin-top:30px;padding-top:13px;border-top:1px solid #8a8d8312;font-size:8px;color:#7b8076;letter-spacing:1px}.app-footer button{font-size:9px;padding:5px 0;background:transparent;border:0;color:#70766b;font-weight:400}.footer-dot{color:var(--orange);margin:0 8px} /* Content lists and editing surfaces */ label{display:block;font-weight:600;font-size:11px;color:#535b4d}input:not([type=checkbox]):not([type=file]),textarea,select{width:100%;display:block;margin:8px 0 0;border:1px solid #ffffffd9;border-radius:13px;padding:12px 15px;background:#ffffffad;color:#30362c;transition:border-color .2s,box-shadow .2s}input::placeholder,textarea::placeholder{color:#858b7e}input:focus,textarea:focus,select:focus,[contenteditable]:focus{outline:2px solid #de550e;outline-offset:2px}button:focus-visible,a:focus-visible{outline:2px solid #c5450a}textarea{min-height:100px;resize:vertical}label.check{display:flex;align-items:center;gap:10px;font-size:12px}input[type=checkbox]{accent-color:var(--orange);width:17px;height:17px;flex-shrink:0}.filters{display:flex;gap:12px;margin:26px 0 18px}.filters input{flex:1;margin:0!important;border-radius:100px!important;padding-left:20px!important}.filters select{max-width:210px;margin:0;border-radius:100px}.content-table{width:100%;border-collapse:separate;border-spacing:0 7px;table-layout:auto}.content-table th{text-align:left;font-size:9px;font-weight:400;padding:10px 20px;color:#6b7461}.content-table td{padding:17px 20px;background:#ffffff75;border-top:1px solid #ffffff80;border-bottom:1px solid #ffffff80;transition:background .2s}.content-table tr:hover td{background:#ffffffbb}.content-table td:first-child{border-radius:18px 0 0 18px;border-left:1px solid #ffffff80}.content-table td:last-child{border-radius:0 18px 18px 0;border-right:1px solid #ffffff80}.row-title{display:flex;gap:16px;align-items:center}.row-title img{width:61px;height:55px;object-fit:cover;border-radius:12px}.row-title strong{display:block;font-size:12px;font-weight:500}.row-title small{display:block;margin-top:6px;font-size:10px}.content-table .row-action{padding:8px 14px;font-size:10px;background:#e7e9e280;border-color:#fff8}.empty{padding:50px 24px;text-align:center;color:#69725f;background:#fff4;border:1px dashed #adb7a3;border-radius:20px}.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px}.fields{display:grid;gap:18px}.fields .panel{display:grid;gap:18px}.fields .panel h2,.fields .panel h3{margin-bottom:0}.editor-aside{display:grid;gap:18px;align-content:start}.editor-aside .panel{display:grid;gap:16px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.editor-top{position:sticky;top:10px;z-index:4;background:#f1f1ebe8;backdrop-filter:blur(20px);border:1px solid #fff9;border-radius:20px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 24px;box-shadow:0 8px 30px #40493408}.editor-top h1{font-size:28px;margin:0}.editor-top .muted{font-size:10px}.editor-top button{font-size:10px;padding:10px 14px}.rich-wrap{border:1px solid #d5dacd;border-radius:16px;overflow:hidden;background:#fff8}.toolbar{display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid #dee2d8;background:#ecefe6;padding:10px}.toolbar button{padding:5px 10px;font-size:10px}.rich{padding:22px;min-height:300px;font-size:16px;line-height:1.8;font-weight:400;outline-offset:-3px}.rich img{max-width:100%;height:auto}.rich h2{font-size:25px}.rich blockquote{border-left:3px solid var(--orange);padding-left:20px;color:#647158}.image-picker{display:grid;gap:9px;min-width:0}.image-picker img{width:100%;max-height:210px;object-fit:cover;border-radius:15px;background:#e1e7d9}.image-picker input{font-size:10px!important}.image-picker button{font-size:10px;padding:8px 12px}.repeat{display:grid;gap:10px}.repeat-row{display:flex;align-items:end;gap:8px}.repeat-row label{flex:1;min-width:0}.repeat-row button{height:43px}.info{padding:16px 20px;background:#f5e6d9;border:1px solid #fff8;border-radius:16px;font-size:11px;color:#7b583b;line-height:1.7}.password-box{border:1px solid #edcfb5;padding:16px;border-radius:15px;background:#fff5ec}.password-box p{font-size:11px;color:#79593c}.saved-key{overflow-wrap:anywhere;background:#e9ecdf;padding:14px;border-radius:12px;font:14px monospace}.stack{display:grid;gap:18px}.help-list li{margin-bottom:12px}.panel h3 .ui-icon{color:var(--orange);margin-right:5px}.media-page{display:grid;gap:20px}.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.media-card{padding:0;overflow:hidden;text-align:left;min-width:0;border-radius:17px;background:#fff8;border:1px solid #fff}.media-card>button{width:100%;padding:0;border:0;border-radius:0;text-align:left}.media-card>.danger{padding:10px;text-align:center;font-size:10px}.media-card img{width:100%;height:150px;object-fit:cover;background:#e5e8df}.media-card span{display:block;padding:12px;font-size:10px;overflow-wrap:anywhere}.upload{padding:16px;background:#ffffff70;border:1px dashed #a8b19e;border-radius:14px}.upload input{display:block;margin-top:10px;max-width:100%;font-size:11px} /* Floating sheets, search and entry */ .auth{display:grid;place-items:center}.login-card{width:min(470px,100%);margin:5vh auto;padding:42px;background:linear-gradient(135deg,#ffffffad,#f5ede2ad);border:1px solid #fff;border-radius:28px;box-shadow:0 24px 80px #5d4f3020;backdrop-filter:blur(24px);animation:page-enter .65s var(--ease)}.login-card h1{margin-top:20px}.login-card>.eyebrow{margin-top:30px;color:#b74716}.login-card form{display:grid;gap:18px;margin:26px 0}.login-card .primary{width:100%}.login-card p:not(.eyebrow){color:#606a55;font-size:12px}.error{background:#fff0eb;color:#a12913;border:1px solid #edc1b5;padding:12px;border-radius:12px}#auth-error{color:#a12913}.login-card #auth-error:empty{display:none}#notice{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:50;background:#343b2eed;color:#fff;border:1px solid #fff3;backdrop-filter:blur(15px);border-radius:20px;max-width:min(520px,92vw);width:max-content;font-size:12px;padding:0;box-shadow:0 12px 45px #2226}#notice:not(:empty){padding:15px 23px;animation:notice-in .3s var(--ease)}dialog{width:min(1000px,94vw);max-height:90vh;border:1px solid #ffffffa8;border-radius:27px;padding:28px;background:linear-gradient(125deg,#eeeee8f5,#f2e9e0f2);box-shadow:0 35px 100px #30362930;backdrop-filter:blur(30px);color:var(--ink)}dialog[open]{animation:sheet-in .45s var(--ease)}dialog::backdrop{background:#60665d40;backdrop-filter:blur(9px)}dialog header{display:flex;justify-content:space-between;align-items:center}dialog form{margin:20px 0;display:grid;grid-template-columns:1.2fr 1fr auto;gap:14px;align-items:end}#search-dialog{padding:0;width:min(1000px,94vw);height:min(710px,85vh)}.search-dialog-head{display:flex;gap:20px;align-items:center;padding:24px 30px;border-bottom:1px solid #9ba39225;position:sticky;top:0;background:#f0f0eae8;backdrop-filter:blur(20px);z-index:1}.search-dialog-head input{margin:0!important;background:transparent!important;border:0!important;border-radius:5px!important;font-size:13px}.search-dialog-head button{width:36px;height:36px;padding:0;font-size:24px;line-height:1;background:transparent;border:0;font-weight:400}.search-dialog-body{padding:30px 40px}.search-dialog-body>.eyebrow{margin:8px 0 22px;color:#727a69}#global-results{display:grid;gap:8px}.search-result{display:flex;gap:20px;align-items:center;padding:17px 20px;text-align:left;border-radius:20px;background:#ffffff73;animation:card-enter .35s var(--ease) both}.search-result img,.result-symbol{width:56px;height:56px;border-radius:13px;object-fit:cover;flex-shrink:0}.result-symbol{display:grid;place-items:center;background:#e4e9de;color:#c95721}.search-result>span:not(.result-symbol){flex:1}.search-result strong{font-size:12px;font-weight:500;display:block}.search-result small{display:block;margin-top:6px;font-size:10px}.search-result>.ui-icon{background:#fff5;border-radius:50%;box-sizing:content-box;padding:10px;width:8px;height:12px;color:#b24e1f}.copyright{font-size:10px;color:#7d8575} @keyframes page-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes card-enter{from{opacity:0;transform:translateY(18px) scale(.988)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes sheet-in{from{opacity:0;transform:translateY(25px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes emblem-arrive{from{opacity:.2;transform:rotate(-50deg) scale(.7)}to{opacity:1;transform:rotate(0) scale(1)}}@keyframes orb-settle{from{opacity:0;transform:translateY(16px) rotate(-50deg) scale(.9)}to{opacity:1;transform:translateY(0) rotate(-18deg) scale(1)}}@keyframes notice-in{from{opacity:0;bottom:16px}to{opacity:1;bottom:26px}} @media(min-width:1500px){body{padding:55px 40px}.shell{min-height:calc(100vh - 110px)}.main{padding:0 42px 24px}.app-header{padding:22px 42px}.create-card>div:not(.orb){margin-right:24px}.orb{left:42px}} @media(max-width:1150px){body{padding:20px 16px}.app-header{padding:20px 24px;gap:16px}.studio-label{display:none}.app-header nav{gap:4px}.nav-item{padding:11px 12px}.profile-button>span:first-child{display:none}.main{padding:0 25px 20px}.orb{width:144px;height:144px;left:12px;top:40px}.orb .ui-icon{width:66px;height:66px;left:39px;top:39px}.create-card{padding:26px 22px}.create-card h2{font-size:27px}.feature-copy{padding:24px 18px}.feature-copy h2{font-size:22px}.editor-layout{grid-template-columns:minmax(0,1fr) 260px}} @media(max-width:900px){.brand .wordmark{width:135px}.nav-item{padding:10px}.nav-item span{font-size:10px}.publication-summary small{display:none}.welcome-mark{width:62px;height:62px}.welcome-mark .ui-icon{width:34px;height:34px}.creation-grid{grid-template-columns:1fr 1fr}.feature-card{grid-template-columns:1fr}.feature-visual{display:none}.feature-copy{padding:24px}.orb{width:110px;height:110px;left:-35px;top:65px;opacity:.65}.orb .ui-icon{width:50px;height:50px;left:30px;top:30px}.create-card h2{font-size:27px}.editor-layout{grid-template-columns:1fr}.editor-aside{grid-template-columns:1fr 1fr}.media-grid{grid-template-columns:repeat(3,1fr)}.content-table td,.content-table th{padding:14px 12px}.content-table th:nth-child(3),.content-table td:nth-child(3){display:none}} @media(max-width:650px){body{padding:10px 8px}.shell{border-radius:23px;min-height:calc(100vh - 20px)}.app-header{padding:18px 17px 12px;flex-wrap:wrap;gap:10px;min-height:110px}.brand .wordmark{width:142px}.studio-label{display:block;font-size:8px;padding:5px 8px;margin-left:auto}.studio-label span{display:none}.profile-button{order:2}.app-header nav{order:3;width:100%;margin:4px 0 0;justify-content:space-between;gap:0}.nav-item{padding:10px 11px;gap:6px}.nav-item .ui-icon{width:13px;height:13px}.nav-item span{font-size:9px}.main{padding:0 16px 15px;border-radius:23px}.topline{margin-bottom:20px;padding:14px 0}.topline a{font-size:9px}.search-trigger{font-size:10px;gap:7px}.search-trigger kbd{display:none}.dashboard-intro{margin:22px 0;display:block}.welcome{gap:14px}.welcome h1{font-size:31px;letter-spacing:-1.3px}.welcome .eyebrow{font-size:7px;letter-spacing:1.2px}.welcome p:last-child{font-size:10px}.welcome-mark{width:53px;height:53px}.welcome-mark .ui-icon{width:29px;height:29px}.publication-summary{margin-top:22px;gap:8px}.publication-summary strong{font-size:10px}.publication-summary small{display:inline;margin-left:10px;font-size:8px}.round-link{display:none}.stats{gap:7px;margin-bottom:12px}.stat{padding:14px 11px;border-radius:16px}.stat-label{font-size:8px;line-height:1.5;align-items:flex-start}.stat-label .ui-icon{display:none}.stat b{font-size:33px;margin:12px 0 0}.stat small{display:none}.creation-grid{grid-template-columns:1fr;gap:12px}.feature-card{grid-template-columns:38% 62%;min-height:194px}.feature-visual{display:block}.feature-copy{padding:21px}.feature-copy h2{font-size:22px}.feature-copy .eyebrow{font-size:7px}.create-card{min-height:215px;padding:25px 22px}.create-card>div:not(.orb){margin-right:0}.create-card h2{font-size:29px}.orb{width:146px;height:146px;top:26px;left:12px;opacity:1}.orb .ui-icon{width:66px;height:66px;left:40px;top:40px}.card-index{left:20px}.panel{padding:19px;border-radius:20px}.recent-panel{padding:18px 15px}.section-heading h2{font-size:20px}.section-heading .eyebrow{font-size:6px}.text-button{font-size:8px;padding:7px}.recent-name{gap:10px}.recent-name img,.recent-placeholder{width:36px;height:38px;border-radius:9px}.recent-name strong{font-size:10px;line-height:1.5}.recent-name small{font-size:8px}.recent-end{gap:0}.recent-end>.ui-icon{display:none}.badge{font-size:8px;padding:5px 7px}.title-row{align-items:flex-start;gap:10px}.title-row h1{font-size:32px}.title-row p{font-size:11px}.title-row>.primary{font-size:10px;white-space:nowrap;padding:11px 14px;margin-top:9px}.filters{flex-direction:column;gap:9px}.filters select{max-width:none}.content-table{border-spacing:0 6px}.content-table td,.content-table th{padding:13px 8px}.content-table td:first-child{border-radius:14px 0 0 14px}.content-table td:last-child{border-radius:0 14px 14px 0}.row-title{gap:9px}.row-title img{display:none}.row-title strong{font-size:10px}.row-title small{font-size:8px}.content-table .row-action{font-size:9px;padding:7px 9px}.editor-aside,.field-row{grid-template-columns:1fr}.editor-top{top:4px;flex-wrap:wrap;padding:10px;border-radius:16px;gap:9px}.editor-top>div{width:100%}.editor-top .actions{justify-content:flex-end}.editor-top .muted{font-size:9px}.repeat-row{flex-wrap:wrap}.repeat-row label{min-width:105px}.media-grid{grid-template-columns:1fr 1fr;gap:10px}.media-card img{height:110px}dialog{padding:20px;border-radius:23px}dialog form{grid-template-columns:1fr}dialog h2{font-size:22px}.login-card{padding:30px 25px;margin:6vh auto}.login-card h1{font-size:35px}.search-dialog-head{padding:16px;gap:10px}.search-dialog-body{padding:22px 16px}.search-result{padding:13px;gap:12px;border-radius:16px}.search-result img,.result-symbol{width:42px;height:45px}.search-result strong{font-size:10px}.search-result small{font-size:9px}.search-result>.ui-icon{display:none}.app-footer{font-size:7px;letter-spacing:.5px}.app-footer button{font-size:8px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} @media(max-width:650px){.create-card .orb{left:-24px}.create-card>div:not(.orb){max-width:calc(100% - 92px)}.create-card h2{font-size:27px}} /* Reading scale: comfortable text, compact arrows and fluid spacing. */ body{font-size:15px;line-height:1.6} button{font-size:14px;line-height:1.45} small{font-size:13px;line-height:1.6} h1{font-size:42px}h2{font-size:27px}h3{font-size:20px} .eyebrow{font-size:11px;letter-spacing:1.15px;line-height:1.6} button .ui-icon,a .ui-icon{width:8px;height:11px;margin-left:8px} button:hover>.ui-icon,a:hover>.ui-icon{transform:translateX(2px)} .brand .ui-icon{width:151px;height:26px;margin:0} .app-header{gap:20px}.studio-label{font-size:11px;padding:10px 14px} .nav-item{font-size:14px;padding:11px 13px;gap:9px}.nav-item .ui-icon{width:13px;height:13px;margin:0} .profile-button{font-size:11px}.avatar{font-size:12px;width:38px;height:38px} .topline{font-size:13px;padding:20px 0}.search-trigger{font-size:14px;gap:12px}kbd{font-size:11px} .welcome h1{font-size:42px}.welcome p:last-child{font-size:14px} .publication-summary strong{font-size:14px}.publication-summary small{font-size:12px} .round-link .ui-icon{width:8px;height:11px;margin:0} .stat{padding:20px 24px}.stat-label{font-size:14px}.stat-label .ui-icon{width:7px;height:10px;margin-left:10px} .stat b{font-size:46px}.stat small{font-size:12px} .feature-copy h2{font-size:27px}.feature-copy .eyebrow,.create-card .eyebrow{font-size:11px;letter-spacing:1px} .feature-copy{padding:28px 24px}.pill-button,.create-card .primary{font-size:14px;padding:11px 17px} .image-tag{font-size:10px}.card-index{font-size:9px} .create-card{min-height:250px}.create-card h2{font-size:32px}.create-card>div:not(.orb){max-width:64%} .section-heading h2{font-size:24px}.section-heading .eyebrow{font-size:10px} .text-button{font-size:13px}.recent-name strong{font-size:14px;line-height:1.5}.recent-name small{font-size:12px} .recent-name img,.recent-placeholder{width:52px;height:49px}.recent a{padding:16px 0} .recent-end>.ui-icon{width:7px;height:10px}.badge{font-size:12px;padding:5px 11px;line-height:1.5} .title-row p{font-size:14px}.content-table th{font-size:12px}.row-title strong{font-size:14px;line-height:1.5} .row-title small{font-size:12px}.content-table .row-action{font-size:13px;padding:9px 14px} label{font-size:14px;font-weight:500}input:not([type=checkbox]):not([type=file]),textarea,select{font-size:15px;line-height:1.5} label.check{font-size:14px}.editor-top .muted{font-size:13px}.editor-top button{font-size:13px;padding:10px 16px} .toolbar button{font-size:13px;padding:7px 12px}.rich{font-size:17px;line-height:1.85} .image-picker input{font-size:12px!important}.image-picker button{font-size:13px;padding:9px 13px} .info,.password-box p{font-size:13px;line-height:1.7}.media-card span{font-size:12px}.media-card>.danger{font-size:13px} .upload input{font-size:13px}.login-card p:not(.eyebrow){font-size:15px}.login-card>.eyebrow{font-size:12px} .search-dialog-head input{font-size:16px!important}.search-result strong{font-size:15px;line-height:1.5}.search-result small{font-size:13px} .search-result>.ui-icon{width:7px;height:10px}.search-dialog-body>.eyebrow{font-size:11px} #notice{font-size:14px}.app-footer{font-size:11px;letter-spacing:.5px}.app-footer button{font-size:12px} @media(max-width:1150px){.app-header{gap:16px}.nav-item{font-size:13px;padding:11px 12px}.feature-copy{padding:24px 20px}.feature-copy h2{font-size:25px}.create-card h2{font-size:29px}.orb{left:-10px}.create-card>div:not(.orb){max-width:70%}.publication-summary strong{font-size:12px}.publication-summary small{font-size:11px}} @media(max-width:900px){.nav-item span{font-size:13px}.nav-item{gap:7px;padding:10px}.brand .ui-icon{width:135px}.welcome h1{font-size:36px}.publication-summary{max-width:210px}.publication-summary strong{font-size:12px}.feature-copy h2{font-size:26px}.create-card>div:not(.orb){max-width:83%}.create-card .eyebrow{font-size:10px}.pill-button,.create-card .primary{font-size:13px}.stat-label{font-size:13px}.stat small{font-size:11px}.orb{left:-40px}.editor-top .muted{font-size:12px}} @media(max-width:650px){ body{font-size:15px}.brand .ui-icon{width:142px;height:26px}.studio-label{font-size:10px;padding:6px 9px}.avatar{width:33px;height:33px;font-size:11px} .app-header nav{gap:0}.nav-item{padding:11px 6px;gap:5px}.nav-item span{font-size:12px}.nav-item .ui-icon{width:11px;height:11px} .topline{gap:10px;padding:17px 0}.topline a{font-size:12px}.search-trigger{font-size:13px;gap:7px}.search-symbol{width:11px;height:11px} .welcome h1{font-size:33px}.welcome .eyebrow{font-size:10px;letter-spacing:.8px}.welcome p:last-child{font-size:13px}.welcome{gap:12px} .publication-summary{max-width:none;align-items:flex-start;gap:9px}.publication-summary .live-dot{margin-top:8px}.publication-summary strong{font-size:13px}.publication-summary small{font-size:11px;display:block;margin:4px 0 0} .stat{padding:16px 11px}.stat-label{font-size:12px;min-height:38px;line-height:1.5}.stat b{font-size:36px;margin-top:8px}.stat small{display:none} .feature-copy{padding:23px 18px}.feature-copy h2{font-size:25px}.feature-copy .eyebrow{font-size:10px}.pill-button{font-size:13px;padding:10px 14px}.feature-card{min-height:220px} .create-card{min-height:250px;padding:27px 22px}.create-card .orb{left:-36px;top:49px}.create-card>div:not(.orb){max-width:calc(100% - 70px)}.create-card h2{font-size:30px}.create-card .eyebrow{font-size:10px}.create-card .primary{font-size:13px;padding:11px 14px} .image-tag{font-size:9px;padding:5px 8px}.card-index{font-size:9px} .section-heading{gap:10px;align-items:flex-start}.section-heading h2{font-size:23px}.section-heading .eyebrow{font-size:9px;letter-spacing:.7px}.text-button{font-size:12px;padding:6px 0;white-space:nowrap} .recent-name{gap:10px}.recent-name strong{font-size:13px}.recent-name small{font-size:11px}.recent-name img,.recent-placeholder{width:36px;height:39px}.recent-end{align-self:flex-start;margin-top:3px}.recent a{gap:8px;padding:17px 0}.badge{font-size:10px;padding:5px 7px} .title-row h1{font-size:34px}.title-row p{font-size:13px}.title-row>.primary{font-size:12px;padding:11px 14px}.row-title strong{font-size:13px;overflow-wrap:anywhere}.row-title small{font-size:11px}.content-table th{font-size:11px}.content-table td,.content-table th{padding:13px 7px}.content-table .row-action{font-size:12px;padding:8px 10px} .editor-top .muted{font-size:12px}.editor-top button{font-size:13px;padding:10px 13px}.editor-top .actions{justify-content:space-between}.editor-top .actions button{flex:1}.editor-top{gap:13px} label,label.check{font-size:14px}input:not([type=checkbox]):not([type=file]),textarea,select{font-size:16px}.toolbar button{font-size:12px}.image-picker button{font-size:13px} .search-result strong{font-size:14px}.search-result small{font-size:12px}.search-result{gap:12px}.search-dialog-body>.eyebrow{font-size:10px} .app-footer{font-size:10px;letter-spacing:0;gap:12px;align-items:flex-start}.app-footer button{font-size:11px;white-space:nowrap}.footer-dot{margin:0 4px}.login-card h1{font-size:35px} } /* Consistent dropdowns; native values remain the source for saving forms. */ .native-select{display:none!important}.custom-select{display:block;position:relative;margin-top:8px;min-width:0} .select-button{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;border:1px solid #ffffffd9;border-radius:13px;padding:12px 15px;background:#ffffffad;color:#30362c;font-size:15px;line-height:1.5;font-weight:400;gap:18px;min-height:48px;box-shadow:none;transform:none} .select-button:after{content:'';width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg);margin:0 2px 0 0;flex-shrink:0;transition:transform .2s} .select-button:hover{transform:none;box-shadow:none;background:#fff}.select-button[aria-expanded=true]{background:#fff9;border-color:#e89566;box-shadow:0 0 0 3px #ed7c2412}.select-button[aria-expanded=true]:after{transform:rotate(225deg)} .filters>.custom-select{width:225px;flex-shrink:0;margin:0}.filters .select-button{border-radius:100px;padding-left:20px;padding-right:20px} .select-popup{position:fixed;z-index:100;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:7px;border:1px solid #ffffffef;border-radius:18px;background:#f5f3edee;backdrop-filter:blur(25px);box-shadow:0 14px 40px #353a2e24,0 2px 5px #353a2e09;color:#353a30;animation:dropdown-in .16s var(--ease);font-size:14px;font-weight:400;line-height:1.5} .select-option{padding:11px 14px;min-height:43px;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid transparent;transition:background .14s,color .14s} .select-option[aria-selected=true]{color:#923809;background:#f7e3d2}.select-option[aria-selected=true]:after{content:'✓';font-size:12px;font-weight:600;color:#c75015}.select-option.is-focused{background:#fff;border-color:#efc4a6;color:#943c10}.select-option[aria-disabled=true]{opacity:.4;cursor:not-allowed} @keyframes dropdown-in{from{opacity:0;translate:0 -3px}to{opacity:1;translate:0 0}} @media(max-width:650px){.filters>.custom-select{width:100%}.select-button{font-size:16px;min-height:48px}.select-popup{font-size:15px}.select-option{min-height:45px}} /* Navigation symbols describe each destination; arrows stay on actions. */ .nav-item .ui-icon{width:19px;height:19px;color:#6b7562;margin:0}.nav-item.active .ui-icon{color:#b74714}.nav-item:hover .ui-icon{transform:translateY(-1px)}.app-footer button .ui-icon{width:15px;height:15px} @media(max-width:650px){.nav-item{gap:6px;padding:10px 5px}.nav-item .ui-icon{width:16px;height:16px}.nav-item span{font-size:12px}} .primary .ui-icon{color:#fff} /* Supplied banner artwork: left-aligned and scaled by height, like the reference. */ .banner-grid{grid-template-columns:1fr 1.1fr;gap:12px} .studio-banner{position:relative;min-height:240px;aspect-ratio:2.6;border-radius:24px;overflow:hidden;background-repeat:no-repeat;background-position:left bottom;background-size:auto 100%;display:flex;align-items:center;animation:card-enter .7s var(--ease) .12s both;color:#fff} .portfolio-banner{background-color:#000;background-image:url('/admin/assets/banner-portfolio.png')} .notes-banner{aspect-ratio:auto;background-color:#ee5800;background-image:url('/admin/assets/banner-notas.png');animation-delay:.18s} .banner-copy{position:relative;width:51%;margin-left:47.6%;padding:24px 16px 24px 0;z-index:1} .notes-banner .banner-copy{margin-left:60.7%;width:38%;padding-right:14px} .banner-copy .eyebrow{font-size:10px;letter-spacing:.7px;color:#9b9b93;line-height:1.5;margin:0 0 17px} .notes-banner .eyebrow{color:#fff;white-space:nowrap} .banner-copy h2{font-family:Space,Arial,sans-serif;font-size:26px;line-height:1.15;letter-spacing:-.7px;font-weight:600;margin:0 0 25px;color:#fff} .banner-copy button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;padding:14px 24px;font-size:14px;white-space:nowrap;min-width:168px;border:0;box-shadow:none} .banner-copy button .ui-icon{width:8px;height:11px;margin:0;flex-shrink:0} .banner-dark-button{background:#000;color:#fff}.banner-dark-button:hover{background:#171717;color:#fff;box-shadow:0 6px 18px #0002}.banner-dark-button .ui-icon{color:#FF5900} .banner-tag{position:absolute;top:16px;left:16px;border-radius:30px;background:#292929;color:#b0b0aa;padding:7px 13px;font-size:10px;letter-spacing:.4px;line-height:1.5} .banner-index{position:absolute;top:20px;left:25px;font:500 9px Space,Arial,sans-serif;letter-spacing:1.3px;color:#fff} @media(min-width:1400px){.studio-banner{min-height:250px}.banner-copy h2{font-size:28px}.banner-copy .eyebrow{font-size:11px}.banner-copy button{font-size:15px;padding:15px 25px}.banner-index{font-size:10px}} @media(max-width:1150px){.studio-banner{min-height:220px}.banner-copy h2{font-size:23px}.banner-copy button{font-size:12px;gap:16px;padding:12px 17px;min-width:0}.banner-copy .eyebrow{font-size:9px;margin-bottom:13px}.banner-copy{padding-right:10px}.notes-banner .banner-copy{margin-left:59%;width:40%;padding-right:10px}.notes-banner .eyebrow{white-space:normal}} @media(max-width:950px){.banner-grid{grid-template-columns:1fr}.studio-banner{aspect-ratio:2.6;min-height:250px}.notes-banner{aspect-ratio:2.6}.banner-copy h2{font-size:29px}.banner-copy .eyebrow{font-size:11px}.banner-copy button{font-size:15px;padding:14px 23px}.notes-banner .banner-copy{margin-left:60.7%;width:38%}} @media(max-width:650px){.studio-banner{aspect-ratio:auto;min-height:210px;border-radius:20px;background-size:auto 85%}.portfolio-banner{background-position:-22px bottom}.notes-banner{background-size:auto 75%;background-position:-27px bottom;min-height:220px}.banner-copy{margin-left:45%;width:54%;padding:35px 12px 20px 0}.notes-banner .banner-copy{margin-left:52%;width:47%;padding-right:9px}.banner-copy h2{font-size:21px;letter-spacing:-.6px;line-height:1.18;margin-bottom:20px}.banner-copy .eyebrow{font-size:8px;letter-spacing:.3px;margin-bottom:12px}.banner-copy button{font-size:12px;padding:11px 13px;gap:12px;min-width:0;white-space:normal;text-align:left}.banner-tag{top:12px;left:12px;font-size:8px;padding:5px 9px}.banner-index{top:15px;left:16px;font-size:8px;letter-spacing:1px}} .notes-banner{background-color:#e95909} @media(max-width:650px){.portfolio-banner{background-size:auto 70%;background-position:-25px bottom}.notes-banner{background-size:auto 59%;background-position:-30px bottom}.notes-banner .banner-copy{margin-left:52%;width:47%;padding-top:15px;padding-bottom:25px}.banner-copy button{gap:8px;font-size:12px;padding:11px 12px}} /* Solid black welcome emblem with the exact brand orange. */ .welcome-mark{background:#000;box-shadow:none}.welcome-mark .ui-icon{color:#FF5900} /* Personal profile photo at the requested size on every viewport. */ .profile-button .avatar{display:block;width:65px;height:65px;min-width:65px;flex:0 0 65px;border:0;border-radius:50%;object-fit:cover;background:transparent} /* Align the status dot with the first text line, not the two-line block. */ .publication-summary>.live-dot{align-self:flex-start;flex-shrink:0;margin-top:8px} @media(max-width:1150px){.publication-summary>.live-dot{margin-top:6.6px}} @media(max-width:650px){.publication-summary>.live-dot{margin-top:7.4px}} /* mobile: ajustes de leitura */ @media(max-width:650px){ .title-row{flex-wrap:wrap} .title-row>.primary{white-space:normal;flex:1 1 100%;margin-top:6px;padding:12px 14px;line-height:1.35} } /* Foto nova do card de notas. O arquivo já traz o laranja do card no fundo, então o retângulo não deixa emenda em cima nem embaixo; só a borda da direita precisa sumir, e some por máscara, que apaga a imagem aos poucos em vez de cortá-la. No celular a figura entra maior e mais à esquerda, para o texto cair sempre sobre laranja limpo. */ @supports ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){ .notes-banner{background-image:none;background-color:#e95909} .notes-banner:before{content:'';position:absolute;inset:0;pointer-events:none;background:url('/admin/assets/banner-notas-mobile.webp') no-repeat;background-size:auto 118%;background-position:-40px bottom;-webkit-mask-image:linear-gradient(to right,#000 46%,transparent 88%);mask-image:linear-gradient(to right,#000 46%,transparent 88%)} @media(max-width:650px){ .notes-banner{min-height:252px} .notes-banner:before{background-size:auto 100%;background-position:-108px bottom;-webkit-mask-image:linear-gradient(to right,#000 42%,transparent 84%);mask-image:linear-gradient(to right,#000 42%,transparent 84%)} .notes-banner .banner-copy{margin-left:46%;width:54%;padding:32px 14px 22px 0} }} /* mobile: navegação em menu sanduíche */ .nav-toggle{display:none} @media(max-width:650px){ .app-header{min-height:0;padding:15px 15px 13px;gap:10px} .app-header .brand{order:1} .app-header .brand .wordmark{width:128px;height:22px} .app-header .studio-label{order:2;margin-right:auto} .nav-toggle{order:3;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:50%;background:#ffffff7a;border:1px solid #ffffff90;flex:0 0 auto;color:#3a3d38} .app-header .profile-button{order:4} .app-header .profile-button span{display:none} .app-header .profile-button .avatar{width:42px;height:42px;min-width:42px;flex:0 0 42px} .nav-toggle span{position:relative;display:block;width:15px;height:1.5px;background:currentColor;border-radius:2px;transition:background-color .2s} .nav-toggle span:before,.nav-toggle span:after{content:'';position:absolute;left:0;width:15px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)} .nav-toggle span:before{top:-5px} .nav-toggle span:after{top:5px} body.menu-aberto .nav-toggle span{background:transparent} body.menu-aberto .nav-toggle span:before{transform:translateY(5px) rotate(45deg)} body.menu-aberto .nav-toggle span:after{transform:translateY(-5px) rotate(-45deg)} .app-header nav{order:5;width:100%;margin:0;display:grid;grid-template-columns:1fr;justify-content:stretch;gap:0;max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .42s var(--ease),opacity .25s var(--ease),margin .42s var(--ease)} body.menu-aberto .app-header nav{max-height:320px;opacity:1;pointer-events:auto;margin-top:4px} .app-header nav .nav-item{justify-content:flex-start;gap:13px;padding:14px 12px;font-size:14px;border-radius:14px;width:100%} .app-header nav .nav-item+.nav-item{box-shadow:0 -1px 0 #8a8d8320} .app-header nav .nav-item .ui-icon{width:17px;height:17px} } /* fila de assuntos das notas */ /* Os colchetes e a caixa alta vêm dos filtros da página NOTAS do site; o formato é o dos botões do painel, arredondado, para a fila não destoar do resto da tela. O assunto escolhido fica laranja, com a contagem ao lado. */ .topic-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px} .topic-filter{appearance:none;border:1px solid #ffffff90;border-radius:100px;background:#ffffff9c;color:#5c6058;cursor:pointer;padding:11px 18px;min-height:40px;font:600 11px/1.2 Inter,Arial,sans-serif;letter-spacing:.2px;text-transform:uppercase;box-shadow:none;transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s} .topic-filter:hover{background:#fff;border-color:#ffffff90;color:#2f322d;box-shadow:0 7px 22px #39372d0a} .topic-filter[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff} .topic-filter__count{display:none;margin-left:9px;font-variant-numeric:tabular-nums} .topic-filter[aria-pressed="true"] .topic-filter__count{display:inline} .topic-filter:focus-visible{outline:2px solid #2f322d;outline-offset:3px} @media(max-width:650px){ .topic-filters{gap:6px;margin-bottom:16px} .topic-filter{padding:10px 14px;min-height:36px;font-size:10px} } /* revisão antes de publicar */ .revisao-panel h3{display:flex;align-items:center;gap:9px} .revisao-panel small{display:block;margin-top:12px;color:#8b8f86;font-size:9px;letter-spacing:.3px} .revisao-conta{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;background:#e6e7e2;color:#63665f;font:600 10px/1 Inter,Arial,sans-serif} .revisao-conta:empty{display:none} .revisao-conta.grave{background:#fbe0cf;color:#9c4a12} ul.revisao{list-style:none;margin:0;padding:0;display:grid;gap:9px} ul.revisao li{position:relative;padding-left:16px;font-size:11px;line-height:1.5;color:#64675f} ul.revisao li:before{content:'';position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;background:#c3c6bd} ul.revisao li.grave{color:#3a3d38} ul.revisao li.grave:before{background:var(--orange)} .revisao-ok{margin:0;font-size:11px;line-height:1.5;color:#4c6341} /* caixa de mensagens */ .nav-novas{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;margin-left:7px;border-radius:17px;background:var(--orange);color:#fff;font:600 9px/1 Inter,Arial,sans-serif} .msg{border-radius:20px;background:#ffffff52;border:1px solid #ffffff90;box-shadow:0 1px 0 #fff8 inset;padding:20px 22px;margin-bottom:10px;animation:card-enter .5s var(--ease) both} .msg--arquivado{opacity:.62} .msg header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px} .msg-quem strong{display:block;font-size:13px;font-weight:600} .msg-quem small{display:block;margin-top:4px;font-size:10px;color:#72756d} .msg-end{display:flex;align-items:center;gap:12px;white-space:nowrap} .msg-end small{font-size:9px;color:#8b8f86} .msg-meta{margin:0 0 10px;font-size:10px;letter-spacing:.3px;color:#7a7e74;text-transform:uppercase} .msg-texto{margin:0;font-size:13px;line-height:1.65;color:#3b3e39;white-space:normal} .msg-aviso{margin:12px 0 0;font-size:10px;line-height:1.5;color:#9c4a12;background:#fbe6d3;border-radius:12px;padding:9px 12px} .msg footer{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid #8a8d8314} .msg footer .text-button{text-decoration:none;font-size:10px;padding:8px 12px} .msg footer .text-button.danger{color:#a8402c;margin-left:auto} @media(max-width:650px){ .msg{padding:17px 16px;border-radius:17px} .msg header{flex-direction:column;gap:8px} .msg-end{gap:9px} .msg footer .text-button.danger{margin-left:0} } /* X de fechar dos diálogos */ /* O botão herdava o preenchimento dos botões comuns, por isso saía achatado em 51 por 44. Aqui ele vira círculo exato, preto puro, e o X é desenhado em dois traços: o glifo × da fonte nasce fora de eixo e pequeno demais. */ #close-media,#close-search,#close-preview{ width:40px;height:40px;min-width:40px;flex:0 0 40px;padding:0; border:0;border-radius:50%;background:#000;color:#fff;font-size:0;line-height:0; position:relative;display:block;box-shadow:none; transition:transform .2s var(--ease),background-color .2s } #close-media:before,#close-media:after,#close-search:before,#close-search:after,#close-preview:before,#close-preview:after{ content:'';position:absolute;inset:0;margin:auto; width:15px;height:1.7px;border-radius:2px;background:currentColor } #close-media:before,#close-search:before,#close-preview:before{transform:rotate(45deg)} #close-media:after,#close-search:after,#close-preview:after{transform:rotate(-45deg)} #close-media:hover,#close-search:hover{background:#171717;transform:scale(1.07);box-shadow:none} #close-media:active,#close-search:active{transform:scale(.95);box-shadow:none} #close-media:focus-visible,#close-search:focus-visible{outline:2px solid #000;outline-offset:3px} @media(max-width:650px){ #close-media,#close-search,#close-preview{width:36px;height:36px;min-width:36px;flex:0 0 36px} #close-media:before,#close-media:after,#close-search:before,#close-search:after,#close-preview:before,#close-preview:after{width:13px;height:1.6px} } /* campo da busca geral */ /* O contorno laranja do foco acompanha o arredondamento do campo. Com 5px ele saía um retângulo de canto quase reto, destoando dos botões. Em pílula, o foco fica com a mesma linguagem do resto do painel. */ .search-dialog-head input#global-search{border-radius:100px !important;padding:12px 22px} .search-dialog-head input#global-search:focus-visible{outline-offset:3px} /* diálogos: fundo travado e barra de rolagem */ /* Com um diálogo aberto, o fundo para de rolar. Vale para todos, e não só para a busca, porque é o comportamento esperado de qualquer modal. */ html:has(dialog[open]){overflow:hidden} dialog{overscroll-behavior:contain} /* A rolagem saía do próprio diálogo, então a barra era desenhada rente à borda e cruzava o canto arredondado. Agora quem rola é o conteúdo: a cabeça fica parada e a barra nasce dentro da área de conteúdo, longe da curva. */ #media-dialog[open]{display:flex;flex-direction:column;overflow:hidden} #media-dialog:not([open]){display:none} #media-dialog>header,#media-dialog>label,#media-dialog>form{flex:0 0 auto} #media-dialog>.media-grid{flex:1 1 auto;min-height:0;grid-auto-rows:max-content;overflow-y:auto;overscroll-behavior:contain;padding-right:10px;margin-right:-4px} #search-dialog[open]{display:flex;flex-direction:column;overflow:hidden} #search-dialog:not([open]){display:none} .search-dialog-head{flex:0 0 auto;position:static} .search-dialog-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain} /* Barra fina, arredondada e afastada da borda, no tom do painel. */ #media-dialog>.media-grid,.search-dialog-body{scrollbar-width:thin;scrollbar-color:#b4b8ae transparent} #media-dialog>.media-grid::-webkit-scrollbar,.search-dialog-body::-webkit-scrollbar{width:14px} #media-dialog>.media-grid::-webkit-scrollbar-track,.search-dialog-body::-webkit-scrollbar-track{background:transparent} #media-dialog>.media-grid::-webkit-scrollbar-thumb,.search-dialog-body::-webkit-scrollbar-thumb{background:#b4b8ae;background-clip:content-box;border:4px solid transparent;border-radius:14px;min-height:46px} #media-dialog>.media-grid::-webkit-scrollbar-thumb:hover,.search-dialog-body::-webkit-scrollbar-thumb:hover{background:#8e9388;background-clip:content-box;border:4px solid transparent} /* visualizador da imagem */ #preview-dialog{width:min(1100px,94vw);height:min(840px,90vh);max-height:90vh;padding:22px;display:none;flex-direction:column;gap:16px;overflow:hidden} #preview-dialog[open]{display:flex} .pv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex:0 0 auto} .pv-info strong{display:block;font-size:13px;font-weight:600;overflow-wrap:anywhere} .pv-info small{display:block;margin-top:5px;font-size:10px;color:#7a7e74;letter-spacing:.3px} .pv-palco{flex:1 1 auto;min-height:0;display:grid;place-items:center;overflow:auto;border-radius:18px;background:repeating-conic-gradient(#e9eae5 0% 25%,#f3f3ef 0% 50%) 50%/22px 22px;padding:14px} .pv-palco img{display:block;max-width:100%;max-height:100%;border-radius:8px} .pv-barra{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .pv-zoom{display:flex;align-items:center;gap:8px} .pv-zoom button[data-pv-menos],.pv-zoom button[data-pv-mais]{width:34px;height:34px;padding:0;border-radius:50%;font-size:15px;line-height:1;display:grid;place-items:center} .pv-zoom span{min-width:52px;text-align:center;font:600 11px/1 Inter,Arial,sans-serif;color:#63665f;font-variant-numeric:tabular-nums} .pv-acoes{display:flex;gap:8px;flex-wrap:wrap} .pv-acoes .text-button{font-size:10px;padding:9px 13px} .pv-acoes .text-button.danger{color:#a8402c} .pv-aviso{flex:0 0 auto;margin:0;font-size:11px;line-height:1.55;color:#4c6341;background:#eaf0e4;border-radius:13px;padding:11px 14px} .pv-aviso.grave{color:#9c4a12;background:#fbe6d3} @media(max-width:650px){ #preview-dialog{padding:16px;gap:12px;height:min(760px,92vh)} .pv-barra{flex-direction:column;align-items:stretch;gap:10px} .pv-acoes .text-button{flex:1 1 auto;text-align:center} } /* ============================================================ OCTOPUS v2 Biblioteca como página, visualizador de imagem, caixa de mensagens e as páginas de Projetos e Notas. Mesma linguagem do painel: superfícies claras translúcidas, bordas de 1px em branco, cantos generosos e o laranja reservado para o que está ativo. */ /* ------------------------------------------------------------- comuns */ .pg-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr) auto;align-items:center;gap:26px;margin:26px 0 22px} .pg-hero h1{margin:0 0 6px} .pg-hero p.sub{margin:0;color:var(--muted);font-size:13px} .pg-hero-meio{display:flex;align-items:center;gap:16px;justify-content:center} .pg-arte{width:132px;height:104px;flex:none} .pg-hero-nota{margin:0;font-size:11px;line-height:1.65;color:#7c8076;max-width:190px} .pg-hero-acao{display:flex;justify-content:flex-end} .barra-ferramentas{display:flex;gap:12px;align-items:center;margin:0 0 16px} .campo-busca{position:relative;flex:1;min-width:0} .campo-busca .ui-icon{position:absolute;left:19px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#8d918a;pointer-events:none} .campo-busca input{width:100%;margin:0!important;border-radius:100px!important;padding:14px 62px 14px 45px!important;background:#ffffff7a;border:1px solid #ffffff90} .campo-busca input:focus{background:#fff} .campo-busca kbd{position:absolute;right:16px;top:50%;transform:translateY(-50%);font:600 9px/1 Inter,Arial,sans-serif;color:#8d918a;background:#ffffffa6;border:1px solid #ffffffcc;border-radius:7px;padding:5px 7px;pointer-events:none} .vista-toggle{display:flex;gap:4px;padding:4px;border-radius:100px;background:#ffffff7a;border:1px solid #ffffff90;flex:none} .vista-toggle button{padding:8px;border:0;background:transparent;border-radius:100px;color:#7d817a;box-shadow:none;line-height:0} .vista-toggle button .ui-icon{width:17px;height:17px} .vista-toggle button[aria-pressed="true"]{background:#fff;color:var(--orange);box-shadow:0 3px 10px #39372d12} .chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px} .chips-fim{margin-left:auto} .chip{display:inline-flex;align-items:center;gap:8px;appearance:none;border:1px solid #ffffff90;border-radius:100px;background:#ffffff7a;color:#5c6058;padding:10px 16px;min-height:38px;font:600 11px/1.2 Inter,Arial,sans-serif;box-shadow:none;transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s} .chip:hover{background:#fff;color:#2f322d;box-shadow:0 6px 18px #39372d0d} .chip .ui-icon{width:14px;height:14px;opacity:.7} .chip b{font-weight:600;font-size:10px;color:#8b8f86;font-variant-numeric:tabular-nums} .chip[aria-pressed="true"]{background:#fff;border-color:#ff59004d;color:#d24d05;box-shadow:0 6px 16px #ff59001a} .chip[aria-pressed="true"] b{color:#e0691f} .chip[aria-pressed="true"] .ui-icon{opacity:1} .selo{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:100px;font:600 9px/1.5 Inter,Arial,sans-serif;letter-spacing:.2px;white-space:nowrap;background:#e9ebe6;color:#5f6659} .selo:before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor} .selo--published{background:#e6efdd;color:#4a6440} .selo--draft{background:#f0efe9;color:#77736a} .selo--trash{background:#e7e8e5;color:#7d8079} .selo--lock{background:#fbe7d6;color:#9a551d} .selo--uso{background:#e6efdd;color:#47663c} .selo--proj{background:#eae7f3;color:#5d5382} .selo--nota{background:#fbe7d6;color:#9a551d} .selo--livre{background:#eceeeb;color:#7f837c} .menu-flutuante{position:fixed;z-index:70;min-width:216px;padding:7px;border-radius:17px;background:#fdfdfc;border:1px solid #e7e8e4;box-shadow:0 18px 44px #2b2a2620;animation:menu-in .16s var(--ease) both} @keyframes menu-in{from{opacity:0;transform:translateY(-5px) scale(.985)}} .menu-flutuante button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;border-radius:11px;padding:10px 12px;font-size:12px;font-weight:500;box-shadow:none} .menu-flutuante button:hover{background:#f2f2ef;box-shadow:none} .menu-flutuante .ui-icon{width:16px;height:16px;color:#797d76} .menu-flutuante hr{border:0;border-top:1px solid #ecedea;margin:6px 8px} .menu-flutuante .grave{color:#b33324} .menu-flutuante .grave .ui-icon{color:#b33324} .botao-icone{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:100px;line-height:0} .botao-icone .ui-icon{width:17px;height:17px} .vazio{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:36px 22px;border-radius:20px;background:#ffffff40;border:1px dashed #c3c7bf;color:#6d7168} .vazio .ui-icon{width:26px;height:26px;color:#a7aba2;margin-bottom:2px} .vazio strong{font:600 14px/1.3 Space,Arial,sans-serif;color:#4a4d47} .vazio p{margin:0;font-size:12px;max-width:330px} #confirmar-dialog{width:min(420px,92vw);border:0;border-radius:24px;padding:26px;background:#fbfbfa;box-shadow:0 30px 70px #2b2a2630} #confirmar-dialog::backdrop{background:#2c2b2966;backdrop-filter:blur(3px)} #confirmar-dialog h3{margin:0 0 8px} #confirmar-dialog p{margin:0 0 6px;font-size:12.5px;line-height:1.6;color:#5f635b} #confirmar-dialog ul{margin:10px 0 0;padding-left:18px;font-size:12px;color:#5f635b} #confirmar-dialog footer{display:flex;gap:9px;justify-content:flex-end;margin-top:20px} #confirmar-dialog .grave{background:#b33324;border-color:#b33324;color:#fff} #confirmar-dialog .grave:hover{background:#9d2c1e;border-color:#9d2c1e} /* --------------------------------------------------------- biblioteca */ .bib-envio{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;border-radius:20px;background:#ffffff52;border:1px dashed #c9cdc5;margin:0 0 18px} .bib-envio.sobre{background:#fff;border-color:var(--orange)} .bib-envio__marca{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:#ffffff9e;color:var(--orange);flex:none} .bib-envio__marca .ui-icon{width:20px;height:20px} .bib-envio__texto{flex:1;min-width:190px} .bib-envio__texto strong{display:block;font:600 13px/1.3 Space,Arial,sans-serif} .bib-envio__texto small{display:block;margin-top:3px;font-size:10.5px;color:#7c8076} .bib-envio input[type=file]{display:none} .bib-envio label.arquivo{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:#ffffff9c;border:1px solid #ffffff90;border-radius:100px;padding:11px 18px;font:600 12px/1 Inter,Arial,sans-serif;transition:background-color .18s,box-shadow .18s} .bib-envio label.arquivo:hover{background:#fff;box-shadow:0 7px 22px #39372d0a} .bib-envio input[name=alt]{flex:1 1 220px;margin:0;border-radius:100px;padding:12px 18px;background:#ffffff8c;border:1px solid #ffffff90} .bib-envio .escolhido{font-size:11px;color:#5f635b;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bib-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px} .bib-item{position:relative;border-radius:18px;background:#ffffff70;border:1px solid #ffffff96;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;animation:card-enter .45s var(--ease) both} .bib-item:hover{transform:translateY(-2px);box-shadow:0 12px 30px #39372d14;border-color:#fff} .bib-item__abrir{display:block;width:100%;padding:0;border:0;background:transparent;border-radius:0;text-align:left;box-shadow:none} .bib-item__abrir:hover{box-shadow:none;background:transparent} .bib-item__foto{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#e9ebe6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E")} .bib-item__foto.alfa{background-color:#f3f4f1;background-image:linear-gradient(45deg,#e4e6e2 25%,transparent 25%),linear-gradient(-45deg,#e4e6e2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4e6e2 75%),linear-gradient(-45deg,transparent 75%,#e4e6e2 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;object-fit:contain} .bib-item__selo{position:absolute;top:10px;left:10px;pointer-events:none} .bib-item__corpo{padding:11px 12px 13px} .bib-item__nome{display:block;font-size:11.5px;font-weight:500;line-height:1.4;color:#3c3f3a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bib-item__meta{display:block;margin-top:3px;font-size:10px;color:#8b8f86;font-variant-numeric:tabular-nums} .bib-item__menu{position:absolute;right:9px;bottom:11px;width:28px;height:28px;padding:0;border-radius:100px;background:#ffffffb8;border:1px solid #ffffffd6;line-height:0;opacity:0;transition:opacity .18s} .bib-item:hover .bib-item__menu,.bib-item__menu:focus-visible{opacity:1} .bib-item__menu .ui-icon{width:15px;height:15px} .bib-lista{display:flex;flex-direction:column;gap:7px} .bib-linha{display:grid;grid-template-columns:52px minmax(0,1fr) 112px 96px 128px 36px;align-items:center;gap:14px;padding:9px 14px;border-radius:15px;background:#ffffff6b;border:1px solid #ffffff90;transition:background .18s,border-color .18s} .bib-linha:hover{background:#ffffffc4} .bib-linha img{width:52px;height:40px;object-fit:cover;border-radius:9px;background:#e9ebe6} .bib-linha__nome{min-width:0;font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;padding:0;text-align:left;box-shadow:none} .bib-linha small{font-size:10.5px;color:#8b8f86;font-variant-numeric:tabular-nums} .bib-rodape{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;flex-wrap:wrap} .bib-rodape small{font-size:11px;color:#83877e} .paginacao{display:flex;align-items:center;gap:6px} .paginacao button{min-width:34px;height:34px;padding:0 10px;border-radius:100px;font-size:11px;line-height:0} .paginacao button .ui-icon{width:15px;height:15px} .paginacao button[aria-current="page"]{background:var(--orange);border-color:var(--orange);color:#fff} .paginacao button:disabled{opacity:.35} /* ------------------------------------------------- visualizador de mídia */ #visor{width:min(1180px,94vw);height:min(840px,92vh);max-width:none;max-height:none;padding:16px;border:0;border-radius:26px;background:#fbfbfa;box-shadow:0 40px 90px #21201d3d;color:var(--ink);overflow:hidden} #visor::backdrop{background:#23221f80;backdrop-filter:blur(4px)} #visor[open]{display:flex;flex-direction:column;animation:visor-in .2s var(--ease) both} #visor:not([open]){display:none} @keyframes visor-in{from{opacity:0;transform:scale(.985)}} #visor.visor--cheio{width:100vw;height:100vh;border-radius:0;padding:12px} .visor-topo{display:flex;align-items:flex-start;gap:16px;padding:4px 4px 12px} .visor-nome{min-width:0;flex:1} .visor-nome strong{display:block;font:600 14px/1.35 Space,Arial,sans-serif;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .visor-nome small{display:block;margin-top:3px;font-size:10.5px;color:#8b8f86;font-variant-numeric:tabular-nums} .visor-topo__acoes{display:flex;gap:7px;flex:none} .visor-topo__acoes .botao-icone{background:#f1f1ee;border-color:#e8e9e5} .visor-topo__acoes .botao-icone:hover{background:#fff} .visor-topo__acoes .botao-icone[aria-pressed="true"]{background:#fff;color:var(--orange);border-color:#ff59004d} .visor-corpo{display:flex;gap:14px;flex:1;min-height:0;position:relative} .visor-palco{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:18px;background:#eeefec;touch-action:none} .visor-palco.alfa{background-color:#f3f4f1;background-image:linear-gradient(45deg,#e3e5e1 25%,transparent 25%),linear-gradient(-45deg,#e3e5e1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e5e1 75%),linear-gradient(-45deg,transparent 75%,#e3e5e1 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0} .visor-palco.arrastavel{cursor:grab} .visor-palco.arrastando{cursor:grabbing} .visor-img{position:absolute;top:0;left:0;transform-origin:0 0;user-select:none;-webkit-user-drag:none;display:block} .visor-img.suave{transition:transform .18s var(--ease)} .visor-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;padding:0;border-radius:100px;background:#ffffffd6;border:1px solid #ffffffe8;box-shadow:0 8px 24px #2b2a2618;line-height:0;opacity:0;transition:opacity .2s,background .18s} .visor-nav .ui-icon{width:18px;height:18px} .visor-nav--ant{left:14px} .visor-nav--prox{right:14px} .visor-palco:hover .visor-nav,.visor-nav:focus-visible{opacity:1} .visor-nav:hover{background:#fff} @media (hover:none){.visor-nav{opacity:1}} .visor-carregando{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#8b8f86} .visor-barra{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 4px 2px} .visor-zoom{grid-column:2;display:flex;align-items:center;gap:4px;padding:4px;border-radius:100px;background:#f1f1ee;border:1px solid #e8e9e5} .visor-zoom button{border:0;background:transparent;box-shadow:none;border-radius:100px;padding:8px 12px;font-size:11px;font-weight:600;color:#54574f;line-height:0} .visor-zoom button .ui-icon{width:16px;height:16px} .visor-zoom button:hover{background:#fff;color:#2f322d} .visor-zoom button:active{transform:scale(.96)} .visor-zoom button.texto{line-height:1.5} .visor-zoom .sep{width:1px;height:18px;background:#e0e1dd;margin:0 2px} .visor-pct{min-width:62px;text-align:center;font-variant-numeric:tabular-nums} .visor-arquivo{grid-column:3;display:flex;align-items:center;justify-content:flex-end;gap:7px} .visor-arquivo button{padding:10px 15px;font-size:11px} .visor-arquivo .botao-icone{padding:0} .visor-info{flex:0 0 306px;min-width:0;overflow-y:auto;padding:18px;border-radius:18px;background:#f4f4f1;border:1px solid #ecedea;transition:margin-right .24s var(--ease),opacity .2s var(--ease)} #visor:not(.info-aberta) .visor-info{margin-right:-322px;opacity:0;pointer-events:none} .visor-info h4{margin:0 0 14px;font:600 12px/1.3 Space,Arial,sans-serif;letter-spacing:.2px} .visor-linha{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #e8e9e5;font-size:11.5px} .visor-linha span{color:#8b8f86;flex:none} .visor-linha b{font-weight:500;text-align:right;overflow-wrap:anywhere} .visor-info label{display:block;margin:18px 0 0;font-size:10px;letter-spacing:.3px;text-transform:uppercase;color:#8b8f86} .visor-info textarea{width:100%;margin:7px 0 0;min-height:72px;border-radius:14px;padding:11px 13px;font-size:12px;background:#fff;border:1px solid #e4e5e1;resize:vertical} .visor-info .salvar-alt{margin-top:9px;width:100%;font-size:11px} .visor-uso{margin-top:18px} .visor-uso__item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:10px 11px;margin-top:7px;border-radius:13px;background:#fff;border:1px solid #eaebe7;font-size:11.5px;box-shadow:none} .visor-uso__item:hover{border-color:#ff59004d;box-shadow:0 6px 16px #39372d0f} .visor-uso__item .ui-icon{width:15px;height:15px;color:#8b8f86;flex:none} .visor-uso__item span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500} .visor-otimizar{position:absolute;right:0;bottom:0;z-index:4;width:min(330px,88%);padding:18px;border-radius:20px;background:#fff;border:1px solid #e9eae6;box-shadow:0 22px 50px #2b2a2624;animation:menu-in .18s var(--ease) both} .visor-otimizar h4{margin:0 0 12px;font:600 13px/1.3 Space,Arial,sans-serif} .visor-otimizar .visor-linha{border-bottom-color:#eff0ec} .visor-otimizar footer{display:flex;gap:8px;justify-content:flex-end;margin-top:16px} .visor-vazio-alt{font-size:11px;color:#8b8f86;margin:8px 0 0} /* ----------------------------------------------- caixa de mensagens v2 */ .inbox{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(318px,1fr);gap:18px;align-items:start} .inbox--sozinha{grid-template-columns:minmax(0,1fr)} .inbox-lista{display:flex;flex-direction:column;border-radius:22px;background:#ffffff4f;border:1px solid #ffffff90;overflow:hidden} .inbox-item{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;gap:14px;align-items:center;width:100%;padding:15px 18px;border:0;border-bottom:1px solid #8a8d8314;border-radius:0;background:transparent;text-align:left;box-shadow:none;transition:background .16s} .inbox-item:last-child{border-bottom:0} .inbox-item:hover{background:#ffffff8c;box-shadow:none} .inbox-item[aria-current="true"]{background:#fff} .inbox-item[aria-current="true"]:after{content:'';position:absolute} .inbox-sigla{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:100px;background:#eceeea;color:#6d7168;font:600 11px/1 Inter,Arial,sans-serif} .inbox-item.nova .inbox-sigla{background:#fbe7d6;color:#a2551c} .inbox-sigla i{position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--orange)} .inbox-quem{min-width:0} .inbox-quem strong{display:block;font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .inbox-item.nova .inbox-quem strong{font-weight:600} .inbox-quem small{display:block;font-size:10.5px;color:#8b8f86;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .inbox-quem em{display:block;margin-top:4px;font-style:normal;font-size:11.5px;color:#767a71;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .inbox-item.nova .inbox-quem em{color:#54584f} .inbox-orc{padding:5px 11px;border-radius:100px;background:#eceeea;font:600 9.5px/1.5 Inter,Arial,sans-serif;color:#6d7168;white-space:nowrap} .inbox-data{font-size:10.5px;color:#8b8f86;white-space:nowrap;font-variant-numeric:tabular-nums} .inbox-detalhe{position:sticky;top:14px;border-radius:22px;background:#ffffff6b;border:1px solid #ffffff96;padding:22px;animation:card-enter .35s var(--ease) both} .det-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .det-topo h2{margin:0;font-size:19px;letter-spacing:-.4px} .det-estado{display:flex;align-items:center;gap:9px;margin:9px 0 16px} .det-estado small{font-size:10.5px;color:#8b8f86} .det-campo{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid #8a8d8314;font-size:12px} .det-campo .ui-icon{width:15px;height:15px;color:#8b8f86;flex:none} .det-campo a,.det-campo span.valor{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none} .det-campo a:hover{text-decoration:underline} .det-campo .botao-icone{width:28px;height:28px;background:#ffffff8c;border-color:#ffffffb8} .det-campo .botao-icone .ui-icon{width:14px;height:14px} .det-rotulo{margin:18px 0 6px;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:#8b8f86} .det-orcamento{display:inline-flex;padding:8px 14px;border-radius:100px;background:#ffffff96;border:1px solid #ffffffcc;font:600 12.5px/1.3 Inter,Arial,sans-serif} .det-mensagem{margin:0;padding:15px 16px;border-radius:16px;background:#ffffff8c;border:1px solid #ffffffcc;font-size:13px;line-height:1.72;color:#3b3e39;white-space:pre-wrap;overflow-wrap:anywhere} .det-responder{width:100%;margin-top:18px;display:flex;align-items:center;justify-content:center;gap:9px} .det-responder .ui-icon{width:16px;height:16px} .det-acoes{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .det-acoes button{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 13px;font-size:11px} .det-acoes .ui-icon{width:14px;height:14px} .det-acoes .botao-icone{flex:0 0 auto} .inbox-voltar{display:none} /* ------------------------------------------- projetos e notas, páginas */ .grade-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .card-conteudo{display:flex;flex-direction:column;border-radius:20px;background:#ffffff60;border:1px solid #ffffff96;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;animation:card-enter .45s var(--ease) both} .card-conteudo:hover{transform:translateY(-2px);box-shadow:0 14px 34px #39372d14;border-color:#fff} .card-capa{position:relative;display:block;aspect-ratio:16/7;background:#e9ebe6;overflow:hidden} .card-capa img{width:100%;height:100%;object-fit:cover;display:block} .card-capa .selo{position:absolute;left:12px;bottom:12px} .card-capa__vazia{display:flex;align-items:center;justify-content:center;height:100%;color:#b0b4ac} .card-capa__vazia .ui-icon{width:26px;height:26px} .card-corpo{padding:15px 17px 0;flex:1} .card-titulo{display:flex;align-items:baseline;gap:12px;justify-content:space-between} .card-titulo h3{margin:0;font-size:14.5px;letter-spacing:-.2px;line-height:1.3;overflow-wrap:anywhere} .card-titulo time{font-size:10.5px;color:#8b8f86;white-space:nowrap;font-variant-numeric:tabular-nums} .card-meta{margin:6px 0 0;font-size:11px;color:#7c8076} .card-desc{margin:9px 0 0;font-size:12px;line-height:1.6;color:#64685f;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px} .card-tag{padding:5px 10px;border-radius:100px;background:#ffffff7a;border:1px solid #ffffffb3;font-size:9.5px;color:#6d7168} .card-rodape{display:flex;align-items:center;gap:7px;padding:14px 17px 16px} .card-rodape .editar{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;font-size:11px} .card-rodape .ui-icon{width:14px;height:14px} .card-novo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:210px;border-radius:20px;border:1px dashed #c3c7bf;background:#ffffff2e;color:#6d7168;text-align:center;padding:24px;transition:border-color .2s,background .2s,transform .2s var(--ease)} .card-novo:hover{background:#ffffff70;border-color:var(--orange);transform:translateY(-2px);box-shadow:none} .card-novo .marca{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:100px;background:#ffffff9e;color:var(--orange)} .card-novo .marca .ui-icon{width:17px;height:17px} .card-novo strong{font:600 13px/1.3 Space,Arial,sans-serif;color:#4a4d47} .card-novo small{font-size:11px;max-width:210px} .lista-conteudo{display:flex;flex-direction:column;gap:8px} .linha-conteudo{display:grid;grid-template-columns:54px minmax(0,1fr) auto 86px auto;gap:16px;align-items:center;padding:12px 16px;border-radius:18px;background:#ffffff60;border:1px solid #ffffff90;transition:transform .2s var(--ease),background .2s,border-color .2s;animation:card-enter .4s var(--ease) both} .linha-conteudo:hover{transform:translateY(-1px);background:#ffffffab;border-color:#fff} .linha-conteudo>img,.linha-conteudo .sem-capa{width:54px;height:48px;border-radius:12px;object-fit:cover;background:#e9ebe6;display:flex;align-items:center;justify-content:center;color:#b0b4ac} .linha-corpo{min-width:0} .linha-corpo strong{display:block;font-size:13px;font-weight:500;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .linha-corpo small{display:block;margin-top:3px;font-size:10.5px;color:#8b8f86} .linha-corpo em{display:block;margin-top:4px;font-style:normal;font-size:11.5px;color:#767a71;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .linha-data{font-size:10.5px;color:#8b8f86;text-align:right;font-variant-numeric:tabular-nums} .linha-acoes{display:flex;align-items:center;gap:6px} .linha-acoes .editar{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;font-size:11px} .linha-acoes .ui-icon{width:14px;height:14px} /* -------------------------------------------------------- adaptações */ @media (max-width:1240px){ .bib-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (max-width:1100px){ .pg-hero{grid-template-columns:minmax(0,1fr) auto} .pg-hero-meio{display:none} .grade-cards{grid-template-columns:repeat(2,minmax(0,1fr))} .inbox{grid-template-columns:minmax(0,1fr)} .inbox-detalhe{position:fixed;inset:0;z-index:60;border-radius:0;overflow-y:auto;padding:22px;background:#f4f4f1} .inbox-voltar{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;font-size:11px;padding:9px 14px} .inbox-voltar .ui-icon{width:14px;height:14px} #visor{width:96vw;height:94vh} } @media (max-width:900px){ .bib-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .bib-linha{grid-template-columns:44px minmax(0,1fr) 92px 36px} .bib-linha__peso,.bib-linha__data{display:none} .visor-info{position:absolute;left:0;right:0;bottom:0;top:auto;flex:none;max-height:64%;border-radius:20px 20px 0 0;z-index:5;box-shadow:0 -14px 40px #2b2a2620} #visor:not(.info-aberta) .visor-info{margin-right:0;transform:translateY(102%)} #visor.info-aberta .visor-info{transform:none} .visor-info{transition:transform .24s var(--ease),opacity .2s} .visor-arquivo button span.rotulo{display:none} .visor-arquivo button{padding:0;width:36px;height:36px;justify-content:center} } @media (max-width:760px){ .barra-ferramentas{flex-wrap:wrap} .campo-busca{flex:1 1 100%} .grade-cards{grid-template-columns:minmax(0,1fr)} .linha-conteudo{grid-template-columns:48px minmax(0,1fr) auto;row-gap:10px} .linha-conteudo .linha-data{display:none} .linha-conteudo .linha-acoes{grid-column:1/-1;justify-content:flex-end} .inbox-item{grid-template-columns:32px minmax(0,1fr) auto;row-gap:6px} .inbox-orc{grid-column:2;justify-self:start} .pg-hero{grid-template-columns:minmax(0,1fr);gap:14px} .pg-hero-acao{justify-content:flex-start} .visor-barra{grid-template-columns:1fr;gap:9px} .visor-zoom,.visor-arquivo{grid-column:1;justify-content:center} #visor{padding:12px;border-radius:20px} } @media (max-width:620px){ .bib-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px} .chips{gap:6px} .chip{padding:9px 13px;min-height:35px;font-size:10px} .bib-envio{flex-direction:column;align-items:stretch} .bib-envio input[name=alt]{flex:1 1 auto} } @media (max-width:760px){ .chips-fim{margin-left:0;flex:1 1 100%} .chips-fim>.custom-select,.chips-fim>select{width:100%} .chips-fim .select-button{width:100%;justify-content:space-between;font-size:11px;padding:11px 16px} .bib-rodape{justify-content:center} .paginacao button{min-width:31px;height:31px;padding:0 8px} } /* ================================================== editor v2 ========== Criar e editar usam a mesma tela. Barra fixa em cima, navegação por seções logo abaixo, coluna de conteúdo larga e uma lateral que não some ao rolar. Projetos e Notas dividem tudo isso; muda o conteúdo. */ .ed{display:block} .ed-topo{position:sticky;top:8px;z-index:22;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:16px 0 14px;padding:12px 16px;border-radius:20px;background:#f3f3efe8;border:1px solid #ffffffb3;backdrop-filter:blur(22px);box-shadow:0 10px 30px #40493812} .ed-topo__esq{display:flex;align-items:center;gap:16px;min-width:0;flex:1} .ed-voltar{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;font-size:11px;background:#ffffffa8;flex:none} .ed-voltar .ui-icon{width:14px;height:14px} .ed-titulo{min-width:0;flex:1} .ed-eyebrow{display:block;font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:#8b8f86;margin-bottom:3px} .ed-titulo strong{display:block;font:600 19px/1.2 Space,Arial,sans-serif;letter-spacing:-.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ed-topo__dir{display:flex;align-items:center;gap:8px;flex:none} .ed-salvo{font-size:10.5px;color:#8b8f86;white-space:nowrap;margin-right:4px} .ed-salvo.pendente{color:#c05f1d} .ed-topo__dir button{font-size:11.5px;padding:11px 17px;display:inline-flex;align-items:center;gap:7px} .ed-topo__dir .ui-icon{width:14px;height:14px} .ed-nav{position:sticky;top:76px;z-index:21;display:flex;gap:7px;overflow-x:auto;padding:8px 6px;margin:0 -6px 20px;scrollbar-width:none;background:linear-gradient(#f1f1ecdd,#f1f1ec00);backdrop-filter:blur(8px)} .ed-nav::-webkit-scrollbar{display:none} .ed-nav__item{flex:none;border:1px solid transparent;border-radius:100px;background:#ffffff85;color:#63665f;padding:9px 15px;font:600 11px/1.2 Inter,Arial,sans-serif;white-space:nowrap;box-shadow:none} .ed-nav__item:hover{background:#fff;box-shadow:none} .ed-nav__item[aria-current="true"]{background:#fdece2;border-color:#ff59002e;color:#d24d05} .ed-grade{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:26px;align-items:start} .ed-col{display:grid;gap:20px;min-width:0} .ed-lado{position:sticky;top:130px;display:grid;gap:16px;align-content:start;max-height:calc(100vh - 150px);overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#c9ccc5 transparent} .ed-lado::-webkit-scrollbar{width:7px} .ed-lado::-webkit-scrollbar-thumb{background:#c9ccc5;border-radius:100px} .ed-card{border-radius:20px;background:#ffffff70;border:1px solid #ffffff9e;padding:26px 28px;scroll-margin-top:140px;box-shadow:0 1px 0 #fff9 inset} .ed-card__topo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px} .ed-card__topo h2{margin:0;font-size:19px;letter-spacing:-.4px} .ed-card__topo p{margin:5px 0 0;font-size:12px;color:#7c8076;max-width:620px} .ed-card__dobra{width:32px;height:32px;padding:0;border-radius:100px;line-height:0;flex:none;background:#ffffff96} .ed-card__dobra .ui-icon{width:15px;height:15px;transition:transform .2s var(--ease)} .ed-card__dobra[aria-expanded="false"] .ui-icon{transform:rotate(-90deg)} .ed-card__corpo{display:grid;gap:18px} .ed-card__dobra[aria-expanded="false"]+.ed-card__corpo,.ed-card--recolhido .ed-card__corpo{display:none} .ed-card.pulsar{animation:pulsar-card 1.1s var(--ease)} @keyframes pulsar-card{0%,100%{box-shadow:0 1px 0 #fff9 inset}35%{box-shadow:0 0 0 3px #ff59002e,0 1px 0 #fff9 inset}} .ed-campo{display:block;font-size:13.5px;font-weight:500} .ed-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:500;color:#494d45} .ed-conta{font:500 11px/1 Inter,Arial,sans-serif;color:#9a9e95;font-variant-numeric:tabular-nums} .ed-conta.excedeu{color:#c05f1d} .ed-campo .ed-input,.ed-campo .ed-area{width:100%;margin:8px 0 0;border:1px solid #ffffffd9;border-radius:12px;padding:13px 16px;font-size:14.5px;line-height:1.5;background:#ffffffb8;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s} .ed-campo .ed-input:hover,.ed-campo .ed-area:hover{background:#fff} .ed-campo .ed-input:focus,.ed-campo .ed-area:focus{outline:none;background:#fff;border-color:#ff8a4d;box-shadow:0 0 0 3px #ff59001f} .ed-campo--grande .ed-input{padding:15px 18px;font-size:17px;font-weight:500;letter-spacing:-.2px} .ed-campo .ed-area{min-height:110px;resize:vertical} .ed-ajuda{display:block;margin-top:7px;font-size:11.5px;line-height:1.5;color:#8b8f86;font-weight:400} .ed-linha2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .ed-linha3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .ed-check{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:#494d45} .ed-check input{width:auto;margin:0} .ed-midia{display:grid;gap:12px;min-width:0} .ed-midia__palco{position:relative;border-radius:16px;overflow:hidden;background:#e9ebe6;aspect-ratio:16/7} .ed-midia--quadro .ed-midia__palco{aspect-ratio:4/3} .ed-midia__palco img{width:100%;height:100%;object-fit:cover;display:block} .ed-midia__vazio{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;border:1px dashed #c7cbc3;border-radius:16px;background:#ffffff5c;color:#6d7168;box-shadow:none;transition:background .2s,border-color .2s} .ed-midia__vazio:hover{background:#fff;border-color:var(--orange);box-shadow:none} .ed-midia__vazio .ui-icon{width:24px;height:24px;color:var(--orange);margin-bottom:3px} .ed-midia__vazio strong{font:600 13px/1.3 Space,Arial,sans-serif;color:#4a4d47} .ed-midia__vazio small{font-size:11px;color:#8b8f86} .ed-midia__trocar{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;font-size:11px;background:#ffffffdb;border-color:#ffffffe8;box-shadow:0 6px 18px #2b2a2618} .ed-midia__trocar .ui-icon{width:14px;height:14px} .ed-midia__acoes{display:flex;gap:8px;flex-wrap:wrap} .ed-midia__acoes button{display:inline-flex;align-items:center;gap:7px;font-size:11px;padding:9px 14px} .ed-midia__acoes .ui-icon{width:14px;height:14px} .ed-dica{display:flex;gap:11px;padding:16px 17px;border-radius:16px;background:#fdf1e7;border:1px solid #ffe2cd} .ed-dica .ui-icon{width:17px;height:17px;color:var(--orange);flex:none;margin-top:1px} .ed-dica p{margin:0;font-size:11.5px;line-height:1.6;color:#8a5a33} .ed-dica strong{display:block;font:600 12px/1.4 Space,Arial,sans-serif;color:#7a4a22;margin-bottom:3px} .ed-midia-grade{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:18px;align-items:start} .ed-repeat{display:grid;gap:12px} .ed-repeat__lista{display:grid;gap:8px} .ed-repeat__linha{display:grid;grid-template-columns:22px 1fr 36px;gap:12px;align-items:end;padding:12px 14px;border-radius:15px;background:#ffffff7a;border:1px solid #ffffffb8;transition:border-color .2s,background .2s,box-shadow .2s} .ed-repeat__linha:hover{background:#fff} .ed-repeat__linha.arrastando{opacity:.45} .ed-repeat__linha.alvo{box-shadow:0 -2px 0 var(--orange)} .ed-repeat__linha.campos2{grid-template-columns:22px 1fr 1fr 36px} .ed-repeat__linha.campos3{grid-template-columns:22px 1fr .8fr 1.4fr 36px} .ed-repeat__linha:not(:first-child) .ed-label{display:none} .ed-repeat__linha:not(:first-child) .ed-input{margin-top:0} .ed-repeat__pega{align-self:center;justify-self:center;width:12px;height:18px;cursor:grab;background-image:radial-gradient(#b4b8b0 1.2px,transparent 1.2px);background-size:6px 6px;opacity:.85} .ed-repeat__linha:not(:first-child) .ed-repeat__pega{margin-top:0} .ed-repeat__x{align-self:end;width:36px;height:44px;padding:0;border-radius:11px;line-height:0;background:#ffffff8c} .ed-repeat__x .ui-icon{width:14px;height:14px;color:#8b8f86} .ed-repeat__x:hover{background:#fff} .ed-repeat__x:hover .ui-icon{color:#b33324} .ed-repeat__add{justify-self:start;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;padding:10px 16px} .ed-repeat__add .ui-icon{width:14px;height:14px} .ed-vazio-linha{margin:0;padding:16px;border-radius:14px;border:1px dashed #c7cbc3;background:#ffffff3d;font-size:12px;color:#8b8f86;text-align:center} .ed-rich{display:grid;gap:10px} .ed-rich__caixa{border:1px solid #ffffffd9;border-radius:16px;overflow:hidden;background:#ffffffb8;transition:border-color .2s,box-shadow .2s} .ed-rich__caixa:focus-within{border-color:#ff8a4d;box-shadow:0 0 0 3px #ff59001f;background:#fff} .ed-tb{display:flex;align-items:center;gap:0;flex-wrap:wrap;padding:9px 11px;background:#ffffff8c;border-bottom:1px solid #e8eae4} .ed-tb__grupo{display:flex;gap:3px;padding:0 9px;border-right:1px solid #e3e5df} .ed-tb__grupo:first-child{padding-left:0} .ed-tb__fim{margin-left:auto;padding-left:9px} .ed-tb button{min-width:34px;height:34px;padding:0 11px;border:1px solid transparent;border-radius:9px;background:transparent;font-size:11.5px;font-weight:500;color:#5b5f57;box-shadow:none;transition:background .18s,color .18s} .ed-tb button:hover{background:#fdece2;color:#d24d05;box-shadow:none} .ed-tb button:active{background:#fbdfcd} .ed-escrita{padding:26px 30px;font-size:15.5px;line-height:1.68;background:transparent;outline-offset:-4px} .ed-escrita:focus{outline:none} .ed-escrita:empty:before{content:attr(data-vazio);color:#a2a69d} .ed-lado__card{border-radius:19px;background:#ffffff70;border:1px solid #ffffff9e;padding:20px 21px;scroll-margin-top:140px;box-shadow:0 1px 0 #fff9 inset} .ed-lado__card.pulsar{animation:pulsar-card 1.1s var(--ease)} .ed-lado__card h3{display:flex;align-items:center;gap:9px;margin:0 0 15px;font-size:15px;letter-spacing:-.3px} .ed-lado__card .ed-campo+.ed-campo,.ed-lado__card .ed-campo+.ed-check{margin-top:16px} .ed-lado__card .ed-check{margin-top:16px} .ed-lado__card .ui-icon{width:15px;height:15px} .ed-perigo{margin-top:18px;padding-top:15px;border-top:1px solid #8a8d8317} .ed-perigo button{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;color:#b33324;background:#ffffff85;border-color:#ffffffb8} .ed-perigo button:hover{background:#fff;border-color:#e8c4bd} .ed-perigo .ui-icon{width:14px;height:14px} .ed-previa{display:grid;gap:11px} .ed-previa__capa{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#e9ebe6;display:flex;align-items:center;justify-content:center;color:#b0b4ac} .ed-previa__capa img{width:100%;height:100%;object-fit:cover} .ed-previa__capa .ui-icon{width:26px;height:26px} .ed-previa strong{font:600 14px/1.35 Space,Arial,sans-serif;letter-spacing:-.2px} .ed-previa p{margin:0;font-size:12px;line-height:1.55;color:#72766e} .ed-previa .card-tags{margin-top:2px} .ed-seo-previa{margin-top:16px;padding:14px 15px;border-radius:14px;background:#ffffff96;border:1px solid #ffffffcc} .ed-seo-previa small{display:block;font-size:11px;color:#5a7a4e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ed-seo-previa strong{display:block;margin:4px 0 3px;font:500 14px/1.35 Inter,Arial,sans-serif;color:#2f4f8a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ed-seo-previa p{margin:0;font-size:11.5px;line-height:1.5;color:#6e726a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ed-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px} .ed-tag{display:inline-flex;align-items:center;gap:7px;padding:7px 8px 7px 13px;border-radius:100px;background:#ffffff96;border:1px solid #ffffffd1;font-size:11.5px;color:#54584f} .ed-tag button{width:19px;height:19px;padding:0;border:0;border-radius:100px;background:#eceeea;line-height:0;box-shadow:none} .ed-tag button .ui-icon{width:10px;height:10px;color:#7c8076} .ed-tag button:hover{background:#f7ddd0;box-shadow:none} .ed-tag button:hover .ui-icon{color:#b33324} @media (max-width:1100px){ .ed-grade{grid-template-columns:minmax(0,1fr)} .ed-lado{position:static;max-height:none;overflow:visible;grid-template-columns:1fr 1fr} .ed-midia-grade{grid-template-columns:minmax(0,1fr)} } @media (max-width:760px){ .ed-topo{top:4px;padding:11px 12px;gap:10px} .ed-topo__esq{flex:1 1 100%;flex-wrap:wrap;gap:10px} .ed-titulo strong{font-size:16px;white-space:normal} .ed-topo__dir{flex:1 1 100%;justify-content:space-between} .ed-topo__dir button{flex:1;justify-content:center} .ed-salvo{order:-1;width:100%;margin:0} .ed-nav{top:118px} .ed-lado{grid-template-columns:1fr} .ed-card{padding:20px 18px;border-radius:18px} .ed-linha2,.ed-linha3{grid-template-columns:1fr} .ed-escrita{padding:18px 17px} .ed-repeat__linha,.ed-repeat__linha.campos2,.ed-repeat__linha.campos3{grid-template-columns:22px 1fr 36px} } /* ============================================ legibilidade e precisão === Mesma identidade, leitura mais confortável. Tokens de texto com contraste suficiente, escala tipográfica única, alvos de toque generosos, foco sempre visível e geometria exata nos controles. */ :root{ --txt-1:#2f322d; --txt-2:#4b4f47; --txt-3:#646962; --txt-off:#9aa094; --alvo-sm:40px; --alvo-md:44px; --r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:999px; --foco:#e24f00; } body{font-size:15px;line-height:1.55;color:var(--txt-1)} .muted,small{color:var(--txt-3)} input::placeholder,textarea::placeholder{color:#6f746c} .ui-icon{display:inline-block;vertical-align:middle;flex:none} .topline a,.stat-label,.recent-end,.round-link,.text-button,.app-footer button,.search-result{display:inline-flex;align-items:center;gap:8px} .stat-label{justify-content:space-between;width:100%} .recent-end{gap:12px} .search-result{gap:12px;justify-content:flex-start;text-align:left} /* foco visível em tudo que se opera, sem apagar nenhum já existente */ button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[contenteditable]:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--foco);outline-offset:2px} .ed-campo .ed-input:focus-visible,.ed-campo .ed-area:focus-visible{outline:2px solid var(--foco);outline-offset:2px} .bib-item__abrir:focus-visible,.inbox-item:focus-visible,.card-capa:focus-visible{outline:2px solid var(--foco);outline-offset:-2px} .bib-item:focus-within{border-color:#fff;box-shadow:0 12px 30px #39372d14} .bib-item:focus-within .bib-item__menu,.card-conteudo:focus-within .botao-icone{opacity:1} /* botões de ícone: círculo exato, ícone centrado por estrutura */ .botao-icone,.vista-toggle button,.paginacao button,.visor-nav,.bib-item__menu,.ed-card__dobra,.ed-tag button,.ed-repeat__x,#close-media,#close-search,#close-preview,.visor-zoom button{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0;box-sizing:border-box} .botao-icone{width:var(--alvo-sm);height:var(--alvo-sm);min-width:var(--alvo-sm);min-height:var(--alvo-sm);border-radius:50%} .botao-icone .ui-icon{width:18px;height:18px} .det-campo .botao-icone{width:var(--alvo-sm);height:var(--alvo-sm);min-width:var(--alvo-sm);min-height:var(--alvo-sm)} .det-campo .botao-icone .ui-icon{width:17px;height:17px} .bib-item__menu{width:var(--alvo-sm);height:var(--alvo-sm);min-width:var(--alvo-sm);border-radius:50%;right:8px;bottom:8px} .bib-item__menu .ui-icon{width:18px;height:18px} .visor-nav{width:var(--alvo-md);height:var(--alvo-md);min-width:var(--alvo-md);min-height:var(--alvo-md);border-radius:50%} .visor-nav .ui-icon{width:20px;height:20px} .paginacao{gap:5px} .paginacao button{width:var(--alvo-sm);height:var(--alvo-sm);min-width:var(--alvo-sm);min-height:var(--alvo-sm);border-radius:50%;font-size:13.5px;line-height:1} .paginacao button .ui-icon{width:17px;height:17px} .ed-card__dobra{width:var(--alvo-sm);height:var(--alvo-sm);min-width:var(--alvo-sm);border-radius:50%} .ed-card__dobra .ui-icon{width:17px;height:17px} .ed-repeat__x{width:var(--alvo-sm);height:48px;border-radius:12px} .ed-repeat__x .ui-icon{width:17px;height:17px} .ed-tag button{width:24px;height:24px;min-width:24px;border-radius:50%} .ed-tag button .ui-icon{width:12px;height:12px} #close-media,#close-search,#close-preview{width:var(--alvo-sm);height:var(--alvo-sm);min-width:var(--alvo-sm);min-height:var(--alvo-sm);border-radius:50%} /* alternador grade e lista: as duas opções exatamente iguais */ .vista-toggle{padding:4px;gap:4px;border-radius:var(--r-pill);box-sizing:border-box} .vista-toggle button{width:var(--alvo-sm);height:var(--alvo-sm);min-width:var(--alvo-sm);min-height:var(--alvo-sm);border:1px solid transparent;border-radius:50%;background:transparent;box-shadow:none} .vista-toggle button .ui-icon{width:18px;height:18px} .vista-toggle button:hover{background:#ffffffc4;box-shadow:none} .vista-toggle button[aria-pressed="true"]{background:#fff;border-color:#ff590047;color:var(--orange);box-shadow:0 2px 8px #39372d12} /* chips e filtros */ .chip{min-height:var(--alvo-sm);padding:11px 17px;font-size:13.5px;gap:9px;border-width:1px;box-sizing:border-box} .chip:before{content:'';width:7px;height:7px;border-radius:50%;background:transparent;border:1px solid #c2c6be;flex:none} .chip[aria-pressed="true"]:before{background:var(--orange);border-color:var(--orange)} .chip b{font-size:13px} .chip .ui-icon{width:16px;height:16px} .topic-filter{min-height:var(--alvo-sm);font-size:12.5px;padding:11px 17px} /* campos de busca */ .campo-busca input{padding:14px 66px 14px 50px!important;font-size:16px;min-height:52px;height:52px} .campo-busca .ui-icon{width:19px;height:19px;left:20px;color:#6f746c} .campo-busca kbd{font-size:11px;padding:6px 8px;color:#6f746c} /* selos e status: cor, texto e ponto, nunca só cor */ .selo{font-size:12.5px;padding:6px 13px;min-height:28px;line-height:1.3} .selo:before{width:6px;height:6px} .badge{font-size:12.5px;padding:6px 12px} /* cabeçalho, navegação e rodapé */ .app-header nav .nav-item{font-size:15px;min-height:var(--alvo-md);display:inline-flex;align-items:center;gap:9px} .app-header nav .nav-item .ui-icon{width:18px;height:18px} .profile-button{min-height:var(--alvo-md)} .profile-button span{font-size:12.5px} .topline .search-trigger{font-size:14.5px;min-height:var(--alvo-md)} .topline a{font-size:14px} .app-footer{font-size:13px} .app-footer button{font-size:13px;min-height:var(--alvo-sm)} .studio-label{font-size:11.5px} .eyebrow{font-size:12px;letter-spacing:.5px} /* páginas: hero, cards e listas */ .pg-hero p.sub{font-size:15px;color:var(--txt-2)} .pg-hero-nota{font-size:14px;line-height:1.55;color:var(--txt-3);max-width:215px} .vazio strong{font-size:17px} .vazio p{font-size:14px;line-height:1.55} .card-titulo h3{font-size:16.5px} .card-titulo time{font-size:13.5px;color:var(--txt-3)} .card-meta{font-size:14px;color:var(--txt-2)} .card-desc{font-size:14.5px;line-height:1.55;color:var(--txt-2);max-width:62ch} .card-tag{font-size:12.5px;padding:6px 12px;color:var(--txt-2)} .card-rodape .editar,.linha-acoes .editar{font-size:14px;min-height:var(--alvo-sm);padding:10px 17px} .card-rodape .ui-icon,.linha-acoes .ui-icon{width:16px;height:16px} .card-novo strong{font-size:15px} .card-novo small{font-size:13.5px;color:var(--txt-3)} .linha-conteudo{padding:14px 16px} .linha-corpo strong{font-size:15.5px;line-height:1.3} .linha-corpo small{font-size:13.5px;color:var(--txt-3);margin-top:5px} .linha-corpo em{font-size:14px;line-height:1.5;color:var(--txt-2);margin-top:5px;max-width:78ch} .linha-data{font-size:13.5px;color:var(--txt-3)} .linha-conteudo>img,.linha-conteudo .sem-capa{width:58px;height:52px} .linha-conteudo{grid-template-columns:58px minmax(0,1fr) auto 92px auto} /* biblioteca */ .bib-item__nome{font-size:14px;color:var(--txt-1)} .bib-item__meta{font-size:13px;color:var(--txt-3);margin-top:4px} .bib-item__corpo{padding:12px 46px 14px 13px} .bib-envio__texto strong{font-size:15px} .bib-envio__texto small{font-size:13.5px;color:var(--txt-3)} .bib-envio label.arquivo{font-size:14px;min-height:48px;padding:13px 19px} .bib-envio .primary{min-height:48px} .bib-envio__marca{width:48px;height:48px;min-width:48px;border-radius:15px} .bib-envio label.arquivo .ui-icon{width:17px;height:17px} .bib-envio input[name=alt]{font-size:15px;min-height:48px;height:48px;padding:12px 19px} .bib-envio .escolhido{font-size:13px;color:var(--txt-2)} .bib-rodape small{font-size:13.5px;color:var(--txt-3)} .bib-linha{padding:10px 14px} .bib-linha__nome{font-size:14px} .bib-linha small{font-size:13px;color:var(--txt-3)} /* mensagens */ .inbox-item{padding:16px 18px} .inbox-sigla{width:var(--alvo-sm);height:var(--alvo-sm);min-width:var(--alvo-sm);font-size:13px} .inbox-item{grid-template-columns:var(--alvo-sm) minmax(0,1fr) auto auto} .inbox-quem strong{font-size:16px} .inbox-quem small{font-size:14px;color:var(--txt-3);margin-top:2px} .inbox-quem em{font-size:14.5px;line-height:1.5;color:var(--txt-2);margin-top:5px} .inbox-orc{font-size:13.5px;padding:7px 13px;color:var(--txt-2)} .inbox-data{font-size:13.5px;color:var(--txt-3)} .det-topo h2{font-size:21px} .det-estado small{font-size:13px;color:var(--txt-3)} .det-campo{font-size:14.5px;padding:11px 0;gap:11px} .det-campo .ui-icon{width:17px;height:17px} .det-rotulo{font-size:12.5px;font-weight:600;color:var(--txt-3);margin:20px 0 8px} .det-orcamento{font-size:15px;padding:9px 16px} .det-mensagem{font-size:15px;line-height:1.7;max-width:64ch;color:var(--txt-1)} .det-responder{min-height:48px;font-size:14.5px} .det-acoes button{font-size:13.5px;min-height:var(--alvo-sm);padding:11px 15px} .det-acoes .ui-icon{width:16px;height:16px} .inbox-voltar{font-size:13.5px;min-height:var(--alvo-sm)} /* visualizador */ .visor-nome strong{font-size:16px} .visor-nome small{font-size:13px;color:var(--txt-3);margin-top:4px} .visor-zoom{padding:4px;gap:3px} .visor-zoom button{min-height:var(--alvo-sm);font-size:13.5px;border-radius:var(--r-pill)} .visor-zoom button:not(.texto){width:var(--alvo-sm);min-width:var(--alvo-sm);padding:0;border-radius:50%} .visor-zoom button.texto{padding:0 16px;line-height:1} .visor-zoom button .ui-icon{width:18px;height:18px} .visor-pct{min-width:74px} .visor-arquivo button{font-size:13.5px;min-height:var(--alvo-sm);padding:11px 17px} .visor-arquivo .ui-icon{width:17px;height:17px} .visor-info h4{font-size:14px} .visor-linha{font-size:13.5px;padding:10px 0} .visor-linha span{color:var(--txt-3)} .visor-info label{font-size:12.5px;color:var(--txt-3)} .visor-info textarea{font-size:14px;min-height:82px} .visor-info .salvar-alt{font-size:13.5px;min-height:var(--alvo-sm)} .visor-uso__item{font-size:13.5px;min-height:var(--alvo-md);padding:11px 13px} .visor-uso__item .ui-icon{width:17px;height:17px} .visor-vazio-alt{font-size:13px;line-height:1.55;color:var(--txt-3)} .visor-otimizar h4{font-size:14.5px} /* menus, confirmações e revisão */ .menu-flutuante button{font-size:14px;min-height:var(--alvo-md);padding:11px 13px;gap:11px} .menu-flutuante .ui-icon{width:17px;height:17px} #confirmar-dialog p{font-size:14px;line-height:1.6;color:var(--txt-2)} #confirmar-dialog ul{font-size:13.5px;color:var(--txt-2);line-height:1.6} #confirmar-dialog footer button{min-height:var(--alvo-md);font-size:14px} ul.revisao li{font-size:13.5px;line-height:1.55;color:var(--txt-2)} .revisao-ok{font-size:13.5px;line-height:1.55} .revisao-conta{min-width:24px;height:24px;font-size:12.5px} .revisao-panel small,.ed-lado__card .ed-ajuda{font-size:12.5px;color:var(--txt-3)} /* editor */ .ed-eyebrow{font-size:11.5px;color:var(--txt-3)} .ed-titulo strong{font-size:21px} .ed-salvo{font-size:13px;color:var(--txt-3)} .ed-voltar{font-size:13.5px;min-height:var(--alvo-sm)} .ed-voltar .ui-icon{width:16px;height:16px} .ed-topo__dir button{font-size:14px;min-height:var(--alvo-md);padding:12px 19px} .ed-topo__dir .ui-icon{width:16px;height:16px} .ed-nav__item{font-size:13.5px;min-height:var(--alvo-sm);padding:10px 17px;border-width:1px;box-sizing:border-box} .ed-card__topo h2{font-size:20px} .ed-card__topo p{font-size:14px;line-height:1.55;color:var(--txt-3)} .ed-label{font-size:14.5px;color:var(--txt-2)} .ed-conta{font-size:13px;color:var(--txt-3)} .ed-campo .ed-input,.ed-campo .ed-area{font-size:16px;min-height:48px;padding:13px 16px} .ed-campo--grande .ed-input{font-size:18px;min-height:54px} .ed-ajuda{font-size:13px;line-height:1.5;color:var(--txt-3)} .ed-check{font-size:14.5px;min-height:var(--alvo-sm)} .ed-check input{width:19px;height:19px;accent-color:var(--orange)} .ed-midia__acoes button{font-size:13.5px;min-height:var(--alvo-sm);padding:11px 16px} .ed-midia__acoes .ui-icon{width:16px;height:16px} .ed-midia__trocar{font-size:13.5px;min-height:var(--alvo-sm);padding:11px 16px} .ed-midia__vazio strong{font-size:15px} .ed-midia__vazio small{font-size:13.5px;color:var(--txt-3)} .ed-dica p{font-size:13.5px;line-height:1.6} .ed-dica strong{font-size:14px} .ed-tb{padding:8px 11px} .ed-tb button{min-width:36px;height:36px;font-size:13.5px;padding:0 12px;box-sizing:border-box} .ed-tb__grupo{gap:4px} .ed-escrita{font-size:16px;line-height:1.7} .ed-repeat__add{font-size:13.5px;min-height:var(--alvo-sm)} .ed-vazio-linha{font-size:14px} .ed-tag{font-size:13.5px;min-height:34px;padding:6px 8px 6px 14px} .ed-lado__card h3{font-size:16px} .ed-previa strong{font-size:16px} .ed-previa p{font-size:14px;line-height:1.55;color:var(--txt-2)} .ed-seo-previa small{font-size:12.5px} .ed-seo-previa strong{font-size:15px} .ed-seo-previa p{font-size:13px;line-height:1.5;color:var(--txt-3)} .ed-perigo button{font-size:13.5px;min-height:var(--alvo-md)} .ed-repeat__linha{padding:13px 14px} /* botões com ícone e texto no mesmo eixo, sem mexer nos que empilham */ button{box-sizing:border-box} button>.ui-icon{vertical-align:-3px} .primary,.ed-topo__dir .primary,.title-row>.primary,.pg-hero-acao .primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--alvo-md)} .text-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--alvo-sm)} .row-action,.ed-repeat__add,.bib-envio label.arquivo,.inbox-voltar,.visor-arquivo button,.visor-uso__item,.det-acoes button,.ed-midia__acoes button,.ed-midia__trocar,.ed-perigo button,.card-rodape .editar,.linha-acoes .editar,.ed-voltar,.ed-topo__dir button{display:inline-flex;align-items:center;justify-content:center;gap:8px} .visor-uso__item,.menu-flutuante button{justify-content:flex-start} /* quem pediu menos movimento, recebe menos movimento */ @media (prefers-reduced-motion:reduce){ *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .bib-item:hover,.card-conteudo:hover,.linha-conteudo:hover,.card-novo:hover,.ed-card.pulsar,.ed-lado__card.pulsar{transform:none;animation:none} } /* visão geral: mesma escala das outras páginas */ .dashboard-intro .eyebrow,.section-heading .eyebrow{font-size:12px;letter-spacing:.5px;color:var(--txt-3)} .banner-copy .eyebrow{font-size:12px;letter-spacing:.5px} .banner-tag,.banner-index{font-size:11.5px;letter-spacing:.5px} .welcome .muted{font-size:15px;color:var(--txt-2)} .publication-summary strong{font-size:15px} .publication-summary small,.stat small,.recent small{font-size:13px;color:var(--txt-3)} .stat-label{font-size:13.5px;color:var(--txt-2)} .recent-name strong{font-size:15px} .recent a,.recent-name{min-height:var(--alvo-md)} .search-result strong{font-size:15px} .search-result small{font-size:13px;color:var(--txt-3)} #search-caption{font-size:12px} .help-list li{font-size:14.5px;line-height:1.6;color:var(--txt-2)} .info{font-size:13.5px;line-height:1.6} .saved-key{font-size:14px} .login-card p{font-size:15px;line-height:1.6} #notice{font-size:14px} /* ------------------------------------- nome do arquivo embaixo do card Padrão para qualquer card com legenda abaixo da imagem: respiro lateral igual dos dois lados, uma linha só e reticências quando não couber. O menu de ações subiu para o canto da imagem, então o nome usa a largura inteira. O nome completo continua disponível no title e no aria-label. */ .bib-item__menu{top:9px;right:9px;bottom:auto} .bib-item__corpo{display:block;padding:14px 16px 16px} .bib-item__nome,.bib-linha__nome,.media-card .mc-nome{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bib-item__meta{display:block;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .media-card>button{display:block} .media-card .mc-corpo{display:block;padding:13px 15px 15px} .media-card .mc-nome{font-size:13.5px;font-weight:500;color:var(--txt-1)} .media-card .mc-meta{display:block;margin-top:4px;font-size:12.5px;color:var(--txt-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .banner-tag,.banner-index,.ed-eyebrow{font-size:12px} /* ------------------------------------------- ícone na medida do texto Onde existe ícone ao lado de palavra, o ícone passa a ser 1.2em, a mesma proporção do menu principal: 15px de texto com 18px de ícone. Assim ele cresce e diminui junto com a tipografia do próprio botão. Botões só de ícone continuam com medida fixa, porque ali não há texto de referência e o que manda é o alvo de toque. */ .app-header nav .nav-item .ui-icon,.profile-button .ui-icon,.topline a .ui-icon,.topline .search-trigger .ui-icon, .primary .ui-icon,.text-button .ui-icon,.app-footer button .ui-icon,.round-link .ui-icon, .stat-label .ui-icon,.recent-end .ui-icon,.search-result .ui-icon, .chip .ui-icon,.campo-busca .ui-icon, .card-rodape .editar .ui-icon,.linha-acoes .editar .ui-icon,.row-action .ui-icon, .bib-envio label.arquivo .ui-icon,.bib-rodape .ui-icon, .det-campo>.ui-icon,.det-acoes button .ui-icon,.det-responder .ui-icon,.inbox-voltar .ui-icon, .visor-arquivo button:not(.botao-icone) .ui-icon,.visor-uso__item .ui-icon, .menu-flutuante button .ui-icon, .ed-voltar .ui-icon,.ed-topo__dir button .ui-icon,.ed-lado__card h3 .ui-icon, .ed-midia__acoes button .ui-icon,.ed-midia__trocar .ui-icon,.ed-repeat__add .ui-icon,.ed-perigo button .ui-icon, #confirmar-dialog button .ui-icon{width:1.2em;height:1.2em} /* ícone sozinho: medida fixa, centrado por estrutura */ .botao-icone .ui-icon,.visor-nav .ui-icon,.paginacao button .ui-icon,.vista-toggle button .ui-icon, .bib-item__menu .ui-icon,.ed-card__dobra .ui-icon,.ed-repeat__x .ui-icon,.visor-zoom button:not(.texto) .ui-icon, #close-media .ui-icon,#close-search .ui-icon{width:18px;height:18px} .visor-nav .ui-icon{width:20px;height:20px} .ed-tag button .ui-icon{width:12px;height:12px} .ed-previa strong,.ed-seo-previa strong{overflow-wrap:anywhere} .ed-previa strong{display:block} /* o voltar da mensagem só existe quando a lista some da tela */ .inbox-voltar{display:none} @media (max-width:1100px){.inbox-voltar{display:inline-flex;align-items:center;justify-content:center;gap:8px}} /* ---------------------------------------- centralização dos ícones Uma regra antiga dava margin-left de 8px em todo ícone dentro de botão ou link, para afastar a seta do texto. Em botão só de ícone essa margem empurrava o desenho 4px para a direita, e era por isso que o círculo parecia torto. O afastamento agora é gap do próprio botão, que só existe quando há texto ao lado, então o ícone sozinho fica exatamente no centro. */ button .ui-icon,a .ui-icon{margin:0} .banner-copy button,.stat,#retry,.nav-item{gap:8px} .banner-copy button{display:inline-flex;align-items:center;justify-content:center} .stat{gap:0} /* o atalho redondo da visão geral estava 38x38 e sem centralizar */ .round-link{width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center} .round-link .ui-icon{width:11px;height:14px} /* ======================================= acabamento e contraste v3 ===== Mesma identidade, superfícies com hierarquia perceptível e controles que param de sumir sobre o fundo claro. Tudo por token, para as nove telas mudarem juntas. */ :root{ --sup-cartao:#ffffff; --sup-controle:#ffffff; --sup-hover:#ffffff; --sup-suave:#f6f6f3; --borda-cartao:#e2e5df; --borda-controle:#c8ccc3; --borda-hover:#a9ae9f; --laranja-fundo:#fdeee4; --laranja-borda:#f7a469; --laranja-texto:#bf4907; --esp-1:4px;--esp-2:8px;--esp-3:12px;--esp-4:16px;--esp-5:20px;--esp-6:24px;--esp-7:32px;--esp-8:40px; } /* controles claros sobre fundo claro: borda de verdade, sombra só acabamento */ input:not([type=checkbox]):not([type=file]),textarea,select{background:var(--sup-controle);border-color:var(--borda-controle)} input:not([type=checkbox]):not([type=file]):hover,textarea:hover{border-color:var(--borda-hover)} .campo-busca input{background:var(--sup-controle);border:1px solid var(--borda-controle)} .campo-busca input:hover{border-color:var(--borda-hover)} .campo-busca input:focus{border-color:var(--orange);box-shadow:0 0 0 3px #ff59001f} .select-button{background:var(--sup-controle)!important;border:1px solid var(--borda-controle)!important} .select-button:hover{border-color:var(--borda-hover)!important} button:where(:not(.primary):not(.btn-escuro):not(.chip):not(.banner-dark-button)){background:var(--sup-controle);border-color:var(--borda-controle)} button:where(:not(.primary):not(.btn-escuro):not(.banner-dark-button)):hover{border-color:var(--borda-hover);background:var(--sup-hover)} .vista-toggle{background:var(--sup-suave);border-color:var(--borda-controle)} .vista-toggle button{background:transparent;border-color:transparent} .vista-toggle button:hover{background:#ffffff;border-color:var(--borda-controle)} .vista-toggle button[aria-pressed="true"]{background:#fff;border-color:var(--laranja-borda);color:var(--orange);box-shadow:0 1px 3px #39372d1f} .bib-item,.card-conteudo,.linha-conteudo,.ed-card,.ed-lado__card,.inbox-lista,.inbox-detalhe,.panel,.bib-linha{background:var(--sup-cartao);border-color:var(--borda-cartao)} .bib-item:hover,.card-conteudo:hover,.linha-conteudo:hover,.bib-linha:hover{border-color:var(--borda-hover);background:var(--sup-cartao)} .menu-flutuante{border-color:var(--borda-cartao)} .card-novo{border-color:var(--borda-controle);background:#ffffff70} .vazio{border-color:var(--borda-controle);background:#ffffff8c} .ed-vazio-linha,.bib-envio{border-color:var(--borda-controle)} .ed-repeat__linha{background:var(--sup-cartao);border-color:var(--borda-cartao)} .ed-rich__caixa,.ed-campo .ed-input,.ed-campo .ed-area{background:var(--sup-controle);border-color:var(--borda-controle)} .ed-tb{background:var(--sup-suave);border-bottom-color:var(--borda-cartao)} .det-mensagem,.det-orcamento,.inbox-orc{background:var(--sup-suave);border-color:var(--borda-cartao)} .ed-seo-previa,.visor-info,.visor-uso__item{background:var(--sup-suave);border-color:var(--borda-cartao)} .visor-uso__item{background:var(--sup-cartao)} .card-tag{background:var(--sup-suave);border-color:var(--borda-cartao)} .topline .search-trigger{background:var(--sup-controle);border:1px solid var(--borda-controle)} /* botão escuro, para a ação de arquivo não sumir no card branco */ .btn-escuro{background:#262824;color:#fff;border:1px solid #262824} .btn-escuro .ui-icon{color:#fff} .btn-escuro:hover{background:#3a3d37;border-color:#3a3d37;color:#fff;box-shadow:0 7px 22px #26282422} .btn-escuro:active{background:#1d1f1c} /* ----------------------------------------------------- grupos de filtro Status manda, Categoria acompanha. Os dois grupos ganham rótulo e começam no mesmo eixo, e as bolinhas vazadas saíram: sobrou um ponto sólido só no status ativo. */ .filtros{display:grid;gap:18px;margin:0 0 22px} .filtro-grupo{display:grid;gap:9px} .filtro-rotulo{font:600 12.5px/1.2 Inter,Arial,sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--txt-3)} .chips{margin:0} .chip:before{display:none} .chips--status .chip{min-height:40px;padding:11px 18px;font-size:14px;background:var(--sup-controle);border:1px solid var(--borda-controle);color:var(--txt-2)} .chips--status .chip:hover{border-color:var(--borda-hover);color:var(--txt-1)} .chips--status .chip[aria-pressed="true"]{background:var(--laranja-fundo);border-color:var(--laranja-borda);color:var(--laranja-texto);font-weight:600;box-shadow:none} .chips--status .chip[aria-pressed="true"]:before{display:block;content:'';width:7px;height:7px;border-radius:50%;background:var(--orange);border:0;flex:none} .chips--cat .chip{min-height:34px;padding:8px 14px;font-size:13.5px;background:transparent;border:1px solid var(--borda-cartao);color:var(--txt-3);font-weight:500} .chips--cat .chip:hover{background:var(--sup-cartao);border-color:var(--borda-controle);color:var(--txt-2)} .chips--cat .chip[aria-pressed="true"]{background:#fff7f1;border-color:#ffcaa6;color:var(--laranja-texto);font-weight:600} .chip b{font-weight:600;color:inherit;opacity:.72} .chip b:before{content:'·';margin-right:7px;opacity:.6} .chips--cat .chip b{font-size:12.5px} /* ordenação ganhou lugar próprio na barra de ferramentas */ .campo-ordem{flex:none} .campo-ordem>.custom-select,.campo-ordem>select{width:200px;margin:0} .campo-ordem .select-button{min-height:52px;border-radius:var(--r-pill);padding:0 18px;font-size:14px} /* --------------------------------------------------- cabeçalho da página Notas e Projetos perderam a peça decorativa e o texto editorial, então o bloco virou título, subtítulo e ação, igual nas duas telas. */ .pg-hero{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;margin:28px 0 24px} .pg-hero-meio{display:none} .pg-hero h1{font-size:38px;line-height:1.14;letter-spacing:-1.6px} .pg-hero p.sub{font-size:15px;line-height:1.5} .pg-hero-acao .primary{min-height:46px;padding:0 22px;font-size:14.5px} /* --------------------------------------------------------- visão geral */ .section-heading{align-items:center} .section-heading .primary{min-height:44px;padding:0 20px;font-size:14px} .recent-seta{display:inline-grid;place-items:center;width:40px;height:40px;flex:none} .recent-seta .ui-icon{width:11px;height:14px;color:#8b8f86} .recent-end{gap:10px;align-items:center} .recent a:hover .recent-seta .ui-icon{color:var(--orange)} .stat-label .ui-icon{width:9px;height:12px} .publication-summary,.stat,.recent a{border-color:var(--borda-cartao)} /* -------------------------------------------------- envio da biblioteca */ .bib-envio{background:var(--sup-cartao);border:1px solid var(--borda-controle);border-style:solid;gap:14px;padding:16px 18px} .bib-envio.sobre{border-color:var(--orange);background:#fffaf6} .bib-envio__marca{background:var(--laranja-fundo)} .bib-envio input[name=alt]{background:var(--sup-controle);border:1px solid var(--borda-controle)} .bib-envio input[name=alt]:hover{border-color:var(--borda-hover)} .bib-envio input[name=alt]:focus{border-color:var(--orange);box-shadow:0 0 0 3px #ff59001f} .bib-envio .primary{min-height:48px;padding:0 24px} .bib-envio label.arquivo{height:48px;padding:0 20px} /* ------------------------------------------------- mensagens, contraste */ .det-acoes button,.inbox-voltar{background:var(--sup-controle);border:1px solid var(--borda-controle)} .det-acoes button:hover{border-color:var(--borda-hover)} .det-responder{min-height:48px} .inbox-item[aria-current="true"]{background:var(--laranja-fundo)} .inbox-item:hover{background:var(--sup-suave)} /* ============================================ tablet: 768px a 1023px === Nem desktop apertado, nem celular esticado. Duas colunas de conteúdo, lateral do editor embaixo e barra de ferramentas em duas linhas. */ @media (min-width:768px) and (max-width:1023px){ .main{padding:0 24px 22px} .pg-hero h1{font-size:34px} .grade-cards{grid-template-columns:repeat(2,minmax(0,1fr))} .bib-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .barra-ferramentas{flex-wrap:wrap} .campo-busca{flex:1 1 100%} .campo-ordem{flex:1 1 auto} .campo-ordem>.custom-select{width:100%} .ed-grade{grid-template-columns:minmax(0,1fr)} .ed-lado{position:static;max-height:none;overflow:visible;grid-template-columns:1fr 1fr} .ed-card{padding:22px 22px} } /* ================================================ celular: até 767px === Não é o desktop reduzido. A navegação vira menu, os filtros rolam na horizontal sem quebrar, as ações principais ocupam a largura e a barra de salvar do editor fica fixa no rodapé, acima da área do sistema. */ @media (max-width:767px){ body{padding:14px 12px} .main{padding:0 16px 18px;border-radius:22px} .shell{border-radius:24px} /* cabeçalho em menu */ .nav-toggle{display:inline-flex;width:44px;height:44px} .app-header nav{flex:1 1 100%;order:5;display:flex;flex-direction:column;gap:2px;max-height:0;opacity:0;pointer-events:none;overflow:hidden;transition:max-height .3s var(--ease),opacity .25s} body.menu-aberto .app-header nav{max-height:360px;opacity:1;pointer-events:auto;margin-top:8px} .app-header nav .nav-item{width:100%;justify-content:flex-start;min-height:46px;font-size:15px} .profile-button{min-height:44px} .topline{flex-wrap:wrap;gap:8px} .topline .search-trigger{flex:1 1 100%;min-height:48px} .topline a{font-size:13.5px} /* cabeçalho de página: título, subtítulo, ação em largura cheia */ .pg-hero{grid-template-columns:minmax(0,1fr);gap:14px;margin:20px 0} .pg-hero h1{font-size:32px;letter-spacing:-1.2px} .pg-hero-acao{justify-content:stretch} .pg-hero-acao .primary{width:100%;min-height:48px} /* busca e ordenação */ .barra-ferramentas{flex-wrap:wrap;gap:10px;margin-bottom:18px} .campo-busca{flex:1 1 100%} .campo-busca input{padding:14px 18px 14px 48px!important} .campo-busca kbd{display:none} .campo-ordem{flex:1 1 auto;min-width:0} .campo-ordem>.custom-select,.campo-ordem>select{width:100%} .vista-toggle{flex:none} /* filtros: cada grupo rola sozinho, sem quebrar chip no meio */ .filtros{gap:16px;margin-bottom:18px} .chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:2px 2px 6px;margin:-2px -16px -6px;padding-left:16px;padding-right:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .chips::-webkit-scrollbar{display:none} .chip{flex:none} .chips-fim{display:none} /* projetos e notas */ .grade-cards{grid-template-columns:minmax(0,1fr);gap:14px} .card-capa{aspect-ratio:16/9} .card-rodape{padding:14px 16px 16px} .card-rodape .editar{flex:1;min-height:44px} .linha-conteudo{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 14px;padding:14px} .linha-conteudo>img,.linha-conteudo .sem-capa{width:64px;height:64px;flex:none} .linha-corpo{flex:1 1 calc(100% - 78px);min-width:0} .linha-corpo strong{white-space:normal} .linha-corpo em{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .linha-conteudo>.selo{order:3} .linha-data{order:4;display:block} .linha-acoes{order:5;margin-left:auto} .linha-acoes .editar{min-height:40px} /* biblioteca */ .bib-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .bib-envio{flex-direction:column;align-items:stretch;gap:12px} .bib-envio__texto{min-width:0} .bib-envio label.arquivo,.bib-envio input[name=alt],.bib-envio .primary,.bib-envio .escolhido{width:100%;max-width:none} .bib-envio .escolhido{text-align:center} .bib-item__menu{opacity:1} .bib-linha{grid-template-columns:48px minmax(0,1fr) 40px;gap:12px} .bib-linha .selo{display:none} .bib-rodape{flex-direction:column;align-items:stretch;gap:12px} .bib-rodape small{text-align:center} .paginacao{justify-content:center;flex-wrap:wrap} /* mensagens */ .inbox-detalhe{padding:18px 16px calc(18px + env(safe-area-inset-bottom))} .inbox-item{padding:14px 14px} .det-acoes button{flex:1 1 calc(50% - 4px);min-height:44px} /* editores */ .ed-topo{position:static;padding:12px 14px;margin:14px 0 12px} .ed-nav{top:6px} .ed-topo__esq{gap:12px} .ed-voltar{min-height:44px} .ed-topo__dir{position:fixed;left:0;right:0;bottom:0;z-index:40;flex-wrap:wrap;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#f3f3efF2;border-top:1px solid var(--borda-cartao);backdrop-filter:blur(18px);box-shadow:0 -8px 24px #40493814} .ed-topo__dir button{flex:1;min-height:46px;padding:0 14px} .ed-salvo{flex:1 1 100%;margin:0;text-align:center;order:-1} .ed-grade{padding-bottom:96px} .ed-lado{grid-template-columns:1fr} .ed-card{padding:20px 16px} .ed-card__topo{margin-bottom:16px} .ed-linha2,.ed-linha3{grid-template-columns:1fr} .ed-midia-grade{grid-template-columns:1fr} .ed-escrita{padding:18px 16px;font-size:16px} .ed-tb{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .ed-tb::-webkit-scrollbar{display:none} .ed-tb__grupo{flex:none} .ed-tb__fim{margin-left:0;flex:none} .ed-repeat__linha{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:12px;align-items:start;padding:14px} .ed-repeat__linha .ed-repeat__pega{display:none} .ed-repeat__linha .ed-campo{grid-column:1} .ed-repeat__linha .ed-repeat__x{grid-column:2;grid-row:1;width:44px;height:48px} .ed-repeat__linha:not(:first-child) .ed-label{display:flex} .ed-repeat__linha:not(:first-child) .ed-input{margin-top:8px} .ed-previa__capa{aspect-ratio:16/9} /* rodapé */ .app-footer{flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:calc(8px + env(safe-area-inset-bottom))} .app-footer button{min-height:44px} /* diálogos ocupam a tela toda, com respiro do sistema */ #media-dialog,#search-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0} #visor{width:100vw;height:100dvh;border-radius:0;padding:10px 10px calc(10px + env(safe-area-inset-bottom))} #confirmar-dialog{width:calc(100vw - 24px)} } /* telas bem estreitas: uma coluna na biblioteca */ @media (max-width:419px){ .bib-grid{grid-template-columns:minmax(0,1fr)} .bib-item__foto{aspect-ratio:16/9} .pg-hero h1{font-size:29px} .ed-topo__dir button{font-size:13px} } /* nada de rolagem horizontal na página inteira. clip, e não hidden, porque hidden faria da página um contêiner de rolagem e quebraria o position:sticky do índice do editor. */ html{max-width:100%} body{max-width:100%;overflow-x:clip} @media (max-width:767px){ /* cabeçalho em uma linha só: marca, perfil e menu */ .app-header{flex-wrap:wrap;align-items:center;gap:10px;row-gap:0} .app-header .brand{flex:1 1 auto;min-width:0} .app-header .brand .ui-icon{max-width:100%;height:auto} .studio-label{display:none} .profile-button{order:2;margin-left:auto;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center} .profile-button span{display:none} .profile-button .avatar{width:40px;height:40px;margin:0} .nav-toggle{order:3;margin-left:0} } @media (max-width:419px){ .app-header .brand .ui-icon{width:124px} } @media (max-width:767px){ .app-header{padding-top:14px;padding-bottom:14px;min-height:0} } @media (max-width:767px){ .ed-topo__dir button,.ed-topo__dir .primary{min-height:46px;height:46px} } @media (max-width:767px){ /* backdrop-filter cria bloco de contenção e prendia a barra fixa dentro do cabeçalho do editor; no celular ele sai e a barra vai para o rodapé */ .ed-topo{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--sup-cartao);border:1px solid var(--borda-cartao);box-shadow:none} .ed-topo__esq{flex-wrap:wrap;gap:10px} .ed-voltar{order:1} .ed-topo__esq>.selo{order:2} .ed-titulo{order:3;flex:1 1 100%;min-width:0} .ed-titulo strong{white-space:normal;font-size:17px;line-height:1.3} .ed-nav{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;position:static;margin-bottom:16px} } @media (max-width:767px){ /* blur e animação de entrada criam bloco de contenção e prendiam a barra de ações dentro do conteúdo; no celular eles saem para a barra poder ficar realmente fixa no rodapé */ .shell{backdrop-filter:none;-webkit-backdrop-filter:none} .view-content{animation:none} .ed-card,.ed-lado__card,.bib-item,.card-conteudo,.linha-conteudo,.inbox-detalhe,.msg{animation:none} } /* o botão escuro precisa vencer a regra antiga do rótulo de arquivo */ .bib-envio label.arquivo.btn-escuro,.btn-escuro{background:#262824;color:#fff;border:1px solid #262824} .bib-envio label.arquivo.btn-escuro:hover,.btn-escuro:hover{background:#3a3d37;border-color:#3a3d37;color:#fff} .bib-envio label.arquivo.btn-escuro .ui-icon,.btn-escuro .ui-icon{color:#fff} .bib-envio label.arquivo.btn-escuro:focus-within{outline:2px solid var(--foco);outline-offset:2px} /* ========================= leveza de volta, leitura preservada ========= A passada anterior trocou superfície translúcida por branco puro com borda cinza, e a tela virou uma coleção de caixas. Aqui o creme do fundo volta a participar das superfícies, o fio das bordas fica quente e finíssimo, e contorno perceptível fica só onde existe controle de verdade. A tipografia maior e o contraste dos textos continuam. */ :root{ --sup-cartao:rgba(255,255,255,.70); --sup-controle:rgba(255,255,255,.93); --sup-hover:rgba(255,255,255,.84); --sup-suave:rgba(255,255,255,.55); --sup-elevado:rgba(255,255,255,.96); --borda-cartao:rgba(122,106,88,.10); --borda-controle:rgba(122,106,88,.20); --borda-hover:rgba(122,106,88,.34); } /* containers de conteúdo: tom, não contorno */ .panel,.bib-item,.card-conteudo,.linha-conteudo,.ed-card,.ed-lado__card,.inbox-lista,.inbox-detalhe, .bib-linha,.publication-summary,.recent a,.stat,.ed-repeat__linha,.msg{ background:var(--sup-cartao); border:1px solid var(--borda-cartao); box-shadow:none; } .stat,.publication-summary{border-color:transparent;transition:background .2s var(--ease),border-color .2s,transform .2s var(--ease)} .stat:hover,.publication-summary:hover{background:var(--sup-hover);border-color:var(--borda-cartao);transform:translateY(-1px);box-shadow:none} .stat:active{transform:none} .bib-item:hover,.card-conteudo:hover,.linha-conteudo:hover,.bib-linha:hover,.recent a:hover{ background:var(--sup-hover);border-color:var(--borda-controle);box-shadow:none} .card-tag,.det-mensagem,.det-orcamento,.inbox-orc,.ed-seo-previa,.visor-uso__item,.ed-dica{ background:var(--sup-suave);border-color:var(--borda-cartao)} .visor-info{background:#f7f6f3;border-color:var(--borda-cartao)} .menu-flutuante{background:#fffefd;border-color:var(--borda-controle);box-shadow:0 16px 40px #6b5b4a1f} .ed-tb{background:var(--sup-suave);border-bottom-color:var(--borda-cartao)} .card-novo,.vazio,.ed-vazio-linha{border-color:var(--borda-controle);background:rgba(255,255,255,.34)} /* cabeçalho: cápsula só na página aberta */ .app-header nav .nav-item{background:transparent;border-color:transparent;box-shadow:none} .app-header nav .nav-item:hover{background:rgba(255,255,255,.5);border-color:transparent;box-shadow:none} .app-header nav .nav-item.active{background:#fff;border-color:rgba(255,255,255,.9);box-shadow:0 1px 4px #6b5b4a14} .app-header nav .nav-item:focus-visible{outline:2px solid var(--foco);outline-offset:2px} .profile-button{background:transparent;border-color:transparent;box-shadow:none} .profile-button:hover{background:rgba(255,255,255,.5);border-color:transparent;box-shadow:none} .profile-button.active{background:#fff;border-color:rgba(255,255,255,.9)} /* busca global volta a ser discreta, atrás das buscas de cada página */ .topline .search-trigger{background:rgba(255,255,255,.38);border:1px solid transparent;box-shadow:none} .topline .search-trigger:hover{background:rgba(255,255,255,.66);border-color:var(--borda-cartao)} .topline .search-trigger:focus-visible{outline:2px solid var(--foco);outline-offset:2px} /* borda de verdade fica onde é controle */ input:not([type=checkbox]):not([type=file]),textarea,select,.select-button,.campo-busca input, .bib-envio,.vista-toggle,.ed-campo .ed-input,.ed-campo .ed-area,.ed-rich__caixa,.chips--status .chip{ border-color:var(--borda-controle)} .campo-busca input,.ed-campo .ed-input,.ed-campo .ed-area,.bib-envio input[name=alt], input:not([type=checkbox]):not([type=file]),textarea,select{background:var(--sup-elevado)} .bib-envio{background:var(--sup-cartao)} .vista-toggle{background:rgba(255,255,255,.5)} /* o CTA escuro do banner laranja volta a ser escuro */ .banner-dark-button{background:#1f221e;border-color:#1f221e;color:#fff} .banner-dark-button:hover{background:#343830;border-color:#343830;color:#fff;box-shadow:0 8px 22px #1f221e26} .banner-dark-button .ui-icon{color:#fff} /* respiro lateral na busca global, que estava com padding zero */ .topline .search-trigger{padding:0 18px;gap:11px} .topline .search-trigger kbd{margin-left:4px} /* o resumo de publicações não precisa de caixa branca: ele é texto */ .publication-summary{background:transparent;border-color:transparent;box-shadow:none} .publication-summary:hover{background:transparent;border-color:transparent;transform:none;box-shadow:none} .publication-summary .round-link{background:rgba(255,255,255,.55);border-color:transparent} .publication-summary .round-link:hover{background:#fff;border-color:var(--borda-cartao)} /* as linhas de "Na sua mesa" estavam com padding horizontal zero, então a miniatura encostava na borda do card */ .recent a{padding:12px 16px;border-radius:14px} .recent-name{gap:14px} @media (max-width:767px){.recent a{padding:12px 14px}} /* dentro de uma linha de dois campos, o segundo herdava a margem de empilhamento da lateral e descia 16px em relação ao primeiro */ .ed-lado__card .ed-linha2 .ed-campo+.ed-campo, .ed-lado__card .ed-linha3 .ed-campo+.ed-campo, .ed-linha2 .ed-campo+.ed-campo,.ed-linha3 .ed-campo+.ed-campo{margin-top:0} .ed-linha2,.ed-linha3{align-items:start} /* ================================== editor em três colunas ============ Índice das seções à esquerda, conteúdo no meio com o cabeçalho do registro, e à direita a prévia, a publicação e os blocos recolhidos. A barra fixa antiga saiu: as ações moram no cabeçalho do conteúdo. */ .ed .ed-grade{display:grid;grid-template-columns:214px minmax(0,1fr) 344px;gap:24px;align-items:start;padding-top:18px} .ed-guia{position:sticky;top:18px;display:grid;gap:14px;align-content:start} .ed-guia .ed-voltar{justify-content:flex-start;background:transparent;border-color:transparent;padding:0 12px;min-height:40px;color:var(--txt-3)} .ed-guia .ed-voltar:hover{background:rgba(255,255,255,.55);border-color:transparent;color:var(--txt-1);box-shadow:none} .ed-guia__nav{display:grid;gap:3px} .ed-guia__item{display:flex;align-items:center;justify-content:flex-start;gap:11px;width:100%;min-height:46px;padding:0 14px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--txt-2);font:500 14px/1.25 Inter,Arial,sans-serif;text-align:left;box-shadow:none;transition:background .18s var(--ease),color .18s,border-color .18s} .ed-guia__item .ui-icon{width:18px;height:18px;color:#8d918a} .ed-guia__item:hover{background:rgba(255,255,255,.55);border-color:transparent;box-shadow:none;color:var(--txt-1)} .ed-guia__item[aria-current="true"]{background:#fff;border-color:rgba(255,255,255,.92);color:var(--laranja-texto);font-weight:600;box-shadow:0 1px 4px #6b5b4a14} .ed-guia__item[aria-current="true"] .ui-icon{color:var(--orange)} .ed-guia__item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ed-cabeca{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;margin:0 0 20px} .ed-cabeca__texto{min-width:0} .ed-cabeca h1{margin:0;font-size:30px;line-height:1.16;letter-spacing:-1px;overflow-wrap:anywhere} .ed-cabeca__linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .ed-cabeca__meta{margin:8px 0 0;font-size:13.5px;color:var(--txt-3)} .ed-cabeca__acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end} .ed-cabeca__acoes button{min-height:44px;font-size:14px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px} .ed-cabeca__acoes .botao-icone{padding:0} .ed-cabeca__acoes .ed-salvo{margin-right:4px} /* blocos recolhíveis da lateral */ .ed-dobra{border-radius:19px;background:var(--sup-cartao);border:1px solid var(--borda-cartao);overflow:hidden;scroll-margin-top:24px} .ed-dobra__topo{display:flex;align-items:center;gap:11px;width:100%;padding:16px 18px;border:0;border-radius:0;background:transparent;text-align:left;box-shadow:none} .ed-dobra__topo:hover{background:rgba(255,255,255,.5);box-shadow:none} .ed-dobra__marca{width:17px;height:17px;color:#9aa094;flex:none} .ed-dobra.aberta .ed-dobra__marca{color:var(--orange)} .ed-dobra__txt{flex:1;min-width:0} .ed-dobra__txt strong{display:block;font:600 14.5px/1.3 Space,Arial,sans-serif;letter-spacing:-.2px} .ed-dobra__txt small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--txt-3)} .ed-dobra__seta{width:16px;height:16px;color:#9aa094;flex:none;transition:transform .2s var(--ease)} .ed-dobra.aberta .ed-dobra__seta{transform:rotate(90deg)} .ed-dobra__corpo{display:none;padding:0 18px 18px} .ed-dobra.aberta .ed-dobra__corpo{display:grid;gap:16px} .ed-dobra.pulsar{animation:pulsar-card 1.1s var(--ease)} .ed-dobra .revisao-conta{margin-left:6px} /* a lateral direita não rola sozinha: acompanha a página */ .ed .ed-lado{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow-y:auto;gap:14px} /* o perfil não precisa de cápsula branca no hover */ .profile-button:hover{background:transparent;border-color:transparent;box-shadow:none} .profile-button:hover .avatar{box-shadow:0 0 0 3px #ffffffa8} .profile-button:focus-visible{outline:2px solid var(--foco);outline-offset:2px} @media (max-width:1280px){ .ed .ed-grade{grid-template-columns:190px minmax(0,1fr) 316px;gap:18px} } @media (max-width:1100px){ .ed .ed-grade{grid-template-columns:minmax(0,1fr)} .ed-guia{position:static;display:flex;align-items:center;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .ed-guia::-webkit-scrollbar{display:none} .ed-guia .ed-voltar{flex:none} .ed-guia__nav{display:flex;gap:7px} .ed-guia__item{min-height:40px;padding:0 15px;border-radius:100px;flex:none} .ed-guia__item span{white-space:nowrap} .ed .ed-lado{position:static;max-height:none;overflow:visible;grid-template-columns:1fr 1fr} } @media (max-width:767px){ .ed .ed-grade{padding-top:12px;padding-bottom:0} .ed-cabeca{grid-template-columns:minmax(0,1fr);gap:14px} .ed-cabeca h1{font-size:24px} .ed-cabeca__acoes{position:fixed;left:0;right:0;bottom:0;z-index:40;justify-content:stretch;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#f3f3efF2;border-top:1px solid var(--borda-cartao);backdrop-filter:blur(18px)} .ed-cabeca__acoes button{flex:1;min-height:46px;padding:0 12px} .ed-cabeca__acoes .botao-icone{flex:0 0 46px} .ed-cabeca__acoes .ed-salvo{flex:1 1 100%;order:-1;margin:0;text-align:center} .ed .ed-lado{grid-template-columns:1fr} .ed .ed-col{padding-bottom:96px} } /* ------------------------------------------- lateral do editor, inteira Ela tinha rolagem própria e cortava o conteúdo. Agora acompanha a página e aparece completa. Quem fica fixo é o índice da esquerda. */ .ed .ed-lado{position:static;max-height:none;overflow:visible;gap:14px;padding-right:0} /* cabeçalho dos blocos recolhíveis, alinhado de verdade */ .ed-dobra__topo{align-items:flex-start;gap:12px;padding:17px 18px} .ed-dobra__marca{width:18px;height:18px;margin-top:2px} .ed-dobra__txt strong{display:flex;align-items:center;gap:9px;font-size:15px} .ed-dobra__txt small{margin-top:4px} .ed-dobra__seta{width:18px;height:18px;margin-top:2px} .ed-dobra .revisao-conta{margin:0;min-width:24px;height:24px;font-size:12.5px;flex:none} .ed-dobra__corpo{padding:0 18px 20px} .ed-dobra.aberta .ed-dobra__corpo{gap:14px} .ed-dobra ul.revisao{gap:11px} .ed-dobra ul.revisao li{padding-left:18px} .ed-dobra .ed-ajuda{margin-top:2px} /* a dica da capa ocupa a mesma altura da foto */ .ed-midia__linha{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:18px;align-items:stretch} .ed-midia__linha .ed-midia__palco{margin:0} .ed-midia__linha .ed-dica{height:100%;align-items:flex-start} .ed-midia-grade{display:block} @media (max-width:900px){ .ed-midia__linha{grid-template-columns:minmax(0,1fr)} .ed-midia__linha .ed-dica{height:auto} } /* o índice do editor fica mesmo parado enquanto a coluna do meio rola */ .ed .ed-grade{align-items:start} .ed-guia{position:sticky;top:18px;align-self:start;max-height:calc(100vh - 36px);overflow-y:auto;scrollbar-width:none} .ed-guia::-webkit-scrollbar{display:none} @media (max-width:1100px){ .ed-guia{position:static;max-height:none;overflow:visible;overflow-x:auto} } /* O índice virava contêiner de rolagem e o item ficava mais largo que a coluna, porque o rótulo mais longo não podia encolher. Resultado: a cápsula era cortada à direita. Agora a coluna manda na largura e o texto é que encurta, então os dois lados ficam iguais. */ .ed-guia{overflow:visible;max-height:none;padding:2px} .ed-guia__nav{grid-template-columns:minmax(0,1fr);min-width:0} .ed-guia__item{width:100%;max-width:100%;min-width:0} @media (max-width:1100px){ .ed-guia{padding:2px 0 6px;overflow-x:auto} .ed-guia__nav{grid-template-columns:none} .ed-guia__item{width:auto;max-width:none} } /* --------------------------------------------- ícone na medida do texto Em vez de listar botão por botão, a regra base passa a ser 1.2em para todo ícone que acompanha texto. Assim qualquer botão novo já nasce com o ícone proporcional. Botão só de ícone continua com medida fixa, e as peças decorativas mantêm o tamanho próprio, porque as regras delas têm peso maior. */ button .ui-icon,a .ui-icon,label .ui-icon,summary .ui-icon{width:1.2em;height:1.2em} .ed-cabeca__acoes button .ui-icon,.ed-guia__item .ui-icon,.ed-dobra__topo .ui-icon{width:1.2em;height:1.2em} .botao-icone .ui-icon,.visor-nav .ui-icon,.paginacao button .ui-icon,.vista-toggle button .ui-icon, .bib-item__menu .ui-icon,.ed-card__dobra .ui-icon,.ed-repeat__x .ui-icon,.visor-zoom button:not(.texto) .ui-icon, #close-media .ui-icon,#close-search .ui-icon{width:18px;height:18px} .visor-nav .ui-icon{width:20px;height:20px} .ed-tag button .ui-icon{width:12px;height:12px} .ed-dobra__marca{margin-top:1px} .ed-dobra__seta{margin-top:1px} /* coluna do índice um pouco mais larga, para "SEO e compartilhamento" caber inteiro sem reticências */ .ed .ed-grade{grid-template-columns:232px minmax(0,1fr) 344px} @media (max-width:1280px){.ed .ed-grade{grid-template-columns:214px minmax(0,1fr) 316px;gap:18px}} @media (max-width:1100px){.ed .ed-grade{grid-template-columns:minmax(0,1fr)}} /* ------------------------------------------------- setas de acordeão Fechado aponta para baixo, aberto aponta para cima. Nada de girar para o lado: a seta indica o que vai acontecer, abrir ou fechar. Círculo cinza, sinal em laranja, nos dois lugares em que existe sanfona: os cards do conteúdo e os blocos da lateral. */ .ed-card__dobra{width:38px;height:38px;min-width:38px;min-height:38px;padding:0;border:0;border-radius:50%;background:#eaeae6;color:var(--orange);box-shadow:none;display:inline-flex;align-items:center;justify-content:center} .ed-card__dobra:hover{background:#e2e2dc;border:0;box-shadow:none} .ed-card__dobra .ui-icon{width:38px;height:38px;transition:transform .22s var(--ease)} .ed-card__dobra[aria-expanded="false"] .ui-icon{transform:none} .ed-card__dobra[aria-expanded="true"] .ui-icon{transform:rotate(180deg)} .ed-dobra__seta{width:34px;height:34px;flex:none;margin:0;border-radius:50%;background:#eaeae6;color:var(--orange);transition:transform .22s var(--ease)} .ed-dobra.aberta .ed-dobra__seta{transform:rotate(180deg)} .ed-dobra__topo{align-items:center} .ed-dobra__marca{margin-top:0} /* a seta do bloco lateral é o botão de sanfona, não um ícone de texto: mantém os 34px do círculo mesmo com a regra de 1.2em */ .ed-dobra__topo .ed-dobra__seta{width:34px;height:34px} /* galeria do case: cada imagem é um par, foto de um lado, legenda e texto alternativo empilhados do outro */ .ed-galeria{display:grid;gap:24px} .ed-galeria__item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;padding-bottom:22px;border-bottom:1px solid var(--borda-cartao)} .ed-galeria__item:last-child{padding-bottom:0;border-bottom:0} .ed-galeria__textos{display:grid;gap:16px;align-content:start} @media (max-width:900px){ .ed-galeria__item{grid-template-columns:minmax(0,1fr);gap:16px} } /* No celular eu tinha deixado a marca com height:auto. O SVG usa e não tem viewBox próprio, então o navegador não sabe a proporção e cai no tamanho padrão de imagem, 150px de altura. Era isso que inchava o cabeçalho e empurrava o menu para longe. Altura explícita resolve. */ @media (max-width:767px){ .app-header{padding:12px 14px;gap:10px} .app-header .brand{flex:1 1 auto;min-width:0;display:flex;align-items:center} .app-header .brand .ui-icon{width:140px;height:24px;max-width:100%} body.menu-aberto .app-header nav{margin-top:10px;max-height:340px} .app-header nav{gap:2px} .main{margin-top:0} } @media (max-width:419px){ .app-header .brand .ui-icon{width:118px;height:20px} .app-header{padding:11px 12px} } /* no celular o "Visitar meu site" cai para a segunda linha; alinhado à direita ele fecha o bloco no mesmo eixo da busca */ @media (max-width:767px){ .topline{justify-content:flex-end} .topline a{margin-left:auto;margin-right:0} } /* marca 15% maior no celular */ @media (max-width:767px){ .app-header .brand .ui-icon{width:161px;height:28px} } @media (max-width:419px){ .app-header .brand .ui-icon{width:136px;height:23px} } /* ======================== mensagem aberta no celular e no tablet ====== O detalhe abria como camada translúcida e a lista aparecia por trás, o que tornava a leitura impossível. Agora ele é uma folha opaca, com cabeçalho próprio que fica parado no topo, rolagem só dentro dela e a página de trás travada. */ @media (max-width:1100px){ html:has(.inbox-detalhe){overflow:hidden} .inbox-detalhe{ position:fixed;inset:0;z-index:60; background:#f6f5f2; border:0;border-radius:0;box-shadow:none; padding:0 16px calc(28px + env(safe-area-inset-bottom)); overflow-y:auto;-webkit-overflow-scrolling:touch; animation:folha-sobe .24s var(--ease) both; } @keyframes folha-sobe{from{opacity:0;transform:translateY(14px)}} .inbox-detalhe .inbox-voltar{ position:sticky;top:0;z-index:2; display:inline-flex;width:calc(100% + 32px);margin:0 -16px 14px; padding:14px 16px;justify-content:flex-start; background:#f6f5f2;border:0;border-bottom:1px solid var(--borda-cartao);border-radius:0; font-size:14px;min-height:56px;box-shadow:none; } .inbox-detalhe .inbox-voltar:hover{background:#f6f5f2;border-color:transparent;border-bottom-color:var(--borda-cartao)} .inbox-detalhe .det-topo{align-items:center} .inbox-detalhe .det-topo .botao-icone{display:none} .inbox-detalhe .det-topo h2{font-size:23px;line-height:1.2} .inbox-detalhe .det-mensagem{background:#fff;border-color:var(--borda-cartao)} .inbox-detalhe .det-orcamento{background:#fff} .inbox-detalhe .det-responder{position:sticky;bottom:0;margin-top:22px} .inbox-detalhe .det-acoes{padding-bottom:4px} } /* as três ações da mensagem cabem na mesma linha; o botão de mais opções não precisa descer sozinho */ @media (max-width:1100px){ .inbox-detalhe .det-acoes{flex-wrap:wrap;gap:8px} .inbox-detalhe .det-acoes button{flex:1 1 auto;min-width:0;min-height:46px} .inbox-detalhe .det-acoes .botao-icone{flex:0 0 46px;width:46px;height:46px;min-width:46px} } /* a mensagem aberta deixa de ganhar fundo laranja: fica com o mesmo tom das outras e é marcada por um traço laranja na lateral */ .inbox-item{position:relative} .inbox-item[aria-current="true"]{background:transparent} .inbox-item[aria-current="true"]:hover{background:var(--sup-suave)} .inbox-item[aria-current="true"]:after{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--orange)} .inbox-item[aria-current="true"] .inbox-quem strong{color:var(--txt-1)} /* fechar da mensagem e do visualizador passam a usar o mesmo botão dos diálogos: círculo preto e X desenhado em dois traços, idêntico ao da busca de notas e projetos */ .det-topo .botao-icone,#vz-fechar{ width:40px;height:40px;min-width:40px;min-height:40px;flex:0 0 40px;padding:0; border:0;border-radius:50%;background:#000;color:#fff; position:relative;box-shadow:none; transition:transform .2s var(--ease),background-color .2s} .det-topo .botao-icone .ui-icon,#vz-fechar .ui-icon{display:none} .det-topo .botao-icone:before,.det-topo .botao-icone:after,#vz-fechar:before,#vz-fechar:after{ content:'';position:absolute;inset:0;margin:auto; width:15px;height:1.7px;border-radius:2px;background:currentColor} .det-topo .botao-icone:before,#vz-fechar:before{transform:rotate(45deg)} .det-topo .botao-icone:after,#vz-fechar:after{transform:rotate(-45deg)} .det-topo .botao-icone:hover,#vz-fechar:hover{background:#171717;transform:scale(1.07);box-shadow:none;border:0} .det-topo .botao-icone:active,#vz-fechar:active{transform:scale(.95);box-shadow:none} .det-topo .botao-icone:focus-visible,#vz-fechar:focus-visible{outline:2px solid #000;outline-offset:3px} /* A seta do select é um quadrado de 6px com duas bordas, girado 45 graus. Girando, o desenho visível desce cerca de 2px em relação ao centro da caixa, e por isso ela parecia baixa ao lado do texto. A correção é óptica, no próprio transform, e se inverte quando a seta vira. */ .select-button:after{transform:translateY(-2px) rotate(45deg)} .select-button[aria-expanded=true]:after{transform:translateY(2px) rotate(225deg)} /* os cards de métrica voltam à translucidez original: eles ficam sobre o painel e não precisam de superfície própria */ .stat{background:rgba(255,255,255,.27);border-color:transparent;box-shadow:none} .stat:hover{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.7);box-shadow:none} .publication-summary{background:transparent;border-color:transparent;box-shadow:none} /* ============================================ seta de "ir", padronizada Cada ícone agora carrega o próprio nome como classe, então a seta de avançar pode ser tratada como uma peça só. Ela fica no tamanho da seta das linhas de "Na sua mesa", 11 por 14, em qualquer lugar do painel, e fica laranja quando o mouse passa ou o foco chega. As setas do acordeão do editor não entram nessa regra: lá a seta é o botão. */ .ui-icon.ui-i-cta,.banner-copy button .ui-icon.ui-i-cta,.app-header .ui-icon.ui-i-cta, .topline a .ui-icon.ui-i-cta,.stat-label .ui-icon.ui-i-cta,.recent-seta .ui-icon.ui-i-cta, .round-link .ui-icon.ui-i-cta{width:11px;height:14px} a:hover .ui-i-cta, button:where(:not(.primary):not(.banner-dark-button)):hover .ui-i-cta, a:focus-visible .ui-i-cta, button:where(:not(.primary):not(.banner-dark-button)):focus-visible .ui-i-cta{color:var(--orange)} .ui-i-cta{transition:color .18s var(--ease),transform .18s var(--ease)} .stat:hover .ui-i-cta,.recent a:hover .ui-i-cta,.topline a:hover .ui-i-cta, .publication-summary:hover .ui-i-cta,.text-button:hover .ui-i-cta,.search-result:hover .ui-i-cta{color:var(--orange)} /* A animação de entrada do visualizador usava fill "both". Com isso o navegador considera que existe uma transformação ativa para sempre, e qualquer filho em position:fixed passa a se posicionar em relação ao diálogo, não à tela. Era por isso que o menu de ações caía longe do botão. Sem o fill, a transformação termina de verdade e o menu volta a se posicionar pela tela, continuando na camada de topo do diálogo. */ #visor[open]{animation:visor-in .2s var(--ease)} .menu-flutuante{animation:menu-in .16s var(--ease)} /* Era o backdrop-filter do próprio visualizador. Ele cria bloco de contenção, então todo filho em position:fixed passava a se medir pelo diálogo e não pela tela. O fundo do visualizador é opaco, o desfoque ali não aparecia de qualquer forma; quem desfoca é o ::backdrop, que continua. */ #visor{backdrop-filter:none;-webkit-backdrop-filter:none} /* OCTOPUS — visualizador editorial, 27/09/2026. Somente apresentacao. */ #visor{--viewer-surface:rgba(255,255,255,.86);--viewer-panel:rgba(255,255,255,.60);--viewer-control:rgba(255,255,255,.82);--viewer-control-hover:rgba(255,255,255,.94);width:min(1560px,96vw);height:min(960px,94dvh);padding:24px;border:0;border-radius:28px;background:var(--viewer-surface);box-shadow:0 32px 100px #211e192e;color:#262724;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} #visor::backdrop{background:rgba(34,31,27,.56);backdrop-filter:blur(6px)} #visor .visor-topo{align-items:center;gap:20px;padding:2px 2px 20px;flex:none} #visor .visor-nome strong{font:500 15px/1.45 Inter,Arial,sans-serif;letter-spacing:0} #visor .visor-nome small{font-size:13px;line-height:1.5;color:#61625e;margin-top:4px} #visor .visor-topo__acoes{gap:10px} #visor .botao-icone{width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid #34312b19;background:var(--viewer-control);box-shadow:0 3px 12px #25221c05} #visor #vz-info{color:#b83c08} #visor #vz-info[aria-pressed="true"]{background:var(--viewer-control-hover);border-color:#e65a252e} #visor #vz-fechar{background:#20211f;color:#fff;border:0;transform:none} #visor #vz-fechar:hover{background:#353632;transform:none} #visor #vz-fechar:active{transform:none} #visor .ui-icon{display:block;width:18px;height:18px;margin:0;transform:none;flex-shrink:0} #visor button:hover>.ui-icon{transform:none} #visor .visor-corpo{gap:20px;min-height:0} #visor .visor-palco{background-color:#f3f1ed;border:0;border-radius:20px} #visor .visor-info{flex:0 0 28%;position:relative;inset:auto;min-width:300px;max-height:none;padding:22px;background:var(--viewer-panel);border:0;border-radius:20px;box-shadow:none;transition:opacity .18s;scrollbar-width:thin;scrollbar-color:#bab6ad transparent} #visor:not(.info-aberta) .visor-info{display:none;margin:0;transform:none} #visor .visor-info h4{font:600 17px/1.35 Inter,Arial,sans-serif;letter-spacing:-.2px;margin:0 0 14px} #visor .visor-linha{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;font-size:13px;line-height:1.45;border-bottom:1px solid #39342d0d} #visor .visor-linha span{color:#61625e} #visor .visor-linha b{font-weight:400;color:#262724;min-width:0;overflow-wrap:anywhere} #visor .visor-linha:first-of-type b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:68%;line-height:1.5} #visor .visor-info label{font-size:14px;font-weight:600;line-height:1.5;letter-spacing:0;text-transform:none;color:#292a27;margin:24px 0 10px} #visor .visor-info textarea{display:block;margin:0;min-height:108px;padding:14px;border-radius:12px;background:rgba(255,255,255,.78);border:1px solid #605a4c35;font-size:14px;line-height:1.5;color:#292a27;resize:vertical;box-shadow:none} #visor .visor-info textarea::placeholder{color:#676862;opacity:1} #visor .visor-info .salvar-alt{height:44px;min-height:44px;margin-top:12px;width:100%;padding:0 16px;border-radius:24px;background:#252623;border:1px solid #252623;color:#fff;font-size:13px;font-weight:500;box-shadow:none} #visor .visor-info .salvar-alt:hover{background:#393a35} #visor .visor-info .salvar-alt:disabled{opacity:1;background:#e0ded8;border-color:#d4d1c9;color:#62635e;cursor:default} #visor .visor-uso{margin-top:22px;padding-top:2px;border-top:1px solid #39342d0d} #visor .visor-uso label{margin-top:18px} #visor .visor-vazio-alt{font-size:13px;line-height:1.6;color:#61625e;margin:0} #visor .visor-uso__item{background:rgba(255,255,255,.5);font-size:13px;border-color:#39342d10} #visor .visor-nav{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;opacity:1;border-radius:50%;padding:0;background:rgba(255,255,255,.85);border:1px solid #39342d12;box-shadow:0 2px 8px #25221c0a} #visor .visor-nav .ui-icon{width:18px;height:18px} #visor .visor-nav:hover{background:rgba(255,255,255,.97)} #visor .visor-nav:disabled{opacity:.42;cursor:default} #visor .visor-nav--ant{left:18px}#visor .visor-nav--prox{right:18px} #visor .visor-barra{display:grid;grid-template-columns:minmax(0,1fr) max(28%,300px);align-items:center;gap:20px;padding:18px 0 0;flex:none} #visor:not(.info-aberta) .visor-barra{grid-template-columns:minmax(0,1fr) auto} #visor .visor-zoom{grid-column:1;justify-self:center;display:flex;align-items:center;justify-content:center;gap:0;height:48px;padding:2px 6px;background:var(--viewer-control);border:1px solid #39342d12;border-radius:100px;box-shadow:0 4px 16px #25221c04} #visor .visor-zoom button{height:44px;min-height:44px;min-width:44px;padding:0;display:grid;place-items:center;border-radius:50%;background:transparent;font-size:13px;font-weight:400;color:#32332f;transform:none;box-shadow:none} #visor .visor-zoom button.texto{padding:0 12px;border-radius:24px;line-height:1} #visor .visor-zoom .visor-pct{min-width:64px;padding:0 8px;font-variant-numeric:tabular-nums} #visor .visor-zoom .sep{height:20px;margin:0 5px;background:#39342d12} #visor .visor-zoom button:hover{background:#e9e6e080} #visor .visor-zoom button:active{transform:none;background:#e9e6e0} #visor .visor-arquivo{grid-column:2;justify-content:flex-end;gap:10px} #visor .visor-arquivo button{height:44px;min-height:44px;font-size:13px;font-weight:500;padding:0 16px;border-radius:24px;background:var(--viewer-control);border:1px solid #39342d20;box-shadow:none;white-space:nowrap} #visor .visor-arquivo .botao-icone{padding:0;border-radius:50%} #visor .visor-arquivo button span.rotulo{display:inline} #visor .visor-arquivo button:hover,#visor .botao-icone:hover{background:var(--viewer-control-hover)} #visor button:focus-visible,#visor textarea:focus-visible,#visor [tabindex]:focus-visible{outline:2px solid #db4d0e;outline-offset:3px} #visor button:active{box-shadow:inset 0 1px 3px #25221c16} #visor.visor--cheio{width:100vw;height:100dvh;border-radius:0;padding:20px} @media(max-width:1000px){ #visor,#visor.visor--cheio{width:100%;height:100dvh;max-height:100dvh;margin:0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));border-radius:0;overflow-y:auto;overflow-x:hidden} #visor[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto;align-content:start;gap:16px} #visor .visor-topo{grid-row:1;padding:0;gap:12px} #visor .visor-nome strong{font-size:14px}#visor .visor-nome small{font-size:12px} #visor .visor-topo__acoes{gap:8px} #visor .visor-corpo,#visor .visor-barra{display:contents} #visor .visor-palco{grid-row:2;flex:none;width:100%;height:55dvh;min-height:280px;border-radius:18px} #visor .visor-zoom{grid-row:3;grid-column:1;justify-self:center;max-width:100%;height:48px} #visor .visor-info{grid-row:4;grid-column:1;position:static;width:100%;min-width:0;max-height:none;padding:20px;overflow:visible;transform:none;opacity:1} #visor .visor-arquivo{grid-row:5;grid-column:1;justify-content:flex-end;padding:4px 0 0} #visor .visor-linha{font-size:14px;padding:12px 0} #visor .visor-info textarea{min-height:112px} #visor .visor-info label{margin-top:22px} } @media(max-width:400px){#visor{padding-inline:10px}#visor .visor-topo{gap:8px}#visor .visor-topo__acoes{gap:4px}#visor .visor-zoom{padding:2px;gap:0}#visor .visor-zoom .sep{margin:0 2px}#visor .visor-zoom button.texto{padding:0 9px}#visor .visor-zoom .visor-pct{min-width:54px}} @media(prefers-reduced-motion:reduce){#visor[open],#visor .visor-info,#visor .visor-img.suave{animation:none;transition:none}} /* Ajuda contextual acessivel ao mouse e ao teclado. */ #visor .visor-nome,#visor .visor-linha[data-viewer-tip],#visor button[title]{position:relative} #visor .visor-nome::after,#visor .visor-linha[data-viewer-tip]::after,#visor button[title]::after{display:none;position:absolute;z-index:30;background:#292a27;color:#fff;border:0;border-radius:8px;padding:9px 12px;box-shadow:0 5px 18px #0002;font:400 12px/1.5 Inter,Arial,sans-serif;text-align:left;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;pointer-events:none;width:max-content;max-width:min(360px,75vw);height:auto;transform:none} #visor .visor-nome::after,#visor .visor-linha[data-viewer-tip]::after{content:attr(data-viewer-tip);top:calc(100% + 6px);left:0} #visor .visor-linha[data-viewer-tip]::after{left:auto;right:0} #visor button[title]::after{content:attr(title);bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)} #visor .visor-topo button[title]::after{bottom:auto;top:calc(100% + 8px);left:auto;right:0;transform:none} #visor .visor-nav--ant[title]::after{left:0;transform:none}#visor .visor-nav--prox[title]::after{left:auto;right:0;transform:none} #visor .visor-nome:hover::after,#visor .visor-nome:focus-within::after,#visor .visor-linha[data-viewer-tip]:hover::after,#visor .visor-linha[data-viewer-tip]:focus-within::after,#visor button[title]:hover::after,#visor button[title]:focus-visible::after{display:block} #visor #vz-fechar::before{display:none}#visor #vz-fechar .ui-icon{display:block} #visor #vz-fechar::after{background:#292a27;transform:none} #visor .visor-arquivo button[title]::after{left:auto;right:0;transform:none} #visor .visor-uso>p{font-size:13px!important;line-height:1.6} @media(max-width:1000px){#visor .visor-palco{touch-action:pan-y}#visor .visor-palco.arrastavel{touch-action:none}#visor .visor-otimizar{position:fixed;right:12px;bottom:12px;max-height:80dvh;overflow:auto}} #visor .visor-nav[title]{position:absolute} /* Menus fixed usam coordenadas da janela; blur permanece no backdrop. */ #visor{backdrop-filter:none;-webkit-backdrop-filter:none} /* Composicao de referencia: miniaturas, imagem e dois cards de apoio. */ #visor{width:min(1600px,96vw);height:min(980px,94dvh);padding:26px;background:rgba(250,248,244,.94);border-radius:28px;--viewer-rail:92px;--viewer-side:32%;--viewer-gap:22px} #visor .visor-topo{padding:0 0 20px;gap:24px;align-items:center} #visor .visor-marca{width:72px;min-width:72px;height:52px;border-radius:30px;display:grid;place-items:center;background:rgba(255,255,255,.74);box-shadow:0 5px 18px #352e2308;color:#262724} #visor .visor-marca .vz-line-icon{width:25px;height:25px} #visor .visor-nome strong{font-size:16px;font-weight:500} #visor .visor-nome small{font-size:14px} #visor .visor-topo__acoes{gap:12px} #visor .visor-topo__acoes .botao-icone{width:50px;height:50px;min-width:50px;min-height:50px;background:rgba(255,255,255,.68);border:1px solid #4b413012;color:#222320;box-shadow:0 4px 14px #3e352306} #visor #vz-info,#visor #vz-info[aria-pressed="true"]{color:#282925;border-color:#4b413012;background:rgba(255,255,255,.78)} #visor #vz-fechar{color:#222320;background:rgba(255,255,255,.68);border:1px solid #4b413012} #visor #vz-fechar:hover,#visor .visor-topo__acoes .botao-icone:hover{background:rgba(255,255,255,.96)} #visor .visor-topo__acoes .ui-icon{width:20px;height:20px} #visor .visor-corpo{display:grid;grid-template-columns:var(--viewer-rail) minmax(0,1fr) var(--viewer-side);gap:var(--viewer-gap);min-height:0} #visor:not(.info-aberta) .visor-corpo{grid-template-columns:var(--viewer-rail) minmax(0,1fr)} #visor .visor-miniaturas{grid-column:1;display:flex;flex-direction:column;align-items:center;gap:16px;align-self:start;max-height:min(100%,336px);overflow:auto;padding:3px;position:relative;scrollbar-width:thin;scrollbar-color:#b7afa3 transparent} #visor .visor-miniatura{display:block;flex:0 0 94px;width:84px;min-width:84px;height:94px;padding:0;border:2px solid transparent;border-radius:13px;background:#e9e5dd;box-shadow:none;overflow:hidden;opacity:.82;line-height:0} #visor .visor-miniatura:hover{opacity:1;border-color:#cecabf} #visor .visor-miniatura.selecionada{border-color:#ff5900;opacity:1;box-shadow:0 0 0 1px #ff590016} #visor .visor-miniatura img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px} #visor .visor-miniatura::after{display:none!important} #visor .visor-palco{grid-column:2;border-radius:20px;background:#efede8;min-height:0} #visor .visor-info{grid-column:3;display:flex;flex-direction:column;gap:20px;min-width:0;padding:0;border-radius:0;border:0;background:none;overflow-y:auto;box-shadow:none} #visor .visor-card{padding:22px;background:rgba(255,255,255,.60);border-radius:20px;min-width:0;flex:none} #visor .visor-card--informacoes{padding-bottom:12px} #visor .visor-card--descricao{flex:1;display:flex;flex-direction:column} #visor .visor-info h4{font-size:18px;margin:0 0 10px;font-weight:600} #visor .visor-linha{display:grid;grid-template-columns:22px 96px minmax(0,1fr);gap:12px;min-height:46px;padding:11px 0;align-items:center;font-size:14px;line-height:1.4} #visor .visor-linha:last-child{border-bottom:0} #visor .visor-linha b{text-align:left;font-size:14px;max-width:none} #visor .visor-linha:first-of-type{grid-template-columns:22px 96px minmax(0,1fr) 28px} #visor .visor-linha:first-of-type b{display:block;max-width:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.5} #visor .vz-line-icon{display:block;width:19px;height:19px;flex-shrink:0;color:#363732} #visor .visor-copiar{width:28px;height:28px;min-height:28px;min-width:28px;padding:0;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;box-shadow:none} #visor .visor-copiar:hover{background:#dfdcd366} #visor .visor-info .visor-card--descricao>label{margin:0 0 14px;font-size:15px} #visor .visor-info textarea{min-height:104px;flex:none;background:rgba(255,255,255,.78);border-color:#50453129;border-radius:14px;font-size:14px} #visor .visor-info .salvar-alt{height:46px;min-height:46px;margin-top:14px} #visor .visor-uso{margin-top:22px;padding-top:18px} #visor .visor-uso label{margin:0 0 12px;font-size:17px} #visor .visor-vazio-alt{display:flex;gap:14px;align-items:flex-start;font-size:14px;line-height:1.6;color:#62635f} #visor .visor-vazio-alt .vz-line-icon{margin-top:3px;width:20px;height:20px} #visor .visor-nav{width:50px;height:50px;min-width:50px;min-height:50px;background:rgba(255,255,255,.92)} #visor .visor-nav--ant{left:18px}#visor .visor-nav--prox{right:18px} #visor .visor-barra,#visor:not(.info-aberta) .visor-barra{display:grid;grid-template-columns:var(--viewer-rail) minmax(0,1fr) var(--viewer-side);gap:var(--viewer-gap);padding-top:20px} #visor .visor-zoom{grid-column:2;height:54px;padding:4px 12px;gap:4px;box-shadow:0 8px 28px #4c413509} #visor .visor-zoom button{font-size:14px} #visor .visor-arquivo{grid-column:3;display:flex;justify-content:space-between;gap:10px} #visor .visor-arquivo button{height:50px;min-height:50px;padding:0 16px;font-size:14px;gap:10px;flex-shrink:0;background:rgba(255,255,255,.7)} #visor .visor-arquivo .visor-excluir{color:#d62f1e;border-color:#f26d5b55;background:rgba(255,251,249,.8)} #visor .visor-arquivo .visor-excluir:hover{background:#fff0eb} #visor .visor-arquivo .ui-icon{width:18px;height:18px} #visor .visor-arquivo button[title]::after{right:0;left:auto} #visor:not(.info-aberta) .visor-barra{grid-template-columns:var(--viewer-rail) minmax(0,1fr) auto} #visor .visor-info .visor-linha[data-viewer-tip]::after{max-width:min(380px,85vw)} @media(min-width:1001px) and (max-width:1350px){#visor{--viewer-rail:74px;--viewer-side:36%;--viewer-gap:16px;padding:20px}#visor .visor-miniatura{width:66px;height:78px;flex-basis:78px}#visor .visor-miniaturas{max-height:282px}#visor .visor-card{padding:18px}#visor .visor-linha{grid-template-columns:20px 78px minmax(0,1fr);gap:9px;font-size:13px}#visor .visor-linha:first-of-type{grid-template-columns:20px 78px minmax(0,1fr) 26px}#visor .visor-linha b{font-size:13px}#visor .visor-arquivo{gap:6px}#visor .visor-arquivo button{font-size:12px;padding:0 12px;gap:7px}} @media(max-height:800px) and (min-width:1001px){#visor .visor-card{padding:16px 18px}#visor .visor-info{gap:14px}#visor .visor-linha{min-height:40px;padding:9px 0;font-size:13px}#visor .visor-linha b{font-size:13px}#visor .visor-info textarea{min-height:82px}#visor .visor-uso{margin-top:16px;padding-top:14px}#visor .visor-info h4{font-size:17px}#visor .visor-vazio-alt{font-size:13px}} @media(max-width:1000px){ #visor,#visor.visor--cheio{width:100%;height:100dvh;margin:0;padding:16px 14px calc(20px + env(safe-area-inset-bottom));border-radius:0;overflow-y:auto;overflow-x:hidden} #visor[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto;gap:16px;align-content:start} #visor .visor-topo{grid-row:1;padding:0;gap:12px}#visor .visor-marca{display:none}#visor .visor-nome strong{font-size:14px}#visor .visor-nome small{font-size:12px}#visor .visor-topo__acoes{gap:6px}#visor .visor-topo__acoes .botao-icone{width:44px;height:44px;min-width:44px;min-height:44px} #visor .visor-corpo,#visor:not(.info-aberta) .visor-corpo,#visor .visor-barra,#visor:not(.info-aberta) .visor-barra{display:contents} #visor .visor-palco{grid-column:1;grid-row:2;min-height:280px;height:54dvh;width:100%} #visor .visor-miniaturas{grid-column:1;grid-row:3;flex-direction:row;justify-content:flex-start;gap:10px;max-height:none;height:82px;width:100%;padding:3px;overflow-x:auto;overflow-y:hidden} #visor .visor-miniatura{width:70px;min-width:70px;height:72px;flex:0 0 70px;border-radius:11px}#visor .visor-miniatura img{border-radius:8px} #visor .visor-zoom{grid-column:1;grid-row:4;height:50px;max-width:100%;padding:2px 4px;gap:0} #visor .visor-info{grid-column:1;grid-row:5;position:static;overflow:visible;gap:16px;min-width:0;width:100%;padding:0} #visor .visor-card{padding:20px}#visor .visor-card--descricao{display:block} #visor .visor-arquivo{grid-column:1;grid-row:6;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:0} #visor .visor-arquivo button{height:46px;min-height:46px;padding:0 14px;font-size:13px} #visor .visor-linha{grid-template-columns:20px 86px minmax(0,1fr);gap:10px;font-size:13px}#visor .visor-linha:first-of-type{grid-template-columns:20px 86px minmax(0,1fr) 28px}#visor .visor-linha b{font-size:13px} #visor .visor-copiar{width:32px;height:44px;min-width:32px;min-height:44px} #visor .visor-info textarea{min-height:112px} } @media(max-width:380px){#visor .visor-arquivo button{padding:0 10px;font-size:12px;gap:6px}#visor .visor-card{padding:16px}#visor .visor-linha{grid-template-columns:18px 75px minmax(0,1fr);gap:8px}#visor .visor-linha:first-of-type{grid-template-columns:18px 75px minmax(0,1fr) 28px}} /* Ritmo vertical dos cards, sem cortar o status em desktops comuns. */ #visor .visor-miniaturas{max-height:none;overflow:visible} #visor .visor-card{padding:20px} #visor .visor-card--informacoes{padding-bottom:10px} #visor .visor-info h4{margin-bottom:8px} #visor .visor-linha{min-height:42px;padding:9px 0} #visor .visor-info .visor-card--descricao>label{margin-bottom:10px} #visor .visor-info textarea{min-height:96px} #visor .visor-info .salvar-alt{height:44px;min-height:44px;margin-top:12px} #visor .visor-uso{margin-top:18px;padding-top:16px} #visor .visor-uso label{margin-bottom:8px;font-size:16px} #visor .visor-card--descricao{min-height:min-content} @media(max-height:800px) and (min-width:1001px){#visor .visor-card{padding:16px}#visor .visor-linha{min-height:36px;padding:7px 0}#visor .visor-info textarea{min-height:78px}#visor .visor-uso{margin-top:14px;padding-top:12px}#visor .visor-vazio-alt{font-size:13px}} @media(max-width:1000px){#visor .visor-miniaturas{overflow-x:auto;overflow-y:hidden}#visor .visor-card{padding:20px}#visor .visor-info textarea{min-height:112px}} /* Sem legendas flutuantes no visualizador. */ #visor .visor-nome::after,#visor .visor-linha[data-viewer-tip]::after,#visor button[title]:not(#vz-fechar)::after{display:none!important;content:none!important} /* Biblioteca: aproximar escolha do arquivo e priorizar a descricao. */ .bib-envio__texto{flex:0 0 auto} .bib-envio .escolhido:empty{display:none} /* Seletor de visualizacao: alvos iguais e icones centralizados. */ .vista-toggle{padding:4px;gap:4px;border-radius:16px;background:#efeeea;border:1px solid #deddd7} .vista-toggle button{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:12px;color:#73756f;display:grid;place-items:center;padding:0;transition:background-color .18s,color .18s,border-color .18s} .vista-toggle button .ui-icon,.vista-toggle button:hover .ui-icon{width:21px;height:21px;margin:0;transform:none} .vista-toggle button:hover{background:#ffffffa6;color:#30312f;border-color:transparent;box-shadow:none} .vista-toggle button[aria-pressed="true"],.vista-toggle button[aria-pressed="true"]:hover{background:#fff3eb;border-color:#ffb184;color:#df4d00;box-shadow:0 1px 3px #44230d0a} .vista-toggle button:focus-visible{outline:2px solid #df4d00;outline-offset:2px} /* Acoes do visualizador agrupadas, com intervalo uniforme. */ #visor .visor-arquivo{justify-content:flex-end;gap:8px} /* Mobile: as acoes de arquivo ficam no menu de tres pontos. */ @media(max-width:1000px){#visor .visor-arquivo{display:none}#visor .menu-flutuante{max-width:calc(100vw - 24px);max-height:calc(100dvh - 100px);overflow-y:auto}} /* Busca geral: campo integrado e resultados compactos. */ .topline:not(:has(.search-trigger)){justify-content:flex-end} #search-dialog{width:min(760px,calc(100vw - 40px));height:min(680px,82dvh);max-height:82dvh;border:1px solid #ffffffc9;border-radius:24px;background:#f8f7f3;box-shadow:0 24px 90px #201b1933} #search-dialog::backdrop{background:#24221e66;backdrop-filter:blur(7px)} #search-dialog .search-dialog-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:12px;padding:22px;background:#faf9f6;border-bottom:1px solid #e8e5df;backdrop-filter:none} #search-dialog .search-dialog-head>.search-symbol{position:absolute;left:40px;top:42px;width:15px;height:15px;margin:0;color:#81817b;z-index:2;pointer-events:none} #search-dialog input#global-search{width:100%;min-width:0;height:54px;padding:0 18px 0 46px;background:#fff!important;border:1px solid #e1ded7!important;border-radius:15px!important;font-size:16px!important;outline:none;box-shadow:none} #search-dialog input#global-search:focus{border-color:#ef9b6b!important;box-shadow:0 0 0 3px #ff59000c} #search-dialog #close-search{width:44px;height:44px;min-width:44px;min-height:44px;background:#eeede8;color:#494a45;border:1px solid #e2dfd8;box-shadow:none;transform:none;align-self:center} #search-dialog #close-search:hover{background:#e4e2dc;transform:none} #search-dialog .search-dialog-body{padding:20px 22px 24px;scroll-padding:12px} #search-dialog .search-dialog-body>.eyebrow{margin:0 4px 12px;font-size:10px;letter-spacing:1.3px;color:#78796f} #search-dialog #global-results{gap:6px} #search-dialog .search-result{width:100%;min-width:0;min-height:76px;gap:14px;padding:12px 14px;border:1px solid transparent;border-radius:15px;background:#ffffff91;animation:none;box-shadow:none} #search-dialog .search-result:hover{background:#fff;border-color:#e4ded5} #search-dialog .search-result:focus-visible{outline:2px solid #dc6523;outline-offset:-2px;background:#fff} #search-dialog .search-result img,#search-dialog .result-symbol{width:48px;height:48px;border-radius:11px} #search-dialog .search-result>span:not(.result-symbol){min-width:0} #search-dialog .search-result strong{font-size:14px;line-height:1.4;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #search-dialog .search-result small{font-size:12px;line-height:1.4;margin-top:5px;color:#7a7c73;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #search-dialog .search-result>.ui-icon{width:10px;height:13px;padding:6px;margin:0;background:transparent;color:#99998f;transform:none} #search-dialog .search-result:hover>.ui-icon{color:#e75a0a;transform:none} #search-dialog .empty{padding:48px 24px;border:0;background:transparent;color:#77796f;text-align:center;line-height:1.6} @media(max-width:600px){#search-dialog{width:calc(100vw - 20px);max-width:none;height:min(720px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);margin:auto;border-radius:20px}#search-dialog .search-dialog-head{padding:14px;gap:8px}#search-dialog .search-dialog-head>.search-symbol{left:30px;top:34px}#search-dialog input#global-search{padding-left:40px;padding-right:8px}#search-dialog .search-dialog-body{padding:16px 12px 20px}#search-dialog .search-result{padding:11px 10px;gap:10px}#search-dialog .search-result strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}#search-dialog .search-result>.ui-icon{padding:2px}} /* OCTOPUS — ritmo, superficies e leitura / 2026-09-27 */ :root{--ease:cubic-bezier(.22,1,.36,1);--txt-1:#292a27;--txt-2:#4c4d46;--txt-3:#62645c;--muted:#62645c;--sup-cartao:rgba(255,255,255,.66);--sup-hover:rgba(255,255,255,.9);--borda-cartao:rgba(110,91,68,.12);--alvo-sm:44px;--motion-fast:160ms;--motion-enter:320ms} body{font-size:16px;line-height:1.5} .shell{border:1px solid #ffffffd9;box-shadow:0 24px 80px #473b2812} .app-header nav .nav-item{font-size:15px;min-height:46px;transition:background-color 160ms,color 160ms,box-shadow 160ms} .app-header nav .nav-item.active{color:#c94708;background:#fffdfb;box-shadow:0 3px 14px #49352009} .studio-label,.profile-button>span{font-size:12px} .topline{margin-bottom:24px}.topline a{font-size:14px} .topline:not(:has(.search-trigger)){padding:12px 0;margin-bottom:20px} .search-trigger{font-size:15px;min-height:46px;background:#ffffffa6} .view-content{animation:octopus-fade 200ms ease-out} h1,.pg-hero h1,.welcome h1{font-size:40px;line-height:1.12;letter-spacing:-1.5px} .pg-hero p.sub,.welcome .muted{font-size:16px;line-height:1.55;color:var(--txt-3)} .pg-hero{margin:24px 0;gap:24px}.pg-hero-nota{font-size:14px;line-height:1.5} .eyebrow,.ed-eyebrow{font-size:12px;letter-spacing:1.1px;color:var(--txt-3)} button,.primary,.select-button{transition:background-color 160ms,border-color 160ms,color 160ms,box-shadow 160ms,transform 160ms var(--ease)} .primary{font-size:15px;min-height:48px;background:linear-gradient(145deg,#e7550c,#ca4105);border-color:#d84808;box-shadow:0 6px 18px #e552101c;color:#fff} .primary:hover{background:linear-gradient(145deg,#db4b08,#bb3904);box-shadow:0 8px 22px #d7440926} button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #cc4b0b;outline-offset:3px} input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:16px;line-height:1.5} input::placeholder,textarea::placeholder{color:#74766e;opacity:1} .select-button{font-size:15px;min-height:48px}.select-option{font-size:15px;min-height:44px} .panel,.ed-card,.ed-lado__card,.ed-dobra,.inbox-lista,.card-conteudo,.bib-item{border-color:var(--borda-cartao);box-shadow:0 4px 20px #48331b04} .panel{border-radius:22px}.section-heading h2{font-size:24px;letter-spacing:-.5px} .stat{padding:24px 26px;background:#ffffff57;border:1px solid #ffffff8f;border-radius:22px;animation:octopus-rise 320ms var(--ease) backwards} .stat:nth-child(2){animation-delay:40ms}.stat:nth-child(3){animation-delay:80ms} .stat-label{font-size:16px;color:var(--txt-2)}.stat b{font-size:52px;line-height:1.15;letter-spacing:-2px;margin:12px 0 8px}.stat small{font-size:14px;color:var(--txt-3)} .publication-summary strong{font-size:15px}.publication-summary small{font-size:14px;color:var(--txt-3)} .studio-banner{border-radius:24px;animation:octopus-rise 360ms 80ms var(--ease) backwards} .studio-banner:nth-child(2){animation-delay:120ms}.banner-copy h2{font-size:34px;line-height:1.12;letter-spacing:-1px} .banner-copy .eyebrow,.banner-tag,.banner-index{font-size:12px}.banner-copy button{font-size:15px;min-height:48px} .recent a{padding:16px 18px;min-height:82px;border-radius:16px;transition:background-color 160ms,border-color 160ms} .recent-name strong{font-size:16px;line-height:1.4}.recent-name small{font-size:14px;color:var(--txt-3)} .badge,.selo,.card-tag{font-size:13px}.filtro-chip{font-size:14px;min-height:42px} .card-conteudo,.bib-item,.linha-conteudo{animation:octopus-rise 280ms var(--ease) backwards} .card-conteudo:nth-child(2),.bib-item:nth-child(2){animation-delay:30ms}.card-conteudo:nth-child(3),.bib-item:nth-child(3){animation-delay:60ms} .card-corpo{padding:20px 20px 0}.card-titulo{flex-wrap:wrap;gap:6px 12px}.card-titulo h3{font-size:18px;line-height:1.35;letter-spacing:-.3px}.card-titulo time{font-size:13px;color:var(--txt-3)} .card-meta{font-size:14px;color:var(--txt-3)}.card-resumo{font-size:16px;line-height:1.6;color:var(--txt-2)} .card-acoes{padding:16px 20px 20px}.card-acoes button{min-height:44px;font-size:15px} .linha-conteudo strong,.linha-titulo{font-size:16px}.linha-conteudo small,.linha-conteudo time{font-size:14px;color:var(--txt-3)} .bib-item__corpo{padding:14px}.bib-item__nome{font-size:14px;line-height:1.5}.bib-item__meta{font-size:13px;color:var(--txt-3);margin-top:4px} .bib-envio__texto strong{font-size:15px}.bib-envio__texto small{font-size:14px;color:var(--txt-3)} .ed .ed-grade{grid-template-columns:216px minmax(0,1fr) 304px;gap:22px} .ed-cabeca{grid-template-columns:minmax(0,1fr);gap:14px}.ed-cabeca h1{font-size:32px;line-height:1.2;letter-spacing:-.8px}.ed-cabeca__acoes{justify-content:flex-start;gap:8px} .ed-cabeca__meta,.ed-salvo,.ed-ajuda,.ed-conta,.ed-dobra__topo small,.ed-lado__card .ed-ajuda,.revisao-panel small{font-size:14px;line-height:1.55;color:var(--txt-3)} .ed-guia__item{font-size:15px;min-height:48px}.ed-guia__item span{white-space:normal;line-height:1.3} .ed-dobra__topo{padding:20px}.ed-dobra__topo h2,.ed-dobra__topo h3{font-size:18px}.ed-dobra.aberta .ed-dobra__corpo{padding:0 20px 22px;gap:18px} .ed-label{font-size:15px}.ed-campo .ed-input,.ed-campo .ed-area{font-size:16px}.ed-escrita{font-size:17px;line-height:1.75} .ed-lado__card h3{font-size:18px}.ed-dica p,.ed-seo-previa p,.ed-previa p{font-size:14px;line-height:1.6}.ed-seo-previa small{font-size:13px} .ed-tb button{min-width:40px;min-height:40px}.ed-dobra{transition:border-color 160ms,background-color 160ms} .inbox-item{padding:20px;gap:16px}.inbox-quem strong{font-size:17px}.inbox-quem small,.inbox-data{font-size:14px;color:var(--txt-3)}.inbox-quem em{font-size:15px;color:var(--txt-2)} .inbox-orc{font-size:13px}.inbox-detalhe{animation:octopus-rise 300ms var(--ease) backwards}.det-topo h2{font-size:24px}.det-campo{font-size:15px;padding:12px 0}.det-mensagem{font-size:16px;line-height:1.7}.det-rotulo{font-size:12px;color:var(--txt-3)}.det-estado small{font-size:14px}.det-acoes button{font-size:14px;min-height:44px} [data-view=account]>.editor-layout{grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}[data-view=account] .panel{padding:28px}[data-view=account] h2{font-size:23px}[data-view=account] .muted,.help-list{font-size:16px;line-height:1.7} .menu-flutuante{border-radius:18px;padding:8px;background:#fffdfa;box-shadow:0 16px 48px #33291d22;animation:octopus-menu 160ms var(--ease) backwards} .menu-flutuante button{font-size:15px;min-height:46px;line-height:1.4}.menu-flutuante .ui-icon{width:18px;height:18px} #search-dialog{background:#f7f5f0;animation:octopus-rise 260ms var(--ease) backwards} #search-dialog .search-dialog-body>.eyebrow{font-size:12px;color:#62645c}#search-dialog .search-result{min-height:82px}#search-dialog .search-result strong{font-size:16px}#search-dialog .search-result small{font-size:14px;color:#62645c} #visor{animation:octopus-fade 220ms ease-out}#visor .visor-nome strong{font-size:16px}#visor .visor-nome small{font-size:14px}#visor .visor-linha,#visor .visor-linha b{font-size:14px}#visor .visor-info textarea{font-size:16px}#visor .visor-vazio-alt{font-size:15px}#visor .visor-info .salvar-alt{font-size:15px} #confirmar-dialog p,#confirmar-dialog ul{font-size:16px}.empty,.vazio{font-size:16px;line-height:1.6}.app-footer{font-size:12px}.app-footer button{font-size:14px} @keyframes octopus-fade{from{opacity:.35}to{opacity:1}} @keyframes octopus-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes octopus-menu{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} @media(hover:hover) and (pointer:fine){.card-conteudo:hover,.bib-item:hover,.stat:hover{transform:translateY(-2px);box-shadow:0 10px 28px #48331b0c}.linha-conteudo:hover{transform:none}} @media(min-width:1101px) and (max-width:1280px){.ed .ed-grade{grid-template-columns:190px minmax(0,1fr) 280px;gap:18px}} @media(max-width:1100px){.ed .ed-grade{grid-template-columns:minmax(0,1fr)}.ed-guia__item span{white-space:nowrap}.inbox-item{padding:18px 16px}} @media(max-width:767px){h1,.pg-hero h1,.welcome h1{font-size:32px;letter-spacing:-1px}.stat{padding:20px}.stat b{font-size:42px}.stat-label{font-size:15px}.stat small{font-size:14px}.banner-copy h2{font-size:30px}.ed-cabeca h1{font-size:27px}.ed-cabeca__acoes{justify-content:stretch}.ed-cabeca__acoes button{font-size:14px}.ed-dobra__topo{padding:18px 16px}.ed-dobra.aberta .ed-dobra__corpo{padding:0 16px 20px}[data-view=account]>.editor-layout{grid-template-columns:1fr}[data-view=account] .panel{padding:22px}.card-corpo{padding:18px 16px 0}.card-acoes{padding:16px}.bib-item__corpo{padding:12px}.bib-item__meta{font-size:13px}.inbox-quem small,.inbox-data{font-size:13px}#visor .visor-nome strong{font-size:14px}#visor .visor-nome small{font-size:13px}.topline:not(:has(.search-trigger)){margin-bottom:12px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.card-conteudo:hover,.bib-item:hover,.stat:hover{transform:none}} /* Cabecalho confortavel em tablets, sem comprimir a navegacao. */ @media(min-width:651px) and (max-width:1100px){.app-header{display:flex;flex-wrap:wrap;gap:14px;padding:20px 24px}.app-header .brand{order:0}.app-header .profile-button{order:1;margin-left:auto}.app-header nav{order:3;flex:0 0 100%;width:100%;margin:0;justify-content:space-between;gap:4px}.app-header nav .nav-item{padding:11px 10px}.app-header nav .nav-item span{font-size:15px}.studio-label{display:none}} .login-card{animation:octopus-rise 300ms var(--ease) backwards}.login-card p:not(.eyebrow){font-size:15px}.media-grid button{font-size:14px}.media-grid small{font-size:13px} /* Na sua mesa: lista editorial leve e alinhada. */ .recent-panel{padding:28px;background:rgba(255,255,255,.48);border:1px solid #ffffffbd;border-radius:24px}.recent-panel .section-heading{margin-bottom:24px;align-items:center}.recent-panel .section-heading .eyebrow{font-size:12px;margin-bottom:7px}.recent-panel .section-heading h2{font-size:28px;margin:0;letter-spacing:-.7px}.recent-panel .desk-all{display:inline-flex;align-items:center;gap:16px;min-height:46px;padding:10px 18px;background:#ffffffa6;border:1px solid #ffffffd9;box-shadow:none;font-size:15px;font-weight:500}.recent-panel .desk-all .ui-icon{margin:0;color:var(--orange)}.desk-columns{display:grid;grid-template-columns:minmax(0,1fr) 140px 128px 30px;gap:20px;padding:0 18px 12px;font-size:12px;letter-spacing:.6px;color:#676960}.recent-panel .recent{display:grid;gap:4px}.recent-panel .recent>a{display:grid;grid-template-columns:minmax(0,1fr) 140px 178px;gap:20px;min-height:88px;padding:16px 18px;border:1px solid transparent;border-radius:16px;background:transparent;box-shadow:none;transition:background-color 160ms,border-color 160ms}.recent-panel .recent>a+a{border-top-color:#71634d14}.recent-panel .recent>a:hover,.recent-panel .recent>a:focus-visible{background:#ffffffbc;border-color:#ffffff;box-shadow:0 4px 18px #44331906}.recent-panel .recent-name{min-width:0;gap:16px}.recent-panel .recent-name>span{min-width:0}.recent-panel .recent-name strong{font-size:16px;line-height:1.45;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-panel .recent-name small{font-size:14px;color:#65675e;margin-top:4px}.recent-panel .recent-name img,.recent-panel .recent-placeholder{width:52px;height:52px;border-radius:13px;flex:0 0 52px;object-fit:cover}.desk-date{font-size:14px;color:#65675e;font-variant-numeric:tabular-nums}.recent-panel .recent-end{display:flex;justify-content:space-between;gap:20px;align-items:center}.recent-panel .badge{background:#eef0e7;color:#566044;font-size:13px;padding:6px 11px;font-weight:400}.recent-panel .recent-seta{width:30px;height:30px;background:transparent;color:#85867d;border-radius:50%;display:grid;place-items:center}.recent-panel .recent a:hover .recent-seta{color:var(--orange);background:#fff2e8}.recent-panel .recent-seta .ui-icon{margin:0}.recent-panel .recent>a{animation:octopus-rise 260ms var(--ease) backwards}.recent-panel .recent>a:nth-child(2){animation-delay:25ms}.recent-panel .recent>a:nth-child(3){animation-delay:50ms}.recent-panel .recent>a:nth-child(4){animation-delay:75ms}.recent-panel .recent>a:nth-child(5){animation-delay:100ms} @media(max-width:900px){.desk-columns{grid-template-columns:minmax(0,1fr) 110px 128px 30px;gap:12px}.recent-panel .recent>a{grid-template-columns:minmax(0,1fr) 110px 170px;gap:12px}} @media(max-width:600px){.recent-panel{padding:20px 14px}.recent-panel .section-heading{gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}.recent-panel .section-heading h2{font-size:26px}.recent-panel .desk-all{font-size:14px;padding:9px 13px;gap:8px}.desk-columns{display:none}.recent-panel .recent>a{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:15px 8px;min-height:104px}.recent-panel .recent-name{gap:12px}.recent-panel .recent-name strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:16px}.recent-panel .recent-name small{font-size:14px}.recent-panel .desk-date{grid-column:1;margin-left:64px;margin-top:-7px;font-size:13px}.recent-panel .recent-end{grid-column:2;grid-row:1 / span 2}.recent-panel .recent-end .badge{display:none}.recent-panel .recent-seta{width:28px}.recent-panel .recent-name img,.recent-panel .recent-placeholder{width:52px;height:52px}} /* ================================================ editor v3 ============ Cabeçalho com ações na linha do título, um bloco inicial com o que identifica o conteúdo, contadores dentro dos campos, capa com recorte, galeria em miniaturas e lateral com prévia, status e link. Vale para Notas e Projetos. */ .ed3 .ed-grade{grid-template-columns:232px minmax(0,1fr) 336px;grid-template-areas:"guia cabeca cabeca" "guia col lado";gap:22px;row-gap:26px} .ed3 .ed-guia{grid-area:guia;grid-row:1 / span 2} .ed3 .ed-cabeca{grid-area:cabeca} .ed3 .ed-col{grid-area:col} .ed3 .ed-lado{grid-area:lado} .ed3 .ed-cabeca{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:20px;margin:0 0 4px} .ed3 .ed-cabeca h1{font-size:30px;line-height:1.15;letter-spacing:-.8px;text-transform:none} .ed3 .ed-eyebrow{font-size:11.5px;letter-spacing:.6px;color:var(--txt-3);margin-bottom:6px} .ed3 .ed-cabeca__meta{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:8px;font-size:14px;color:var(--txt-3)} .ed3 .ed-cabeca__meta>span+span:before{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;margin:0 10px;vertical-align:middle} .ed3 .ed-cabeca__meta .ed-salvo{font-size:14px;margin:0} .ed3 .ed-cabeca__meta .ed-salvo.pendente{color:#c05f1d} .ed3 .ed-cabeca__acoes{justify-content:flex-end;flex-wrap:nowrap;gap:10px;align-self:center} .ed3 .ed-cabeca__meta{flex-wrap:nowrap;white-space:nowrap} .ed3 .ed-cabeca__acoes>button,.ed3 .ed-split>button{min-height:44px;font-size:14px;padding:0 20px;white-space:nowrap} .ed3 .ed-cabeca__acoes>button:not(.primary):not(.botao-icone){background:#fff;border-color:#fff} .ed3 .ed-cabeca__acoes .ed-ext{width:14px;height:14px;opacity:.7;margin:0} .ed3 .ed-cabeca__acoes .botao-icone{width:44px;height:44px;min-width:44px;padding:0;background:#fff;border-color:#fff} .ed3 .ed-split{display:inline-flex;border-radius:var(--r-pill);box-shadow:0 6px 18px #e552101c} .ed3 .ed-split>button{box-shadow:none} .ed3 .ed-split>button:first-child{border-radius:var(--r-pill) 0 0 var(--r-pill);padding-right:16px} .ed3 .ed-split__seta{border-radius:0 var(--r-pill) var(--r-pill) 0!important;padding:0 14px!important;border:1px solid #d84808!important;border-left-color:#ffffff4d!important} .ed3 .ed-split>button:first-child{border-right:0} .ed3 .ed-split>button .ui-icon{margin:0} .ed3 .ed-split__seta .ui-icon{width:22px;height:22px;margin:0} .ed3 .ed-split__seta:hover .ui-icon{transform:none} /* navegação lateral */ .ed3 .ed-guia__nav{gap:6px} .ed3 .ed-guia__item{min-height:52px;padding:0 16px;gap:14px;font-size:15px;border-radius:16px} .ed3 .ed-guia__item .ui-icon{width:20px;height:20px} .ed3 .ed-guia__item[aria-current="true"]{box-shadow:0 4px 16px #6b5b4a12} .ed3 .ed-guia .ed-voltar{margin-bottom:8px;font-size:14px} /* blocos do meio */ .ed3 .ed-col{gap:18px} .ed3 .ed-card{background:#ffffff8a;padding:24px 26px} .ed3 .ed-card--plano .ed-card__corpo{gap:20px} .ed3 .ed-card__topo h2{font-size:18px} .ed3 .ed-card__topo p{font-size:14px} .ed3 .ed-label{font-size:15px;font-weight:600;color:var(--txt-1)} .ed3 .ed-linha3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} /* campo com contador e ícone dentro */ .ed3 .ed-caixa{position:relative;display:block;margin-top:9px} .ed3 .ed-caixa .ed-input,.ed3 .ed-caixa .ed-area{margin:0;background:#fff;border-color:#ebe9e4;border-radius:12px} .ed3 .ed-caixa .ed-input:hover,.ed3 .ed-caixa .ed-area:hover{border-color:#dedbd4} .ed3 .ed-caixa--conta .ed-input{padding-right:84px} .ed3 .ed-caixa--conta .ed-area{padding-bottom:30px} .ed3 .ed-caixa .ed-conta{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:13px;color:var(--txt-off)} .ed3 .ed-caixa .ed-area~.ed-conta{top:auto;bottom:10px;transform:none} .ed3 .ed-caixa--icone .ed-input,.ed3 .ed-caixa--icone .select-button{padding-left:46px} .ed3 .ed-caixa__icone{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#7d8278;z-index:2;pointer-events:none} .ed3 .ed-caixa--icone .custom-select{display:block} .ed3 .ed-caixa .select-button{margin:0;min-height:50px;background:#fff;border-color:#ebe9e4} .ed3 .ed-repeat__linha:not(:first-child) .ed-caixa{margin-top:0} .ed3 .ed-senha{padding:16px 18px;border-radius:14px;background:#fdf1e7;border:1px solid #ffe2cd} /* capa */ .ed3 .ed-midia__linha{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:16px;align-items:stretch} .ed3 .ed-midia__palco{border-radius:14px} .ed3 .ed-midia__linha .ed-midia__palco{aspect-ratio:auto!important;min-height:230px} .ed3 .ed-midia__linha .ed-midia__palco img{position:absolute;inset:0} .ed3 .ed-midia__topo{position:absolute;right:12px;top:12px;display:flex;gap:6px} .ed3 .ed-midia__topo .ed-midia__trocar{position:static;min-height:40px;font-size:14px;padding:0 16px;background:#fff;border-color:#fff} .ed3 .ed-midia__limpar{width:40px;padding:0!important;justify-content:center} .ed3 .ed-midia__topo .ui-icon{width:16px;height:16px;margin:0} .ed3 .ed-midia__crop{position:absolute;left:12px;bottom:12px;width:40px;height:40px;min-width:40px;padding:0;border-radius:12px;background:#2b2a26a6;border-color:transparent;color:#fff;backdrop-filter:blur(8px);display:inline-flex;align-items:center;justify-content:center} .ed3 .ed-midia__crop .ui-icon{width:19px;height:19px;margin:0} .ed3 .ed-midia__crop[aria-pressed="true"]{background:var(--orange)} .ed3 .ed-midia__aviso{display:none;position:absolute;left:62px;bottom:18px;padding:5px 11px;border-radius:var(--r-pill);background:#2b2a26b3;color:#fff;font-size:13px;backdrop-filter:blur(8px)} .ed3 .enquadrando .ed-midia__aviso{display:block} .ed3 .enquadrando img{cursor:crosshair} .ed3 .ed-dica{gap:10px;padding:18px;border-radius:14px;background:#fbf2ea;border-color:#f8e3d3} .ed3 .ed-dica p{font-size:14px;line-height:1.6;color:var(--txt-2)} .ed3 .ed-dica strong{font:600 15px/1.3 Inter,Arial,sans-serif;color:var(--txt-1);margin:1px 0 10px} .ed3 .ed-dica .ui-icon{width:20px;height:20px} /* galeria */ .ed3 .ed-gal{display:grid;gap:18px} .ed3 .ed-gal__faixa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .ed3 .ed-gal__num{position:absolute;left:8px;top:8px;min-width:24px;height:24px;padding:0 7px;border-radius:var(--r-pill);background:#2b2a26b3;color:#fff;font-size:12px;font-weight:600;line-height:24px;text-align:center;backdrop-filter:blur(6px);pointer-events:none} .ed3 .ed-gal__item{position:relative;border-radius:12px} .ed3 .ed-gal__thumb{display:block;width:100%;aspect-ratio:4/3;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:#e9ebe6;box-shadow:none} .ed3 .ed-gal__thumb img{width:100%;height:100%;object-fit:cover;display:block} .ed3 .ed-gal__item.ativo .ed-gal__thumb{border-color:var(--orange);box-shadow:0 0 0 3px #f65b1626} .ed3 .ed-gal__menu{position:absolute;right:8px;bottom:8px;width:30px;height:30px;min-width:30px;min-height:30px;padding:0;border-radius:50%;background:#ffffffe6;border-color:transparent;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s} .ed3 .ed-gal__item:hover .ed-gal__menu,.ed3 .ed-gal__item.ativo .ed-gal__menu,.ed3 .ed-gal__menu:focus-visible{opacity:1} .ed3 .ed-gal__menu .ui-icon{width:16px;height:16px;margin:0} .ed3 .ed-gal__add{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;border:1.5px dashed #d4d1ca;border-radius:12px;background:#ffffff80;box-shadow:none;font-size:14px;color:var(--txt-2)} .ed3 .ed-gal__add:hover{border-color:var(--orange);background:#fff} .ed3 .ed-gal__add .ui-icon{width:22px;height:22px;margin:0;color:var(--txt-1)} .ed3 .ed-gal__add small{font-size:12px;color:var(--txt-off)} .ed3 .ed-gal__det{padding:18px;border-radius:14px;background:#ffffff9e;border:1px solid #efede8} .ed3 .ed-gal__det[hidden]{display:none} .ed3 .ed-gal__rotulo{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--txt-3)} /* lateral */ .ed3 .ed-lado__card{background:#ffffff8a;padding:20px} .ed3 .ed-lado__card h3{justify-content:flex-start;font-size:17px} .ed3 .ed-lado__ext{display:inline-flex;color:var(--txt-3)} .ed3 .ed-lado__ext .ui-icon{width:16px;height:16px} .ed3 .ed-lado__ext:hover{color:var(--orange)} .ed3 #sec-previa{padding:14px 14px 18px} .ed3 #sec-previa h3{padding:4px 6px 0} .ed3 .ed-previa{gap:14px} .ed3 .ed-previa__capa{aspect-ratio:16/8;border-radius:12px} .ed3 .ed-previa__corpo{display:grid;gap:8px;padding:0 6px} .ed3 .ed-previa strong{font-size:15px;letter-spacing:0} .ed3 .ed-previa .card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .ed3 .ed-previa .card-tag{font-size:12px;padding:4px 12px;border-radius:var(--r-pill);background:#f1f0ec;color:var(--txt-2);text-transform:none} .ed3 .ed-status .custom-select{display:inline-block;width:auto;min-width:170px} .ed3 .ed-status .select-button{position:relative;padding-left:34px;border-radius:var(--r-pill);min-height:42px;margin-top:9px} .ed3 .ed-status .select-button:before{content:'';position:absolute;left:15px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#b3b7ae} .ed3 .ed-status[data-status="published"] .select-button:before{background:#3fae5a} .ed3 .ed-link .ed-input{padding-left:calc(45px + var(--pre,0px));padding-right:50px;font-size:14px} .ed3 .ed-link__pre{position:absolute;left:44px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--txt-3);pointer-events:none;z-index:2} .ed3 .ed-link__copiar{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border-radius:10px;background:transparent;border-color:transparent;box-shadow:none;display:inline-flex;align-items:center;justify-content:center} .ed3 .ed-link__copiar:hover{background:#f4f2ee} .ed3 .ed-link__copiar .ui-icon{width:17px;height:17px;margin:0} .ed3 .ed-lado__card .ed-campo+.ed-campo{margin-top:18px} .ed3 .ed-dobra{background:#ffffff8a} .ed3 .ed-dobra__topo{padding:16px 18px} .ed3 .ed-dobra__txt strong{font-size:15px} .ed3 .ed-dobra__txt small{font-size:13px} .ed3 .ed-dobra__seta{width:30px!important;height:30px!important} @media(min-width:1101px) and (max-width:1280px){.ed3 .ed-grade{grid-template-columns:190px minmax(0,1fr) 290px;gap:18px}} @media(max-width:1280px){.ed3 .ed-cabeca{grid-template-columns:minmax(0,1fr)}.ed3 .ed-cabeca__acoes{justify-content:flex-start;flex-wrap:wrap}} @media(max-width:1100px){.ed3 .ed-grade{grid-template-columns:minmax(0,1fr);grid-template-areas:"guia" "cabeca" "col" "lado"}.ed3 .ed-guia{grid-row:auto}.ed3 .ed-guia__item{min-height:42px}} @media(max-width:900px){.ed3 .ed-linha3{grid-template-columns:1fr 1fr}.ed3 .ed-midia__linha{grid-template-columns:1fr}.ed3 .ed-gal__faixa{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:767px){.ed3 .ed-cabeca__acoes{padding-top:10px;flex-wrap:nowrap}.ed3 .ed-cabeca__acoes>button,.ed3 .ed-split>button{padding:0 12px}.ed3 .ed-cabeca__acoes #preview .ed-ext{display:none}.ed3 .ed-split{flex:1}.ed3 .ed-split>button:first-child{flex:1}.ed3 .ed-linha3{grid-template-columns:1fr}.ed3 .ed-card{padding:20px 16px}.ed3 .ed-gal__faixa{grid-template-columns:repeat(2,minmax(0,1fr))}.ed3 .ed-midia__topo .ed-midia__trocar:not(.ed-midia__limpar){font-size:13px;padding:0 12px}} @media(max-width:767px){ .ed3 .ed-cabeca__meta{flex-wrap:wrap;white-space:normal;row-gap:4px} .ed3 .ed-cabeca__meta .ed-salvo{order:0;flex:none;text-align:left} .ed3 .ed-cabeca__acoes{flex-wrap:wrap} .ed3 .ed-cabeca__acoes>#preview{flex:1 1 100%;order:-1} .ed3 .ed-cabeca__acoes>button,.ed3 .ed-split{min-width:0} } @media(max-width:1100px){.ed3 .ed-guia .ed-voltar{order:-1;margin:0}.ed3 .ed-guia__nav{flex:none}} /* editor v3 no celular: barra de ações em uma linha, meta sem pontos soltos e linhas repetíveis empilhadas */ @media(max-width:767px){ .ed3 .ed-cabeca__meta{column-gap:14px} .ed3 .ed-cabeca__meta>span+span:before{display:none} .ed3 .ed-cabeca__acoes{flex-wrap:nowrap;gap:8px} .ed3 .ed-cabeca__acoes>#preview{display:none} .ed3 .ed-cabeca__acoes>#save{flex:1 1 auto} .ed3 .ed-split{flex:1 1 auto;display:flex} .ed3 .ed-split>button:first-child{flex:1 1 auto;padding:0 12px} .ed3 .ed-split>.ed-split__seta{flex:0 0 46px!important;width:46px;padding:0!important} .ed3 .ed-cabeca__acoes>.botao-icone{flex:0 0 46px} .ed3 .ed-grade{padding-bottom:90px} .ed3 .ed-repeat__linha,.ed3 .ed-repeat__linha.campos2,.ed3 .ed-repeat__linha.campos3{grid-template-columns:minmax(0,1fr) 44px;gap:12px} .ed3 .ed-repeat__linha .ed-repeat__pega{display:none} .ed3 .ed-repeat__linha .ed-campo{grid-column:1} .ed3 .ed-repeat__linha .ed-repeat__x{grid-column:2;grid-row:1} .ed3 .ed-repeat__linha:not(:first-child) .ed-caixa{margin-top:9px} .ed3 .ed-card__topo{gap:10px} .ed3 .ed-midia__linha .ed-midia__palco{min-height:0;aspect-ratio:16/9!important} .ed3 .ed-lado__card,.ed3 .ed-dobra{border-radius:18px} } @media(max-width:767px){.ed3 .ed-midia__linha .ed-dica{display:none}.ed3 .ed-midia__linha{display:block}} @media(max-width:767px){.ed3 .ed-tb{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.ed3 .ed-tb::-webkit-scrollbar{display:none}.ed3 .ed-tb__grupo,.ed3 .ed-tb__fim{flex:none}.ed3 .ed-tb button{white-space:nowrap}.ed3 .ed-escrita{padding:20px 18px}} /* categorias das notas: etiquetas e botão para adicionar no mesmo lugar */ .ed3 .ed-tags--caixa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:9px 0 0;padding:9px;min-height:54px;border:1px solid #ebe9e4;border-radius:12px;background:#fff} .ed3 .ed-tag{min-height:34px;background:#f4f2ee;border-color:transparent;font-size:14px;color:var(--txt-1)} .ed3 .ed-tag-add{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px 0 10px;border:1px dashed #d4d1ca;border-radius:var(--r-pill);background:transparent;box-shadow:none;font-size:14px;color:var(--txt-2)} .ed3 .ed-tag-add:hover{border-color:var(--orange);color:var(--laranja-texto,#c24a0c);background:#fff7f1} .ed3 .ed-tag-add .ui-icon{width:14px;height:14px;margin:0} .ed3 .ed-tag-vazio{font-size:13px;color:var(--txt-3);padding:0 4px} /* seções recolhíveis da lateral: sem o ícone solto antes do texto */ .ed3 .ed-dobra__marca{display:none} .ed3 .ed-dobra__txt strong{align-items:center} /* revisão: cada ponto numa linha própria, com o peso à vista */ .ed3 .revisao-conta{min-width:22px;height:22px;font-size:12px} .ed3 #sec-revisao ul.revisao{gap:8px} .ed3 #sec-revisao ul.revisao li{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:12px;background:#f4f3ef;font-size:14px;line-height:1.45;color:var(--txt-2)} .ed3 #sec-revisao ul.revisao li:before{display:none} .ed3 #sec-revisao ul.revisao li .ui-icon{width:17px;height:17px;margin:1px 0 0;flex:none;color:#8d918a} .ed3 #sec-revisao ul.revisao li.grave{background:#fbf0e7;color:var(--txt-1)} .ed3 #sec-revisao ul.revisao li.grave .ui-icon{color:var(--orange)} .ed3 #sec-revisao .revisao-ok{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:12px;background:#eef6ec;font-size:14px;color:#3d6a36} .ed3 #sec-revisao .revisao-ok .ui-icon{width:17px;height:17px;margin:0} .ed3 #sec-revisao .ed-ajuda{margin:0;font-size:12.5px} /* barra de formatação no formato da referência: leve, ícones soltos, separadores discretos e o estilo do bloco num seletor à esquerda */ .ed3 .ed-rich__caixa{border-color:#ebe9e4;background:#fff;border-radius:14px} .ed3 .ed-tb{gap:2px;padding:8px 10px;background:#fbfaf8;border-bottom:1px solid #efede8;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .ed3 .ed-tb::-webkit-scrollbar{display:none} .ed3 .ed-tb__grupo{flex:none;gap:2px;padding:0 10px;border-right:0;position:relative} .ed3 .ed-tb__grupo+.ed-tb__grupo:before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:1px;background:#e7e5e0} .ed3 .ed-tb__grupo:first-child{padding-left:0} .ed3 .ed-tb button{min-width:36px;width:36px;height:36px;min-height:36px;padding:0;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:#55594f;font-size:16px} .ed3 .ed-tb button .ui-icon{width:19px;height:19px;margin:0} .ed3 .ed-tb button b{font:700 16px/1 Inter,Arial,sans-serif} .ed3 .ed-tb button i{font:italic 500 17px/1 Georgia,serif} .ed3 .ed-tb button u{font:500 16px/1 Inter,Arial,sans-serif;text-underline-offset:3px} .ed3 .ed-tb button:hover{background:#f2f0ec;color:var(--txt-1)} .ed3 .ed-tb button.ativo{background:#fdece2;color:#c24a0c} .ed3 .ed-tb__bloco .custom-select{display:block;width:132px} .ed3 .ed-tb__bloco .select-button{min-height:36px;height:36px;margin:0;padding:0 30px 0 10px;border:0;background:transparent;box-shadow:none;font-size:14px;color:var(--txt-2)} .ed3 .ed-tb__bloco .select-button:hover{background:#f2f0ec} .ed3 .ed-escrita h3{font-size:1.15em;margin:1.2em 0 .4em} .ed3 .ed-escrita blockquote{margin:1em 0;padding:4px 0 4px 18px;border-left:3px solid var(--orange);color:var(--txt-2)} .ed3 .ed-escrita hr{border:0;border-top:1px solid #e3e1dc;margin:1.6em 0} .ed3 .ed-escrita ol,.ed3 .ed-escrita ul{padding-left:1.4em} .ed3 .ed-tb__bloco .select-button{width:100%;min-width:0;justify-content:flex-start;text-align:left;border-radius:9px} #ed-balao{position:fixed;z-index:60;pointer-events:none;padding:6px 10px;border-radius:8px;background:#2f322d;color:#fff;font:500 12.5px/1.3 Inter,Arial,sans-serif;white-space:nowrap;box-shadow:0 6px 18px #2b2a2626;opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s;left:0;top:0} #ed-balao.visivel{opacity:1;transform:none} #ed-balao:after{content:'';position:absolute;left:50%;bottom:-4px;width:8px;height:8px;margin-left:-4px;background:inherit;transform:rotate(45deg);border-radius:1px} .ed3 .ed-tb__bloco .select-button{justify-content:space-between;gap:12px;padding:0 13px 0 12px} @media(max-width:767px){.ed3 .ed-guia__nav{display:none}.ed3 .ed-guia{overflow:visible}} /* Perfil ativo (Minha conta) sem a pílula branca; o hover do sair vira só mudança de cor, sem fundo colado no texto. */ .profile-button.active,.profile-button.active:hover{background:transparent;border-color:transparent;box-shadow:none} .app-footer #logout{background:transparent;border-color:transparent;box-shadow:none;padding:0 2px;color:var(--txt-3)} .app-footer #logout:hover,.app-footer #logout:focus-visible{background:transparent;border-color:transparent;box-shadow:none;color:#c24a0c} /* Status só com a palavra: sem a bolinha antes, em selos, etiquetas e no seletor de status do editor. */ .badge:before,.selo:before,.ed3 .ed-status .select-button:before{content:none;display:none} .ed3 .ed-status .select-button{padding-left:16px} /* Card do portfólio: foto inteira da água-viva cobrindo o card, com ela à esquerda, onde ficava o recorte antigo. No celular a foto acompanha a altura do card e desliza para a esquerda, para a água-viva ficar grande e perto da borda. */ .studio-banner.portfolio-banner{background-color:#050b18;background-image:url('/admin/assets/banner-portfolio.webp');background-size:cover;background-position:left center} @media(max-width:650px){.studio-banner.portfolio-banner{background-color:#050b18;background-image:url('/admin/assets/banner-portfolio.webp');background-size:cover;background-position:left center}.portfolio-banner .banner-copy h2,.portfolio-banner .banner-copy .eyebrow{text-shadow:0 2px 16px #050b18cc,0 1px 3px #050b1899}} @media(max-width:520px){.studio-banner.portfolio-banner{background-size:auto 100%;background-position:-125px center}} @media(max-width:400px){.studio-banner.portfolio-banner{background-position:-165px center}} /* Barra de ações no celular: botões do tamanho do texto, centralizados, em vez de esticados na largura toda. */ @media(max-width:767px){ .ed3 .ed-cabeca__acoes{justify-content:center;gap:10px} .ed3 .ed-cabeca__acoes>#save,.ed3 .ed-split,.ed3 .ed-split>button:first-child{flex:0 0 auto} .ed3 .ed-cabeca__acoes>#save,.ed3 .ed-split>button:first-child{min-height:44px;height:44px;padding:0 22px;font-size:15px} .ed3 .ed-split>.ed-split__seta{flex:0 0 42px!important;width:42px;min-height:44px;height:44px} .ed3 .ed-cabeca__acoes>.botao-icone{flex:0 0 44px;width:44px;height:44px;min-height:44px} } /* ================================= revisão geral do painel (27/09) ==== */ /* 1. Cards da Visão geral: a proporção fixa com altura mínima empurrava a largura do card além da coluna e ele invadia o card vizinho. */ .banner-grid>.studio-banner{width:100%;min-width:0} /* 2. Filtro de status ativo sem bolinha, igual ao de categoria. */ .chips--status .chip[aria-pressed="true"]:before{content:none;display:none} /* 3. Card de conteúdo: título sozinho na linha, datas na linha de baixo. */ .card-titulo{display:block} .card-titulo h3{margin:0} /* 4. Ordem em Mensagens com a mesma altura e largura da busca e das Notas. */ .chips-fim>.custom-select{width:200px} .chips-fim .select-button{margin:0;min-height:52px;border-radius:var(--r-pill);padding:0 18px;font-size:14px} /* 5. Fechar mensagem no padrão claro dos outros botões de ícone. */ .det-topo .botao-icone{background:#eceae5;color:var(--txt-1)} .det-topo .botao-icone:hover{background:#e2dfd8} /* 6. Minha conta: download como botão, no padrão dos secundários. */ .conta-baixar{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:#fff;border:1px solid #ebe9e4;color:var(--txt-1);font-size:14px;font-weight:500;text-decoration:none;transition:background-color 160ms,border-color 160ms} .conta-baixar:hover{border-color:#dedbd4;background:#fbfaf8} .conta-baixar .ui-icon{width:16px;height:16px;margin:0} /* 7. Card das notas no celular: rótulo curto, sem quebrar em duas linhas. */ .so-estreito{display:none} @media(max-width:650px){.so-largo{display:none}.so-estreito{display:inline}.notes-banner .banner-copy button{white-space:nowrap}} /* 8. Biblioteca no celular em duas colunas. */ @media(max-width:650px){.bib-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.bib-item__nome{font-size:12.5px}.bib-item__meta{font-size:11.5px}} /* 9. A faixa de busca fica só na Visão geral. Nas outras telas ela some de verdade, e o respiro que ela dava volta como margem. */ .topline[hidden]{display:none!important} .topline[hidden]+.view-content{padding-top:25px} .chips-fim>.custom-select{margin:0} @media(max-width:650px){.bib-item .selo{font-size:11px;padding:3px 8px;min-height:0}.bib-item__menu{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important}} /* Card "Preencher com JSON" na lateral do editor. */ .ed3 .ed-json__texto{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--txt-3)} .ed3 .ed-json__acoes{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ed3 .ed-json__acoes button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 12px;font-size:13.5px;border-radius:var(--r-pill);background:#fff;border:1px solid #ebe9e4;white-space:nowrap} .ed3 .ed-json__acoes button:hover{background:#fbfaf8;border-color:#dedbd4} .ed3 .ed-json__acoes .ui-icon{width:15px;height:15px;margin:0}