/* ============================================================
   LEXGO — Portal de abogados (portal.html)
   Hoja independiente: el portal es una aplicación, no una página
   del sitio, y no necesita cargar los estilos de marketing.
   ============================================================ */

:root {
  --navy: #0D1B2A;
  --navy-800: #13263B;
  --navy-700: #1B3350;
  --blue: #2563EB;
  --blue-dark: #1D4ED8;
  --blue-soft: #EAF0FE;
  --gold: #D4AF37;
  --gold-soft: #F7EFD6;
  --light: #F5F7FA;
  --gray: #6B7280;
  --gray-300: #D1D5DB;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --white: #fff;
  --success: #16A34A;
  --danger: #DC2626;
  --warn: #D97706;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(13, 27, 42, .08);
  --shadow-md: 0 6px 24px rgba(13, 27, 42, .10);
  --shadow-lg: 0 16px 48px rgba(13, 27, 42, .18);

  --top-h: 66px;
  --nav-w: 232px;
}

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

/* El portal esconde y muestra pantallas enteras con el atributo `hidden`
 * (portal.js hace `$("chatPanel").hidden = true`). El navegador aplica a ese
 * atributo un `display:none` de su hoja interna, y CUALQUIER regla de autor con
 * `display` propio se lo come: `.pt-auth{display:grid}`, `.pt-chat{display:flex}`
 * y `.pt-modal{display:grid}` lo hacían. Resultado: el panel de chat y el modal
 * "Finalizar la consulta" quedaban pintados encima de todo con z-index 60 y 80,
 * y el abogado entraba al portal directo a una pantalla bloqueada de la que no
 * se podía salir — ningún caso se podía tomar.
 *
 * Esta regla va primero y con !important a propósito: es la única forma de que
 * `hidden` signifique oculto pase lo que pase más abajo en el archivo. */
[hidden] { display: none !important; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--navy);
  background: var(--light);
  -webkit-font-smoothing: antialiased;
}
body.pt-no-scroll { overflow: hidden; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }

/* ---------- Botones ---------- */
.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.pt-btn:active { transform: scale(.97); }
.pt-btn[disabled] { opacity: .55; cursor: not-allowed; }

.pt-btn-gold { background: var(--gold); color: var(--navy); }
.pt-btn-gold:hover:not([disabled]) { background: #c6a22f; }

.pt-btn-primary { background: var(--blue); color: #fff; }
.pt-btn-primary:hover:not([disabled]) { background: var(--blue-dark); }

.pt-btn-outline { border: 1.5px solid var(--gray-300); color: var(--navy); }
.pt-btn-outline:hover:not([disabled]) { border-color: var(--blue); color: var(--blue); }

.pt-btn-block { width: 100%; }
.pt-btn-sm { font-size: 13px; padding: 7px 14px; }

.pt-icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, .7);
  transition: background .15s, color .15s;
}
.pt-icon-btn svg { width: 19px; height: 19px; }
.pt-icon-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.pt-link {
  display: block;
  margin: 14px auto 0;
  font-size: 13.5px;
  color: var(--blue);
  text-decoration: underline;
}

/* ============================================================
   PANTALLA DE ACCESO
   ============================================================ */

.pt-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background:
    radial-gradient(900px 460px at 20% -10%, rgba(37, 99, 235, .3), transparent 62%),
    radial-gradient(700px 420px at 88% 4%, rgba(212, 175, 55, .16), transparent 62%),
    var(--navy);
}

.pt-auth-card {
  width: 100%;
  max-width: 412px;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 38px 34px 32px;
  box-shadow: var(--shadow-lg);
}

.pt-auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.pt-auth-brand svg { width: 38px; height: 38px; }

.pt-brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .01em;
}
.pt-brand-name span { color: var(--gold); }

.pt-auth-kicker {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 8px 0 26px;
}

.pt-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--gray-100);
  padding: 4px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.pt-tabs button {
  padding: 9px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray);
  transition: background .15s, color .15s;
}
.pt-tabs button.on { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }

.pt-auth-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.pt-auth-form input {
  width: 100%;
  font-size: 15px;
  padding: 11px 13px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  margin-bottom: 16px;
  color: var(--navy);
}
.pt-auth-form input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.pt-auth-note {
  background: var(--blue-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--navy);
  margin-bottom: 18px;
}
.pt-auth-note-sm { font-size: 13px; color: var(--gray); text-align: center; margin-top: 14px; }
.pt-auth-note-sm a { color: var(--blue); text-decoration: underline; }

.pt-auth-msg {
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 13.5px;
  text-align: center;
}
.pt-auth-msg.error { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; }
.pt-auth-msg.ok { background: #F0FDF4; border: 1px solid #BBF7D0; color: #15803D; }

/* ============================================================
   BARRA SUPERIOR
   ============================================================ */

.pt-top {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--top-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  background: var(--navy);
  color: #fff;
}

.pt-top-brand { display: flex; align-items: center; gap: 9px; color: #fff; }
.pt-top-brand svg { width: 30px; height: 30px; }
.pt-top-brand .pt-brand-name { font-size: 20px; }

.pt-top-right { display: flex; align-items: center; gap: 18px; }

/* Interruptor de disponibilidad */
.pt-switch { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.pt-switch input { position: absolute; opacity: 0; pointer-events: none; }

.pt-switch-track {
  width: 42px; height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  padding: 3px;
  transition: background .18s;
  flex-shrink: 0;
}
.pt-switch-thumb {
  display: block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s;
}
.pt-switch input:checked + .pt-switch-track { background: var(--success); }
.pt-switch input:checked + .pt-switch-track .pt-switch-thumb { transform: translateX(18px); }
.pt-switch input:focus-visible + .pt-switch-track { outline: 2px solid var(--gold); outline-offset: 2px; }

.pt-switch-label { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .55); }
.pt-switch-label.on { color: #4ADE80; }

.pt-user { display: flex; align-items: center; gap: 10px; }

.pt-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.pt-avatar.big { width: 66px; height: 66px; font-size: 23px; }

.pt-user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.pt-user-meta strong { font-size: 14px; }
.pt-user-meta span { font-size: 11.5px; color: rgba(255, 255, 255, .55); }

/* ---------- Aviso de cuenta pendiente ---------- */
.pt-pending { display: grid; place-items: center; padding: 90px 20px; }
.pt-pending-inner {
  max-width: 460px;
  text-align: center;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 34px;
  box-shadow: var(--shadow-md);
}
.pt-pending-inner h2 { font-size: 25px; margin-bottom: 12px; }
.pt-pending-inner p { color: var(--gray); margin-bottom: 24px; }

/* ============================================================
   ESTRUCTURA
   ============================================================ */

.pt-body { display: flex; align-items: flex-start; }

.pt-nav {
  position: sticky;
  top: var(--top-h);
  width: var(--nav-w);
  flex-shrink: 0;
  height: calc(100vh - var(--top-h));
  padding: 20px 14px;
  background: #fff;
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pt-nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gray);
  transition: background .14s, color .14s;
  position: relative;
}
.pt-nav button svg { width: 19px; height: 19px; flex-shrink: 0; }
.pt-nav button:hover { background: var(--gray-100); color: var(--navy); }
.pt-nav button.on { background: var(--navy); color: #fff; font-weight: 600; }
.pt-nav button.on svg { color: var(--gold); }

.pt-badge {
  margin-left: auto;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  display: grid;
  place-items: center;
}

.pt-main { flex: 1; min-width: 0; padding: 30px 34px 70px; }

.pt-view { display: none; }
.pt-view.on { display: block; animation: ptFade .22s ease; }
@keyframes ptFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.pt-view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.pt-view-head h1 { font-size: 27px; margin-bottom: 3px; }
.pt-view-head p { color: var(--gray); font-size: 14.5px; }

.pt-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gray); }
.pt-live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
  animation: ptPulse 1.8s infinite;
}
@keyframes ptPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); }
  60% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
}

