:root {
    --c-bg:#f5f4f0;--c-surface:#ffffff;--c-surface2:#f0efeb;--c-border:rgba(0,0,0,.18);--c-border2:rgba(0,0,0,.32);
    --c-text:#141210;--c-text2:#1c1a17;--c-text3:#4a4640;
    --c-accent:#526855;--c-accent2:#6a826d;--c-accent3:#edf2ef;
    --c-gold:#ca9e52;--c-gold2:#dcb47a;--c-gold3:#fdf8ef;
    --c-danger:#c0362a;--c-danger-bg:#fdf1f0;
    --c-sw:248px;--c-th:56px;
    --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;
    --sh-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --sh-md:0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
    --sh-lg:0 16px 48px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.06);
    --t:.18s ease;
}
[data-theme="dark"]{
    --c-bg:#0e0e0c;--c-surface:#1a1916;--c-surface2:#222220;--c-border:rgba(255,255,255,.18);--c-border2:rgba(255,255,255,.28);
    --c-text:#f0ede8;--c-text2:#e8e0d4;--c-text3:#b8b0a4;
    --c-accent:#4caf7a;--c-accent2:#6dc994;--c-accent3:rgba(76,175,122,.12);
    --c-gold:#e8b840;--c-gold2:#f5cc60;--c-gold3:rgba(232,184,64,.1);
    --c-danger:#f07060;--c-danger-bg:rgba(240,112,96,.1);
    --sh-lg:0 20px 60px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',system-ui,sans-serif;background:var(--c-bg);color:var(--c-text);min-height:100vh;font-size:16px;line-height:1.6;transition:background var(--t),color var(--t);-webkit-font-smoothing:antialiased}

/* WELCOME SCREEN */
#screen-welcome{min-height:100vh;display:flex;flex-direction:column;background:var(--c-accent);position:relative;overflow:hidden}
.wl-geo{position:absolute;inset:0;pointer-events:none}
.wl-geo::before{content:'';position:absolute;top:-120px;right:-120px;width:600px;height:600px;border-radius:50%;border:80px solid rgba(255,255,255,.04)}
.wl-geo::after{content:'';position:absolute;bottom:-80px;left:-80px;width:380px;height:380px;border-radius:50%;border:60px solid rgba(255,255,255,.04)}
.wl-geo-circle{position:absolute;top:30%;left:55%;width:240px;height:240px;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.wl-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px}
.wl-topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:28px 48px}
.wl-logo{display:flex;align-items:center;gap:12px}
.wl-logo-icon{width:42px;height:42px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px}
.wl-logo-name{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;color:white;line-height:1.1}
.wl-logo-name small{display:block;font-family:'Outfit',sans-serif;font-size:9.5px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.5)}
.wl-theme-btn{width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-md);background:rgba(255,255,255,.08);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;transition:all var(--t)}
.wl-theme-btn:hover{background:rgba(255,255,255,.16)}
.wl-body{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 48px;position:relative;z-index:2}
.wl-center{max-width:680px;width:100%;text-align:center}
.wl-kicker{display:inline-flex;align-items:center;gap:12px;color:var(--c-gold);font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:32px;position:relative}
.wl-kicker::before, .wl-kicker::after{content:'';width:40px;height:1px;background:var(--c-gold);opacity:.6}
.wl-center h1{font-family:'Cormorant Garamond',serif;font-size:84px;font-weight:600;color:white;line-height:.85;letter-spacing:-2px;margin-bottom:12px}
.wl-center h1 span.outline{display:block;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4);font-family:'Outfit',sans-serif;font-weight:300;letter-spacing:2px}
.wl-center h1 em{font-style:italic;color:var(--c-gold);display:block;margin-top:10px}
.wl-center .wl-sub-brand{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;color:rgba(255,255,255,.4);margin-bottom:48px}
.wl-center p{font-size:15px;color:rgba(255,255,255,.6);line-height:1.7;max-width:540px;margin:0 auto 44px}
.wl-cta{display:inline-flex;align-items:center;gap:12px;background:white;color:var(--c-accent);padding:14px 32px;border-radius:var(--r-xl);font-size:15px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all var(--t);box-shadow:0 8px 32px rgba(0,0,0,.2)}
.wl-cta:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.28)}
.wl-cta:active{transform:translateY(0)}
.wl-cta-arrow{width:28px;height:28px;background:var(--c-accent3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;transition:transform var(--t)}
.wl-cta:hover .wl-cta-arrow{transform:translateX(3px)}
.wl-footer{position:relative;z-index:2;padding:24px 48px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08)}
.wl-footer-txt{font-size:12px;color:rgba(255,255,255,.35)}
.wl-steps{display:flex;align-items:center;gap:8px}
.wl-step-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);transition:all var(--t)}
.wl-step-dot.on{background:white;width:22px;border-radius:4px}

