/* ============================================================================
 * SEEKSEI · PORTAL DE CLIENTES (estilos · única fuente de verdad visual)
 * ----------------------------------------------------------------------------
 * Hogar de los estilos de la experiencia /portal y del RESULTADO que emite
 * buscarOrdenPortal() (clases .portal-result-premium, .portal-info-grid, etc.,
 * que antes no tenían CSS). No duplica estilos del ERP.
 * ==========================================================================*/

:root{
    --pc-deep:#071221;
    --pc-blue:#2F6BFF;
    --pc-blue-light:#63A4FF;
    --pc-white:#fff;
    --pc-soft:#cfd8e3;
    --pc-muted:#9fb0c9;
    --pc-border:rgba(255,255,255,.10);
    --pc-border-soft:rgba(255,255,255,.07);
    --pc-glass:rgba(255,255,255,.05);
    --pc-r:18px;
    --pc-ease:.3s cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}

body.portal-page{
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    color:var(--pc-white);
    background:radial-gradient(1100px 700px at 50% -10%,#16325f 0%,#0B1F3A 45%,#0a1c34 100%);
    min-height:100svh;
    -webkit-font-smoothing:antialiased;
}

:focus-visible{outline:3px solid var(--pc-blue-light);outline-offset:3px;border-radius:6px;}

/* ── Cabecera ── */
.pc-header{
    position:sticky;top:0;z-index:50;
    background:rgba(9,23,44,.78);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--pc-border-soft);
}
.pc-header .pc-bar{
    max-width:1080px;margin:0 auto;padding:14px 24px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.pc-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;}
.pc-brand img{width:38px;height:38px;border-radius:9px;}
.pc-brand b{font-size:1.1rem;letter-spacing:.14em;font-weight:800;}
.pc-tag{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pc-blue-light);}

/* ── Layout ── */
.pc-main{max-width:680px;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) 24px 5rem;}
.pc-intro{text-align:center;margin-bottom:32px;}
.pc-eyebrow{display:inline-block;color:var(--pc-blue-light);font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;}
.pc-intro h1{font-size:clamp(1.8rem,1.3rem+2vw,2.6rem);font-weight:800;letter-spacing:-.02em;margin-bottom:12px;}
.pc-intro h1 span{color:var(--pc-blue-light);}
.pc-intro p{color:var(--pc-muted);max-width:460px;margin:0 auto;line-height:1.6;}

/* ── Tarjeta de búsqueda ── */
.pc-search{
    padding:clamp(1.6rem,3vw,2.2rem);
    border-radius:var(--pc-r);
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022));
    border:1px solid var(--pc-border-soft);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 44px rgba(0,0,0,.24);
}
.pc-field{margin-bottom:16px;}
.pc-field label{display:block;font-size:.85rem;font-weight:600;color:var(--pc-soft);margin-bottom:8px;}
.pc-field input{
    width:100%;height:50px;padding:0 16px;
    border-radius:14px;border:1px solid var(--pc-border);
    background:rgba(11,31,58,.55);color:#fff;font:inherit;font-size:1rem;outline:none;
    transition:border-color var(--pc-ease), box-shadow var(--pc-ease);
}
.pc-field input::placeholder{color:var(--pc-muted);}
.pc-field input:focus{border-color:var(--pc-blue);box-shadow:0 0 0 3px rgba(47,107,255,.2);}
.pc-btn{
    width:100%;height:52px;margin-top:6px;
    border:none;border-radius:14px;cursor:pointer;
    background:linear-gradient(135deg,var(--pc-blue),var(--pc-blue-light));
    color:#fff;font:inherit;font-size:1rem;font-weight:700;
    box-shadow:0 12px 30px rgba(47,107,255,.3);
    transition:transform var(--pc-ease), box-shadow var(--pc-ease);
}
.pc-btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(47,107,255,.42);}
.pc-help{margin-top:18px;text-align:center;color:#7f8da5;font-size:.85rem;}
.pc-help a{color:var(--pc-muted);text-decoration:none;}
.pc-help a:hover{color:#fff;}

/* ============================================================================
 * RESULTADO emitido por buscarOrdenPortal()
 * ==========================================================================*/
#portal-resultado{margin-top:22px;}

.portal-result-premium{
    padding:clamp(1.6rem,3vw,2rem);
    border-radius:var(--pc-r);
    background:var(--pc-glass);
    border:1px solid var(--pc-border-soft);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 16px 40px rgba(0,0,0,.22);
    animation:pcFade .45s var(--pc-ease) both;
}
@keyframes pcFade{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.portal-result-header{
    display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
    padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--pc-border-soft);
}
.portal-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--pc-muted);margin-bottom:4px;}
.portal-result-header h3{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;}
.portal-status{
    flex-shrink:0;
    display:inline-flex;align-items:center;
    padding:8px 16px;border-radius:999px;
    background:rgba(47,107,255,.14);border:1px solid rgba(47,107,255,.34);
    color:#dfe8ff;font-weight:600;font-size:.85rem;
}