/* ---------- Aviso de desconectado ---------- */
.pt-offline {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--gold-soft);
  border: 1px solid rgba(212, 175, 55, .5);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 22px;
}
.pt-offline svg { width: 26px; height: 26px; color: var(--warn); flex-shrink: 0; }
.pt-offline div { flex: 1; }
.pt-offline strong { display: block; font-size: 15px; }
.pt-offline p { font-size: 13.5px; color: var(--gray); }

/* ============================================================
   TARJETAS DE CASOS
   ============================================================ */

.pt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}

.pt-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .16s, border-color .16s;
}
.pt-card:hover { box-shadow: var(--shadow-md); }
.pt-card.nuevo { border-color: rgba(37, 99, 235, .38); }
.pt-card.activo { border-left: 3px solid var(--success); }

.pt-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}
.pt-card h3 { font-size: 17px; margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }

.pt-resumen {
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.pt-resumen em { color: var(--gray-300); }

.pt-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid var(--gray-100);
}
.pt-card-money { display: flex; flex-direction: column; line-height: 1.3; }
.pt-card-money span { font-size: 12px; color: var(--gray); }
.pt-card-money strong { font-size: 15.5px; color: var(--navy); }

.pt-espera, .pt-fecha { font-size: 12px; color: var(--gray); }

.pt-restante {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--success);
}
.pt-restante.urgente { color: var(--danger); }

.pt-unread {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--danger);
  color: #fff;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