/* LOGIN */
#screen-login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.lp-left{background:var(--c-accent);position:relative;display:flex;flex-direction:column;justify-content:flex-start;padding:48px 56px;overflow:hidden}
.lp-badge{position:static;display:flex;align-items:center;gap:12px;z-index:2;margin-bottom:64px}
.lp-badge-icon{width:48px;height:48px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:24px}
.lp-badge-txt{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.6);line-height:1.2}
.lp-content h1{font-family:'Cormorant Garamond',serif;font-size:64px;font-weight:600;line-height:0.9;color:white;margin-bottom:8px;letter-spacing:-1px}
.lp-content h1 em{font-style:italic;color:rgba(255,255,255,.4);display:block;font-size:42px;margin-top:4px}
.lp-content p{font-size:15px;color:rgba(255,255,255,.5);line-height:1.6;max-width:300px;margin-bottom:48px}
.lp-steps-v{display:flex;flex-direction:column;gap:24px;margin-top:32px}
.lp-step{display:flex;align-items:center;gap:16px;opacity:0.3;transition:all var(--t)}
.lp-step.on{opacity:1}
.lp-step-num{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white}
.lp-step.on .lp-step-num{background:var(--c-accent2);border-color:transparent}
.lp-step-txt{font-size:14px;font-weight:600;color:white}