/* Progreso */
.portal-progress{margin-bottom:22px;}
.portal-progress-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:.9rem;color:var(--pc-soft);}
.portal-progress-top strong{color:#fff;}
.portal-progress-track{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid var(--pc-border-soft);}
.portal-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--pc-blue),var(--pc-blue-light));transition:width .6s var(--pc-ease);}

/* Datos */
.portal-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--pc-border-soft);border-radius:14px;overflow:hidden;}
.portal-info-grid > div{background:var(--pc-deep);padding:14px 16px;display:flex;flex-direction:column;gap:4px;}
.portal-info-grid span{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pc-muted);}
.portal-info-grid strong{font-size:.98rem;font-weight:600;color:#fff;word-break:break-word;}

/* Error */
.portal-error{
    padding:16px 18px;border-radius:14px;text-align:center;
    background:rgba(255,86,86,.1);border:1px solid rgba(255,86,86,.32);
    color:#ffd7d7;font-weight:600;
    animation:pcFade .35s var(--pc-ease) both;
}

@media (max-width:520px){
    .portal-info-grid{grid-template-columns:1fr;}
    .portal-result-header{flex-direction:column;}
}

/* ============================================================================
 * EXPEDIENTE DIGITAL DEL CLIENTE (premium) · /portal
 * ==========================================================================*/
.pc-search.is-compact{max-width:980px;background:transparent;border:none;box-shadow:none;padding:0;backdrop-filter:none;}
.pc-search.is-compact .pc-field,
.pc-search.is-compact .pc-btn,
.pc-search.is-compact .pc-help{display:none;}

.pc-main:has(.exp){max-width:980px;}

.exp-loading{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--pc-muted);padding:48px 0;font-weight:500;}
.exp-spinner{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:var(--pc-blue-light);animation:pcSpin .7s linear infinite;}
@keyframes pcSpin{to{transform:rotate(360deg);}}

.exp{display:grid;gap:20px;animation:pcFade .5s var(--pc-ease) both;}

/* ── Cabecera ── */
.exp-header{
    position:relative;overflow:hidden;
    padding:clamp(1.6rem,3vw,2.2rem);
    border-radius:var(--pc-r);
    background:
        radial-gradient(520px 240px at 100% 0%,rgba(47,107,255,.16),transparent 60%),
        linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022));
    border:1px solid var(--pc-border-soft);
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 16px 40px rgba(0,0,0,.22);
}
.exp-eyebrow{display:block;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pc-blue-light);margin-bottom:8px;}
.exp-header h1{font-size:clamp(1.8rem,1.3rem+2vw,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1;}
.exp-status-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.exp-status{
    display:inline-flex;align-items:center;padding:7px 15px;border-radius:999px;
    background:rgba(47,107,255,.14);border:1px solid rgba(47,107,255,.34);
    color:#dfe8ff;font-weight:600;font-size:.85rem;
}
.exp-badge{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;font-weight:600;font-size:.82rem;border:1px solid transparent;}
.exp-badge-ok{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.32);color:#7ff0c6;}
.exp-badge-warn{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.32);color:#ffd596;}
.exp-badge-info{background:rgba(99,164,255,.12);border-color:rgba(99,164,255,.28);color:#cfe0ff;}

.exp-progress{margin-top:24px;}
.exp-progress-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:.9rem;color:var(--pc-soft);}
.exp-progress-top strong{color:#fff;font-size:1rem;}
.exp-progress-track{height:9px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid var(--pc-border-soft);}
.exp-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--pc-blue),var(--pc-blue-light));transition:width .8s var(--pc-ease);}

