/* Portal del cliente: aspecto propio, más cálido y sencillo que el de gestión. Todo cuelga de .pt-app. */
.pt-app { --pt-primario:#5b6fa3; --pt-primario-osc:#44558a; --pt-claro:#eef1f8; --pt-acento:#e3a65f; --pt-texto:#2f3441; --pt-suave:#6b7280; --pt-borde:#e3e6ef; --pt-fondo:#f5f6fa; --pt-ok:#4f9d7a; --pt-aviso:#d49a3a; --pt-peligro:#b9605a;
  font-family:'Poppins',system-ui,sans-serif; color:var(--pt-texto); background:var(--pt-fondo); box-sizing:border-box; height:100vh; height:100dvh; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; padding-bottom:76px; flex:1 1 auto; width:100%; min-width:0; }
.pt-app *{ box-sizing:border-box; }
.pt-app a{ color:var(--pt-primario); }

/* Cabecera */
.pt-top{ background:#fff; border-bottom:1px solid var(--pt-borde); position:sticky; top:0; z-index:30; }
.pt-top-in{ max-width:1320px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px; }
.pt-marca{ flex:1 1 auto; overflow:hidden; display:flex; align-items:center; gap:10px; text-decoration:none!important; color:var(--pt-texto)!important; min-width:0; }
.pt-marca img{ height:34px; max-width:120px; object-fit:contain; }
.pt-marca-ico{ width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--pt-primario),var(--pt-primario-osc)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex:none; }
.pt-marca > span:last-child{ min-width:0; }
.pt-marca b{ display:block; font-weight:700; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt-marca small{ display:block; color:var(--pt-suave); font-size:.72rem; line-height:1; }
.pt-nav{ display:flex; gap:4px; margin-left:auto; flex:none; }
.pt-nav a{ white-space:nowrap; padding:8px 14px; border-radius:999px; color:var(--pt-suave)!important; text-decoration:none!important; font-size:.88rem; font-weight:500; display:flex; align-items:center; gap:7px; }
.pt-nav a:hover{ background:var(--pt-claro); color:var(--pt-primario-osc)!important; }
.pt-nav a.activo{ background:var(--pt-claro); color:var(--pt-primario-osc)!important; font-weight:600; }
.pt-nav .pt-cnt{ background:var(--pt-acento); color:#fff; border-radius:999px; font-size:.68rem; padding:1px 7px; font-weight:700; }
.pt-user{ position:relative; flex:none; }
.pt-user-btn{ border:1px solid var(--pt-borde); background:#fff; border-radius:999px; padding:5px 12px 5px 6px; display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.85rem; color:var(--pt-texto); }
.pt-avatar{ width:28px; height:28px; border-radius:50%; background:var(--pt-primario); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.8rem; }
.pt-menu{ position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--pt-borde); border-radius:12px; box-shadow:0 10px 30px rgba(40,50,80,.14); min-width:210px; padding:6px; z-index:40; }
.pt-menu a,.pt-menu button{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 12px; border:0; background:none; border-radius:8px; color:var(--pt-texto)!important; text-decoration:none!important; font-size:.88rem; cursor:pointer; }
.pt-menu a:hover,.pt-menu button:hover{ background:var(--pt-claro); }
.pt-menu .pt-menu-cab{ padding:8px 12px 10px; border-bottom:1px solid var(--pt-borde); margin-bottom:4px; }
.pt-menu .pt-menu-cab small{ display:block; color:var(--pt-suave); font-size:.75rem; word-break:break-all; }

/* Contenido */
.pt-main{ max-width:1320px; margin:0 auto; padding:20px 16px; }
.pt-hero{ background:linear-gradient(120deg,var(--pt-primario) 0%,var(--pt-primario-osc) 60%,#3a4876 100%); color:#fff; border-radius:20px; padding:26px 28px; position:relative; overflow:hidden; margin-bottom:18px; }
.pt-hero::after{ content:''; position:absolute; right:-60px; top:-60px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.08); }
.pt-hero::before{ content:''; position:absolute; right:90px; bottom:-90px; width:200px; height:200px; border-radius:50%; background:rgba(227,166,95,.22); }
.pt-hero h1{ color:#fff!important; font-size:1.5rem; font-weight:700; margin:0 0 4px; position:relative; z-index:1; }
.pt-hero p{ margin:0 0 16px; opacity:.88; font-size:.95rem; position:relative; z-index:1; max-width:520px; }
.pt-hero .pt-btn{ position:relative; z-index:1; }
.pt-app h1,.pt-app h2,.pt-app h5{ color:var(--pt-texto); }
.pt-h2{ font-size:1.05rem; font-weight:700; margin:22px 0 10px; display:flex; align-items:center; gap:8px; }
.pt-h2 small{ margin-left:auto; font-weight:500; font-size:.82rem; }

.pt-btn{ display:inline-flex; align-items:center; gap:8px; border:0; border-radius:12px; padding:11px 20px; font-weight:600; font-size:.92rem; cursor:pointer; text-decoration:none!important; transition:transform .12s, box-shadow .12s; }
.pt-btn:hover{ transform:translateY(-1px); }
.pt-btn:disabled{ opacity:.6; cursor:default; transform:none; }
.pt-btn-acento{ background:var(--pt-acento); color:#3b2a10!important; box-shadow:0 6px 16px rgba(227,166,95,.4); }
.pt-btn-prim{ background:var(--pt-primario); color:#fff!important; box-shadow:0 6px 16px rgba(91,111,163,.3); }
.pt-btn-sec{ background:#fff; color:var(--pt-primario-osc)!important; border:1px solid var(--pt-borde); }
.pt-btn-sm{ padding:7px 13px; font-size:.82rem; border-radius:10px; }

/* Tarjetas de resumen */
.pt-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:6px; }
.pt-kpi{ background:#fff; border:1px solid var(--pt-borde); border-radius:16px; padding:16px; display:flex; gap:13px; align-items:center; text-decoration:none!important; color:var(--pt-texto)!important; transition:box-shadow .15s, transform .15s; }
a.pt-kpi:hover{ box-shadow:0 8px 22px rgba(60,70,110,.1); transform:translateY(-2px); }
.pt-kpi-ico{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex:none; background:var(--pt-claro); color:var(--pt-primario); }
.pt-kpi.k-ac .pt-kpi-ico{ background:#fbf0e0; color:#b57a26; }
.pt-kpi.k-ok .pt-kpi-ico{ background:#e4f3ec; color:var(--pt-ok); }
.pt-kpi.k-pe .pt-kpi-ico{ background:#f6e5e3; color:var(--pt-peligro); }
.pt-kpi b{ display:block; font-size:1.35rem; line-height:1.1; font-weight:700; }
.pt-kpi span{ color:var(--pt-suave); font-size:.8rem; }

/* Tarjetas de avisos */
.pt-card{ background:#fff; border:1px solid var(--pt-borde); border-radius:16px; padding:16px 18px; margin-bottom:12px; }
.pt-aviso{ display:block; text-decoration:none!important; color:var(--pt-texto)!important; transition:box-shadow .15s, transform .15s; }
.pt-aviso:hover{ box-shadow:0 8px 22px rgba(60,70,110,.1); transform:translateY(-2px); }
.pt-aviso-cab{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.pt-aviso-num{ font-weight:700; font-size:.95rem; }
.pt-aviso-desc{ color:var(--pt-texto); font-size:.9rem; margin:2px 0 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pt-meta{ display:flex; gap:16px; flex-wrap:wrap; color:var(--pt-suave); font-size:.8rem; }
.pt-meta i{ margin-right:5px; }
.pt-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:999px; font-size:.75rem; font-weight:600; background:var(--pt-claro); color:var(--pt-primario-osc); }
.pt-pill.pt-nuevo{ background:#eceef3; color:#5d6475; }
.pt-pill.pt-plan{ background:#e6edf9; color:#3e5b9a; }
.pt-pill.pt-camino{ background:#fcefd9; color:#a86c13; }
.pt-pill.pt-curso{ background:#e4f1ec; color:#2f7a5b; }
.pt-pill.pt-ok{ background:#dff1e7; color:#2b7653; }
.pt-pill.pt-off{ background:#f1e3e1; color:#8f4a44; }
.pt-pill.pt-urg{ background:#f6dfdc; color:#a24a43; }
.pt-pulso{ width:8px; height:8px; border-radius:50%; background:#d98a1a; animation:pt-pulso 1.4s infinite; display:inline-block; }
@keyframes pt-pulso{ 0%{box-shadow:0 0 0 0 rgba(217,138,26,.55);} 70%{box-shadow:0 0 0 9px rgba(217,138,26,0);} 100%{box-shadow:0 0 0 0 rgba(217,138,26,0);} }

/* Barra de progreso en 4 pasos */
.pt-pasos{ display:flex; align-items:flex-start; margin:8px 0 2px; }
.pt-paso{ flex:1; text-align:center; position:relative; font-size:.72rem; color:var(--pt-suave); }
.pt-paso::before{ content:''; position:absolute; top:13px; left:-50%; width:100%; height:3px; background:var(--pt-borde); z-index:0; }
.pt-paso:first-child::before{ display:none; }
.pt-paso i{ position:relative; z-index:1; width:28px; height:28px; border-radius:50%; background:#fff; border:2px solid var(--pt-borde); display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--pt-borde); }
.pt-paso span{ display:block; margin-top:4px; }
.pt-paso.hecho{ color:var(--pt-primario-osc); }
.pt-paso.hecho::before{ background:var(--pt-primario); }
.pt-paso.hecho i{ background:var(--pt-primario); border-color:var(--pt-primario); color:#fff; }
.pt-paso.actual i{ border-color:var(--pt-acento); background:var(--pt-acento); color:#fff; box-shadow:0 0 0 5px rgba(227,166,95,.25); }
.pt-paso.actual{ font-weight:600; color:var(--pt-texto); }
.pt-pasos.mini .pt-paso span{ display:none; }
.pt-pasos.mini .pt-paso i{ width:20px; height:20px; font-size:.65rem; }
.pt-pasos.mini .pt-paso::before{ top:9px; }

/* Línea de tiempo */
.pt-linea{ list-style:none; padding:0; margin:0; }
.pt-linea li{ position:relative; padding:0 0 18px 42px; }
.pt-linea li::before{ content:''; position:absolute; left:15px; top:30px; bottom:0; width:2px; background:var(--pt-borde); }
.pt-linea li:last-child::before{ display:none; }
.pt-linea li i{ position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; background:var(--pt-primario); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.pt-linea li.pendiente i{ background:#fff; border:2px dashed var(--pt-borde); color:var(--pt-suave); }
.pt-linea b{ display:block; font-size:.92rem; }
.pt-linea small{ color:var(--pt-suave); display:block; }

/* Mensajes */
.pt-notas{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.pt-nota{ max-width:86%; padding:9px 13px; border-radius:14px 14px 14px 4px; background:var(--pt-claro); font-size:.88rem; }
.pt-nota.mia{ align-self:flex-end; background:var(--pt-primario); color:#fff; border-radius:14px 14px 4px 14px; }
.pt-nota small{ display:block; opacity:.7; font-size:.72rem; margin-top:2px; }

/* Documentos */
.pt-doc{ display:flex; align-items:center; gap:14px; padding:13px 16px; background:#fff; border:1px solid var(--pt-borde); border-radius:14px; margin-bottom:8px; }
.pt-doc-ico{ width:40px; height:40px; border-radius:11px; background:#fbe9e7; color:#b4534a; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex:none; }
.pt-doc.t-fact .pt-doc-ico{ background:#e8f0fb; color:#4468a8; }
.pt-doc.t-pres .pt-doc-ico{ background:#fbf0e0; color:#b57a26; }
.pt-doc-t{ flex:1; min-width:0; }
.pt-doc-t b{ display:block; font-size:.92rem; }
.pt-doc-t small{ color:var(--pt-suave); }
.pt-doc-imp{ font-weight:700; white-space:nowrap; }

/* Formularios */
.pt-form label{ font-weight:600; font-size:.84rem; margin-bottom:5px; display:block; }
.pt-form .form-control{ border-radius:12px; border-color:var(--pt-borde); padding:10px 13px; height:auto; }
.pt-form .form-control:focus{ border-color:var(--pt-primario); box-shadow:0 0 0 3px rgba(91,111,163,.18); }
.pt-franjas{ display:flex; gap:8px; flex-wrap:wrap; }
.pt-franja{ border:1.5px solid var(--pt-borde); background:#fff; border-radius:12px; padding:9px 16px; cursor:pointer; font-size:.88rem; display:flex; align-items:center; gap:7px; color:var(--pt-texto); }
.pt-franja.sel{ border-color:var(--pt-primario); background:var(--pt-claro); color:var(--pt-primario-osc); font-weight:600; }
.pt-urgencia{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.pt-urg-op{ border:1.5px solid var(--pt-borde); background:#fff; border-radius:14px; padding:12px 14px; cursor:pointer; text-align:left; color:var(--pt-texto); display:flex; gap:11px; align-items:flex-start; }
.pt-urg-op i{ font-size:1.25rem; color:var(--pt-suave); margin-top:1px; }
.pt-urg-op b{ display:block; font-size:.9rem; }
.pt-urg-op span{ font-size:.78rem; color:var(--pt-suave); }
.pt-urg-op.sel{ border-color:var(--pt-primario); background:var(--pt-claro); }
.pt-urg-op.sel i{ color:var(--pt-primario); }
.pt-urg-op.sel.urg{ border-color:var(--pt-peligro); background:#fbeeed; } .pt-urg-op.sel.urg i{ color:var(--pt-peligro); }
.pt-estrellas button{ border:0; background:none; font-size:1.7rem; color:#d6d9e2; cursor:pointer; padding:0 2px; line-height:1; }
.pt-estrellas button.on{ color:var(--pt-acento); }
.pt-vacio{ text-align:center; padding:38px 16px; color:var(--pt-suave); }
.pt-vacio i{ font-size:2.4rem; color:#c5cbe0; display:block; margin-bottom:8px; }
.pt-alerta{ border-radius:12px; padding:11px 14px; font-size:.88rem; margin-bottom:12px; }
.pt-alerta.ok{ background:#e4f3ec; color:#2b6a4f; } .pt-alerta.err{ background:#f8e6e4; color:#9a4640; } .pt-alerta.inf{ background:var(--pt-claro); color:var(--pt-primario-osc); }
.pt-chips{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.pt-chip{ border:1px solid var(--pt-borde); background:#fff; border-radius:999px; padding:6px 15px; font-size:.84rem; cursor:pointer; color:var(--pt-suave); }
.pt-chip.sel{ background:var(--pt-primario); border-color:var(--pt-primario); color:#fff; font-weight:600; }
.pt-grid2{ display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:start; }

/* Barra inferior (móvil) */
.pt-bottom{ display:none; position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--pt-borde); z-index:35; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); }
.pt-bottom a{ flex:1; text-align:center; text-decoration:none!important; color:var(--pt-suave)!important; font-size:.68rem; padding:4px 0; position:relative; }
.pt-bottom a i{ display:block; font-size:1.3rem; line-height:1.2; }
.pt-bottom a.activo{ color:var(--pt-primario)!important; font-weight:600; }
.pt-bottom .pt-cnt{ position:absolute; top:0; left:calc(50% + 6px); background:var(--pt-acento); color:#fff; border-radius:999px; font-size:.62rem; padding:0 5px; font-weight:700; }

@media (max-width:760px){
  .pt-nav{ display:none; }
  .pt-user{ margin-left:auto; }
  .pt-user-btn span.pt-nombre{ display:none; }
  .pt-user-btn{ padding:4px; }
  .pt-bottom{ display:flex; }
  .pt-hero{ padding:20px 18px; border-radius:16px; }
  .pt-hero h1{ font-size:1.25rem; }
  .pt-grid2{ grid-template-columns:1fr; }
  .pt-paso span{ font-size:.66rem; }
  .pt-doc{ flex-wrap:wrap; }
}