/* Distintivos de área */
.pt-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gray-200);
  color: var(--navy);
  white-space: nowrap;
}
.pt-tag.laboral    { background: #DBEAFE; color: #1D4ED8; }
.pt-tag.familia    { background: #FCE7F3; color: #BE185D; }
.pt-tag.civil      { background: #E0E7FF; color: #4338CA; }
.pt-tag.penal      { background: #FEE2E2; color: #B91C1C; }
.pt-tag.comercial  { background: #D1FAE5; color: #047857; }
.pt-tag.transito   { background: #FEF3C7; color: #B45309; }
.pt-tag.tributario { background: #E0F2FE; color: #0369A1; }
.pt-tag.migratorio { background: #EDE9FE; color: #6D28D9; }

/* Historial */
.pt-hist-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--gray);
  margin-top: 4px;
}
.pt-hist-monto { font-weight: 700; color: var(--navy); }
.pt-stars { color: var(--gold); letter-spacing: .08em; }
.pt-sin-cal { color: var(--gray-300); }
.pt-comentario {
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--gray-100);
  border-radius: var(--radius);
  font-size: 13.5px;
  font-style: italic;
  color: var(--navy);
}

/* Vacíos */
.pt-empty { text-align: center; padding: 62px 20px; }
.pt-empty-ico {
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gray-100);
  color: var(--gray-300);
}
.pt-empty-ico svg { width: 27px; height: 27px; }
.pt-empty h3 { font-size: 19px; margin-bottom: 7px; }
.pt-empty p { color: var(--gray); font-size: 14.5px; max-width: 380px; margin: 0 auto; }

/* ============================================================
   GANANCIAS
   ============================================================ */

.pt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.pt-stat {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.pt-stat.gold { background: var(--navy); border-color: var(--navy); }
.pt-stat.gold .pt-stat-lbl { color: rgba(255, 255, 255, .55); }
.pt-stat.gold strong { color: var(--gold); }
.pt-stat.gold .pt-stat-sub { color: rgba(255, 255, 255, .5); }

.pt-stat-lbl {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gray);
  margin-bottom: 7px;
}
.pt-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 29px;
  line-height: 1.1;
}
.pt-stat-sub { font-size: 12.5px; color: var(--gray); }

.pt-panel {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.pt-panel h2 { font-size: 18px; margin-bottom: 18px; }
.pt-panel-note { font-size: 12.5px; color: var(--gray); margin-top: 14px; }

.pt-bars { display: flex; flex-direction: column; gap: 12px; }
.pt-bar { display: grid; grid-template-columns: 100px 1fr 110px; align-items: center; gap: 14px; }
.pt-bar-lbl { font-size: 13.5px; font-weight: 500; }
.pt-bar-track { height: 9px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.pt-bar-track i { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.pt-bar-val { font-size: 13.5px; font-weight: 600; text-align: right; }

.pt-table-wrap { overflow-x: auto; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; }
.pt-table th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gray);
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-200);
}
.pt-table td { padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
.pt-td-tuyo { font-weight: 700; color: var(--success); }

/* ============================================================
   PERFIL
   ============================================================ */

.pt-perfil-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: start; }

#perfilForm label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 18px 0 7px;
}
#perfilForm label:first-of-type { margin-top: 0; }
#perfilForm label em { font-style: normal; font-weight: 400; color: var(--gray); }

#perfilForm input, #perfilForm textarea {
  width: 100%;
  font-size: 14.5px;
  padding: 10px 13px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  color: var(--navy);
  resize: vertical;
}
#perfilForm input:focus, #perfilForm textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.pt-counter { display: block; text-align: right; font-size: 12px; color: var(--gray); margin-top: 4px; }
.pt-hint { font-size: 12.5px; color: var(--gray); margin-top: 6px; }
.pt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.pt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-chips button {
  border: 1px solid var(--gray-300);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  transition: all .14s;
}
.pt-chips button:hover { border-color: var(--blue); color: var(--blue); }
.pt-chips button.on { background: var(--navy); border-color: var(--navy); color: var(--gold); font-weight: 600; }

#perfilBtn { margin-top: 24px; }
.pt-saved {
  display: inline-block;
  margin-left: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
}

/* Vista previa del perfil */
.pt-preview-col { position: sticky; top: calc(var(--top-h) + 24px); }
.pt-preview-title {
  font-size: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 12px;
}

.pt-card-perfil {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  text-align: center;
  margin-bottom: 20px;
}
.pt-card-perfil .pt-avatar { margin: 0 auto 14px; }
.pt-card-perfil h3 { font-size: 20px; margin-bottom: 4px; }
.pt-prev-titular { font-size: 13.5px; color: var(--gold); margin-bottom: 16px; }

.pt-prev-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 16px;
}
.pt-prev-stats b { display: block; font-size: 17px; color: #fff; }

.pt-prev-bio { font-size: 13.5px; color: rgba(255, 255, 255, .78); margin-bottom: 16px; text-align: left; }

.pt-prev-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px; }
.pt-prev-chips span {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .85);
}

.pt-prev-areas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

.pt-datos dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 13.5px; }
.pt-datos dt { color: var(--gray); }
.pt-datos dd { text-align: right; font-weight: 500; word-break: break-word; }

/* ============================================================
   CHAT CON EL CLIENTE
   ============================================================ */

.pt-chat {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--light);
  display: flex;
  flex-direction: column;
}

.pt-chat-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  height: var(--top-h);
  background: var(--navy);
  color: #fff;
  flex-shrink: 0;
}
.pt-chat-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pt-chat-who strong { font-size: 15.5px; }
.pt-chat-who span { font-size: 12px; color: rgba(255, 255, 255, .55); }