.lp-right{background:var(--c-surface);display:flex;align-items:center;justify-content:center;padding:48px 64px;position:relative;transition:background var(--t)}
.ln-toggle{position:absolute;top:24px;right:24px;width:40px;height:40px;border:1px solid var(--c-border2);border-radius:var(--r-md);background:var(--c-surface2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;transition:all var(--t);color:var(--c-text2)}
.ln-toggle:hover{background:var(--c-accent3);color:var(--c-accent)}
.lf-box{width:100%;max-width:360px}
.lf-eyebrow{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--c-accent);margin-bottom:8px}
.lf-title{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:600;color:var(--c-text);margin-bottom:6px;letter-spacing:-.5px}
.lf-sub{font-size:13px;color:var(--c-text3);margin-bottom:36px}
.lf-label{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--c-text2);margin-bottom:10px;display:block}
.lf-input{width:100%;height:38px;border:1px solid var(--c-border2);border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-text);font-family:inherit;font-size:14px;padding:0 12px;outline:none;transition:border-color var(--t),box-shadow var(--t)}
.lf-input:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent3)}
.lf-input::placeholder{color:var(--c-text3)}
.btn-enter{width:100%;height:46px;background:var(--c-accent);color:#fff;border:none;border-radius:var(--r-md);font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--t)}
.btn-enter:hover{filter:brightness(1.08)}
.btn-enter:active{transform:scale(.99)}
.lf-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--c-text3);font-size:12px}
.lf-divider::before,.lf-divider::after{content:'';flex:1;height:1px;background:var(--c-border2)}
.btn-microsoft{width:100%;height:46px;background:var(--c-surface);color:var(--c-text);border:1.5px solid var(--c-border2);border-radius:var(--r-md);font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all var(--t)}
.btn-microsoft:hover{background:var(--c-surface2);border-color:#0078d4;color:#0078d4}
.btn-microsoft:active{transform:scale(.99)}
.lf-back{background:none;border:none;color:var(--c-text3);font-family:inherit;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;padding:0;margin-bottom:24px;transition:color var(--t)}
.lf-back:hover{color:var(--c-accent)}
.lf-note{margin-top:16px;font-size:11px;color:var(--c-text3);text-align:center}

/* APP SHELL */
.app-shell{display:grid;grid-template-rows:var(--c-th) 1fr;grid-template-columns:var(--c-sw) 1fr;min-height:100vh}

/* TOPBAR */
.topbar{grid-column:1/-1;height:var(--c-th);background:var(--c-surface);border-bottom:1px solid var(--c-border);display:flex;align-items:center;position:sticky;top:0;z-index:200;transition:background var(--t)}
.tb-brand{width:var(--c-sw);height:100%;display:flex;align-items:center;gap:10px;padding:0 20px;border-right:1px solid var(--c-border);flex-shrink:0}
.tb-brand-icon{width:32px;height:32px;background:var(--c-accent);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.tb-brand-name{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600;color:var(--c-text);line-height:1.1}
.tb-brand-name small{display:block;font-family:'Outfit',sans-serif;font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--c-text3)}
.tb-center{flex:1;display:flex;align-items:center;padding:0 24px}
.tb-search{display:flex;align-items:center;gap:8px;background:var(--c-surface2);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:0 14px;height:34px;max-width:340px;width:100%;transition:all var(--t)}
.tb-search:focus-within{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent3)}
.tb-search input{border:none;background:none;font-family:inherit;font-size:13px;color:var(--c-text);outline:none;flex:1}
.tb-search input::placeholder{color:var(--c-text3)}
.tb-right{display:flex;align-items:center;gap:6px;padding:0 16px}
.tb-icon-btn{width:34px;height:34px;border:1px solid var(--c-border);border-radius:var(--r-sm);background:transparent;color:var(--c-text2);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all var(--t)}
.tb-icon-btn:hover{background:var(--c-surface2);color:var(--c-accent)}
.tb-user-btn{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 5px;border:1px solid var(--c-border);border-radius:var(--r-xl);background:transparent;cursor:pointer;transition:all var(--t);position:relative}
.tb-user-btn:hover{background:var(--c-surface2);border-color:var(--c-border2)}
.tb-avatar{width:26px;height:26px;border-radius:50%;background:var(--c-accent);color:white;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.tb-user-name{font-size:12px;font-weight:500;color:var(--c-text);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-caret{font-size:9px;color:var(--c-text3)}
.user-dd{display:none;position:absolute;right:0;top:calc(100% + 8px);width:230px;background:var(--c-surface);border:1px solid var(--c-border2);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;z-index:300;animation:ddIn .16s ease}
.user-dd.open{display:block}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.dd-head{padding:14px 16px;background:var(--c-accent3);border-bottom:1px solid var(--c-border)}
.dd-name{font-size:13px;font-weight:600;color:var(--c-accent)}
.dd-role{font-size:13px;color:var(--c-text2);margin-top:2px}
.dd-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:15px;color:var(--c-text2);cursor:pointer;transition:all var(--t);border-bottom:1px solid var(--c-border)}
.dd-item:last-child{border-bottom:none}
.dd-item:hover{background:var(--c-surface2);color:var(--c-text)}
.dd-item.red{color:var(--c-danger)}
.dd-item.red:hover{background:var(--c-danger-bg)}

/* SIDEBAR */
.sidebar{background:var(--c-surface);border-right:1px solid var(--c-border);padding:20px 12px;position:sticky;top:var(--c-th);height:calc(100vh - var(--c-th));overflow-y:auto;transition:background var(--t)}
.sb-section{margin-bottom:28px}
.sb-label{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--c-text2);padding:0 10px;margin-bottom:8px}
.sb-item{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:var(--r-md);cursor:pointer;font-size:15px;font-weight:400;color:var(--c-text2);transition:all var(--t);position:relative;user-select:none}
.sb-item:hover{background:var(--c-surface2);color:var(--c-text)}
.sb-item.on{background:var(--c-accent3);color:var(--c-accent);font-weight:600}
.sb-item.on::before{content:'';position:absolute;left:0;top:25%;bottom:25%;width:2.5px;background:var(--c-accent);border-radius:0 2px 2px 0}
.sb-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.sb-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;background:var(--c-gold3);color:var(--c-gold);border:1px solid rgba(176,125,26,.2);font-size:9.5px;font-weight:700;border-radius:20px;display:flex;align-items:center;justify-content:center}
.sb-badge-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--c-accent)}
.sb-sep{height:1px;background:var(--c-border);margin:4px 10px 20px}

