/* Porteria (R-02): CSS movido desde el <style> inline del componente a un modulo global
   (patron de tareas.css/pqrs.css). Enlazado en App.razor. Reglas identicas; @@->@ desescapado. */
    .po-wrap { width:100%; max-width:1900px; margin:0 auto; padding:6px 28px 60px; box-sizing:border-box; font-family:'Lexend',-apple-system,sans-serif; animation:fadeUp .2s ease; }
    .po-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:16px; flex-wrap:wrap; }
    .po-h1 { font-size:27px; font-weight:800; letter-spacing:-.6px; color:var(--propia-text-h1); margin:0; }
    .po-sub { font-size:14px; color:var(--propia-text-muted); margin-top:4px; margin-bottom:0; }
    .po-turno { display:inline-flex; align-items:center; gap:8px; margin-top:9px; font-size:12px; font-weight:700; color:var(--propia-success); background:var(--propia-ok-soft); border:1px solid var(--propia-success-border); padding:5px 11px; border-radius:9px; }
    .po-turno-dot { width:7px; height:7px; border-radius:50%; background:var(--propia-success); }
    .po-turno-x { margin-left:6px; font-size:11px; font-weight:700; color:var(--propia-text-secondary); background:var(--propia-bg-card); border:1px solid var(--propia-border-input); padding:2px 9px; border-radius:6px; cursor:pointer; }
    .po-turno-x:hover { border-color:var(--propia-error-strong); color:var(--propia-error-strong); }
    .po-btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 16px; border-radius:10px; background:var(--propia-brand); color: var(--propia-text-inverse); font-size:13px; font-weight:700; border:none; cursor:pointer; box-shadow:0 6px 16px rgba(109,79,227,.3); }
    .po-btn-primary:hover { background:var(--propia-brand-hover); }
    .po-btn-primary.sm { padding:8px 13px; font-size:12.5px; box-shadow:none; }
    .po-btn-primary:disabled { opacity:.5; cursor:not-allowed; }
    .po-chips { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
    .po-chip { padding:7px 14px; border-radius:9px; border:1px solid var(--propia-border-card); background:var(--propia-bg-card); font-size:12.5px; font-weight:700; color:var(--propia-text-secondary); cursor:pointer; }
    .po-chip:hover { border-color:var(--propia-text-faint); }
    .po-chip.active { background:var(--propia-brand-soft); border-color:var(--propia-brand-border); color:var(--propia-brand); }
    .po-flash { padding:9px 14px; border-radius:10px; font-size:12.5px; font-weight:600; margin-bottom:14px; }
    .po-flash.ok { background:var(--propia-ok-soft); color:var(--propia-success-hover); border:1px solid var(--propia-success-border); }
    .po-flash.err { background:var(--propia-danger-soft); color:#A12B30; border:1px solid #F5C8CB; }
    .po-banner { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:var(--propia-bg-card)8E9; border:1px solid #F3E2B8; border-radius:14px; padding:14px 18px; margin-bottom:16px; }
    .po-banner-txt strong { display:block; font-size:13.5px; color:#7A5B12; }
    .po-banner-txt span { font-size:12px; color:#A98A3C; }
    .po-banner-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .po-banner-form .po-input { min-width:160px; }

    .po-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
    .po-stat { background:var(--propia-bg-card); border:1px solid var(--propia-border-card); border-radius:14px; padding:18px; box-shadow:0 1px 2px rgba(45,62,80,.05); }
    .po-stat-l { font-size:12px; font-weight:700; color:var(--propia-text-muted); }
    .po-stat-n { font-size:28px; font-weight:800; letter-spacing:-1px; margin-top:5px; }
    .po-section-l { font-size:11px; letter-spacing:.6px; color:var(--propia-text-faint); font-weight:700; margin:4px 0 10px; }
    .po-sub-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }

    .po-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:start; margin-bottom:18px; }
    .po-col { background:#F0F3F7; border:1px solid var(--propia-border-card); border-radius:14px; padding:10px; }
    .po-col-h { display:flex; align-items:center; justify-content:space-between; padding:4px 6px 10px; }
    .po-col-t { font-size:11.5px; font-weight:800; letter-spacing:.3px; color:var(--propia-text-secondary); }
    .po-col-n { font-size:11px; font-weight:800; color:var(--propia-brand); background:var(--propia-brand-soft); padding:2px 9px; border-radius:10px; }
    .po-col-body { display:flex; flex-direction:column; gap:8px; }
    .po-pcard { background:var(--propia-bg-card); border:1px solid var(--propia-border-card); border-radius:11px; padding:11px 12px; box-shadow:0 1px 2px rgba(45,62,80,.05); }
    .po-pcard-top { display:flex; align-items:center; gap:9px; }
    .po-av { width:32px; height:32px; border-radius:9px; color: var(--propia-text-inverse); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .po-av.lg { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--propia-brand),var(--propia-brand-hover)); }
    .po-pcard-id { flex:1; min-width:0; }
    .po-pcard-name { font-size:12.5px; font-weight:700; color:var(--propia-text-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .po-pcard-meta { font-size:10.5px; color:var(--propia-text-faint); }
    .po-salir { font-size:10px; font-weight:700; color:var(--propia-text-secondary); background:var(--propia-bg-app); border:1px solid var(--propia-border-card); padding:4px 8px; border-radius:6px; flex-shrink:0; cursor:pointer; }
    .po-salir:hover { border-color:var(--propia-brand); color:var(--propia-brand); }
    .po-pcard-obs { font-size:10.5px; color:var(--propia-text-muted); margin-top:6px; }
    .po-pcard-badges { display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
    .po-bdg { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; padding:3px 8px; border-radius:6px; }
    .po-bdg.green { color: var(--propia-text-inverse); background:#25D366; }
    .po-bdg.red { color:var(--propia-error-strong); background:var(--propia-danger-soft); }
    .po-bdg.soft-green { color:var(--propia-success); background:var(--propia-ok-soft); }
    .po-bdg-btn { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; color: var(--propia-text-inverse); background:#25D366; padding:4px 9px; border-radius:6px; border:none; cursor:pointer; }
    .po-bdg-btn:hover { background:var(--propia-success); }

    .po-card { background:var(--propia-bg-card); border:1px solid var(--propia-border-card); border-radius:14px; box-shadow:0 1px 2px rgba(45,62,80,.05); overflow:hidden; }
    .po-card-h { padding:16px 20px; border-bottom:1px solid var(--propia-border-divider); font-size:14px; font-weight:700; color:var(--propia-text-h1); }
    .po-row { display:flex; align-items:center; gap:13px; padding:13px 20px; border-bottom:1px solid var(--propia-border-divider); }
    .po-row:last-child { border-bottom:none; }
    .po-row-id { flex:1; min-width:0; }
    .po-row-name { font-size:13.5px; font-weight:700; color:var(--propia-text-body); }
    .po-row-meta { font-size:11px; color:var(--propia-text-faint); }
    .po-row-hora { font-size:11.5px; color:var(--propia-text-muted); font-weight:600; }
    .po-estado { width:84px; text-align:center; font-size:11px; font-weight:700; padding:4px 10px; border-radius:7px; }
    .po-estado.dentro { color:var(--propia-success-hover); background:var(--propia-ok-soft); }
    .po-estado.salio { color:var(--propia-text-secondary); background:var(--propia-border-divider); }
    .po-row-salir { font-size:10.5px; font-weight:700; color:var(--propia-brand); background:var(--propia-brand-soft); border:1px solid var(--propia-brand-border); padding:5px 10px; border-radius:7px; cursor:pointer; }
    .po-row-salir:hover { background:var(--propia-brand-border); }
    .po-empty { text-align:center; font-size:12px; color:var(--propia-text-faint); }

    .po-table { width:100%; border-collapse:collapse; font-size:12.5px; }
    .po-table thead th { text-align:left; font-size:10.5px; letter-spacing:.4px; font-weight:700; color:var(--propia-text-faint); text-transform:uppercase; padding:11px 16px; background:var(--propia-bg-app); border-bottom:1px solid var(--propia-border-divider); }
    .po-table tbody td { padding:11px 16px; border-bottom:1px solid var(--propia-border-divider); color:var(--propia-text-body); vertical-align:middle; }
    .po-table tbody tr:last-child td { border-bottom:none; }
    .po-table tbody tr:hover { background:var(--propia-bg-hover); }
    .po-cell-sub { font-size:11px; color:var(--propia-text-faint); }
    .po-bdg-est { font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:6px; }
    .po-mini-danger { font-size:10.5px; font-weight:700; color:var(--propia-error-strong); background:var(--propia-danger-soft); border:1px solid #F5C8CB; padding:4px 9px; border-radius:6px; cursor:pointer; }
    .po-mini-danger:hover { background:#FBD5D7; }
    .po-mini-ok { font-size:10.5px; font-weight:700; color:var(--propia-success-hover); background:var(--propia-ok-soft); border:1px solid var(--propia-success-border); padding:4px 9px; border-radius:6px; cursor:pointer; margin-right:5px; }
    .po-mini-ok:hover { background:#D5F0E0; }

    .po-grid2 { display:grid; grid-template-columns:1.6fr 1fr; gap:14px; align-items:start; }
    .po-form-card .po-card-h { border-bottom:1px solid var(--propia-border-divider); }
    .po-form-body { display:flex; flex-direction:column; gap:11px; padding:18px 20px; }
    .po-form-2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
    .po-lbl { font-size:11px; color:var(--propia-text-muted); font-weight:700; display:block; margin-bottom:5px; }
    .po-input { width:100%; border:1px solid var(--propia-border-card); border-radius:9px; padding:9px 12px; font-size:13px; color:var(--propia-text-body); outline:none; background:var(--propia-bg-card); box-sizing:border-box; font-family:inherit; }
    .po-input:focus { border-color:var(--propia-brand); }
    .po-check { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--propia-text-secondary); font-weight:600; cursor:pointer; }
    .po-note { font-size:11.5px; color:#A98A3C; background:var(--propia-bg-card)8E9; border:1px solid #F3E2B8; padding:8px 11px; border-radius:8px; }

    .po-ov { position:fixed; inset:0; z-index:81; background:rgba(27,42,58,.6); display:flex; align-items:center; justify-content:center; padding:24px; }
    .po-modal { width:min(1120px,96vw); height:min(680px,92vh); background:var(--propia-bg-card); border-radius:18px; box-shadow:0 30px 70px rgba(27,42,58,.45); overflow:hidden; display:flex; flex-direction:column; }
    .po-modal-head { display:flex; align-items:center; gap:13px; padding:18px 24px; border-bottom:1px solid var(--propia-border-divider); flex-shrink:0; }
    .po-modal-ic { width:40px; height:40px; border-radius:11px; background:var(--propia-brand-soft); color:var(--propia-brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .po-modal-tt { flex:1; }
    .po-modal-t { font-size:17px; font-weight:800; letter-spacing:-.3px; color:var(--propia-text-h1); }
    .po-modal-s { font-size:12.5px; color:var(--propia-text-muted); }
    .po-modal-x { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:var(--propia-text-muted); border:1px solid var(--propia-border-card); background:var(--propia-bg-card); cursor:pointer; flex-shrink:0; }
    .po-modal-x:hover { background:var(--propia-bg-app); color:var(--propia-text-body); }
    .po-modal-body { flex:1; display:grid; grid-template-columns:1fr 1.15fr; min-height:0; }
    .po-form-pane { padding:22px 24px; display:flex; flex-direction:column; gap:13px; overflow-y:auto; border-right:1px solid var(--propia-border-divider); }
    .po-sugs { display:flex; flex-direction:column; gap:5px; margin-top:7px; }
    .po-sugs-l { font-size:9.5px; letter-spacing:.5px; color:var(--propia-text-faint); font-weight:800; }
    .po-sug { display:flex; align-items:center; gap:8px; text-align:left; padding:8px 11px; border-radius:9px; border:1px solid var(--propia-brand-border); background:var(--propia-brand-soft-2); cursor:pointer; }
    .po-sug:hover { background:var(--propia-brand-border); border-color:var(--propia-brand); }
    .po-sug-n { flex:1; font-size:12px; font-weight:700; color:var(--propia-brand-hover); }
    .po-sug-u { font-size:11px; font-weight:800; color:var(--propia-brand); background:var(--propia-bg-card); border:1px solid var(--propia-brand-border); padding:3px 9px; border-radius:6px; }
    .po-ia-note { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--propia-brand-soft-2); border:1px solid var(--propia-brand-border); border-radius:11px; font-size:11.5px; color:var(--propia-brand-hover); line-height:1.45; }
    .po-ia-ic { width:32px; height:32px; border-radius:9px; background:var(--propia-brand); color: var(--propia-text-inverse); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .po-btn-wa { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:10px; background:#25D366; color: var(--propia-text-inverse); font-size:13.5px; font-weight:800; border:none; cursor:pointer; box-shadow:0 6px 16px rgba(37,211,102,.35); }
    .po-btn-wa:hover { background:var(--propia-success); }
    .po-btn-wa:disabled { opacity:.5; cursor:not-allowed; }
    .po-btn-ghost { padding:10px; border-radius:10px; border:1px solid var(--propia-border-card); background:var(--propia-bg-card); font-size:12.5px; font-weight:700; color:var(--propia-text-secondary); cursor:pointer; }
    .po-btn-ghost:hover { border-color:var(--propia-text-faint); }
    .po-rn09 { font-size:10.5px; color:var(--propia-text-faint); text-align:center; }

    .po-wa-pane { display:flex; flex-direction:column; min-height:0; background:#E5DDD5; }
    .po-wa-head { display:flex; align-items:center; gap:11px; padding:13px 18px; background:#075E54; flex-shrink:0; }
    .po-wa-av { width:36px; height:36px; border-radius:50%; background:#128C7E; color: var(--propia-text-inverse); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .po-wa-id { flex:1; min-width:0; }
    .po-wa-name { font-size:13.5px; font-weight:700; color: var(--propia-text-inverse); }
    .po-wa-tel { font-size:10.5px; color:#9FD8CF; }
    .po-wa-tag { display:flex; align-items:center; gap:5px; font-size:9.5px; font-weight:800; color:#075E54; background:#9FE8C8; padding:4px 9px; border-radius:12px; letter-spacing:.3px; }
    .po-wa-tag-dot { width:6px; height:6px; border-radius:50%; background:#075E54; }
    .po-wa-body { flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:8px; background:#E5DDD5; }
    .po-wa-empty { margin:auto; text-align:center; max-width:280px; font-size:12.5px; color:#7A736A; font-weight:600; line-height:1.5; }
    .po-wa-empty-ic { width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
    .po-wa-sys { align-self:center; font-size:10px; font-weight:700; color:#5A645F; background:#D4E7E2; padding:4px 12px; border-radius:10px; text-align:center; max-width:90%; }
    .po-wa-agent { align-self:flex-end; max-width:80%; background:#DCF8C6; border-radius:11px 11px 3px 11px; padding:9px 12px; box-shadow:0 1px 1px rgba(0,0,0,.08); }
    .po-wa-agent-l { font-size:10px; font-weight:800; color:var(--propia-success); margin-bottom:2px; }
    .po-wa-txt { font-size:12.5px; color:#2A3230; line-height:1.45; }
    .po-wa-hora { font-size:9.5px; color:#8FA69B; text-align:right; margin-top:3px; }
    .po-wa-res-msg { align-self:flex-start; max-width:80%; background:var(--propia-bg-card); border-radius:11px 11px 11px 3px; padding:9px 12px; box-shadow:0 1px 1px rgba(0,0,0,.08); }
    .po-wa-typing { align-self:flex-end; background:#DCF8C6; border-radius:11px; padding:10px 14px; box-shadow:0 1px 1px rgba(0,0,0,.08); display:flex; gap:4px; }
    .po-wa-typing span { width:6px; height:6px; border-radius:50%; background:#8FA69B; animation:poblink 1.1s infinite; }
    .po-wa-typing span:nth-child(2) { animation-delay:.2s; }
    .po-wa-typing span:nth-child(3) { animation-delay:.4s; }
    @keyframes poblink { 0%,100%{opacity:.3} 50%{opacity:1} }
    .po-wa-foot { flex-shrink:0; padding:12px 18px; background:#F0F0F0; border-top:1px solid #DDD; }
    .po-wa-sim-l { font-size:10px; font-weight:800; letter-spacing:.4px; color:#7A736A; margin-bottom:7px; }
    .po-wa-sim { display:flex; gap:8px; }
    .po-wa-yes { flex:1; padding:10px; border-radius:9px; background:#25D366; color: var(--propia-text-inverse); font-size:12.5px; font-weight:800; border:none; cursor:pointer; }
    .po-wa-yes:hover { background:var(--propia-success); }
    .po-wa-no { flex:1; padding:10px; border-radius:9px; background:var(--propia-bg-card); border:1px solid #DDD; color:var(--propia-error-strong); font-size:12.5px; font-weight:800; cursor:pointer; }
    .po-wa-no:hover { background:var(--propia-danger-soft); }
    .po-wa-no.neutral { color:var(--propia-text-secondary); }
    .po-wa-no.neutral:hover { background:var(--propia-border-divider); }
    .po-wa-res { display:flex; align-items:center; gap:9px; padding:10px 13px; border-radius:10px; }
    .po-wa-res.ok { background:var(--propia-ok-soft); border:1px solid var(--propia-success-border); }
    .po-wa-res.no { background:var(--propia-danger-soft); border:1px solid #F5C8CB; }
    .po-wa-res.neutral { background:var(--propia-border-divider); border:1px solid var(--propia-border-input); }
    .po-wa-res div { flex:1; font-size:12px; font-weight:700; }
    .po-wa-res.ok div { color:var(--propia-success-hover); }
    .po-wa-res.no div { color:#A12B30; }
    .po-wa-res.neutral div { color:var(--propia-text-body); }
    .po-wa-res button { font-size:11.5px; font-weight:800; color: var(--propia-text-inverse); padding:7px 13px; border-radius:8px; border:none; cursor:pointer; }
    .po-wa-res.ok button { background:var(--propia-success); }
    .po-wa-res.no button { background:var(--propia-error-strong); }
    .po-wa-res.neutral button { background:var(--propia-text-secondary); }
    .po-wa-locked { display:flex; align-items:center; gap:8px; font-size:11px; color:#9A938A; }

    .po-vf { width:520px; max-width:96vw; height:min(620px,90vh); background:var(--propia-bg-card); border-radius:18px; box-shadow:0 30px 70px rgba(27,42,58,.45); overflow:hidden; display:flex; flex-direction:column; }
    .po-vf-head { display:flex; align-items:center; gap:11px; padding:14px 18px; background:#075E54; flex-shrink:0; }
    .po-vf-x { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#9FD8CF; border:none; background:transparent; cursor:pointer; }
    .po-vf-x:hover { background:rgba(255,255,255,.12); color: var(--propia-text-inverse); }

    .po-small { width:520px; max-width:96vw; max-height:92vh; overflow-y:auto; background:var(--propia-bg-card); border-radius:18px; box-shadow:0 30px 70px rgba(27,42,58,.45); }
    .po-modal-foot { display:flex; gap:10px; margin-top:6px; }

    @media (max-width:900px) {
        .po-stats, .po-cols { grid-template-columns:1fr; }
        .po-grid2 { grid-template-columns:1fr; }
        .po-modal-body { grid-template-columns:1fr; }
        .po-modal { height:min(92vh,820px); }
    }
    /* ----- Campos personalizados ----- */
    .po-campos-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
    .po-campo-fld { display:flex; flex-direction:column; gap:5px; }
    .po-campo-fld.full { grid-column:1 / -1; }
    .poc-campos { display:flex; flex-direction:column; gap:6px; }
    .poc-campo { display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid var(--propia-border-card); border-radius:9px; background:var(--propia-bg-card); }
    .poc-campo.on { border-color:var(--propia-brand); background:var(--propia-brand-soft-2); }
    .poc-campo-id { flex:1; min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .poc-campo-nom { font-size:13px; font-weight:700; color:var(--propia-text-body); }
    .poc-campo-tipo { font-size:10px; font-weight:700; color:var(--propia-brand); background:var(--propia-brand-soft); padding:2px 8px; border-radius:6px; }
    .poc-campo-filt { font-size:10px; font-weight:700; color:var(--propia-success); background:var(--propia-ok-soft); padding:2px 8px; border-radius:6px; }
    .poc-editor { border:1px dashed var(--propia-border-input); border-radius:10px; padding:12px; background:var(--propia-bg-card-soft); display:flex; flex-direction:column; gap:9px; }
    /* === Movil (hasta 640px): tablas con scroll horizontal en vez de recorte, padding reducido, campos a 1 col === */
    @media (max-width: 640px) {
        .po-wrap { padding: 6px 12px 60px; }
        .po-card { overflow-x: auto; }
        .po-table { min-width: 620px; }
        .po-form-2, .po-campos-grid { grid-template-columns: 1fr; }
    }