.pt-chat-timer {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #4ADE80;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}
.pt-chat-timer.urgente { color: #FCA5A5; background: rgba(220, 38, 38, .18); }
.pt-chat-timer.agotado { color: var(--gray-300); }

.pt-chat-head .pt-btn-outline { border-color: rgba(255, 255, 255, .28); color: #fff; }
.pt-chat-head .pt-btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.pt-chat-scroll { flex: 1; overflow-y: auto; padding: 24px 18px; }
#chatInner { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

.pt-msg {
  max-width: 76%;
  padding: 11px 15px;
  border-radius: var(--radius-lg);
  font-size: 14.5px;
  line-height: 1.5;
  position: relative;
  word-wrap: break-word;
}
.pt-msg.cliente {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-bottom-left-radius: 5px;
}
.pt-msg.abogado {
  align-self: flex-end;
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.pt-msg.sistema {
  align-self: center;
  max-width: 88%;
  background: var(--gray-100);
  color: var(--gray);
  font-size: 12.5px;
  text-align: center;
  border-radius: 999px;
  padding: 6px 16px;
}
.pt-msg-h {
  display: block;
  font-size: 10.5px;
  opacity: .6;
  margin-top: 4px;
  text-align: right;
}

.pt-chat-input {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 18px;
  background: #fff;
  border-top: 1px solid var(--gray-200);
}
.pt-chat-input textarea {
  flex: 1;
  max-width: 700px;
  margin: 0 auto;
  font-size: 15px;
  padding: 11px 15px;
  border: 1px solid var(--gray-300);
  border-radius: 22px;
  resize: none;
  max-height: 140px;
  color: var(--navy);
}
.pt-chat-input textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.pt-send {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .15s;
}
.pt-send:hover:not([disabled]) { background: var(--blue-dark); }
.pt-send[disabled] { opacity: .45; cursor: not-allowed; }
.pt-send svg { width: 19px; height: 19px; }

/* ---------- Modal ---------- */
.pt-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(13, 27, 42, .6);
  backdrop-filter: blur(3px);
}
.pt-modal-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}
.pt-modal-card h3 { font-size: 21px; margin-bottom: 8px; }
.pt-modal-card p { color: var(--gray); font-size: 14px; margin-bottom: 16px; }
.pt-modal-card textarea {
  width: 100%;
  font-size: 14.5px;
  padding: 12px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  resize: vertical;
  color: var(--navy);
}
.pt-modal-card textarea:focus { outline: none; border-color: var(--blue); }
.pt-modal-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---------- Toast ---------- */
.pt-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 24px);
  z-index: 90;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  max-width: calc(100vw - 40px);
  text-align: center;
}
.pt-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
  .pt-perfil-grid { grid-template-columns: 1fr; }
  .pt-preview-col { position: static; }
}

@media (max-width: 800px) {
  :root { --top-h: 60px; }

  .pt-top { padding: 0 14px; gap: 10px; }
  .pt-top-brand .pt-brand-name { display: none; }
  .pt-user-meta { display: none; }
  .pt-switch-label { display: none; }

  /* La navegación pasa a barra inferior fija */
  .pt-body { display: block; }
  .pt-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-right: none;
    border-top: 1px solid var(--gray-200);
    z-index: 50;
  }
  .pt-nav button {
    flex: 1;
    flex-direction: column;
    gap: 3px;
    padding: 7px 2px;
    font-size: 10.5px;
    border-radius: 10px;
  }
  .pt-nav button.on { background: transparent; color: var(--blue); }
  .pt-nav button.on svg { color: var(--blue); }
  .pt-badge {
    position: absolute;
    top: 2px;
    right: 50%;
    margin-right: -22px;
    margin-left: 0;
    font-size: 10px;
    min-width: 17px;
    height: 17px;
  }

  .pt-main { padding: 22px 16px 96px; }
  .pt-cards { grid-template-columns: 1fr; }
  .pt-view-head h1 { font-size: 23px; }
  .pt-bar { grid-template-columns: 78px 1fr 86px; gap: 10px; }
  .pt-row { grid-template-columns: 1fr; }
  .pt-panel { padding: 18px; }
  .pt-msg { max-width: 86%; }
  .pt-chat-head { padding: 0 12px; gap: 10px; }
  .pt-chat-who strong { font-size: 14px; }
  .pt-modal-acts { flex-direction: column-reverse; }
  .pt-modal-acts .pt-btn { width: 100%; }
}

@media (max-width: 420px) {
  .pt-auth-card { padding: 30px 22px 26px; }
  .pt-chat-timer { font-size: 15px; padding: 4px 10px; }
}

/* ============================================================
   CAMPAÑA SOLIDARIA — marcas de la cola abierta (16 ago 2026)
   Durante la campaña todos los abogados aprobados ven todos los
   casos, así que hay que decir de un vistazo cuál es de quién.
   ============================================================ */