/* MAIN */
.main{background:var(--c-bg);overflow-y:auto;padding:32px 36px 18px;transition:background var(--t);min-height:0}
.view{display:none;animation:fadeSlide .22s ease}
.view.on{display:block}
@keyframes fadeSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.pg-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px}
.pg-crumb{font-size:15px;color:var(--c-text2);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.pg-title{font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:600;color:var(--c-text);letter-spacing:-.5px;line-height:1.1}
.pg-sub{font-size:17px;color:var(--c-text2);margin-top:4px}
.card{background:var(--c-surface);border:1px solid var(--c-border2);border-radius:var(--r-xl);box-shadow:var(--sh-sm);overflow:hidden;transition:background var(--t),border-color var(--t)}
.card-top{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--c-border)}
.card-tag{display:flex;align-items:center;gap:8px}
.card-tag-dot{width:8px;height:8px;background:var(--c-accent);border-radius:50%;box-shadow:0 0 0 3px var(--c-accent3)}
.card-tag-label{font-size:16px;font-weight:600;color:var(--c-text)}
.two-pane{display:grid;grid-template-columns:260px 1fr}
.pane-left{padding:24px;border-right:1px solid var(--c-border)}
.pane-right{padding:24px;background:var(--c-bg);transition:background var(--t)}
.fl{display:block;font-size:15px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--c-text);margin-bottom:8px}
.req{color:var(--c-gold)}
.fg{margin-bottom:18px}
.fi,.fs,.fta{width:100%;border:1px solid var(--c-border2);border-radius:10px;background:var(--c-surface);color:var(--c-text);font-family:inherit;font-size:17px;padding:10px 14px;outline:none;transition:all var(--t)}
.fs{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238a8480' d='M5 6L0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.fta{min-height:140px;resize:vertical;line-height:1.6}
.fi:focus,.fs:focus,.fta:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent3)}
.fi.is-invalid,.fs.is-invalid,.fta.is-invalid{border-color:var(--c-danger)!important;box-shadow:0 0 0 3px rgba(192,54,42,.1)!important}
.theme-chip.is-invalid{border-color:var(--c-danger)!important;background:var(--c-danger-bg)!important}
.is-warning{border-color:#f59e0b!important;}
.invalid-feedback{color:var(--c-danger);font-size:11px;margin-top:4px;display:block;font-weight:500;animation:fadeSlide .2s ease}
.warning-feedback{color:#f59e0b;font-size:11px;margin-top:4px;display:block;font-weight:500;animation:fadeSlide .2s ease}
.fi::placeholder,.fta::placeholder{color:var(--c-text3)}
.hint-box{background:var(--c-accent3);border-left:3px solid var(--c-accent);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 14px;font-size:12px;color:var(--c-accent2);line-height:1.55}
.hint-box strong{display:block;margin-bottom:3px;font-size:11px;letter-spacing:.5px;text-transform:uppercase}
.art-prev{border:1px solid var(--c-border2);border-radius:var(--r-md);overflow:hidden}
.art-prev-head{background:var(--c-surface2);padding:8px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--c-border)}
.art-prev-chip{background:var(--c-accent);color:white;font-size:11px;font-weight:700;letter-spacing:1px;padding:2px 10px;border-radius:20px;text-transform:uppercase}
.art-prev-lbl{font-size:13px;color:var(--c-text2)}
.art-prev-body{padding:18px;font-size:15px;color:var(--c-text);line-height:1.75;background:var(--c-surface);max-height:240px;overflow:auto}
.upload-zone{border:2px dashed var(--c-border2);border-radius:14px;padding:28px 20px;text-align:center;background:var(--c-surface2);cursor:pointer;transition:all var(--t)}
.upload-zone:hover{border-color:var(--c-accent);background:var(--c-accent3)}
.btn:disabled, .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #9ca3af !important;
  border-color: #9ca3af !important;
  color: #ffffff !important;
  pointer-events: none;
}
.btn-ghost:disabled {
  background-color: transparent !important;
  color: #9ca3af !important;
  border-color: #e5e7eb !important;
}
/* Estilos para campos deshabilitados */
input:disabled, select:disabled, textarea:disabled {
    background-color: var(--c-surface2) !important;
    color: var(--c-text3) !important;
    border-color: var(--c-border) !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.view.disabled-view input,
.view.disabled-view select,
.view.disabled-view textarea {
  background-color: var(--c-surface2) !important;
  color: var(--c-text3) !important;
  border-color: var(--c-border) !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
.view.disabled-view .upload-zone {
  background-color: #f9fafb !important;
  border-style: solid !important;
  border-color: #e5e7eb !important;
  opacity: 0.7;
  cursor: not-allowed !important;
  pointer-events: none;
}
.view.disabled-view .theme-chip {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
}
.upload-zone.drag-over {
  border-color: var(--c-accent);
  background: rgba(180, 150, 80, 0.05);
  transform: scale(1.01);
}
.upload-zone-icon{font-size:32px;margin-bottom:8px;color:var(--c-text2)}
.upload-zone p{font-size:14.5px;color:var(--c-text2)}
.upload-zone strong{color:var(--c-accent);cursor:pointer}

/* MODAL PERSONALIZADO */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease;
}
.modal-content {
    background: var(--c-surface, #fff);
    width: 90%;
    max-width: 400px;
    border-radius: var(--r-xl, 22px);
    padding: 32px;
    text-align: center;
    box-shadow: var(--sh-lg, 0 16px 48px rgba(0,0,0,0.12));
    animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-icon { font-size: 48px; margin-bottom: 16px; display: block; }
.modal-content h3 { font-family: 'Outfit', sans-serif; font-size: 24px; margin-bottom: 8px; color: var(--c-text, #141210); }
.modal-content p { font-size: 15px; color: var(--c-text2, #4a4640); line-height: 1.5; margin-bottom: 24px; }
.modal-footer { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* DOC MODAL PREVIEW */
.doc-modal-content {
    max-width: 900px;
    width: 95%;
    height: 90vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.doc-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--c-surface);
}
.doc-modal-header h3 {
    margin: 0;
    font-size: 19px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
}
.doc-modal-close {
    background: var(--c-danger-bg);
    color: var(--c-danger);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all var(--t);
}
.doc-modal-close:hover {
    transform: rotate(90deg);
    filter: brightness(0.9);
}
.doc-modal-body {
    flex: 1;
    background: var(--c-bg);
    position: relative;
    overflow: hidden;
}
.doc-preview-container {
    width: 100%;
    height: 100%;
}
.doc-preview-container iframe, 
.doc-preview-container embed {
    width: 100%;
    height: 100%;
    border: none;
}
.doc-preview-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.doc-unsupported {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    padding: 40px;
    text-align: center;
}

.btn{display:inline-flex;align-items:center;gap:6px;padding:0 22px;height:42px;border-radius:var(--r-md);border:1px solid transparent;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:all var(--t);white-space:nowrap}
.btn-primary{background:var(--c-accent);color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:var(--c-border2);color:var(--c-text2)}
.btn-ghost:hover{background:var(--c-surface2);color:var(--c-text)}
.btn-danger{background:var(--c-danger-bg);color:var(--c-danger);border-color:rgba(192,54,42,.15)}
.btn:active{transform:scale(.98)}
.save-bar{padding:14px 24px;background:var(--c-surface);border-top:1px solid var(--c-border);display:flex;align-items:center;justify-content:space-between;border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl)}
.req-note{font-size:14px;color:var(--c-danger);display:flex;align-items:center;gap:5px}
.upload-section{padding:20px 24px;border-top:1px solid var(--c-border)}
.upload-section-title{font-size:13.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--c-text);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.mis-propuesta{font-size:16px;color:var(--c-text2);line-height:1.5;max-height:140px;overflow:auto;padding-right:6px}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:2px}
.theme-chip{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--c-border2);border-radius:var(--r-md);background:var(--c-surface);cursor:pointer;font-size:14px;font-weight:500;color:var(--c-text2);transition:all var(--t)}
.theme-chip:hover{border-color:var(--c-accent);color:var(--c-accent);background:var(--c-accent3)}
.theme-chip.on{border-color:var(--c-accent);background:var(--c-accent3);color:var(--c-accent);font-weight:600}
.theme-chip-icon{font-size:17px}
.report-band{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--c-border)}
.report-id{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--c-text);display:flex;align-items:center;gap:10px}
.count-pill{background:var(--c-gold3);color:var(--c-gold);border:1px solid rgba(176,125,26,.2);font-size:12.5px;font-weight:700;font-family:'Outfit',sans-serif;padding:3px 12px;border-radius:20px}
.search-row{display:flex;align-items:center;gap:8px;padding:12px 24px;border-bottom:1px solid var(--c-border);background:var(--c-surface2)}
.search-bar-inner{flex:1;max-width:300px;display:flex;align-items:center;gap:7px;background:var(--c-surface);border:1px solid var(--c-border2);border-radius:var(--r-xl);padding:0 14px;height:34px;transition:all var(--t)}
.search-bar-inner:focus-within{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent3)}
.search-bar-inner input{border:none;background:none;font-family:inherit;font-size:14px;color:var(--c-text);outline:none;flex:1}
.search-bar-inner input::placeholder{color:var(--c-text3)}
.empty-state{padding:72px 24px;text-align:center}
.empty-state-icon{font-size:44px;opacity:.25;margin-bottom:14px}
.empty-state-title{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--c-text2);margin-bottom:6px}
.empty-state-sub{font-size:14.5px;color:var(--c-text2);max-width:260px;margin:0 auto 20px}
.pdf-chrome{background:var(--c-surface2);border-bottom:1px solid var(--c-border);padding:8px 16px;display:flex;align-items:center;gap:6px}
.pdf-btn{height:32px;padding:0 12px;border:1px solid var(--c-border);border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-text2);font-family:inherit;font-size:14px;cursor:pointer;transition:all var(--t)}
.pdf-btn:hover{background:var(--c-surface2);color:var(--c-accent)}
.pdf-page-ctrl{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--c-text2);padding:0 6px}
.pdf-pg-input{width:40px;height:32px;text-align:center;border:1px solid var(--c-border2);border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-text);font-family:inherit;font-size:14px;outline:none}
.pdf-spacer{flex:1}
.pdf-body{background:var(--c-surface2);padding:28px 24px;min-height:420px}
.pdf-page-doc{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);max-width:620px;margin:0 auto;padding:48px 52px;box-shadow:var(--sh-lg)}
.pdf-crest{text-align:center;margin-bottom:24px;font-size:42px}
.pdf-inst{font-size:14px;font-weight:600;color:var(--c-accent);text-align:center;margin-bottom:20px}
.pdf-divider-gold{height:2px;background:linear-gradient(90deg,transparent,var(--c-gold2),transparent);margin-bottom:24px}
.pdf-doc-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;text-align:center;color:var(--c-text);margin-bottom:24px;letter-spacing:.5px}
.pdf-sec{margin-bottom:20px}
.pdf-sec h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--c-accent);margin-bottom:7px}
.pdf-sec p,.pdf-sec li{font-size:14.5px;line-height:1.7;color:var(--c-text2)}
.pdf-sec ul{padding-left:16px}
.pdf-foot{margin-top:36px;border-top:1px solid var(--c-border);padding-top:14px;text-align:center;font-size:12px;color:var(--c-text2)}
.toast{position:fixed;bottom:24px;right:24px;background:var(--c-surface);border:1px solid var(--c-border2);color:var(--c-text);padding:12px 18px;border-radius:var(--r-lg);box-shadow:var(--sh-lg);font-size:14.5px;font-weight:500;display:flex;align-items:center;gap:10px;transform:translateY(80px) scale(.96);opacity:0;transition:all .28s cubic-bezier(.34,1.56,.64,1);z-index:999;max-width:300px}
.toast.show{transform:translateY(0) scale(1);opacity:1}
.toast-dot{width:8px;height:8px;border-radius:50%;background:var(--c-accent);flex-shrink:0}
.hidden{display:none!important}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-border2);border-radius:3px}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .wl-center h1 { font-size: 72px; }
}

