/* TaxVault Demo – tokens y componentes compartidos (alineado con msw-steuerberater.de) */
:root{
  --navy:#00457D; --navy-deep:#0A2A4A; --blue:#1673BE; --slate:#3D4459;
  --text:#333333; --muted:#5E6577; --mist:#EEF4FA; --line:#D9E3EE;
  --rose:#CC3366; --white:#FFFFFF; --ok:#1F7A55; --amber:#B7791F;
  --head:'Varela Round', system-ui, sans-serif;
  --body:'Montserrat', system-ui, sans-serif;
  --r-card:22px; --r-btn:6px;
  --shadow:0 18px 48px rgba(4,30,60,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--navy)} a:hover{color:var(--blue)}
h1,h2,h3{font-family:var(--head);font-weight:400;margin:0}
:lang(de) h1,:lang(de) h2,:lang(de) h3{hyphens:auto;-webkit-hyphens:auto}
button{font:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:6px;z-index:100}
.skip:focus{left:12px}
.eyebrow{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.eyebrow.blue{color:var(--blue);display:block;margin-bottom:10px}
.kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;display:block}
.muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center}
.ico{flex:none;vertical-align:middle}
.no-scroll{overflow:hidden}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--r-btn);font-weight:600;text-decoration:none;font-family:var(--body);font-size:15px;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{background:var(--blue);color:#fff}
.btn-primary:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.btn-outline{background:#fff;color:var(--navy);border-color:var(--navy)}.btn-outline:hover{background:var(--mist);color:var(--navy)}
.btn-light{background:#fff;color:var(--navy)}.btn-light:hover{background:var(--mist);color:var(--navy)}
.btn-ghost{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}.btn-ghost:hover{color:#fff;border-color:#fff}
.btn-text{background:none;color:var(--navy);padding:0 10px}.btn-text:hover{background:var(--mist)}
.btn-sm{min-height:38px;padding:0 14px;font-size:14px;gap:6px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-btn);border:none;background:transparent;color:var(--slate);cursor:pointer}
.icon-btn:hover{background:var(--mist);color:var(--navy)}

/* Marca y cabecera */
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.brand:hover{color:#fff}
.tile{width:48px;height:48px;border-radius:6px;background:var(--navy);border:1px solid rgba(255,255,255,.35);position:relative;font-family:var(--head);color:#fff;flex:none}
.tile span{position:absolute;font-size:20px;line-height:1}
.brand-text{font-size:13px;line-height:1.35}
.brand-text strong{font-weight:700;font-size:14px;display:block}
.logo-msw{height:44px;width:auto;display:block}
.logo-msw-sm{height:34px}
/* Sobre fondo claro el logo (letras blancas) va siempre sobre azul MSW */
.logo-chip{display:inline-flex;align-items:center;background:var(--navy);border-radius:8px;padding:6px 12px}
.logo-chip .logo-msw{height:40px}
.demo-badge{background:var(--rose);color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em;padding:5px 10px;border-radius:4px}
.blob{position:absolute;border-radius:48% 52% 60% 40% / 55% 45% 55% 45%;background:rgba(255,255,255,.07);pointer-events:none}

/* Selector de idioma */
.lang{display:flex;gap:4px;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:3px}
.lang button{border:none;background:transparent;color:#fff;padding:6px 10px;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;min-width:36px}
.lang button.on{background:#fff;color:var(--navy)}
.lang button:not(.on):hover{background:rgba(255,255,255,.12)}
.lang-select select{background:transparent;color:#fff;border:none;font:600 13px var(--body);padding:6px 8px;cursor:pointer}
.lang-select option{color:var(--text)}

.appbar{background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 60%,#2F6DA3 100%);color:#fff;position:sticky;top:0;z-index:20;overflow:hidden;overflow:clip}
.appbar-in{max-width:1240px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.appbar-left,.appbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.btn-bar{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:6px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.btn-bar:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.subnav{background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.12);position:relative;z-index:1}
.subnav-in{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:20px}
.subnav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:flex;align-items:center;gap:8px;padding:12px 14px;color:rgba(255,255,255,.8);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;border-bottom:2px solid transparent}
.subnav a:hover{color:#fff}
.subnav a.on{color:#fff;border-bottom-color:#fff}
.subnav .badge{background:var(--rose);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.who{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.9);white-space:nowrap;padding-right:16px;border-right:1px solid rgba(255,255,255,.18)}
.subnav .who-switch{padding:0;border:none;color:rgba(255,255,255,.7);text-decoration:underline;font-size:12px}

.demo-strip{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);background:var(--rose);color:#fff;font-size:12px;font-weight:600;padding:6px 14px;border-radius:999px;z-index:30;box-shadow:0 6px 20px rgba(204,51,102,.3);max-width:calc(100% - 32px);text-align:center;pointer-events:none}

/* Contenido */
main{outline:none;padding-bottom:80px}
.wrap-app{max-width:1080px;margin:0 auto;padding:40px 20px 24px}
.wrap-wide{max-width:1240px}
.wrap-narrow{max-width:680px}
.page-head{margin-bottom:28px}
.page-head-row{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-end;justify-content:space-between}
.h-page{font-size:clamp(28px,4vw,40px);line-height:1.15;color:var(--navy)}
.lead-muted{color:var(--muted);font-size:17px;max-width:680px;margin:14px 0 0}
.h-sec{font-size:22px;color:var(--navy);margin:40px 0 14px}
.h-card{font-size:19px;color:var(--navy);margin:0 0 12px}
.sec-lead{margin:-6px 0 16px}
.note{display:flex;gap:10px;align-items:flex-start;margin-top:32px;padding:16px 18px;border-radius:14px;background:var(--mist);color:var(--slate);font-size:14px}
.note .ico{margin-top:2px;color:var(--navy)}
.empty{padding:28px;text-align:center;color:var(--muted);background:var(--mist);border-radius:16px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px}
.actions-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* Tarjetas, pastillas, barras */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:28px}
.card-plain{background:var(--mist);border-color:transparent}
.card-feature{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.card-feature>.ico{color:var(--navy)}
.card-feature h2{font-size:22px;color:var(--navy)}
.card-feature p{margin:0;color:var(--muted)}
.card-feature .bar{width:100%}
.card-feature .btn{margin-top:auto}
.card-link{display:flex;align-items:center;gap:12px;margin-top:18px;text-decoration:none;font-weight:600}
.card-link span{flex:1}
.stat{display:flex;flex-direction:column;gap:4px;padding:22px 24px}
.stat b{font-family:var(--head);font-weight:400;font-size:32px;color:var(--navy);line-height:1.2}
.stat-link{text-decoration:none}.stat-link:hover{border-color:var(--blue)}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap}
.pill-pend{background:#FBEAF0;color:var(--rose)}
.pill-ok{background:var(--mist);color:var(--navy)}
.pill-done{background:#E6F3EC;color:var(--ok)}
.pill-wait{background:#fff;color:var(--muted);border:1px dashed var(--line)}
.pill-off{background:#F2F3F5;color:var(--muted)}
.chip{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;background:var(--mist);color:var(--slate);white-space:nowrap}
.chip-blue{background:#E3EEF8;color:var(--navy)}
.chip-rose{background:#FBEAF0;color:var(--rose)}
.bar{height:6px;border-radius:6px;background:var(--mist);overflow:hidden}
.bar div{height:100%;border-radius:6px;background:var(--navy);transition:width .5s ease}
.bar-note{margin-top:6px;font-size:13px;color:var(--muted)}
.bar-inline{width:120px;margin-bottom:6px}
.light{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;white-space:nowrap}
.light .dot{width:10px;height:10px;border-radius:50%;flex:none}
.light-green .dot{background:var(--ok)} .light-amber .dot{background:#E3A008} .light-red .dot{background:var(--rose)}
.light-green{color:var(--ok)} .light-amber{color:var(--amber)} .light-red{color:var(--rose)}

/* Segmentos / pestañas */
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:10px;background:var(--mist);margin-bottom:18px}
.seg button,.seg a{border:none;background:transparent;padding:8px 14px;border-radius:7px;font-size:14px;font-weight:600;color:var(--slate);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.seg .on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(4,30,60,.12)}

/* Selector de rol */
.roles{padding-top:64px}
.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:22px;margin-top:36px}
.role-card{display:flex;flex-direction:column;gap:12px;padding:34px;border-radius:var(--r-card);background:var(--mist);text-decoration:none;color:var(--text);border:2px solid transparent;transition:border-color .15s,transform .15s}
.role-card:hover{border-color:var(--navy);color:var(--text);transform:translateY(-2px)}
.role-card>.ico{color:var(--navy)}
.role-card h2{font-size:24px;color:var(--navy)}
.role-card p{margin:0;color:var(--muted)}
.role-card .go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:600;color:var(--navy)}

/* Cuestionario */
.q-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.link-back{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;font-size:14px;margin-bottom:8px}
.q-count{font-size:13px;color:var(--muted);font-weight:600}
.q-bar{margin-bottom:32px}
.chat{display:flex;flex-direction:column;gap:12px}
.bubble{max-width:88%;padding:16px 20px;border-radius:20px;animation:rise .3s ease both}
.bubble p{margin:0}
.bubble-in{background:var(--mist);border-bottom-left-radius:6px;align-self:flex-start}
.bubble-soft{background:#fff;border:1px solid var(--line);font-size:14px;color:var(--muted);animation-delay:.12s}
.bubble-soft p{display:flex;gap:8px}
.bubble-out{background:var(--navy);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.bubble-from{display:block;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:4px}
.q-title{font-family:var(--head);font-size:clamp(20px,3vw,26px);color:var(--navy);line-height:1.3}
.q-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;animation:rise .3s .2s ease both}
.q-opt{min-height:52px;min-width:120px;padding:0 24px;border-radius:var(--r-btn);border:1px solid var(--navy);background:#fff;color:var(--navy);font-weight:600;font-size:16px;cursor:pointer}
.q-opt:hover,.q-opt.on{background:var(--navy);color:#fff}
.q-opt:disabled{cursor:default}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Expediente */
.dossier-sum{padding:24px 28px}
.sum-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.sum-pct{font-family:var(--head);font-size:40px;color:var(--navy);line-height:1.1}
.sum-stats{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:16px;font-size:13px;color:var(--muted)}
.sum-stats b{font-size:18px;color:var(--text);margin-right:6px}
.doclist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.docrow{display:flex;gap:14px;padding:16px 4px;border-bottom:1px solid var(--line);align-items:flex-start}
.docrow-ico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:var(--mist);color:var(--navy)}
.st-pending .docrow-ico{background:#FBEAF0;color:var(--rose)}
.st-reviewed .docrow-ico{background:#E6F3EC;color:var(--ok)}
.st-wait .docrow-ico{background:#fff;border:1px dashed var(--line);color:var(--muted)}
.docrow-main{flex:1;min-width:0}
.docrow-title{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.docrow-title strong{font-weight:600;overflow-wrap:anywhere}
.docrow-label{font-size:14px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px}
.docrow details{margin-top:6px;font-size:14px}
.docrow summary{cursor:pointer;color:var(--blue);font-weight:500;width:max-content;max-width:100%}
.docrow details p{margin:6px 0 0;color:var(--slate);max-width:620px}
.docrow-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.doclist-wait .docrow{opacity:.85}

/* Subida y cifrado */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 20px;border:2px dashed var(--line);border-radius:18px;cursor:pointer;text-align:center;color:var(--slate);transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.over{border-color:var(--blue);background:var(--mist)}
.dropzone>.ico{color:var(--navy)}
.dropzone u{color:var(--navy);font-weight:600}
.encrypting{display:flex;gap:16px;align-items:center;padding:24px;border-radius:18px;background:var(--mist);color:var(--navy)}
.encrypting>div{flex:1;min-width:0}
.encrypting strong{display:block}
.encrypting .fname{display:block;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.enc-bar{height:4px;border-radius:4px;background:#fff;margin:10px 0 6px;overflow:hidden}
.enc-bar div{height:100%;background:var(--navy);animation:fill 1.9s ease forwards}
.enc-step{font-size:13px;color:var(--slate)}
@keyframes fill{from{width:0}to{width:100%}}
.sample-btn{margin:18px 0 8px}

/* Modal y avisos */
.modal-back{position:fixed;inset:0;background:rgba(10,42,74,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50;animation:fade .2s ease}
.modal{background:#fff;border-radius:var(--r-card);width:100%;max-width:560px;max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 30px 70px rgba(4,30,60,.35)}
.modal-wide{max-width:860px}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px 0}
.modal-head h2{font-size:20px;color:var(--navy)}
.modal-body{padding:18px 24px 26px}
.modal .actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:20px}
@keyframes fade{from{opacity:0}to{opacity:1}}
.toast{position:fixed;left:50%;bottom:56px;transform:translate(-50%,20px);background:var(--navy-deep);color:#fff;padding:12px 20px;border-radius:10px;font-size:14px;opacity:0;transition:opacity .2s,transform .2s;z-index:60;max-width:calc(100% - 32px);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Documento de muestra */
.paper{position:relative;background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px;min-height:360px;overflow:hidden;box-shadow:var(--shadow)}
.paper-head{display:flex;justify-content:space-between;font-weight:700;color:var(--navy-deep);border-bottom:2px solid var(--navy);padding-bottom:10px;gap:12px}
.paper-sub{font-size:13px;color:var(--muted);margin:8px 0 18px}
.paper-lines i,.paper-table i{display:block;height:8px;border-radius:4px;background:var(--mist);margin:10px 0}
.paper-table{display:grid;grid-template-columns:2fr 1fr;gap:4px 16px;margin-top:24px}
.paper-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-24deg);font-family:var(--head);font-size:64px;letter-spacing:.2em;color:rgba(204,51,102,.16);pointer-events:none}
.paper-file{position:absolute;left:28px;bottom:16px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}

/* Teléfono */
.msg-layout{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:36px;align-items:start}
.phone{width:100%;max-width:340px;border-radius:40px;background:#111;padding:12px;box-shadow:0 30px 60px rgba(4,30,60,.25);position:relative}
.phone-notch{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:110px;height:22px;background:#111;border-radius:0 0 14px 14px;z-index:2}
.phone-top{display:flex;align-items:center;gap:10px;padding:34px 16px 12px;border-radius:30px 30px 0 0;color:#fff;background:#2B5E52}
.phone-telegram .phone-top{background:#3A6EA5}
.phone-email .phone-top{background:var(--navy-deep)}
.phone-top div{display:flex;flex-direction:column;line-height:1.2}
.phone-top span{font-size:11px;opacity:.8}
.avatar{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--navy);display:flex!important;align-items:center;justify-content:center;font:12px var(--head);opacity:1!important}
.phone-body{background:#ECE5DD;min-height:420px;border-radius:0 0 30px 30px;padding:16px 14px}
.phone-telegram .phone-body{background:#DCE8F2}
.phone-email .phone-body{background:#fff}
.chat-day{text-align:center;font-size:11px;color:var(--muted);margin-bottom:12px}
.pmsg{background:#fff;border-radius:12px;border-top-left-radius:4px;padding:12px 14px;font-size:14px;max-width:92%;box-shadow:0 1px 1px rgba(0,0,0,.08);animation:rise .35s ease both}
.pmsg p{margin:0 0 8px}
.pmsg-link{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600;text-decoration:none;font-size:14px}
.pmsg-time{display:block;text-align:right;font-size:11px;color:var(--muted);margin-top:4px}
.mail{font-size:14px}
.mail-subj{font-weight:700;color:var(--navy-deep);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.mail p{margin:0 0 10px}
.ticks{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:10px}.ticks .ico{color:var(--ok);margin-top:2px}

/* Carta del Finanzamt */
.letter-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;align-items:start}
.bescheid-thumb{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:zoom-in;background:#fff;box-shadow:var(--shadow)}
.bescheid-thumb img{display:block;width:100%}
.bescheid-full{display:block;width:100%;border:1px solid var(--line);border-radius:6px}
.result-card{padding:24px 28px;margin-bottom:16px}
.amount{font-family:var(--head);font-size:44px;line-height:1.15;margin:4px 0}
.amount.neg{color:var(--rose)} .amount.pos{color:var(--ok)}
.result-card p{margin:0}
.deadline-card{display:flex;gap:22px;align-items:center;padding:22px 28px;margin-bottom:16px}
.deadline-card p{margin:4px 0 0}
.dl-count{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:92px;height:92px;border-radius:50%;border:2px solid var(--rose);color:var(--rose);flex:none}
.dl-count b{font-family:var(--head);font-weight:400;font-size:34px;line-height:1}
.dl-count span{font-size:12px;font-weight:600}
.notified{display:flex;gap:12px;padding:16px 20px;border-radius:14px;background:#E6F3EC;color:var(--ok)}
.notified div{display:flex;flex-direction:column}
.notified span{color:var(--slate);font-size:14px}

/* Tablas */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--mist);white-space:nowrap}
.tbl tbody tr:last-child>*{border-bottom:none}
.tbl tbody th{font-weight:600}
.tbl small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.tbl small.nonrec{color:var(--rose)}
.tbl tr.changed{background:#FDF5F8}
.tbl td>span{display:block}
.tbl td>.light{display:inline-flex}
.tbl-num td{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl-num thead th:not(:first-child){text-align:right}
.tbl tfoot th,.tbl tfoot td{font-weight:700;border-top:2px solid var(--navy);border-bottom:none;background:var(--mist)}
.tbl-answers th{width:52%;font-weight:500;color:var(--slate)}
.tbl-answers td span{display:block}
.card-plain .tbl-answers{background:transparent}
.card-plain .tbl-answers th,.card-plain .tbl-answers td{padding:10px 0;border-color:rgba(0,69,125,.12)}

/* Calendario */
.timeline-card{padding:24px}
.timeline{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.tl-month{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 12px;border-radius:10px;background:var(--mist);min-height:84px}
.tl-month.has{background:#E3EEF8}
.tl-name{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--slate)}
.tl-dot{display:inline-block;width:12px;height:12px;border-radius:50%}
.tl-arrives{background:var(--navy)} .tl-internal{background:var(--blue);border:2px solid #fff;box-shadow:0 0 0 1px var(--blue)} .tl-deadline{background:var(--rose)}
.tl-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-size:13px;color:var(--muted)}
.tl-legend span{display:flex;align-items:center;gap:8px}
.cal-list{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column}
.cal-list li{display:grid;grid-template-columns:140px 1fr;gap:20px;padding:18px 0;border-top:1px solid var(--line)}
.cal-list li:last-child{border-bottom:1px solid var(--line)}
.cal-when{font-family:var(--head);color:var(--navy);font-size:18px}
.cal-deadline .cal-when{color:var(--rose)}
.cal-list p{margin:4px 0 0;color:var(--muted);font-size:14px}

/* Inmuebles */
.prop-head{display:flex;align-items:center;gap:16px;padding:20px 24px}
.prop-head>.ico{color:var(--navy)}
.prop-head div{display:flex;flex-direction:column}
.tenants{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.tenant{border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:0;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.tenant legend{font-weight:600;color:var(--navy);padding:0 6px;font-size:14px}
.tenant label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:4px;flex:1 1 120px}
.tenant input{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;color:var(--text);min-height:42px;width:100%}
.tenant .days{font-size:13px;font-weight:600;color:var(--slate);width:100%}
.tenant-vacant{background:var(--mist);border-style:dashed;flex-direction:column;align-items:flex-start;justify-content:center}
.errors{margin:16px 0 0;padding:14px 18px 14px 36px;border-radius:12px;background:#FBEAF0;color:var(--rose);font-weight:500;font-size:14px}
.prop-cards{margin-top:18px}

/* Archivo */
.arch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:14px}
.arch-doc{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff;text-align:left;cursor:pointer;color:var(--text)}
.arch-doc:hover{border-color:var(--blue)}
.arch-doc>.ico{color:var(--navy)}
.arch-doc strong{font-weight:600;overflow-wrap:anywhere}
.arch-doc .small{overflow-wrap:anywhere}

/* Despacho: panel */
.kpis{margin-bottom:26px}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:6px}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:0 12px;min-height:44px;margin-bottom:18px;color:var(--muted);background:#fff}
.search input{border:none;outline:none;font:inherit;font-size:14px;min-width:180px;background:transparent}
.client-link{text-decoration:none}
.tbl-clients td{vertical-align:middle}
.tbl-clients td>.small{display:block}

/* Despacho: detalle */
.detail-sum{display:flex;flex-direction:column;gap:8px;min-width:220px}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;align-items:start}
.detail-grid aside{position:sticky;top:150px}
.sugglist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sugg{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border:1px dashed var(--blue);border-radius:16px;background:#F7FAFD}
.sugg>div:first-child{display:flex;flex-direction:column;min-width:0}
.sugg-btns,.sugg-done{display:flex;gap:8px;align-items:center}
.request-form{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.request-form label{font-weight:600}
.request-form textarea{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;resize:vertical}
.request-form p{margin:0}

/* Reglas */
.rulelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rule{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr) auto;gap:16px;align-items:center;padding:18px 22px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:opacity .2s}
.rule.off{opacity:.55;background:#FAFBFC}
.rule-if,.rule-then{display:flex;flex-direction:column;gap:4px;min-width:0}
.rule-arrow{color:var(--blue)}
.rule-chips{display:flex;flex-wrap:wrap;gap:6px}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;font-weight:600;color:var(--slate)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.track{width:44px;height:26px;border-radius:13px;background:var(--line);position:relative;transition:background .2s;flex:none}
.track::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked+.track{background:var(--navy)}
.switch input:checked+.track::after{transform:translateX(18px)}
.switch input:focus-visible+.track{outline:3px solid var(--blue);outline-offset:2px}
.switch-label{min-width:84px}

/* Recordatorios */
.cadence{display:flex;flex-direction:column;gap:8px;margin-bottom:26px}
.cad-step{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;background:#fff;font-size:14px;color:var(--slate)}
.cad-start b{display:inline-flex;width:64px;justify-content:center;font-family:var(--head);font-weight:400;font-size:20px;color:var(--navy)}
.cad-step input{width:64px;font:inherit;font-size:18px;text-align:center;padding:6px;border:1px solid var(--line);border-radius:8px;color:var(--navy)}
.cad-step .icon-btn{margin-left:auto;width:32px;height:32px}
.checks{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.check{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:#fff;cursor:pointer;font-weight:500}
.check input{width:18px;height:18px;accent-color:var(--navy)}
.previews{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.preview{padding:16px;border-radius:16px;background:#ECE5DD}
.preview .kicker{margin-bottom:8px}

/* DATEV */
.anlagen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px;margin-bottom:16px}
.anlage{padding:20px 22px}
.anlage-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.anlage-tag{font-family:var(--head);font-size:18px;color:var(--navy)}
.anlage ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.anlage li{display:flex;gap:8px;align-items:flex-start}
.anlage li .ico{color:var(--blue);margin-top:2px}
.datev-action{margin-top:22px}
.success{display:flex;gap:14px;align-items:center;padding:20px 24px;border-radius:16px;background:#E6F3EC;color:var(--ok);animation:rise .3s ease}
.success div{display:flex;flex-direction:column}
.success span{color:var(--slate);font-size:14px}

/* Carta en el despacho */
.alert-card{border-left:4px solid var(--rose)}
.alert-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.alert-top>.ico{color:var(--rose);margin-top:2px}
.alert-top>div{flex:1;display:flex;flex-direction:column}
.letter-facts{margin-bottom:26px}
.letter-facts>div{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:14px;background:var(--mist)}
.letter-facts b{font-family:var(--head);font-weight:400;font-size:26px;color:var(--navy)}
.empty-card{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:48px 24px;color:var(--muted)}
.empty-card>.ico{color:var(--navy)}

/* Móvil */
@media (max-width:860px){
  .msg-layout,.letter-grid,.detail-grid{grid-template-columns:1fr}
  .phone{margin:0 auto}
  .detail-grid aside{position:static}
  .rule{grid-template-columns:1fr;gap:10px}
  .rule-arrow{transform:rotate(90deg);width:max-content}
  .who{display:none}
}
@media (max-width:640px){
  .appbar{position:relative}
  .appbar-in{padding:10px 16px}
  .demo-strip{font-size:10px;padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;bottom:8px}
  .appbar .logo-msw{height:26px}.btn-bar span{display:none}
  .tile{width:40px;height:40px}.tile span{font-size:17px}
  .subnav-in{padding:0 8px}
  .subnav a{padding:10px 10px;font-size:13px}
  .wrap-app{padding:28px 16px 20px}
  .card{padding:22px 20px}
  .docrow{flex-wrap:wrap}
  .docrow-side{flex-direction:row;align-items:center;width:100%;padding-left:50px;justify-content:space-between}
  .timeline{grid-template-columns:repeat(6,1fr)}
  .cal-list li{grid-template-columns:1fr;gap:4px}
  .deadline-card{flex-direction:column;align-items:flex-start}
  .amount{font-size:36px}
  .search{width:100%}.search input{min-width:0;flex:1}
  .kpis{grid-template-columns:repeat(3,1fr);gap:8px}.kpis .stat{padding:14px 12px}.kpis .stat b{font-size:24px}.kpis .kicker{font-size:9px;letter-spacing:.08em}
  /* Tabla de clientes como tarjetas */
  .tbl-clients thead{display:none}
  .tbl-clients,.tbl-clients tbody,.tbl-clients tr,.tbl-clients td{display:block;width:100%}
  .tbl-clients tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .tbl-clients td{border:none;padding:6px 0}
  .tbl-clients td[data-label]::before{content:attr(data-label);display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .bar-inline{width:100%}
}
@media print{.appbar,.demo-strip{position:static}}