.pt-marca {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pt-marca.tuya  { background: var(--blue-soft); color: var(--blue-dark); }
.pt-marca.nueva { background: var(--gold-soft); color: #8A6D1F; }
.pt-marca.otra  { background: var(--gray-100); color: var(--gray); }

/* Un caso de tu área se nota antes que los demás. */
.pt-card.nuevo.tuya { border-left: 3px solid var(--blue); }

/* Chat con mensajes del cliente sin leer. */
.pt-card.activo.pendiente { border-left: 3px solid var(--gold); }

/* El área que Lexia todavía no clasificó no tiene color propio en .pt-tag. */
.pt-tag.sin_clasificar { background: var(--gray-100); color: var(--gray); }

.pt-chat-timer[hidden] { display: none; }

/* ============================================================
   FICHA DEL CASO DENTRO DEL CHAT (16 ago 2026)
   Lo que Lexia le sacó a la persona antes de que entrara el
   abogado. Antes solo se veía en la tarjeta de la lista y
   desaparecia al abrir el chat.
   ============================================================ */

.pt-ficha {
  flex-shrink: 0;
  background: var(--blue-soft);
  border-bottom: 1px solid rgba(37, 99, 235, .18);
}

.pt-ficha-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 18px 9px;
  max-width: 780px;
  margin: 0 auto;
}
.pt-ficha-cab strong {
  display: block;
  font-size: 13.5px;
  color: var(--navy);
}
.pt-ficha-cab span {
  display: block;
  font-size: 12px;
  color: var(--gray);
  margin-top: 1px;
}

.pt-ficha-toggle {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-dark);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, .3);
  background: rgba(255, 255, 255, .7);
  white-space: nowrap;
}
.pt-ficha-toggle:hover { background: #fff; border-color: var(--blue); }

.pt-ficha-cuerpo {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 18px 14px;
  /* Techo con desplazamiento propio: un triaje largo no puede empujar el chat
     fuera de la pantalla, pero tampoco se debe recortar. */
  max-height: 230px;
  overflow-y: auto;
}
.pt-ficha.plegada .pt-ficha-cuerpo { display: none; }

.pt-turno { margin-bottom: 10px; }
.pt-turno:last-child { margin-bottom: 0; }
.pt-turno-quien {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.pt-turno p { font-size: 14px; line-height: 1.5; }

/* Lo que dijo la persona es lo que el abogado tiene que leer: va destacado. */
.pt-turno.persona .pt-turno-quien { color: var(--blue-dark); }
.pt-turno.persona p {
  color: var(--navy);
  font-weight: 500;
  background: #fff;
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  padding: 9px 12px;
}

/* Las preguntas de Lexia son contexto, no contenido: se apagan. */
.pt-turno.lexia .pt-turno-quien { color: var(--gray); }
.pt-turno.lexia p { color: var(--gray); padding: 0 2px; }

.pt-ficha-vacia {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gray);
  font-style: italic;
}

@media (max-width: 620px) {
  .pt-ficha-cuerpo { max-height: 170px; }
}

/* ---------- Postulaciones (vista de gerencia / owner) ---------- */

.pt-card.postulacion { border-left: 3px solid var(--gold); }

.pt-post-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 12px 0 4px;
  font-size: 13.5px;
}
.pt-post-datos dt { color: var(--gray); }
.pt-post-datos dd { color: var(--navy); word-break: break-word; }

.pt-post-acts { display: flex; gap: 9px; }

@media (max-width: 620px) {
  .pt-post-acts { width: 100%; }
  .pt-post-acts .pt-btn { flex: 1; }
}

/* Correo fijado desde el enlace de aprobación: se muestra, pero no se edita.
   Registrarse con otro distinto crearía una cuenta sin ficha de abogado. */
.pt-auth-form input.fijo {
  background: var(--gray-100);
  color: var(--gray);
  cursor: not-allowed;
}