@media (max-width: 1024px) {
    .app-shell { 
        grid-template-columns: 1fr !important; 
    }
    .sidebar { 
        position: fixed !important; 
        top: var(--c-th); 
        left: -100%; 
        width: 280px; 
        height: calc(100vh - var(--c-th));
        z-index: 1000; 
        transition: left 0.3s ease; 
        box-shadow: var(--sh-lg);
        background: var(--c-surface);
    }
    .sidebar.open { 
        left: 0 !important; 
    }
    .tb-brand { 
        width: auto !important;
        border-right: none !important; 
        padding-right: 16px !important;
    }
    .main { 
        padding: 24px 20px 18px; 
        grid-column: 1 / -1;
    }
    .two-pane { 
        grid-template-columns: 1fr !important; 
    }
    .pane-left { 
        border-right: none !important; 
        border-bottom: 1px solid var(--c-border); 
    }
    .formal-actions {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    #screen-login { grid-template-columns: 1fr; }
    .lp-left { display: none !important; }
    .lp-right { padding: 48px 24px !important; }
    .lf-box { max-width: 100% !important; }
    .lf-title { font-size: 32px !important; }
    
    .wl-topbar { padding: 20px 24px; }
    .wl-center h1 { font-size: 54px; }
    .wl-center h1 span.outline { font-size: 60px; }
    .wl-center h1 em { font-size: 54px; }
    .wl-center .wl-sub-brand { font-size: 20px; }
    .wl-cta { padding: 12px 24px; font-size: 14px; }
    
    .pg-head { flex-direction: column; gap: 16px; align-items: stretch; }
    .pg-actions { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; }
    .pg-actions .btn { flex: 1; justify-content: center; }
    
    .theme-grid { grid-template-columns: 1fr !important; }
    .report-band { flex-direction: column; align-items: flex-start; gap: 12px; }
    .search-row { flex-direction: column; align-items: stretch; }
    .search-bar-inner { max-width: none; }

    /* Ajuste para el formulario de perfil con 3 columnas */
     .perfil-name-grid {
         grid-template-columns: 1fr !important;
     }

     .perfil-main-grid {
         grid-template-columns: 1fr !important;
     }

     .perfil-card-padding {
         padding: 24px 16px !important;
     }
     
     .modal-content {
         width: 95% !important;
         padding: 32px 24px !important;
     }
}

@media (max-width: 480px) {
    .tb-user-name, .tb-brand-name, .wl-logo-name { display: none !important; }
    .wl-center h1 { font-size: 42px; }
    .wl-center h1 span.outline { font-size: 48px; }
    .wl-center h1 em { font-size: 42px; }
    .wl-center p { font-size: 14px; }
    .topbar { padding: 0 10px; }
    .tb-center { padding: 0 10px; }
    .system-countdown { padding: 4px 10px; gap: 8px; }
    .countdown-label { display: none; }
    .tb-right { padding: 0 5px; margin-left: auto; }
    
    .modal-icon { font-size: 48px !important; }
    .modal-content h3 { font-size: 24px !important; }
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    background: var(--c-surface2);
    border: 1px solid var(--c-border);
    cursor: pointer;
    align-items: center; justify-content: center;
    font-size: 18px; color: var(--c-text2);
    margin-right: 12px;
}

@media (max-width: 1024px) {
    .menu-toggle { display: flex; }
}

/* Sidebar Overlay */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }

/* AUTH/VALIDATION CARDS */
.auth-container {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}
.auth-card {
    width: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 32px 24px;
    box-shadow: var(--sh-lg);
}
@media (max-width: 480px) {
    .auth-card { padding: 24px 16px; }
    .auth-card h2 { font-size: 20px; }
}