/* Postventa/PQRS — complementa site.css (mismas variables y clases base:
   .wrap .sec .form .field .row2 .btn .rich .steps .page-hero). Solo lo que el
   sitio no tenía: grilla del formulario, badges de estado y thread de mensajes. */

.pv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:start;}
.pv-intro{max-width:60ch;}
.pv-note{font-size:13.5px;color:var(--ink-3);margin-top:10px;}
.pv-note a{color:var(--teal-700);font-weight:600;}
.pv-opt{font-weight:500;color:var(--ink-3);}
.pv-form-title{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:16px;}
/* Selector de archivos: el control nativo rotula su botón en el idioma del
   navegador ("Choose Files"), así que se oculta —sin perder foco de teclado— y
   se rotula con un <label> propio en español. El nombre lo escribe site.js;
   sin JS el label sigue abriendo el selector. */
.filebox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);padding:10px 12px;}
.filebox .pv-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.filebox-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--blue-700);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--btn-r);padding:9px 14px;transition:.16s;}
.filebox-btn:hover{border-color:var(--blue);background:var(--blue-050);}
.filebox .pv-file:focus-visible + .filebox-btn{outline:2.5px solid var(--blue);outline-offset:2px;}
.filebox-name{font-size:13px;color:var(--ink-3);min-width:0;overflow-wrap:anywhere;}

.pv-errors{background:var(--terra-050);border:1px solid rgba(199,113,78,.35);color:var(--terra-700);
  border-radius:var(--r-sm);padding:14px 16px;font-size:14px;margin-bottom:18px;}
.pv-errors ul{margin:6px 0 0 18px;}
.pv-errors li{margin-bottom:3px;}
.pv-aviso{background:var(--teal-050);border:1px solid rgba(42,111,136,.28);color:var(--teal-800);
  border-radius:var(--r-sm);padding:14px 16px;font-size:14px;margin-bottom:20px;}

.pv-empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;}
.pv-empty h3{font-size:17px;font-weight:700;margin-bottom:8px;}
.pv-empty p{font-size:15px;color:var(--ink-2);}
.pv-empty a{color:var(--teal-700);font-weight:600;}

/* Confirmación de radicado — panel único sin grid, se centra en la página. */
.pv-done{max-width:620px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px;box-shadow:var(--sh);}
.pv-done-num{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-700);margin-bottom:10px;}
.pv-done-num strong{font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.pv-done h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px;}
.pv-done p{font-size:15.5px;color:var(--ink-2);line-height:1.7;margin-bottom:10px;}
.pv-done-note{font-size:13.5px;color:var(--ink-3);}
.pv-done-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}
.pv-done-cta .btn{width:auto;}

/* Acceso al portal — panel único sin grid, se centra en la página. */
.pv-access{max-width:460px;margin:0 auto;}
.pv-account-head{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:22px;}
.pv-account-head h2{font-size:24px;font-weight:800;letter-spacing:-.02em;}
.pv-account-head .btn{width:auto;}

/* Lista de casos */
.pv-list{display:grid;gap:12px;}
.pv-item{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;transition:border-color .18s ease,box-shadow .18s ease;}
.pv-item:hover{border-color:var(--ink-3);box-shadow:var(--sh-sm);}
.pv-item-top{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.pv-num{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.pv-item-subject{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.pv-item-meta{font-size:13px;color:var(--ink-3);margin-top:4px;}

/* Badge de estado del caso (posición estática: el .badge de site.css es absoluto) */
.pv-badge{display:inline-block;position:static;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;background:var(--ink-2);border-radius:var(--pill);padding:4px 10px;}
.pv-badge.s-nuevo{background:var(--terra);}
.pv-badge.s-en_revision{background:var(--teal);}
.pv-badge.s-en_proceso{background:var(--teal-700);}
.pv-badge.s-resuelto{background:var(--green);}
.pv-badge.s-cerrado{background:var(--ink-3);}

/* Detalle del caso + thread */
.pv-case{max-width:780px;}
.pv-case-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;}
.pv-back{font-size:13.5px;font-weight:600;color:var(--teal-700);}
.pv-thread{display:grid;gap:14px;margin-bottom:26px;}
.pv-msg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;}
.pv-msg.is-admin{background:var(--teal-050);border-color:rgba(42,111,136,.22);}
.pv-msg-head{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-size:12.5px;color:var(--ink-3);margin-bottom:8px;}
.pv-msg-head strong{color:var(--ink);font-size:13.5px;}
.pv-msg-body{font-size:15px;color:var(--ink-2);line-height:1.65;white-space:pre-wrap;overflow-wrap:break-word;}
.pv-atts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.pv-atts a{display:block;width:92px;height:92px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);}
.pv-atts img{width:100%;height:100%;object-fit:cover;display:block;}
.pv-reply{margin-top:8px;}

@media (max-width:960px){
  /* 17-sep-2026 (barrido de espaciado): al apilarse, 32px separaban tan poco el
     texto del formulario que en iPad parecian un solo bloque. 48px es el mismo
     gutter que en escritorio, ahora como aire vertical entre dos bloques. */
  .pv-grid{grid-template-columns:1fr;gap:48px;}
}