.exp-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px;}
.exp-meta > div{display:flex;flex-direction:column;gap:4px;}
.exp-meta span{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pc-muted);}
.exp-meta strong{font-size:.95rem;font-weight:600;color:#fff;}

/* ── Tarjeta de sección ── */
.exp-card{
    padding:clamp(1.4rem,2.6vw,1.9rem);
    border-radius:var(--pc-r);
    background:var(--pc-glass);
    border:1px solid var(--pc-border-soft);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px rgba(0,0,0,.18);
}
.exp-card-title{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin-bottom:18px;}
.exp-empty{color:var(--pc-muted);font-size:.92rem;}
.exp-subtle{color:var(--pc-muted);font-size:.82rem;}

.exp-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--pc-border-soft);border-radius:14px;overflow:hidden;}
.exp-info-grid > div{background:var(--pc-deep);padding:14px 16px;display:flex;flex-direction:column;gap:4px;}
.exp-info-grid span{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pc-muted);}
.exp-info-grid strong{font-size:.96rem;font-weight:600;color:#fff;word-break:break-word;}
.exp-col-2{grid-column:1 / -1;}

/* ── Instrumento ── */
.exp-instrument{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start;}
.exp-instrument-photo{
    aspect-ratio:1;border-radius:16px;overflow:hidden;cursor:zoom-in;
    border:1px solid var(--pc-border-soft);background:#0f1727;
    display:flex;align-items:center;justify-content:center;
}
.exp-instrument-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--pc-ease);}
.exp-instrument-photo:hover img{transform:scale(1.05);}
.exp-instrument-photo.is-empty{cursor:default;color:var(--pc-muted);font-size:.85rem;}

/* ── Timeline ── */
.exp-timeline{list-style:none;position:relative;padding-left:26px;}
.exp-timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--pc-border);}
.exp-tl-item{position:relative;padding-bottom:20px;}
.exp-tl-item:last-child{padding-bottom:0;}
.exp-tl-dot{position:absolute;left:-26px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--pc-deep);border:2px solid var(--pc-border);}
.exp-tl-item.done .exp-tl-dot{background:var(--pc-blue);border-color:var(--pc-blue);}
.exp-tl-item.current .exp-tl-dot{background:var(--pc-blue-light);border-color:var(--pc-blue-light);box-shadow:0 0 0 4px rgba(47,107,255,.2);}
.exp-tl-title{font-weight:600;font-size:.98rem;}
.exp-tl-body time{display:block;color:var(--pc-muted);font-size:.8rem;margin-top:2px;}
.exp-tl-body p{color:var(--pc-soft);font-size:.9rem;margin-top:6px;line-height:1.5;}
.exp-tl-item:not(.done):not(.current) .exp-tl-title{color:var(--pc-muted);}

/* ── Galería ── */
.exp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
.exp-photo{padding:0;border:1px solid var(--pc-border-soft);border-radius:14px;overflow:hidden;aspect-ratio:1;background:#0f1727;cursor:zoom-in;}
.exp-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--pc-ease);}
.exp-photo:hover img{transform:scale(1.08);}

