:root{
  color-scheme:dark;
  --bg:#050c14;--panel:#0a1723;--panel2:#0d1e2c;--border:#173954;
  --text:#f7fbff;--muted:#b2c8da;--accent:#1e8fff;--accent2:#35b8ff;
  --danger:#ff7a90;--ok:#77e2a8;--warning:#ffc66d;--shadow:0 30px 70px rgba(0,0,0,.35)
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 20% 10%,rgba(30,143,255,.14),transparent 34rem),radial-gradient(circle at 80% 80%,rgba(42,103,168,.10),transparent 28rem),var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit} button{cursor:pointer}
input,select,textarea{width:100%;border:1px solid #27414d;background:#0a151c;color:var(--text);border-radius:12px;padding:12px 13px;outline:none;transition:.2s}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,143,255,.13)}
.shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr)}
.brand{padding:clamp(36px,6vw,84px);display:flex;flex-direction:column;justify-content:space-between}
.logo{display:flex;align-items:center;gap:14px;font-weight:800;letter-spacing:-.03em}
.logo-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#2c8fbb);color:#041014;font-weight:900;box-shadow:0 10px 30px rgba(79,209,197,.22)}
.hero{max-width:720px}.hero .eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:800;margin-bottom:18px}
.hero h1{font-size:clamp(3rem,6vw,6.8rem);line-height:.93;letter-spacing:-.065em;margin:0 0 24px}
.hero p{max-width:650px;color:var(--muted);font-size:clamp(1rem,1.7vw,1.22rem);line-height:1.65}
.brand-foot{color:#6f8993;font-size:.85rem}
.auth-wrap{display:flex;align-items:center;justify-content:center;padding:32px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));border-left:1px solid rgba(255,255,255,.05)}
.card{width:min(100%,520px);background:rgba(13,26,35,.9);border:1px solid var(--border);border-radius:26px;padding:32px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid #24527a;background:#0b2236;color:#d9efff;padding:7px 10px;border-radius:999px;font-size:.76rem;font-weight:700}
.badge.warn{color:#ffe0a3;border-color:#5c4823;background:#2b2212}.badge.danger{color:#ffc4ce;border-color:#613243;background:#321722}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 4px rgba(30,143,255,.13)}
h1,h2,h3{letter-spacing:-.04em} h2{font-size:2rem;margin:18px 0 8px} h3{margin:0 0 8px}
.sub{color:var(--muted);line-height:1.55;margin:0 0 24px}.small{font-size:.82rem;color:var(--muted);line-height:1.55}
.field{margin:0 0 14px}.field label{display:block;font-size:.8rem;color:#bcd0d7;margin-bottom:7px;font-weight:700}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid .full{grid-column:1/-1}
.primary,.secondary,.ghost,.icon-btn{border:0;border-radius:12px;padding:12px 15px;font-weight:800}
.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 10px 28px rgba(30,143,255,.20)}
.primary:disabled{opacity:.55;cursor:not-allowed}.secondary{background:#142833;color:#dcebed;border:1px solid #294856}.ghost{background:transparent;border:1px solid #294856;color:#bdd2d8}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.actions>*{width:auto}
.msg{min-height:22px;margin:12px 0 0;color:var(--danger);font-size:.88rem}.msg.ok{color:var(--ok)}
.secret-box{display:flex;gap:8px;align-items:center;padding:13px 14px;border:1px dashed #345866;border-radius:14px;background:#09141a;margin:12px 0}
.secret{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;word-break:break-all;color:#d9fbf7}.copy{border:1px solid #335463;background:#11232c;color:#d7eef0;border-radius:10px;padding:9px 11px;font-size:.8rem}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#09141a;border:1px solid #263f4a;padding:10px;border-radius:10px;text-align:center}
.app{min-height:100vh;display:none;grid-template-columns:240px minmax(0,1fr)}
.sidebar{border-right:1px solid var(--border);background:#06111c;padding:22px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.sidebar .logo{margin-bottom:30px}
.nav{display:grid;gap:6px;align-content:start;flex:1}.nav button{text-align:left;border:0;background:transparent;color:#b7cad9;padding:11px 12px;border-radius:11px;display:flex;align-items:center;gap:10px}.nav button:hover{background:#0b2236;color:#fff}.nav button.active{background:#10365a;color:#fff;box-shadow:inset 0 0 0 1px rgba(53,184,255,.16)}
.nav-icon{width:18px;height:18px;display:grid;place-items:center;flex:0 0 18px;color:#6d9fbe;transition:color .16s ease,transform .16s ease}
.nav-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav button:hover .nav-icon{color:#8bc8f4}
.nav button.active .nav-icon{color:#35b8ff;transform:translateX(1px)}
.main{padding:26px;min-width:0}
.avatar{width:38px;height:38px;border-radius:50%;background:#123653;display:grid;place-items:center;font-weight:800;color:#e4f4ff}
.sidebar-bottom{position:relative;margin-top:auto;padding-top:14px;border-top:1px solid rgba(53,184,255,.12)}
.sidebar-user{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--text);padding:8px;border-radius:12px;text-align:left}
.sidebar-user:hover{background:#0b2236}
.sidebar-avatar-wrap{position:relative;display:inline-grid;flex:0 0 auto}
.sidebar-user-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.sidebar-user-meta strong{font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-meta span{font-size:.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-status-dot{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;border:2px solid #06111c;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.work-status-dot.work-off{background:#ff6678}
.work-status-dot.work-working{background:#64dc93;box-shadow:0 0 9px rgba(100,220,147,.45)}
.work-status-dot.work-paused{background:#ffc857;box-shadow:0 0 9px rgba(255,200,87,.38)}
.sidebar-mfa{display:flex;align-items:center;gap:7px;margin:4px 8px 0;padding-top:8px;color:#9fb8ca;font-size:.65rem}
.sidebar-mfa .dot{width:6px;height:6px;box-shadow:0 0 0 3px rgba(30,143,255,.11)}
.work-popover{position:absolute;left:0;right:0;bottom:104px;z-index:45;background:#091826;border:1px solid #1d4667;border-radius:14px;padding:12px;box-shadow:0 18px 45px rgba(0,0,0,.42)}
.work-popover-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.work-popover-head strong{display:block;font-size:.8rem}
.work-popover-head span{display:block;color:var(--muted);font-size:.68rem;margin-top:2px}
.work-popover-close{border:0;background:transparent;color:#a9c0d2;font-size:1rem;padding:0 2px}
.work-popover-actions{display:grid;gap:7px}
.work-popover-actions button{width:100%;padding:8px 10px;font-size:.72rem}
.view{display:none}.view.active{display:block}.panel{border:1px solid var(--border);background:var(--panel);border-radius:22px;padding:22px}.panel+.panel{margin-top:16px}
.view-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.view-header h2{margin:0 0 5px}.view-header .sub{margin:0}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}.kpi{background:var(--panel2);border:1px solid #1f3b46;border-radius:17px;padding:18px}.kpi b{font-size:1.55rem;display:block;margin-top:6px}.kpi span{color:var(--muted);font-size:.82rem}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.toolbar .search{flex:1;min-width:220px}.toolbar button{white-space:nowrap}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:15px}table{width:100%;border-collapse:collapse;min-width:850px}th,td{padding:12px 13px;text-align:left;border-bottom:1px solid #17313c;font-size:.86rem}th{color:#86a3ad;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;background:#0a171e;position:sticky;top:0}tbody tr{cursor:pointer}tbody tr:hover{background:#10242e}tbody tr:last-child td{border-bottom:0}
.status{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:.72rem;font-weight:800;background:#152b33;color:#a9d7d3}.status.active{background:#103124;color:#8ee6b4}.status.pending,.status.pending_issuance{background:#362d15;color:#ffd981}.status.cancelled,.status.expired{background:#351923;color:#ff9caf}.status.working{background:#132c3d;color:#9bd2f5}.status.interested{background:#352a12;color:#ffd27d}.status.sold,.status.formalized{background:#103124;color:#8ee6b4}
.empty{padding:34px;text-align:center;color:var(--muted)}
.drawer{position:fixed;inset:0;z-index:30;display:none}.drawer.open{display:block}.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(3px)}.drawer-panel{position:absolute;right:0;top:0;height:100%;width:min(620px,100%);background:#0b1820;border-left:1px solid var(--border);padding:24px;overflow:auto;box-shadow:-30px 0 70px rgba(0,0,0,.35)}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}.drawer-head h2{margin:0}.icon-btn{background:#132832;color:#d9edef;border:1px solid #294856;padding:8px 11px}
.checkline{display:flex;align-items:center;gap:9px}.checkline input{width:auto}.checkline label{margin:0;color:#c7d9de}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.detail-item{background:#0a171e;border:1px solid #1b3540;border-radius:13px;padding:12px}.detail-item span{display:block;color:var(--muted);font-size:.74rem;margin-bottom:5px}.detail-item strong{font-size:.92rem}
.multi-select{min-height:130px}hr{border:0;border-top:1px solid var(--border);margin:20px 0}.hidden{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:#112832;border:1px solid #28515d;border-radius:12px;padding:12px 16px;z-index:60;transition:.2s;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:980px){.grid{grid-template-columns:1fr 1fr}.app{grid-template-columns:78px minmax(0,1fr)}.sidebar{padding:16px 10px}.sidebar .logo>div:last-child,.nav button span{display:none}.sidebar .logo{justify-content:center}.nav button{text-align:center;font-size:0}.nav button::first-letter{font-size:1rem}.main{padding:18px}}
@media(max-width:760px){.shell{grid-template-columns:1fr}.brand{min-height:40vh;padding:30px}.auth-wrap{border-left:0;border-top:1px solid rgba(255,255,255,.05)}.app{grid-template-columns:1fr}.sidebar{display:none}.form-grid,.detail-grid{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.view-header{flex-direction:column}.main{padding:14px}}
@media(max-width:520px){.auth-wrap{padding:14px}.card{padding:20px}.brand{padding:24px}.codes,.grid{grid-template-columns:1fr}.topbar{align-items:flex-start}.actions>*{width:100%}}

.routing-list{display:grid;gap:9px;margin:12px 0 4px}
.routing-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#0a171e;border:1px solid #1b3540;border-radius:13px;padding:12px}
.routing-person{display:flex;align-items:center;gap:10px;min-width:0}
.routing-person input{width:auto}
.routing-person strong{display:block}.routing-person span{display:block;color:var(--muted);font-size:.76rem}
.routing-meta{color:var(--muted);font-size:.76rem;text-align:right}
.urgent-row{background:rgba(255,122,144,.055)}
.urgent-text{color:#ff9caf;font-weight:800}

.status.contacted{background:#143041;color:#a9d9ef}
.status.negotiating{background:#3a2d12;color:#ffda86}
.status.retained,.status.accepted{background:#103124;color:#8ee6b4}
.status.lost,.status.rejected{background:#351923;color:#ff9caf}
.status.excluded,.status.withdrawn{background:#222d33;color:#9db0b7}

.status.new{background:#153447;color:#a7dcf7}
.status.snoozed{background:#342d19;color:#f0d88d}
.status.converted{background:#103124;color:#8ee6b4}
.status.dismissed{background:#351923;color:#ff9caf}
.status.covered{background:#222d33;color:#a8bbc2}


/* Radar compacto */
.radar-toolbar select{width:auto;min-width:180px}
.radar-legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:-2px 0 14px;padding:10px 12px;border:1px solid var(--border);border-radius:13px;background:#0a171e}
.radar-legend span{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.78rem;font-weight:700}
.radar-legend-dot{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid #36515c}
.radar-legend-dot.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(79,209,197,.1)}
.radar-legend-dot.off{background:#26343a;border-color:#43545b}
.radar-legend-dot.opportunity{background:var(--warning);border-color:var(--warning);box-shadow:0 0 0 4px rgba(255,198,109,.09)}
.radar-table{min-width:980px}
.radar-table tbody tr{cursor:default}
.radar-client-name{border:0;background:transparent;color:var(--text);padding:0;font-weight:800;text-align:left}
.radar-client-name:hover{color:var(--accent);text-decoration:underline}
.radar-products{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:430px}
.radar-product{position:relative;width:62px;height:54px;border-radius:12px;border:1px solid #273e48;background:#101e26;color:#8ca0a8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 4px;transition:.16s ease}
.radar-product>span{font-size:1.12rem;line-height:1}
.radar-product small{font-size:.58rem;line-height:1;color:inherit;font-weight:800}
button.radar-product{cursor:pointer}
.radar-product.off{filter:grayscale(1);opacity:.48}
.radar-product.active{background:#10352f;border-color:#287b70;color:#baf5e8;box-shadow:0 0 0 1px rgba(79,209,197,.06) inset}
.radar-product.active:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 8px 18px rgba(0,0,0,.18)}
.radar-product.opportunity{background:#362b16;border-color:#8e6726;color:#ffe0a3;box-shadow:0 0 0 2px rgba(255,198,109,.05)}
.radar-product.opportunity::after{content:"";position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--warning);box-shadow:0 0 0 3px rgba(255,198,109,.10)}
.radar-product.opportunity:hover{transform:translateY(-1px);border-color:var(--warning);box-shadow:0 8px 18px rgba(0,0,0,.18)}
.radar-link{display:inline-flex;align-items:baseline;gap:2px;border-radius:999px;padding:6px 10px;font-size:.74rem;font-weight:800}
.radar-link strong{font-size:.94rem}
.radar-link.low{background:#351923;color:#ff9caf}
.radar-link.medium{background:#362d15;color:#ffd981}
.radar-link.high{background:#103124;color:#8ee6b4}
.radar-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.radar-page-actions{align-items:center;margin-top:0}
.radar-page-actions button{padding:8px 11px}
.radar-page-actions button:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:760px){
  .radar-toolbar select{width:100%}
  .radar-pager{align-items:flex-start;flex-direction:column}
}

.policy-insured-list{display:grid;gap:10px}
.policy-insured-card{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#0a171e;border:1px solid #1b3540;border-radius:13px;padding:13px 14px}
.policy-insured-person{min-width:0}
.policy-insured-person strong{display:block;font-size:.95rem;overflow-wrap:anywhere}
.policy-insured-person>span:not(.badge){display:block;color:var(--muted);font-size:.76rem;margin-top:4px}
.policy-insured-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end;text-align:right;color:#b7cbd3;font-size:.78rem}
@media(max-width:560px){.policy-insured-card{align-items:flex-start;flex-direction:column}.policy-insured-meta{justify-content:flex-start;text-align:left}}


/* Unidad familiar 360 */
.household-link,.radar-household-link{border:0;background:transparent;color:#9ddfd9;padding:0;font-weight:700;text-align:left}
.household-link:hover,.radar-household-link:hover{color:var(--accent);text-decoration:underline}
.radar-household-link{font-size:.72rem;margin-top:4px}
.family-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.family-head h3{margin-bottom:3px}.family-head .small{margin:0}
.family-kpis{margin-top:10px}
.family-products{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.family-product{width:67px;height:57px;border-radius:12px;border:1px solid #273e48;background:#101e26;color:#82969e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px}
.family-product>span{font-size:1.12rem;line-height:1}.family-product small{font-size:.58rem;font-weight:800}
.family-product.active{background:#10352f;border-color:#287b70;color:#baf5e8}.family-product.off{filter:grayscale(1);opacity:.42}
.family-member-list,.family-policy-list{display:grid;gap:9px;margin-top:12px}
.family-member-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0a171e;border:1px solid #1b3540;border-radius:13px;padding:11px 12px}
.family-member-main{flex:1;min-width:0;border:0;background:transparent;color:var(--text);text-align:left;padding:0}
.family-member-main strong{display:block;font-size:.92rem}.family-member-main span{display:block;color:var(--muted);font-size:.73rem;margin-top:4px;overflow-wrap:anywhere}
.family-member-actions{display:flex;align-items:center;gap:8px}.family-member-actions select{width:auto;min-width:145px;padding:8px 9px}.family-remove{padding:8px 10px}
.family-add-form{display:grid;grid-template-columns:minmax(0,1fr) 160px auto;gap:8px;align-items:center}
.family-policy-card{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;border:1px solid #1b3540;background:#0a171e;color:var(--text);border-radius:13px;padding:12px;text-align:left}
.family-policy-card:hover{border-color:#326070;background:#0e2029}.family-policy-card strong{display:block;font-size:.88rem}.family-policy-card span{display:block;color:var(--muted);font-size:.72rem;margin-top:4px}
.family-policy-money{white-space:nowrap;font-weight:800;color:#baf5e8}
.compact-empty{padding:16px}
.radar-product.family-shared{border-color:#327a8f;background:#10313a;color:#c4f5ff}
.radar-product.family-shared i{position:absolute;right:4px;top:4px;font-style:normal;font-size:.48rem;font-weight:900;line-height:1;background:#1f6171;color:#d9fbff;border-radius:999px;padding:2px 3px}
.badge.ok{color:#baf5d0;border-color:#285f42;background:#103124}
@media(max-width:620px){
  .family-member-card{align-items:flex-start;flex-direction:column}
  .family-member-actions{width:100%}.family-member-actions select{flex:1;min-width:0}
  .family-add-form{grid-template-columns:1fr}
  .family-add-form button{width:100%}
  .family-policy-card{align-items:flex-start;flex-direction:column}
}


/* Cartera visual · estilo corporativo */
.portfolio-board{margin-top:12px;padding:14px;border:1px solid #1c3844;border-radius:15px;background:#09161d}
.portfolio-primary{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.portfolio-secondary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #17313c}
.portfolio-tile{position:relative;min-width:0;min-height:82px;padding:7px 4px;border:1px solid transparent;border-radius:12px;background:transparent;color:#819198;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}
button.portfolio-tile{cursor:pointer}
button.portfolio-tile:hover{background:#10242e;border-color:#2b4a56;transform:translateY(-1px)}
.portfolio-icon{height:34px;display:flex;align-items:center;justify-content:center}
.portfolio-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.portfolio-label{display:flex;align-items:baseline;justify-content:center;gap:3px;max-width:100%;line-height:1.08}
.portfolio-label strong{font-size:.78rem;color:inherit;white-space:nowrap}
.portfolio-label span{font-size:.68rem;color:#c2d0d5;white-space:normal}
.portfolio-tile.off{color:#69777d;opacity:.52;filter:grayscale(1)}
.portfolio-tile.off .portfolio-label span{color:#87959a}
.portfolio-tile.active.tone-blue{color:#16aee3}
.portfolio-tile.active.tone-orange{color:#ff9b32}
.portfolio-tile.active{background:rgba(255,255,255,.015)}
.portfolio-tile.opportunity{opacity:1;filter:none;color:var(--warning);background:#302713;border-color:#765821;box-shadow:inset 0 0 0 1px rgba(255,198,109,.05)}
.portfolio-tile.opportunity .portfolio-label span{color:#ffe0a3}
.portfolio-tile.family-shared{color:#58d4e6;background:#0e2d35;border-color:#285f6c}
.portfolio-uf{position:absolute;right:4px;top:4px;font-style:normal;font-size:.46rem;font-weight:900;line-height:1;background:#1c6270;color:#e3fbff;border-radius:999px;padding:3px 4px;letter-spacing:.02em}
.radar-portfolio{min-width:535px}
.radar-portfolio-primary{display:grid;grid-template-columns:repeat(8,61px);gap:4px}
.radar-portfolio-secondary{display:grid;grid-template-columns:repeat(5,61px);gap:4px;margin-top:5px;padding-top:5px;border-top:1px solid #17313c}
.portfolio-tile.compact{min-height:58px;padding:4px 2px;gap:2px;border-radius:10px}
.portfolio-tile.compact .portfolio-icon{height:25px}
.portfolio-tile.compact .portfolio-icon svg{width:23px;height:23px;stroke-width:1.9}
.portfolio-tile.compact .portfolio-label{display:block;line-height:1}
.portfolio-tile.compact .portfolio-label strong{display:block;font-size:.64rem;margin-bottom:2px}
.portfolio-tile.compact .portfolio-label span{display:block;font-size:.5rem;line-height:1.05}
@media(max-width:900px){
  .portfolio-primary{grid-template-columns:repeat(4,minmax(0,1fr))}
  .portfolio-secondary{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
  .portfolio-primary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portfolio-secondary{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Edición de fichas */
.detail-actions{display:flex;justify-content:flex-end;gap:8px;margin:0 0 14px}
.detail-actions .primary,.detail-actions .secondary,.detail-actions .ghost{width:auto}
@media(max-width:560px){.detail-actions{justify-content:stretch}.detail-actions>*{width:100%}}


/* Gestor documental de póliza */
.policy-doc-upload-box{margin-top:16px;padding:14px;border:1px solid #1d3b47;border-radius:14px;background:#0a171e}
.policy-doc-upload-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.policy-doc-upload-grid input[type="file"]{padding:8px;background:#09161d}
.policy-document-list{display:grid;gap:9px;margin-top:12px}
.policy-document-card{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #1d3944;background:#0a171e;border-radius:13px;padding:12px}
.policy-document-card.empty-document{border-style:dashed;background:#09151c}
.policy-document-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.policy-document-icon{font-size:1.45rem;line-height:1}
.policy-document-main strong{font-size:.9rem}
.policy-document-main span:not(.badge){display:block;color:var(--muted);font-size:.72rem;margin-top:4px;overflow-wrap:anywhere}
.policy-document-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.policy-document-actions button{width:auto}
.danger-text{color:#ff9f9f!important}
.policy-document-history{margin-top:3px}
.policy-document-history summary{cursor:pointer;color:#b7cbd3;font-size:.78rem;font-weight:700;padding:8px 2px}
.policy-document-history-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;border-top:1px solid #19333d;background:transparent;color:var(--text);padding:9px 3px;text-align:left}
.policy-document-history-item small{color:var(--muted);text-align:right}
@media(max-width:760px){.policy-doc-upload-grid{grid-template-columns:1fr}.policy-document-card{align-items:flex-start;flex-direction:column}.policy-document-actions{justify-content:flex-start;width:100%}}


/* Ficha Cliente 360 */
.client360-wide .drawer-panel{width:min(1040px,calc(100% - 40px))}
.client360-actions{display:flex;gap:7px;justify-content:flex-start;flex-wrap:wrap;margin-bottom:14px}
.client360-actions button{
  width:auto;
  padding:8px 11px;
  border-radius:9px;
  font-size:.76rem;
  line-height:1.15;
}
.client360-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:14px}
.client360-kpi{background:#0a171e;border:1px solid #1d3944;border-radius:14px;padding:13px;min-width:0}
.client360-kpi span{display:block;color:var(--muted);font-size:.7rem;margin-bottom:5px}
.client360-kpi strong{font-size:1rem;overflow-wrap:anywhere}
.client360-section{border:1px solid #1b3540;background:#09161d;border-radius:16px;padding:15px;margin-top:12px}
.client360-section>h3{margin-bottom:10px}
.client360-data-grid{margin-top:10px}
.client360-two-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.client360-two-columns>.client360-section{height:max-content}
.client360-family-summary{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:.78rem}
.client360-family-summary strong{color:var(--text);margin-left:4px}
.client360-policy-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:11px}
.client360-policy-card{border:1px solid #1d3944;background:#0a171e;color:var(--text);border-radius:13px;padding:12px;text-align:left}
.client360-policy-card:hover{border-color:#35616f;background:#0e2029}
.client360-policy-main{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.client360-policy-main strong{display:block;font-size:.88rem}
.client360-policy-main>div>span{display:block;color:var(--muted);font-size:.72rem;margin-top:4px}
.client360-policy-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:11px;padding-top:9px;border-top:1px solid #17313c}
.client360-policy-meta span{font-size:.66rem;color:var(--muted)}
.client360-policy-meta strong{display:block;color:#dcebed;font-size:.76rem;margin-top:3px}
.client360-document-groups{display:grid;gap:10px;margin-top:11px}
.client360-document-group{border:1px solid #1c3844;background:#0a171e;border-radius:13px;overflow:hidden}
.client360-document-policy{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;background:#0d2029;color:var(--text);padding:10px 12px;text-align:left}
.client360-document-policy span{color:var(--muted);font-size:.72rem}
.client360-document-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.client360-document-item{display:flex;align-items:center;gap:8px;border:0;border-top:1px solid #17313c;background:transparent;color:var(--text);padding:10px;text-align:left;min-width:0}
.client360-document-item:hover{background:#10242e}
.client360-document-icon{font-size:1.15rem}
.client360-document-item>span:last-child{min-width:0}
.client360-document-item strong{display:block;font-size:.76rem}
.client360-document-item small{display:block;color:var(--muted);font-size:.65rem;margin-top:3px;overflow-wrap:anywhere}
.client360-opportunity-list{display:grid;gap:8px;margin-top:10px}
.client360-opportunity-card{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px solid #765821;background:#302713;color:#ffe0a3;border-radius:12px;padding:11px;text-align:left}
.client360-opportunity-card>div:first-child strong{display:block;font-size:.84rem}
.client360-opportunity-card>div:first-child span{display:block;font-size:.7rem;margin-top:3px;color:#d8c58f}
.client360-opportunity-score{text-align:center;min-width:44px}
.client360-opportunity-score strong{display:block;font-size:1rem}
.client360-opportunity-score span{font-size:.62rem}
.client360-agenda-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.client360-agenda-columns h4{margin:0 0 7px;color:#c8dbe0;font-size:.8rem}
.client360-agenda-item{display:flex;align-items:center;justify-content:space-between;gap:9px;border:1px solid #1b3540;background:#0a171e;border-radius:11px;padding:9px;margin-bottom:7px}
.client360-agenda-item.overdue{border-color:#613243;background:#24151b}
.client360-agenda-item strong{display:block;font-size:.76rem}
.client360-agenda-item span{display:block;color:var(--muted);font-size:.65rem;margin-top:3px}
.client360-agenda-item button{flex:0 0 auto}
.client360-mini-list{display:grid;gap:7px;margin-top:10px}
.client360-mini-card{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px solid #1b3540;background:#0a171e;color:var(--text);border-radius:11px;padding:10px;text-align:left}
.client360-mini-card:hover{border-color:#315b69;background:#0e2029}
.client360-mini-card>div strong{display:block;font-size:.78rem}
.client360-mini-card>div span{display:block;color:var(--muted);font-size:.66rem;margin-top:3px}
.client360-mini-card>strong{white-space:nowrap;font-size:.78rem}
.client360-note{border-left:3px solid #2e6470;background:#0a171e;border-radius:0 11px 11px 0;padding:12px;color:#c5d8dd;font-size:.8rem;line-height:1.6;margin-top:10px}
.client360-timeline{display:grid;gap:0;margin-top:10px}
.client360-timeline-item{position:relative;display:flex;gap:9px;padding:0 0 12px 15px;border-left:1px solid #274652;margin-left:5px}
.client360-timeline-item:last-child{padding-bottom:0}
.client360-timeline-item i{position:absolute;left:-4px;top:3px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.client360-timeline-item strong{display:block;font-size:.74rem}
.client360-timeline-item span{display:block;color:var(--muted);font-size:.64rem;margin-top:3px}
@media(max-width:900px){
  .client360-wide .drawer-panel{width:min(760px,100%)}
  .client360-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .client360-policy-list,.client360-two-columns{grid-template-columns:1fr}
  .client360-document-items{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .client360-wide .drawer-panel{width:100%}
  .client360-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .client360-actions{justify-content:stretch}.client360-actions button{width:100%}
  .client360-document-items,.client360-agenda-columns{grid-template-columns:1fr}
  .client360-policy-meta{grid-template-columns:1fr}
  .client360-document-policy{align-items:flex-start;flex-direction:column}
}


/* Login rediseñado */
.auth-shell{
  position:relative;
  min-height:100vh;
  display:block;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(22,73,86,.16),transparent 34rem),
    linear-gradient(180deg,#020304 0%,#05080b 55%,#030405 100%);
  isolation:isolate;
}
.auth-network{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  display:block;
  opacity:1;
  pointer-events:none;
}
.auth-vignette{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 47%,transparent 0 24%,rgba(0,0,0,.12) 48%,rgba(0,0,0,.68) 100%),
    linear-gradient(180deg,rgba(0,0,0,.3),transparent 20%,transparent 78%,rgba(0,0,0,.38));
}
.auth-brand{
  position:absolute;
  top:clamp(26px,5vh,58px);
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  align-items:center;
  gap:13px;
  color:#f4fbfc;
  user-select:none;
  white-space:nowrap;
}
.auth-logo-mark{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#031012;
  font-size:1.02rem;
  font-weight:950;
  letter-spacing:-.04em;
  background:linear-gradient(145deg,#73e8dc,#24a89e 64%,#167c8d);
  box-shadow:
    0 16px 44px rgba(36,168,158,.2),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.auth-logo-copy{display:flex;flex-direction:column;line-height:1.02}
.auth-logo-copy strong{font-size:1.03rem;letter-spacing:-.025em}
.auth-logo-copy span{
  margin-top:5px;
  color:#6f8b94;
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.auth-stage{
  position:relative;
  z-index:4;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:130px 22px 76px;
}
.auth-wrap{
  width:min(100%,430px);
  display:block;
  padding:0;
  border:0;
  background:transparent;
}
.auth-card{
  width:100%;
  padding:32px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(13,18,22,.84),rgba(8,12,15,.9));
  border:1px solid rgba(142,188,199,.16);
  box-shadow:
    0 32px 90px rgba(0,0,0,.56),
    0 0 0 1px rgba(255,255,255,.018) inset,
    0 1px 0 rgba(255,255,255,.05) inset;
  backdrop-filter:blur(22px) saturate(115%);
  -webkit-backdrop-filter:blur(22px) saturate(115%);
}
.auth-card h2{
  margin:12px 0 7px;
  font-size:1.9rem;
  letter-spacing:-.045em;
}
.auth-card .sub{
  margin-bottom:25px;
  color:#8197a0;
  font-size:.9rem;
}
.auth-card-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#a9d7d3;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.auth-card-kicker .dot{
  width:7px;
  height:7px;
  box-shadow:0 0 0 4px rgba(79,209,197,.08),0 0 16px rgba(79,209,197,.45);
}
.auth-card .field label{
  color:#a9bbc2;
  font-size:.74rem;
  letter-spacing:.01em;
}
.auth-card input{
  min-height:48px;
  background:rgba(4,8,11,.72);
  border-color:#1b3038;
  border-radius:11px;
}
.auth-card input::placeholder{color:#40545c}
.auth-card input:focus{
  border-color:#3aaea5;
  box-shadow:0 0 0 3px rgba(79,209,197,.08),0 0 30px rgba(79,209,197,.045);
}
.auth-login-btn{
  width:100%;
  min-height:48px;
  margin-top:5px;
  border-radius:11px;
  background:linear-gradient(135deg,#65ddd1,#27afa4);
  box-shadow:0 14px 34px rgba(39,175,164,.16);
}
.auth-security{
  margin-top:15px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.055);
  text-align:center;
  color:#4f676f;
  font-size:.67rem;
  letter-spacing:.055em;
}
.auth-footer{
  position:absolute;
  z-index:5;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  color:#34474e;
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.auth-card .secondary,.auth-card .ghost{background:rgba(14,27,33,.72)}
.auth-card .secret-box,.auth-card .code{background:rgba(4,8,11,.65)}
@media(max-width:760px){
  .auth-stage{padding:118px 16px 68px}
  .auth-brand{top:28px}
  .auth-card{padding:27px 23px}
}
@media(max-width:520px){
  .auth-logo-mark{width:46px;height:46px;border-radius:14px}
  .auth-logo-copy strong{font-size:.94rem}
  .auth-stage{padding-left:13px;padding-right:13px}
  .auth-card{padding:24px 19px;border-radius:20px}
  .auth-footer{bottom:18px;font-size:.58rem}
}
@media(prefers-reduced-motion:reduce){
  .auth-network{opacity:1}
}


/* Red CSS de respaldo: visible incluso si falla JavaScript */
.auth-shell::before,
.auth-shell::after{
  content:"";
  position:absolute;
  inset:-18%;
  pointer-events:none;
  transform-origin:center;
}
.auth-shell::before{
  z-index:2;
  opacity:.10;
  background-image:
    radial-gradient(circle,rgba(124,235,224,.95) 0 1.5px,transparent 1.8px),
    radial-gradient(circle,rgba(196,224,230,.72) 0 1.15px,transparent 1.5px),
    linear-gradient(32deg,transparent 49.55%,rgba(80,169,184,.20) 49.8%,rgba(80,169,184,.20) 50.2%,transparent 50.45%),
    linear-gradient(148deg,transparent 49.55%,rgba(80,169,184,.15) 49.8%,rgba(80,169,184,.15) 50.2%,transparent 50.45%);
  background-size:
    118px 92px,
    173px 137px,
    236px 236px,
    286px 286px;
  background-position:
    12px 18px,
    68px 42px,
    0 0,
    40px 65px;
  animation:none;
  mask-image:radial-gradient(circle at center,#000 20%,rgba(0,0,0,.88) 58%,transparent 92%);
  -webkit-mask-image:radial-gradient(circle at center,#000 20%,rgba(0,0,0,.88) 58%,transparent 92%);
}
.auth-shell::after{
  z-index:2;
  opacity:.06;
  background-image:
    radial-gradient(circle,rgba(68,211,200,.85) 0 1.8px,transparent 2.1px),
    linear-gradient(73deg,transparent 49.65%,rgba(104,194,210,.16) 49.85%,rgba(104,194,210,.16) 50.15%,transparent 50.35%),
    linear-gradient(107deg,transparent 49.65%,rgba(104,194,210,.11) 49.85%,rgba(104,194,210,.11) 50.15%,transparent 50.35%);
  background-size:
    211px 169px,
    320px 320px,
    380px 380px;
  background-position:
    20px 35px,
    80px 0,
    0 110px;
  animation:none;
  filter:blur(.15px);
  mask-image:radial-gradient(circle at center,#000 10%,rgba(0,0,0,.8) 60%,transparent 94%);
  -webkit-mask-image:radial-gradient(circle at center,#000 10%,rgba(0,0,0,.8) 60%,transparent 94%);
}
@keyframes authMeshDrift{
  0%{
    background-position:12px 18px,68px 42px,0 0,40px 65px;
    transform:translate3d(-2%,-1%,0) scale(1.03);
  }
  50%{
    background-position:150px 96px,-54px 176px,118px -86px,-105px 155px;
    transform:translate3d(2%,1.5%,0) scale(1.07);
  }
  100%{
    background-position:288px 174px,-176px 310px,236px -172px,-250px 245px;
    transform:translate3d(-1%,2%,0) scale(1.03);
  }
}
@keyframes authMeshFloat{
  0%{
    background-position:20px 35px,80px 0,0 110px;
    transform:rotate(-1deg) scale(1.02);
  }
  100%{
    background-position:-175px 210px,-105px 180px,170px -95px;
    transform:rotate(2.5deg) scale(1.1);
  }
}
.auth-network{z-index:3}
.auth-stage{z-index:5}
.auth-brand,.auth-footer{z-index:6}
@media(prefers-reduced-motion:reduce){
  .auth-shell::before{animation-duration:34s}
  .auth-shell::after{animation-duration:46s}
}


/* Red HTML dinámica */
.auth-network{overflow:hidden}
.auth-network-lines,.auth-network-nodes{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.auth-network-node{
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:4px;
  margin:-2px 0 0 -2px;
  border-radius:50%;
  background:rgba(207,232,236,.86);
  box-shadow:0 0 8px rgba(139,205,214,.18);
  will-change:transform,opacity;
}
.auth-network-node.accent{
  width:6px;
  height:6px;
  margin:-3px 0 0 -3px;
  background:rgba(91,232,218,.96);
  box-shadow:0 0 13px rgba(79,209,197,.54);
}
.auth-network-line{
  position:absolute;
  left:0;
  top:0;
  height:1px;
  transform-origin:0 50%;
  background:rgba(104,194,210,.72);
  will-change:transform,width,opacity;
}
.auth-shell::before,.auth-shell::after{
  opacity:0!important;
  animation:none!important;
}


/* Identidad TP360CRM */
.auth-brand{
  width:min(420px,72vw);
  justify-content:center;
}
.auth-brand::before{
  content:"";
  position:absolute;
  inset:18% -8%;
  z-index:-1;
  background:radial-gradient(ellipse at center,rgba(49,142,215,.20),transparent 68%);
  filter:blur(18px);
}
.auth-brand-logo{
  display:block;
  width:100%;
  height:118px;
  object-fit:contain;
  object-position:center;
  filter:brightness(1.25) drop-shadow(0 10px 30px rgba(23,137,226,.24));
}
.sidebar-brand{
  width:100%;
  min-height:86px;
  margin:0 0 22px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.sidebar-brand-logo{
  display:block;
  width:100%;
  max-width:198px;
  height:82px;
  object-fit:contain;
  object-position:center;
  filter:brightness(1.25) drop-shadow(0 8px 22px rgba(28,137,222,.18));
}
@media(max-width:980px){
  .sidebar-brand{min-height:64px;margin-bottom:20px!important;padding:0}
  .sidebar-brand-logo{width:62px;height:62px;max-width:62px;object-fit:cover;object-position:left center}
}
@media(max-width:760px){
  .auth-brand{width:min(360px,82vw)}
  .auth-brand-logo{height:104px}
  .auth-stage{padding-top:142px}
}
@media(max-width:520px){
  .auth-brand{width:min(320px,88vw)}
  .auth-brand-logo{height:92px}
  .auth-stage{padding-top:132px}
}


/* Ajuste definitivo branding login */
.auth-brand{
  top:14px!important;
  width:min(360px,64vw)!important;
}
.auth-brand-logo{
  height:88px!important;
}
.auth-stage{
  padding-top:178px!important;
}
@media(max-width:760px){
  .auth-brand{
    top:12px!important;
    width:min(310px,80vw)!important;
  }
  .auth-brand-logo{
    height:76px!important;
  }
  .auth-stage{
    padding-top:154px!important;
  }
}
@media(max-width:520px){
  .auth-brand{
    width:min(285px,86vw)!important;
  }
  .auth-brand-logo{
    height:70px!important;
  }
  .auth-stage{
    padding-top:146px!important;
  }
}


/* Branding final TP360CRM */
.auth-brand{
  top:18px!important;
  width:min(455px,68vw)!important;
}
.auth-brand-logo{
  height:112px!important;
  filter:drop-shadow(0 10px 28px rgba(20,157,240,.18))!important;
}
.auth-stage{
  padding-top:190px!important;
}
.sidebar-brand-logo{
  max-width:210px!important;
  height:84px!important;
  filter:drop-shadow(0 8px 20px rgba(20,157,240,.14))!important;
}
@media(max-width:760px){
  .auth-brand{
    top:12px!important;
    width:min(350px,84vw)!important;
  }
  .auth-brand-logo{height:92px!important}
  .auth-stage{padding-top:164px!important}
}
@media(max-width:520px){
  .auth-brand{width:min(315px,88vw)!important}
  .auth-brand-logo{height:84px!important}
  .auth-stage{padding-top:154px!important}
}


/* Logo aprobado TP360CRM */
.auth-brand{
  top:18px!important;
  width:min(520px,72vw)!important;
}
.auth-brand-logo{
  height:auto!important;
  max-height:126px!important;
  filter:none!important;
}
.sidebar-brand-logo{
  max-width:220px!important;
  height:auto!important;
  filter:none!important;
}


/* TP360CRM · ajuste seguro de marca y login */
.auth-brand{
  top:10px!important;
  width:min(430px,60vw)!important;
}
.auth-brand-logo{
  height:auto!important;
  max-height:92px!important;
  filter:none!important;
}
.auth-stage{
  min-height:100dvh!important;
  padding:110px 22px 16px!important;
  box-sizing:border-box!important;
  display:grid!important;
  place-items:start center!important;
}
.auth-card h2{color:#fff}
.auth-card .sub{color:#c7d8e6}
.auth-card label{color:#d7e5ef}
.auth-card input{border-color:#173954}
.auth-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,143,255,.13)}
.auth-footer{color:#8fa9be}

@media(max-width:760px){
  .auth-brand{top:8px!important;width:min(300px,82vw)!important}
  .auth-brand-logo{max-height:72px!important}
  .auth-stage{padding:92px 16px 12px!important}
}


/* Gestor documental · múltiples "Otros documentos" */
.policy-document-card-multi{display:block}
.policy-document-multi-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.policy-document-multi-list{display:grid;gap:0;margin-top:10px;border-top:1px solid #19333d}
.policy-document-multi-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #19333d}
.policy-document-multi-row:last-child{border-bottom:0}
.policy-document-multi-file{min-width:0;flex:1}
.policy-document-multi-file strong{display:block;font-size:.82rem;overflow-wrap:anywhere}
.policy-document-multi-file span{display:block;color:var(--muted);font-size:.7rem;margin-top:3px}
.policy-document-multi-empty{color:var(--muted);font-size:.75rem;margin-top:10px;padding-top:10px;border-top:1px dashed #19333d}
@media(max-width:760px){
  .policy-document-multi-head,.policy-document-multi-row{align-items:flex-start;flex-direction:column}
  .policy-document-multi-row .policy-document-actions{width:100%;justify-content:flex-start}
}

@media(max-width:980px){
  .sidebar-user{justify-content:center;padding:8px 0}
  .sidebar-user-meta,.sidebar-mfa-text{display:none}
  .sidebar-mfa{justify-content:center;margin-left:0;margin-right:0}
  .work-popover{left:64px;right:auto;width:220px;bottom:76px}
}


/* Equipo · registros plegables */
.team-log-panel{padding:0!important;overflow:hidden}
.team-log-summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  padding:16px 18px;
  user-select:none;
}
.team-log-summary::-webkit-details-marker{display:none}
.team-log-summary h3{margin:0 0 4px}
.team-log-summary .sub{margin:0;font-size:.76rem}
.team-log-chevron{
  flex:0 0 auto;
  color:var(--accent2);
  font-size:1.15rem;
  transition:transform .18s ease;
}
.team-log-panel[open] .team-log-chevron{transform:rotate(180deg)}
.team-log-panel[open] .team-log-summary{
  border-bottom:1px solid var(--border);
  background:#0b1b29;
}
.team-log-content{padding:16px 18px 18px}
.team-log-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.team-log-toolbar button{width:auto}
@media(max-width:760px){
  .team-log-summary{padding:14px}
  .team-log-content{padding:14px}
  .team-log-toolbar{align-items:flex-start;flex-direction:column}
}


/* Equipo · exportación de registros */
.team-log-tools{display:flex;align-items:center;gap:8px}
.export-menu-wrap{position:relative}
.export-menu{
  position:absolute;
  right:0;
  top:calc(100% + 7px);
  z-index:20;
  min-width:155px;
  padding:6px;
  border:1px solid #1d4667;
  border-radius:11px;
  background:#091826;
  box-shadow:0 16px 36px rgba(0,0,0,.38);
}
.export-menu button{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  padding:9px 10px;
  border-radius:8px;
  font-size:.74rem;
}
.export-menu button:hover{background:#0f2a40}
@media(max-width:760px){
  .team-log-tools{width:100%;justify-content:flex-start;flex-wrap:wrap}
}


/* =========================================================
   TP360CRM · CONFIGURACIÓN Y TEMAS
   ========================================================= */

.sidebar-settings{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:transparent;
  color:var(--muted);
  padding:9px 8px;
  margin-bottom:6px;
  border-radius:11px;
  text-align:left;
  cursor:pointer;
  font-weight:700;
  transition:.18s ease;
}

.sidebar-settings:hover{
  color:var(--text);
  background:rgba(255,255,255,.055);
}

.sidebar-settings-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.045);
  font-size:15px;
}

.settings-section{
  max-width:980px;
}

.settings-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.theme-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}

.theme-choice{
  appearance:none;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  border-radius:14px;
  padding:12px;
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
}

.theme-choice:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
}

.theme-choice.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}

.theme-choice strong{
  display:block;
  font-size:.88rem;
  margin-top:9px;
}

.theme-choice small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:.75rem;
}

.theme-swatch{
  height:34px;
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr;
  overflow:hidden;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.08);
}

.theme-swatch i{display:block}

.theme-swatch-tp360 i:nth-child(1){background:#1e8fff}
.theme-swatch-tp360 i:nth-child(2){background:#050c14}
.theme-swatch-tp360 i:nth-child(3){background:#35b8ff}

.theme-swatch-ocean i:nth-child(1){background:#2563eb}
.theme-swatch-ocean i:nth-child(2){background:#071225}
.theme-swatch-ocean i:nth-child(3){background:#60a5fa}

.theme-swatch-emerald i:nth-child(1){background:#16a56f}
.theme-swatch-emerald i:nth-child(2){background:#061710}
.theme-swatch-emerald i:nth-child(3){background:#49d69b}

.theme-swatch-violet i:nth-child(1){background:#8b5cf6}
.theme-swatch-violet i:nth-child(2){background:#120b22}
.theme-swatch-violet i:nth-child(3){background:#b794ff}

.theme-swatch-graphite i:nth-child(1){background:#70818d}
.theme-swatch-graphite i:nth-child(2){background:#090d10}
.theme-swatch-graphite i:nth-child(3){background:#aebbc4}

.theme-swatch-sand i:nth-child(1){background:#c58b50}
.theme-swatch-sand i:nth-child(2){background:#18110b}
.theme-swatch-sand i:nth-child(3){background:#e1b27d}

.settings-reset{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
}


/* TP360 corporativo */
body[data-theme="tp360"]{
  --bg:#050c14;
  --panel:#0a1723;
  --panel2:#0d1e2c;
  --border:#173954;
  --text:#f7fbff;
  --muted:#b2c8da;
  --accent:#1e8fff;
  --accent2:#35b8ff;
}

/* Ocean */
body[data-theme="ocean"]{
  --bg:#050a16;
  --panel:#091427;
  --panel2:#0d1b33;
  --border:#1c3a63;
  --text:#f5f9ff;
  --muted:#aec4e0;
  --accent:#2563eb;
  --accent2:#60a5fa;
}

/* Emerald */
body[data-theme="emerald"]{
  --bg:#04100c;
  --panel:#071a13;
  --panel2:#0b241a;
  --border:#194b39;
  --text:#f4fff9;
  --muted:#aad0bf;
  --accent:#16a56f;
  --accent2:#49d69b;
}

/* Violet */
body[data-theme="violet"]{
  --bg:#0b0713;
  --panel:#151022;
  --panel2:#1d1630;
  --border:#443568;
  --text:#faf7ff;
  --muted:#c8bce0;
  --accent:#8b5cf6;
  --accent2:#b794ff;
}

/* Graphite */
body[data-theme="graphite"]{
  --bg:#080b0d;
  --panel:#11171b;
  --panel2:#182126;
  --border:#35434c;
  --text:#f5f7f8;
  --muted:#b5c0c6;
  --accent:#70818d;
  --accent2:#aebbc4;
}

/* Sand */
body[data-theme="sand"]{
  --bg:#100c08;
  --panel:#1b1510;
  --panel2:#261d15;
  --border:#55402e;
  --text:#fffaf4;
  --muted:#d0bba4;
  --accent:#c58b50;
  --accent2:#e1b27d;
}

body[data-theme]{
  background:
    radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 34rem),
    radial-gradient(circle at 80% 80%,color-mix(in srgb,var(--accent2) 9%,transparent),transparent 28rem),
    var(--bg);
}

body[data-theme] .primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
}

body[data-theme] .work-status-dot.work-working{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}

@media(max-width:900px){
  .theme-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:600px){
  .theme-grid{
    grid-template-columns:1fr;
  }
}



/* ===== Ajuste sidebar logo + MFA ===== */
.sidebar{
  padding-top: 6px;
}

.sidebar-brand{
  margin-bottom: 0;
}

.sidebar-brand-logo{
  display:block;
  max-width: 100%;
}

.sidebar-mfa-top{
  display:flex;
  align-items:center;
  gap:5px;
  margin: -4px 0 6px 0;
  padding: 0 8px 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nav{
  margin-top: 0;
}

.sidebar-bottom{
  margin-top: auto;
}


/* ===== MFA integrado en usuario ===== */

.sidebar-user{
  align-items:center;
}

.sidebar-user-meta{
  min-width:0;
}

.sidebar-user-mfa{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:3px;
  font-size:10px;
  font-weight:500;
  color:var(--muted);
  opacity:.9;
  white-space:nowrap;
}

.sidebar-user-mfa::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#35b8ff;
  box-shadow:0 0 0 3px rgba(53,184,255,.12);
}

/* Ya no reservamos espacio para MFA bajo el logo */
.sidebar-brand{
  margin-bottom:4px;
}

.nav{
  margin-top:0;
}

/* TP360: tarjeta usuario — inicio */
@media (min-width: 761px) {
  .sidebar {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-top: 6px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  .sidebar .sidebar-brand {
    flex: 0 0 auto;
    margin-bottom: 4px;
  }

  .sidebar .nav {
    flex: 1 1 0;
    min-height: 0;
    margin: 0 0 8px;
    gap: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .sidebar .nav > button {
    flex: 0 0 auto;
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .sidebar .sidebar-bottom {
    position: relative;
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: 0;
  }
}

@media (min-width: 981px) {
  .sidebar .sidebar-settings {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    margin: 0 0 8px;
    padding: 6px 10px;
    text-align: left;
  }

  .sidebar #sidebarUser {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 12px 10px;
    border: 1px solid rgba(53,184,255,.10);
    border-radius: 14px;
    background: #0b2236;
    color: var(--text);
    text-align: left;
    overflow: visible;
  }

  .sidebar #sidebarUser:hover {
    background: #102c43;
  }

  .sidebar #sidebarUser:focus-visible {
    outline: 2px solid #35b8ff;
    outline-offset: 3px;
  }

  .sidebar #sidebarUser .sidebar-avatar-wrap {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .sidebar #sidebarUser .avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .sidebar #sidebarUser .sidebar-user-meta {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
  }

  .sidebar #userName,
  .sidebar #userRole {
    display: block;
    margin: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    line-height: 1.35;
  }

  .sidebar #userName {
    font-size: 13px;
    font-weight: 700;
  }

  .sidebar #userRole {
    font-size: 10px;
    font-weight: 400;
    color: var(--muted);
  }

  .sidebar #sidebarUser > .sidebar-user-mfa {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,.07);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--muted);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .sidebar #sidebarUser > .sidebar-user-mfa::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #35b8ff;
    box-shadow: none;
  }

  .sidebar .work-popover {
    bottom: calc(100% + 8px);
  }
}

/* Conservar el lateral reducido y la ocultación móvil originales. */
@media (min-width: 761px) and (max-width: 980px) {
  .sidebar #sidebarUser > .sidebar-user-mfa {
    display: none;
  }
}

@media (min-width: 981px) and (max-height: 760px) {
  .sidebar .nav {
    gap: 2px;
  }

  .sidebar .nav > button {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
/* TP360: tarjeta usuario — fin */

/* =========================================================
   TP360CRM · CONFIGURACIÓN COMPLETA
   ========================================================= */

.settings-dashboard{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  margin-top:18px;
}

.settings-card{
  min-width:0;
  padding:20px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel2);
}

.settings-card-wide{
  grid-column:1 / -1;
}

.settings-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.settings-card-head h3{
  margin:0 0 4px;
}

.settings-card-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  font-size:18px;
}

.settings-profile{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.settings-avatar{
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  font-size:30px;
  font-weight:900;
}

.settings-profile-fields{
  min-width:0;
}

.settings-inline{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}

.settings-inline > div{
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(0,0,0,.08);
}

.settings-inline span,
.settings-inline strong{
  display:block;
}

.settings-inline strong{
  margin-top:4px;
}

.settings-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}

.settings-brand-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:24px;
  align-items:start;
}

.settings-brand-preview{
  min-height:145px;
  display:grid;
  place-items:center;
  padding:24px;
  border:1px solid var(--border);
  border-radius:15px;
  background:#06111c;
}

.settings-brand-preview img{
  width:100%;
  max-width:220px;
  height:auto;
}

.settings-security-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.settings-security-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

@media(max-width:1050px){
  .settings-dashboard{
    grid-template-columns:1fr;
  }

  .settings-card-wide{
    grid-column:auto;
  }

  .settings-security-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:700px){
  .settings-profile,
  .settings-brand-layout{
    grid-template-columns:1fr;
  }

  .settings-security-grid,
  .settings-inline{
    grid-template-columns:1fr;
  }
}

.settings-brand-note{
  margin-bottom:16px;
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  color:var(--muted);
  font-size:12px;
}

.settings-brand-note strong{
  color:var(--text);
}

/* =========================================================
   CONFIGURACIÓN · PERFIL PERSONAL
   ========================================================= */

.settings-avatar-column{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.settings-avatar-upload{
  cursor:pointer;
  font-size:11px;
  padding:7px 10px;
}

.settings-avatar-remove{
  padding:5px 8px;
  font-size:10px;
}

.settings-avatar.avatar-has-image,
#avatar.avatar-has-image{
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center !important;
}

.settings-profile-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.settings-profile textarea{
  width:100%;
  resize:vertical;
  min-height:90px;
  font:inherit;
}

.settings-commercial-preview{
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px;
  border:1px solid var(--border);
  border-radius:15px;
  background:color-mix(
    in srgb,
    var(--accent) 5%,
    var(--panel)
  );
}

.settings-commercial-preview > span{
  margin-bottom:12px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--muted);
}

.settings-commercial-preview > strong{
  font-size:22px;
  line-height:1.1;
}

.settings-commercial-preview > small{
  margin-top:8px;
  color:var(--muted);
}

.settings-brand-help{
  margin-top:10px;
}

@media(max-width:700px){
  .settings-profile-two{
    grid-template-columns:1fr;
  }

  .settings-avatar-column{
    align-items:flex-start;
  }
}

/* ===== Perfil · botones de avatar refinados ===== */

.settings-profile{
  grid-template-columns:110px minmax(0,1fr);
}

.settings-avatar-column{
  width:110px;
  align-items:stretch;
}

.settings-avatar{
  width:92px;
  height:92px;
  margin:0 auto 4px;
}

.settings-avatar-upload{
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 12px;
  border:1px solid var(--accent);
  border-radius:10px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--text);
  font-size:12px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
}

.settings-avatar-upload:hover{
  background:color-mix(in srgb,var(--accent) 20%,transparent);
}

.settings-avatar-remove{
  width:100%;
  padding:6px 8px;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}

.settings-avatar-remove:hover{
  color:var(--text);
  background:transparent;
}

/* =========================================================
   TEMAS ADICIONALES TP360CRM
   ========================================================= */

/* MIDNIGHT */
body[data-theme="midnight"]{
  --bg:#030712;
  --panel:#081121;
  --panel2:#0c182b;
  --border:#18345d;
  --text:#f7fbff;
  --muted:#9fb6d2;
  --accent:#2563eb;
  --accent2:#60a5fa;
}

/* CYAN */
body[data-theme="cyan"]{
  --bg:#031014;
  --panel:#071a20;
  --panel2:#0a242c;
  --border:#155064;
  --text:#f3feff;
  --muted:#9ac9d3;
  --accent:#06b6d4;
  --accent2:#67e8f9;
}

/* RUBY */
body[data-theme="ruby"]{
  --bg:#110609;
  --panel:#1a0a0f;
  --panel2:#261017;
  --border:#5b1e2b;
  --text:#fff7f8;
  --muted:#d2a6ae;
  --accent:#e11d48;
  --accent2:#fb7185;
}

/* AMBER */
body[data-theme="amber"]{
  --bg:#100c04;
  --panel:#191307;
  --panel2:#261d0c;
  --border:#5d4517;
  --text:#fffaf0;
  --muted:#d2bc91;
  --accent:#f59e0b;
  --accent2:#fbbf24;
}

/* ROSE */
body[data-theme="rose"]{
  --bg:#100710;
  --panel:#190b19;
  --panel2:#251025;
  --border:#582258;
  --text:#fff7ff;
  --muted:#d2a6cf;
  --accent:#db2777;
  --accent2:#f472b6;
}

/* ROYAL */
body[data-theme="royal"]{
  --bg:#060914;
  --panel:#0b1120;
  --panel2:#111a2e;
  --border:#314266;
  --text:#fffdf5;
  --muted:#b7bfd2;
  --accent:#d4a72c;
  --accent2:#f2cc60;
}


/* ===== SWATCHES ===== */

.theme-swatch-midnight i:nth-child(1){
  background:#2563eb;
}
.theme-swatch-midnight i:nth-child(2){
  background:#081121;
}
.theme-swatch-midnight i:nth-child(3){
  background:#60a5fa;
}

.theme-swatch-cyan i:nth-child(1){
  background:#06b6d4;
}
.theme-swatch-cyan i:nth-child(2){
  background:#071a20;
}
.theme-swatch-cyan i:nth-child(3){
  background:#67e8f9;
}

.theme-swatch-ruby i:nth-child(1){
  background:#e11d48;
}
.theme-swatch-ruby i:nth-child(2){
  background:#1a0a0f;
}
.theme-swatch-ruby i:nth-child(3){
  background:#fb7185;
}

.theme-swatch-amber i:nth-child(1){
  background:#f59e0b;
}
.theme-swatch-amber i:nth-child(2){
  background:#191307;
}
.theme-swatch-amber i:nth-child(3){
  background:#fbbf24;
}

.theme-swatch-rose i:nth-child(1){
  background:#db2777;
}
.theme-swatch-rose i:nth-child(2){
  background:#190b19;
}
.theme-swatch-rose i:nth-child(3){
  background:#f472b6;
}

.theme-swatch-royal i:nth-child(1){
  background:#18264a;
}
.theme-swatch-royal i:nth-child(2){
  background:#d4a72c;
}
.theme-swatch-royal i:nth-child(3){
  background:#f2cc60;
}

/* =========================================================
   TP360CRM · CONFIGURACIÓN AVANZADA
   ========================================================= */

.settings-subtitle{
  margin:18px 0 10px;
  font-size:12px;
  font-weight:800;
  color:var(--text);
}

.settings-checkbox-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.settings-checkbox-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.settings-check{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:8px 11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:color-mix(
    in srgb,
    var(--panel) 86%,
    transparent
  );
  cursor:pointer;
}

.settings-check:hover{
  border-color:color-mix(
    in srgb,
    var(--accent) 55%,
    var(--border)
  );
}

.settings-check input{
  width:16px;
  height:16px;
  accent-color:var(--accent);
}

.settings-check span{
  font-size:12px;
  color:var(--text);
}

.settings-check-wide{
  margin-top:12px;
}

.settings-admin-warning,
.settings-ai-warning{
  margin-bottom:16px;
  padding:10px 13px;
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--muted);
  font-size:11px;
}

.settings-ai-warning{
  margin-top:14px;
}

.settings-check-danger{
  border-color:rgba(240,90,100,.26);
}

.settings-check-danger span{
  color:#f5b4ba;
}

.automation-rule{
  display:grid;
  grid-template-columns:
    minmax(260px,1fr)
    auto
    auto;
  gap:16px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}

.automation-rule:last-of-type{
  border-bottom:0;
}

.automation-rule > div:first-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.automation-rule > div:first-child span{
  font-size:11px;
  color:var(--muted);
}

.switch-line{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  font-size:11px;
}

.switch-line input{
  accent-color:var(--accent);
}

.automation-days{
  min-width:110px;
  margin:0;
}

.settings-ai-grid{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:9px;
}


/* ===== DENSIDAD COMPACTA ===== */

body[data-density="compact"] .panel{
  padding-top:18px;
  padding-bottom:18px;
}

body[data-density="compact"] .card,
body[data-density="compact"] .settings-card{
  padding:14px;
}

body[data-density="compact"] td,
body[data-density="compact"] th{
  padding-top:7px;
  padding-bottom:7px;
}

body[data-density="compact"] .nav button{
  min-height:38px;
}

.nav button.pref-hidden{
  display:none !important;
}


@media(max-width:1000px){
  .settings-ai-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .automation-rule{
    grid-template-columns:1fr;
  }
}

@media(max-width:650px){
  .settings-checkbox-grid,
  .settings-ai-grid{
    grid-template-columns:1fr;
  }
}


/* TP360CRM NOTIFICATIONS SIDEBAR 0.18.12 */


/* =========================================================
   BLOQUE BAJO LOGO
   ========================================================= */

.sidebar-notification-center{

  position:relative;

  width:100%;

  margin:
    -12px 0
    17px;

  padding-bottom:15px;

  border-bottom:
    1px solid
    var(--border);

}


.sidebar-notification-button{

  position:relative;

  width:100%;
  min-height:42px;

  display:flex;
  align-items:center;

  gap:10px;

  padding:
    10px 11px;

  border:
    1px solid
    transparent;

  border-radius:11px;

  background:
    transparent;

  color:#a9bec6;

  text-align:left;

  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    transform .16s ease;

}


.sidebar-notification-button:hover{

  background:#0f2029;

  color:#e7f6f7;

  border-color:
    var(--border);

}


.sidebar-notification-button:active{

  transform:
    translateY(1px);

}


.sidebar-notification-icon{

  flex:0 0 auto;

  width:22px;

  display:grid;
  place-items:center;

  font-size:15px;

}


.sidebar-notification-label{

  flex:1;

  min-width:0;

  font-size:13px;
  font-weight:700;

}


/* =========================================================
   BADGE
   ========================================================= */

.notification-badge{

  flex:0 0 auto;

  min-width:21px;
  height:21px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 6px;

  border-radius:999px;

  background:#ef405d;

  color:#fff;

  font-size:9px;
  font-weight:900;

  line-height:1;

  box-shadow:
    0 5px 16px
    rgba(239,64,93,.32);

}


/* =========================================================
   PANEL
   ========================================================= */

.notification-panel{

  position:absolute;

  z-index:150;

  left:
    calc(100% + 14px);

  top:0;

  width:390px;

  max-height:
    min(620px,80vh);

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 18%,
      var(--border)
    );

  border-radius:17px;

  background:
    color-mix(
      in srgb,
      var(--panel) 97%,
      #000
    );

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.50);

  backdrop-filter:
    blur(18px);

}


/* =========================================================
   CABECERA PANEL
   ========================================================= */

.notification-panel-head{

  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:
    15px 16px;

  border-bottom:
    1px solid
    var(--border);

}


.notification-panel-head > div{

  min-width:0;

  display:flex;
  flex-direction:column;

  gap:2px;

}


.notification-panel-head strong{

  font-size:13px;

}


.notification-panel-head span{

  color:var(--muted);

  font-size:10px;

}


.notification-read-all{

  flex:0 0 auto;

  border:0;

  background:
    transparent;

  color:var(--accent);

  padding:6px;

  font-size:10px;
  font-weight:800;

}


.notification-read-all:hover{

  text-decoration:
    underline;

}


/* =========================================================
   LISTADO
   ========================================================= */

.notification-list{

  flex:1 1 auto;

  min-height:0;

  max-height:500px;

  overflow-y:auto;

  overscroll-behavior:
    contain;

}


.notification-item{

  position:relative;

  display:flex;
  align-items:stretch;

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--border) 72%,
      transparent
    );

  transition:
    background .15s ease;

}


.notification-item:last-child{

  border-bottom:0;

}


.notification-item:hover{

  background:
    color-mix(
      in srgb,
      var(--accent) 4%,
      transparent
    );

}


/* NO LEÍDA */

.notification-item.unread{

  background:
    color-mix(
      in srgb,
      var(--accent) 7%,
      transparent
    );

}


.notification-item.unread::before{

  content:"";

  position:absolute;

  left:0;
  top:13px;
  bottom:13px;

  width:3px;

  border-radius:
    0 3px 3px 0;

  background:
    var(--accent);

}


/* =========================================================
   NOTIFICACIÓN
   ========================================================= */

.notification-main{

  flex:1;

  min-width:0;

  display:flex;
  align-items:flex-start;

  gap:11px;

  padding:
    13px 7px
    13px 15px;

  border:0;

  background:
    transparent;

  color:
    var(--text);

  text-align:left;

}


.notification-main:hover{

  background:
    rgba(
      255,
      255,
      255,
      .018
    );

}


/* ICONO */

.notification-type-icon{

  flex:0 0 auto;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:
    color-mix(
      in srgb,
      var(--accent) 11%,
      transparent
    );

  font-size:15px;

}


.notification-type-icon.warning{

  background:
    rgba(
      255,
      198,
      109,
      .11
    );

}


.notification-type-icon.danger{

  background:
    rgba(
      255,
      122,
      144,
      .11
    );

}


.notification-type-icon.success{

  background:
    rgba(
      119,
      226,
      168,
      .11
    );

}


/* TEXTO */

.notification-copy{

  min-width:0;

  display:flex;
  flex-direction:column;

  gap:3px;

}


.notification-copy strong{

  overflow:hidden;

  font-size:12px;
  line-height:1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.notification-item.unread
.notification-copy strong{

  color:#fff;

}


.notification-copy > span{

  display:-webkit-box;

  overflow:hidden;

  color:
    var(--muted);

  font-size:10px;
  line-height:1.4;

  -webkit-line-clamp:2;

  -webkit-box-orient:
    vertical;

}


.notification-copy small{

  margin-top:2px;

  color:
    var(--muted);

  opacity:.70;

  font-size:9px;

}


/* DESCARTAR */

.notification-dismiss{

  align-self:center;

  flex:0 0 auto;

  width:28px;
  height:28px;

  margin-right:7px;

  border:0;
  border-radius:8px;

  background:
    transparent;

  color:
    var(--muted);

  font-size:18px;

  line-height:1;

}


.notification-dismiss:hover{

  background:
    rgba(
      255,
      255,
      255,
      .06
    );

  color:
    var(--text);

}


/* =========================================================
   PIE
   ========================================================= */

.notification-panel-foot{

  flex:0 0 auto;

  display:flex;
  justify-content:center;

  padding:9px;

  border-top:
    1px solid
    var(--border);

}


.notification-panel-foot button{

  padding:
    7px 13px;

  font-size:10px;

}


/* =========================================================
   VACÍO
   ========================================================= */

.notification-empty{

  min-height:140px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:5px;

  padding:25px;

  color:
    var(--muted);

  text-align:center;

}


.notification-empty > span{

  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    color-mix(
      in srgb,
      var(--accent) 12%,
      transparent
    );

  color:
    var(--accent);

  font-weight:900;

}


.notification-empty strong{

  color:
    var(--text);

  font-size:12px;

}


.notification-empty small{

  font-size:10px;

}


/* =========================================================
   SIDEBAR COMPACTO
   ========================================================= */

@media(max-width:980px){

  .sidebar-notification-center{

    margin:
      -10px 0 15px;

    padding-bottom:13px;

  }


  .sidebar-notification-button{

    justify-content:center;

    padding:
      9px 5px;

  }


  .sidebar-notification-label{

    display:none;

  }


  .sidebar-notification-icon{

    width:auto;

  }


  .notification-badge{

    position:absolute;

    right:0;
    top:0;

    min-width:17px;
    height:17px;

    padding:0 4px;

    font-size:8px;

  }


  .notification-panel{

    left:
      calc(100% + 10px);

    width:
      min(
        390px,
        calc(100vw - 110px)
      );

  }

}



/* =========================================================
   TP360CRM · NOTIFICATIONS FIX 0.18.13
   ========================================================= */

.notification-panel{

  position:fixed !important;

  z-index:10000 !important;

  width:390px;

  max-width:
    calc(100vw - 30px);

  max-height:
    calc(100vh - 30px);

}


.sidebar-notification-button{

  cursor:pointer !important;

  pointer-events:auto !important;

}


.sidebar-notification-center{

  overflow:visible !important;

}


@media(max-width:760px){

  .notification-panel{

    left:15px !important;

    right:15px !important;

    top:70px !important;

    width:auto !important;

    max-height:
      calc(100vh - 90px);

  }

}



/* =========================================================
   FIX CAPAS · NOTIFICACIONES VS TABLAS STICKY
   ========================================================= */

/*
 * La sidebar necesita estar por encima del contenido principal
 * para que el panel de notificaciones pueda sobresalir sobre él.
 */
.sidebar{
  z-index:31;
}


/*
 * El panel de notificaciones queda por encima de cualquier
 * tabla, cabecera sticky o contenido normal.
 */
.notification-panel{
  z-index:10000 !important;
}


/*
 * Las cabeceras sticky siguen funcionando,
 * pero permanecen por debajo de las notificaciones.
 */
.table-wrap th,
table th{
  z-index:2;
}


/*
 * Los drawers deben seguir estando por encima de la sidebar
 * cuando abrimos fichas de clientes, ventas, etc.
 */
.drawer{
  z-index:50;
}


/*
 * Los toast permanecen arriba del todo.
 */
.toast{
  z-index:11000;
}



/* =========================================================
   TP360CRM · GLOBAL NOTIFICATION LAYER 0.18.15
   ========================================================= */

#notificationPanel{
  position:fixed !important;

  z-index:2147483647 !important;

  isolation:isolate;

  transform:translateZ(0);

  pointer-events:auto;
}


/*
 * Los encabezados sticky siguen funcionando,
 * pero nunca compiten con overlays globales.
 */
.table-wrap{
  position:relative;
  z-index:0;
}

.table-wrap thead,
.table-wrap th{
  z-index:1 !important;
}


/*
 * El contenido general queda en su capa normal.
 */
.main{
  position:relative;
  z-index:0;
}



/* =========================================================
   TP360CRM · TEAM INVITE DRAWER FIX
   ========================================================= */

#teamInviteDrawer{
  z-index:20000 !important;
}

#teamInviteDrawer.open{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

#teamInviteDrawer .drawer-backdrop{
  z-index:0;
}

#teamInviteDrawer .drawer-panel{
  z-index:1;
}



/* =========================================================
   TP360CRM · IA / KNOWLEDGE CONFIGURATOR
   ========================================================= */

.ai-knowledge-overlay{
  position:fixed;
  inset:0;
  z-index:2147482000;
  background:rgba(4,8,18,.72);
  backdrop-filter:blur(7px);
  padding:24px;
  overflow:auto;
}

.ai-knowledge-overlay.hidden,
.ai-knowledge-editor.hidden{
  display:none !important;
}

.ai-knowledge-shell{
  width:min(1380px,100%);
  min-height:calc(100% - 10px);
  margin:0 auto;
  background:var(--panel,#101723);
  color:var(--text,#eef4ff);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:26px;
}

.ai-knowledge-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.ai-knowledge-head h2{
  margin:4px 0 6px;
  font-size:28px;
}

.ai-knowledge-head p{
  margin:0;
  opacity:.7;
}

.ai-knowledge-eyebrow{
  font-size:11px;
  letter-spacing:.15em;
  font-weight:800;
  opacity:.55;
}

.ai-knowledge-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.ai-knowledge-notice{
  min-height:20px;
  margin-top:14px;
  font-size:13px;
}

.ai-knowledge-notice.ok{
  color:#73e6a2;
}

.ai-knowledge-notice.error{
  color:#ff8797;
}

.ai-knowledge-summary{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:12px;
  margin:20px 0;
}

.ai-knowledge-summary > div{
  padding:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}

.ai-knowledge-summary span{
  display:block;
  opacity:.6;
  font-size:12px;
  margin-bottom:7px;
}

.ai-knowledge-summary strong{
  font-size:24px;
}

.ai-knowledge-tabs{
  display:flex;
  gap:8px;
  border-bottom:
    1px solid rgba(255,255,255,.08);
  margin-bottom:18px;
}

.ai-knowledge-tabs button{
  appearance:none;
  border:0;
  background:none;
  color:inherit;
  padding:12px 15px;
  cursor:pointer;
  opacity:.6;
  border-bottom:2px solid transparent;
}

.ai-knowledge-tabs button.active{
  opacity:1;
  border-bottom-color:
    var(--accent,#4c8dff);
}

.ai-knowledge-tab{
  display:none;
}

.ai-knowledge-tab.active{
  display:block;
}

.ai-knowledge-toolbar{
  display:grid;
  grid-template-columns:
    minmax(260px,1fr)
    190px
    220px
    auto;
  gap:10px;
  margin-bottom:16px;
}

.ai-knowledge-toolbar input,
.ai-knowledge-toolbar select,
.ai-test-box input,
.ai-test-box select,
.ai-test-box textarea{
  width:100%;
}

.ai-knowledge-list{
  border:
    1px solid rgba(255,255,255,.08);
  border-radius:15px;
  overflow:hidden;
}

.ai-knowledge-row{
  width:100%;
  display:grid;
  grid-template-columns:
    minmax(300px,1fr)
    220px
    180px
    110px;
  align-items:center;
  gap:16px;
  padding:15px 16px;
  border:0;
  border-bottom:
    1px solid rgba(255,255,255,.065);
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.ai-knowledge-row:last-child{
  border-bottom:0;
}

.ai-knowledge-row:hover{
  background:rgba(255,255,255,.035);
}

.ai-source-title{
  font-weight:750;
  margin-bottom:5px;
}

.ai-source-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  opacity:.6;
  font-size:12px;
}

.ai-source-channels{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.ai-source-channels span{
  padding:4px 7px;
  border-radius:8px;
  font-size:11px;
  background:rgba(255,255,255,.065);
}

.ai-source-validity{
  font-size:12px;
  opacity:.65;
}

.ai-source-status{
  justify-self:end;
  padding:5px 8px;
  border-radius:9px;
  font-size:11px;
  font-weight:750;
}

.ai-source-status.active{
  background:rgba(38,194,111,.13);
  color:#79e3a9;
}

.ai-source-status.draft{
  background:rgba(246,188,62,.12);
  color:#f4cb70;
}

.ai-source-status.archived{
  background:rgba(255,255,255,.07);
  opacity:.55;
}

.ai-knowledge-empty{
  padding:48px 24px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ai-knowledge-empty span{
  opacity:.6;
}

.ai-knowledge-editor{
  position:fixed;
  inset:0;
  z-index:2147483000;
}

.ai-knowledge-editor-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}

.ai-knowledge-editor-panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(720px,96vw);
  overflow:auto;
  padding:24px;
  background:var(--panel,#101723);
  color:var(--text,#eef4ff);
  border-left:
    1px solid rgba(255,255,255,.1);
}

.ai-knowledge-editor-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:22px;
}

.ai-form-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:15px;
}

.ai-form-grid .full{
  grid-column:1/-1;
}

.ai-form-grid textarea{
  resize:vertical;
}

.ai-channel-grid{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:10px;
}

.ai-channel-grid label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px;
  border:
    1px solid rgba(255,255,255,.08);
  border-radius:11px;
  cursor:pointer;
}

.ai-editor-actions{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.ai-editor-actions-right{
  display:flex;
  gap:10px;
  margin-left:auto;
}

.ai-test-grid{
  display:grid;
  grid-template-columns:
    minmax(280px,.7fr)
    minmax(350px,1.3fr);
  gap:22px;
}

.ai-test-box{
  padding:20px;
  border:
    1px solid rgba(255,255,255,.08);
  border-radius:15px;
}

.ai-test-box h3{
  margin-top:0;
}

.ai-test-box p{
  opacity:.65;
  font-size:13px;
}

.ai-test-box label{
  display:block;
  margin:
    14px 0 6px;
  font-size:12px;
  font-weight:700;
}

.ai-test-box button{
  margin-top:14px;
}

.ai-test-results{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ai-test-result{
  padding:15px;
  border:
    1px solid rgba(255,255,255,.08);
  border-radius:13px;
}

.ai-test-result-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.ai-test-result-head span{
  opacity:.55;
  font-size:11px;
}

.ai-test-product{
  margin-top:5px;
  opacity:.65;
  font-size:12px;
}

.ai-test-result p{
  white-space:pre-wrap;
  line-height:1.5;
  font-size:13px;
  opacity:.85;
}

@media(max-width:900px){

  .ai-knowledge-summary{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .ai-knowledge-toolbar{
    grid-template-columns:1fr 1fr;
  }

  .ai-knowledge-row{
    grid-template-columns:1fr;
  }

  .ai-source-status{
    justify-self:start;
  }

  .ai-test-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:600px){

  .ai-knowledge-overlay{
    padding:8px;
  }

  .ai-knowledge-shell{
    padding:16px;
  }

  .ai-knowledge-head{
    flex-direction:column;
  }

  .ai-knowledge-summary{
    grid-template-columns:1fr 1fr;
  }

  .ai-knowledge-toolbar{
    grid-template-columns:1fr;
  }

  .ai-form-grid{
    grid-template-columns:1fr;
  }

  .ai-form-grid .full{
    grid-column:auto;
  }

  .ai-channel-grid{
    grid-template-columns:1fr;
  }

}



/* =========================================================
   TP360CRM · BARRA DE ESTADO COMPACTA V2

   IZQUIERDA   CENTRO      DERECHA
   seguridad   reservado   notificaciones
   ========================================================= */

.tp360-sidebar-status{
  display:grid;

  grid-template-columns:
    minmax(42px,1fr)
    minmax(42px,1fr)
    minmax(42px,1fr);

  align-items:center;

  width:100%;

  min-height:42px;

  padding:0 14px;

  margin:5px 0 8px;

  box-sizing:border-box;
}


.tp360-status-slot{
  display:flex;
  align-items:center;
}


.tp360-status-left{
  justify-content:flex-start;
}


.tp360-status-center{
  justify-content:center;
}


.tp360-status-right{
  justify-content:flex-end;
}


/* =========================================================
   NOTIFICACIONES
   ========================================================= */

.tp360-notification-label-hidden{
  display:none !important;
}


.tp360-sidebar-status
.tp360-notification-compact{

  width:auto !important;

  min-width:42px !important;

  max-width:max-content !important;

  flex:none !important;

  margin:0 !important;

  padding:7px 9px !important;

  justify-content:center !important;
}


/* =========================================================
   CONEXIÓN SEGURA
   ========================================================= */

.tp360-secure-indicator{

  position:relative;

  display:block;

  width:12px;
  height:12px;

  border-radius:50%;

  background:#3182ff;

  border:
    2px solid
    rgba(139,193,255,.95);

  box-shadow:
    0 0 0 3px rgba(49,130,255,.12),
    0 0 11px rgba(49,130,255,.52);

  cursor:help;
}


/* Tooltip */

.tp360-secure-indicator::after{

  content:attr(data-tooltip);

  position:absolute;

  left:0;
  top:calc(100% + 12px);

  white-space:nowrap;

  padding:7px 10px;

  border-radius:8px;

  background:#111827;
  color:#f8fafc;

  border:
    1px solid
    rgba(255,255,255,.12);

  font-size:11px;
  font-weight:600;

  box-shadow:
    0 9px 26px
    rgba(0,0,0,.38);

  pointer-events:none;

  opacity:0;
  visibility:hidden;

  transform:
    translateY(-3px);

  transition:
    opacity .15s ease,
    transform .15s ease;

  z-index:2147483647;
}


.tp360-secure-indicator:hover::after,
.tp360-secure-indicator:focus::after{

  opacity:1;
  visibility:visible;

  transform:
    translateY(0);
}


.tp360-secure-indicator:focus{

  outline:
    2px solid
    rgba(76,141,255,.55);

  outline-offset:4px;
}


/* Ocultar indicador antiguo */

.tp360-old-security-hidden{
  display:none !important;
}


/* Recuperamos espacio */

.sidebar .nav{
  margin-top:2px;
}



/* =========================================================
   TP360CRM · AJUSTE VERTICAL BARRA SUPERIOR
   Recupera altura para evitar scroll del menú
   ========================================================= */

.tp360-sidebar-status{
  min-height:34px !important;

  margin:
    -30px 0 0 !important;

  padding:
    0 14px !important;
}


/* Acercamos el separador al bloque de iconos */

.sidebar .nav{
  margin-top:0 !important;
  padding-top:10px !important;
}


/* Reducimos aire innecesario bajo la barra */

.tp360-sidebar-status + .nav{
  margin-top:0 !important;
}


/* Iconos ligeramente más compactos */

.tp360-sidebar-status
.tp360-notification-compact{
  padding:
    4px 8px !important;

  min-height:32px !important;
}


/* Mantenemos el punto perfectamente centrado */

.tp360-status-left,
.tp360-status-center,
.tp360-status-right{
  min-height:32px;
}



/* =========================================================
   TP360CRM · AJUSTE TEXTO BLOQUE INFERIOR
   ========================================================= */

#aiKnowledgeBtn,
#settingsBtn{
  font-size:14px !important;
  line-height:1.15 !important;
}


/* Si el texto está dentro de spans */

#aiKnowledgeBtn span,
#settingsBtn span{
  font-size:14px !important;
}


/* Ligero ajuste vertical para ganar un poco más de espacio */

#aiKnowledgeBtn,
#settingsBtn{
  min-height:38px !important;
  padding-top:7px !important;
  padding-bottom:7px !important;
}



/* =========================================================
   TP360 AI WEB IMPORT V2
   ========================================================= */

.ai-web-dialog{
  position:fixed;
  inset:0;
  z-index:2147483500;
}

.ai-web-dialog.hidden{
  display:none !important;
}

.ai-web-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(2,6,16,.76);

  backdrop-filter:
    blur(6px);
}

.ai-web-card{
  position:relative;

  width:
    min(
      640px,
      calc(100% - 30px)
    );

  margin:
    9vh auto 0;

  padding:24px;

  border-radius:20px;

  background:
    var(
      --panel,
      #101723
    );

  color:
    var(
      --text,
      #eef4ff
    );

  border:
    1px solid
    rgba(255,255,255,.1);

  box-shadow:
    0 28px 90px
    rgba(0,0,0,.5);
}


.ai-web-head{
  display:flex;
  justify-content:
    space-between;
  align-items:
    flex-start;

  gap:20px;

  margin-bottom:22px;
}


.ai-web-head h2{
  margin:
    5px 0 7px;

  font-size:24px;
}


.ai-web-head p{
  margin:0;

  max-width:500px;

  font-size:13px;
  line-height:1.5;

  opacity:.66;
}


.ai-web-safe{
  display:flex;
  flex-direction:column;
  gap:4px;

  margin:
    14px 0;

  padding:
    12px 14px;

  border-radius:12px;

  background:
    rgba(49,130,255,.075);

  border:
    1px solid
    rgba(49,130,255,.18);
}


.ai-web-safe strong{
  font-size:12px;
}


.ai-web-safe span{
  font-size:12px;
  line-height:1.45;

  opacity:.7;
}


.ai-web-preview{
  display:flex;
  gap:12px;

  margin:
    14px 0 18px;

  padding:
    14px;

  border-radius:13px;

  background:
    rgba(255,255,255,.025);

  border:
    1px solid
    rgba(255,255,255,.07);
}


.ai-web-preview-icon{
  font-size:23px;
  line-height:1;
}


.ai-web-preview strong{
  font-size:13px;
}


.ai-web-preview p{
  margin:
    5px 0 0;

  font-size:12px;
  line-height:1.5;

  opacity:.65;
}


.ai-web-actions{
  justify-content:flex-end;

  margin-top:16px;
}


@media(max-width:600px){

  .ai-web-card{
    margin:
      12px auto 0;

    padding:18px;
  }

}



/* =========================================================
   TP360 WEB BROWSER V5
   ========================================================= */

.ai-web-mode-selector{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:18px;
  padding:4px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
}

.ai-web-mode{
  min-height:38px;
  padding:8px 12px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font-size:12px;
  opacity:.65;
}

.ai-web-mode.active{
  background:rgba(49,130,255,.16);
  box-shadow:
    inset 0 0 0 1px
    rgba(49,130,255,.32);
  opacity:1;
}

.ai-browser-steps{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:14px 0;
  padding:14px;
  border-radius:13px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
}

.ai-browser-steps > strong{
  margin-bottom:2px;
  font-size:13px;
}

.ai-browser-steps > div{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  opacity:.78;
}

.ai-browser-steps > div span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  height:22px;
  border-radius:50%;
  background:rgba(49,130,255,.13);
  border:1px solid rgba(49,130,255,.24);
  font-size:11px;
  font-weight:700;
}

.ai-web-open-source{
  margin-bottom:14px;
}

.ai-web-paste{
  width:100%;
  min-height:240px;
  resize:vertical;
  box-sizing:border-box;
  font-family:inherit;
  line-height:1.45;
}

.ai-web-paste-count{
  margin-top:5px;
  text-align:right;
  font-size:11px;
  opacity:.5;
}

.ai-web-mode-selector + .field{
  margin-top:0;
}

#aiWebBrowserPanel.hidden,
#aiWebAutoPanel.hidden{
  display:none !important;
}


@media(max-width:600px){

  .ai-web-mode-selector{
    grid-template-columns:1fr;
  }

}



/* =========================================================
   TP360 WEB IMPORT · SCROLL FIX
   ========================================================= */

.ai-web-dialog{
  overflow-y:auto !important;
  overflow-x:hidden !important;

  overscroll-behavior:
    contain;

  -webkit-overflow-scrolling:
    touch;
}


.ai-web-card{
  margin:
    24px auto !important;

  max-height:
    calc(100vh - 48px);

  overflow-y:auto;
  overflow-x:hidden;

  box-sizing:
    border-box;

  scrollbar-gutter:
    stable;
}


/*
 * Evita que el textarea enorme
 * rompa el alto del modal.
 */

.ai-web-paste{
  max-height:
    45vh;
}


/*
 * Móvil
 */

@media(max-width:600px){

  .ai-web-card{
    width:
      calc(100% - 20px);

    margin:
      10px auto !important;

    max-height:
      calc(100vh - 20px);
  }


  .ai-web-paste{
    min-height:
      180px;

    max-height:
      38vh;
  }

}



/* =========================================================
   TP360 CATALOG QUEUE V1
   ========================================================= */

.ai-catalog-dialog{
  position:fixed;
  inset:0;

  z-index:
    2147483550;

  overflow-y:auto;
  overflow-x:hidden;

  overscroll-behavior:
    contain;
}

.ai-catalog-dialog.hidden{
  display:none !important;
}

.ai-catalog-backdrop{
  position:fixed;
  inset:0;

  background:
    rgba(2,6,16,.78);

  backdrop-filter:
    blur(6px);
}

.ai-catalog-card{
  position:relative;

  width:
    min(
      820px,
      calc(100% - 32px)
    );

  margin:
    24px auto;

  padding:
    24px;

  box-sizing:
    border-box;

  border-radius:
    20px;

  background:
    var(
      --panel,
      #101723
    );

  color:
    var(
      --text,
      #eef4ff
    );

  border:
    1px solid
    rgba(255,255,255,.1);

  box-shadow:
    0 28px 90px
    rgba(0,0,0,.5);
}

.ai-catalog-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;

  margin-bottom:
    22px;
}

.ai-catalog-head h2{
  margin:
    5px 0 7px;

  font-size:
    24px;
}

.ai-catalog-head p{
  margin:0;

  font-size:
    13px;

  opacity:
    .65;
}

.ai-catalog-bookmarks,
.ai-catalog-flow{
  margin:
    0 0 16px;

  padding:
    14px;

  border-radius:
    13px;

  background:
    rgba(255,255,255,.025);

  border:
    1px solid
    rgba(255,255,255,.07);
}

.ai-catalog-bookmarks strong,
.ai-catalog-flow strong{
  display:block;

  font-size:
    13px;
}

.ai-catalog-bookmarks p,
.ai-catalog-flow p{
  margin:
    5px 0 10px;

  font-size:
    12px;

  line-height:
    1.5;

  opacity:
    .68;
}

.ai-catalog-bookmarks small{
  display:block;

  margin-top:
    9px;

  font-size:
    11px;

  opacity:
    .5;
}

.ai-catalog-bookmark-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ai-bookmarklet{
  display:inline-flex;
  align-items:center;

  text-decoration:none;

  cursor:grab;
}

.ai-catalog-inline-actions{
  justify-content:flex-start;
  margin:
    0 0 10px;
}

#aiCatalogUrls{
  width:100%;

  min-height:
    180px;

  resize:
    vertical;

  box-sizing:
    border-box;
}

.ai-catalog-progress-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;

  margin-bottom:
    10px;
}

.ai-catalog-progress-head > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.ai-catalog-progress-head strong{
  font-size:
    15px;
}

.ai-catalog-progress-head span{
  font-size:
    12px;

  opacity:
    .58;
}

.ai-catalog-progress{
  width:100%;
  height:6px;

  margin-bottom:
    20px;

  overflow:hidden;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.07);
}

#aiCatalogProgressBar{
  width:0;
  height:100%;

  border-radius:
    inherit;

  background:
    currentColor;

  opacity:
    .75;

  transition:
    width .25s ease;
}

.ai-catalog-current{
  margin-bottom:
    16px;

  padding:
    16px;

  border-radius:
    14px;

  background:
    rgba(49,130,255,.07);

  border:
    1px solid
    rgba(49,130,255,.2);
}

.ai-catalog-current-label{
  margin-bottom:
    6px;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .12em;

  opacity:
    .48;
}

.ai-catalog-current strong{
  display:block;

  margin-bottom:
    5px;

  font-size:
    14px;
}

.ai-catalog-current a{
  display:block;

  overflow-wrap:
    anywhere;

  font-size:
    11px;

  opacity:
    .65;
}

.ai-catalog-run-actions{
  display:grid;

  grid-template-columns:
    1fr 1.3fr;

  gap:
    10px;

  margin-bottom:
    12px;
}

.ai-catalog-tip{
  margin-bottom:
    16px;

  padding:
    11px 13px;

  border-radius:
    11px;

  background:
    rgba(255,255,255,.025);

  font-size:
    12px;

  line-height:
    1.5;

  opacity:
    .7;
}

.ai-catalog-manual,
.ai-catalog-list-details{
  margin-top:
    14px;

  padding:
    11px 13px;

  border-radius:
    12px;

  border:
    1px solid
    rgba(255,255,255,.07);

  background:
    rgba(255,255,255,.018);
}

.ai-catalog-manual summary,
.ai-catalog-list-details summary{
  cursor:pointer;

  font-size:
    12px;

  font-weight:
    600;
}

.ai-catalog-manual p{
  font-size:
    11px;

  opacity:
    .58;
}

#aiCatalogManualContent{
  width:100%;

  box-sizing:
    border-box;

  resize:
    vertical;
}

.ai-catalog-footer-actions{
  display:flex;
  justify-content:flex-end;

  margin-top:
    14px;
}

.ai-catalog-items{
  display:flex;
  flex-direction:column;
  gap:5px;

  max-height:
    320px;

  margin-top:
    12px;

  overflow-y:auto;
}

.ai-catalog-item{
  display:grid;

  grid-template-columns:
    26px 1fr;

  align-items:center;

  gap:
    8px;

  padding:
    8px 9px;

  border-radius:
    8px;

  background:
    rgba(255,255,255,.02);
}

.ai-catalog-item-status{
  display:flex;
  align-items:center;
  justify-content:center;

  width:22px;
  height:22px;

  border-radius:
    50%;

  border:
    1px solid
    rgba(255,255,255,.12);

  font-size:
    11px;
}

.ai-catalog-item strong{
  display:block;

  overflow:hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  font-weight:
    500;
}

.ai-catalog-item small{
  display:block;

  margin-top:
    2px;

  font-size:
    10px;

  opacity:
    .45;
}

.ai-catalog-item.status-imported{
  opacity:
    .55;
}

.ai-catalog-item.status-error{
  background:
    rgba(255,70,70,.05);
}

.ai-catalog-finished{
  padding:
    32px 20px;

  text-align:
    center;

  border-radius:
    14px;

  background:
    rgba(80,200,120,.055);

  border:
    1px solid
    rgba(80,200,120,.16);
}

.ai-catalog-finished-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:48px;
  height:48px;

  margin:
    0 auto 10px;

  border-radius:
    50%;

  background:
    rgba(80,200,120,.12);

  font-size:
    21px;
}

.ai-catalog-finished p{
  margin:
    5px 0 0;

  font-size:
    12px;

  opacity:
    .58;
}


@media(max-width:700px){

  .ai-catalog-card{
    width:
      calc(100% - 20px);

    margin:
      10px auto;

    padding:
      18px;
  }

  .ai-catalog-run-actions{
    grid-template-columns:
      1fr;
  }

  .ai-catalog-bookmark-buttons{
    flex-direction:
      column;
  }

}