/* ── Cotización ── */
.exp-quote{display:grid;gap:16px;}
.exp-quote-main{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;}
.exp-quote-total{display:flex;flex-direction:column;gap:2px;}
.exp-quote-total span{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--pc-muted);}
.exp-quote-total strong{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;}
.exp-quote-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.exp-btn-ghost{
    display:inline-flex;align-items:center;gap:9px;width:fit-content;
    padding:11px 18px;border-radius:13px;cursor:pointer;
    background:var(--pc-glass);border:1px solid var(--pc-border);color:#fff;
    font:inherit;font-weight:600;font-size:.92rem;
    transition:border-color var(--pc-ease), background var(--pc-ease);
}
.exp-btn-ghost:hover{border-color:var(--pc-blue);background:rgba(47,107,255,.1);}
.exp-btn-ghost svg{width:18px;height:18px;}
.exp-sign{display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px solid var(--pc-border-soft);}
.exp-sign-img{max-width:220px;background:#fff;border-radius:10px;padding:8px;}
.exp-versions ul{list-style:none;display:grid;gap:8px;margin-top:8px;}
.exp-versions li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--pc-soft);background:rgba(255,255,255,.035);border:1px solid var(--pc-border-soft);border-radius:10px;padding:10px 12px;}
.exp-versions time{margin-left:auto;color:var(--pc-muted);font-size:.8rem;}

/* ── Historial ── */
.exp-history{list-style:none;display:grid;gap:12px;}
.exp-history li{background:rgba(255,255,255,.035);border:1px solid var(--pc-border-soft);border-radius:14px;padding:14px 16px;}
.exp-history-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;}
.exp-history-top strong{font-size:.96rem;}
.exp-history-top time{color:var(--pc-muted);font-size:.82rem;}
.exp-history p{color:var(--pc-soft);font-size:.9rem;line-height:1.5;margin-top:6px;}

/* ── Documentos ── */
.exp-docs{list-style:none;display:grid;gap:10px;}
.exp-docs a{
    display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:13px;text-decoration:none;
    background:rgba(255,255,255,.035);border:1px solid var(--pc-border-soft);color:var(--pc-soft);
    transition:border-color var(--pc-ease), background var(--pc-ease), color var(--pc-ease);
}
.exp-docs a:hover{border-color:var(--pc-blue);background:var(--pc-glass);color:#fff;}
.exp-docs svg{width:18px;height:18px;color:var(--pc-blue-light);flex-shrink:0;}
.exp-docs em{margin-left:auto;font-style:normal;font-size:.72rem;letter-spacing:.06em;color:var(--pc-muted);}

/* ── Observaciones ── */
.exp-obs{color:var(--pc-soft);line-height:1.7;white-space:pre-wrap;}

/* ── Lightbox + zoom ── */
.pc-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:30px;}
.pc-lightbox.active{display:flex;}
.pc-lightbox-stage{max-width:94vw;max-height:90vh;overflow:hidden;border-radius:16px;}
.pc-lightbox-stage img{display:block;max-width:94vw;max-height:90vh;transition:transform .25s var(--pc-ease);cursor:zoom-in;transform-origin:center;}
.pc-lightbox-stage img.zoomed{cursor:zoom-out;transform:scale(2);}
.pc-lightbox-close{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:12px;font-size:1.5rem;cursor:pointer;background:rgba(255,255,255,.08);border:1px solid var(--pc-border);color:#fff;}
.pc-lightbox-hint{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:var(--pc-muted);font-size:.82rem;}

/* ── Responsive ── */
@media (max-width:760px){
    .exp-meta{grid-template-columns:1fr 1fr;}
    .exp-instrument{grid-template-columns:1fr;}
    .exp-instrument-photo{max-width:240px;}
}
@media (max-width:480px){
    .exp-meta{grid-template-columns:1fr;}
    .exp-info-grid{grid-template-columns:1fr;}
    .exp-status-row{flex-direction:row;}
}