/* ============================================================================
   portal.css — Portal USUARIO (cliente final)
   Layout minimalista sobre los tokens --jd-* de brand-tokens.css
   ============================================================================ */

* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--jd-navy); }

/* ---- Header ------------------------------------------------------------- */
.jd-header__inner {
  width: 100%; max-width: var(--jd-container); margin: 0 auto;
  padding: 0 var(--jd-sp-5); display: flex; align-items: center; gap: var(--jd-sp-5);
}
.jd-brand { text-decoration: none; font-family: var(--jd-font-display);
  font-weight: var(--jd-fw-bold); font-size: 1.25rem; letter-spacing: 0.02em; }
.jd-brand__j { color: var(--jd-cream); }
.jd-brand__d { color: var(--jd-gold); margin-left: 2px; }

.jd-nav { display: flex; gap: var(--jd-sp-5); margin-left: auto; }
.jd-nav a { color: var(--jd-cream-text); text-decoration: none; font-weight: var(--jd-fw-medium);
  font-size: var(--jd-fs-sm); transition: var(--jd-transition); }
.jd-nav a:hover { color: var(--jd-gold-light); }

.jd-user { display: flex; align-items: center; gap: var(--jd-sp-3); position: relative; }
.jd-user__name { color: var(--jd-cream-text); font-size: var(--jd-fs-sm); }
.jd-user a { color: var(--jd-gold-light); text-decoration: none; font-size: var(--jd-fs-sm); }

/* ---- Campana de alertas ------------------------------------------------- */
.jd-bell { position: relative; background: none; border: none; cursor: pointer;
  color: var(--jd-cream); font-size: 1.1rem; padding: var(--jd-sp-1); }
.jd-bell__count { position: absolute; top: -4px; right: -6px; background: var(--jd-danger);
  color: #fff; border-radius: var(--jd-radius-pill); font-size: 0.65rem; font-weight: var(--jd-fw-bold);
  min-width: 16px; height: 16px; line-height: 16px; text-align: center; padding: 0 3px; }
.jd-bell__panel { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-height: 60vh;
  overflow-y: auto; background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); box-shadow: var(--jd-shadow-lg); z-index: 50; padding: var(--jd-sp-2); }
.jd-alerta { padding: var(--jd-sp-3); border-bottom: 1px solid var(--jd-border); cursor: pointer; }
.jd-alerta:last-child { border-bottom: none; }
.jd-alerta:hover { background: var(--jd-surface-alt); }
.jd-alerta__titulo { font-weight: var(--jd-fw-semibold); color: var(--jd-navy); font-size: var(--jd-fs-sm); }
.jd-alerta__msg { font-size: var(--jd-fs-xs); color: var(--jd-muted); }
.jd-alerta--vacio { padding: var(--jd-sp-4); text-align: center; color: var(--jd-muted); font-size: var(--jd-fs-sm); }

/* ---- Main / contenedores ------------------------------------------------ */
.jd-main { max-width: var(--jd-container); margin: 0 auto; padding: var(--jd-sp-6) var(--jd-sp-5); }
.jd-narrow { max-width: var(--jd-container-narrow); margin: 0 auto; }
.jd-footer { text-align: center; padding: var(--jd-sp-5); color: var(--jd-muted);
  font-size: var(--jd-fs-xs); border-top: 1px solid var(--jd-border); background: var(--jd-surface-alt); }

h1 { font-size: var(--jd-fs-h1); margin: 0 0 var(--jd-sp-4); }
h2 { font-size: var(--jd-fs-h2); margin: var(--jd-sp-6) 0 var(--jd-sp-3); }
h3 { font-size: var(--jd-fs-h3); margin: 0 0 var(--jd-sp-2); }
.jd-muted { color: var(--jd-muted); }
.jd-lead { color: var(--jd-muted); font-size: 1.05rem; margin-bottom: var(--jd-sp-5); }

/* ---- Notificaciones ----------------------------------------------------- */
.jd-notif { max-width: var(--jd-container); margin: var(--jd-sp-4) auto 0; padding: var(--jd-sp-3) var(--jd-sp-5);
  border-radius: var(--jd-radius); font-size: var(--jd-fs-sm); border: 1px solid var(--jd-border); }
.jd-notif--exito { background: #E8F5E9; border-color: var(--jd-success); color: #1B5E20; }
.jd-notif--error { background: #FDECEA; border-color: var(--jd-danger); color: #7F0010; }
.jd-notif--advertencia { background: #FFF3E0; border-color: var(--jd-warning); color: #8C3000; }
.jd-notif--info { background: var(--jd-surface-alt); }

/* ---- Tarjetas / grid ---------------------------------------------------- */
.jd-grid { display: grid; gap: var(--jd-sp-5); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.jd-card { margin-bottom: var(--jd-sp-5); }
.jd-card h3 a { text-decoration: none; }
.jd-card__precio { font-weight: var(--jd-fw-bold); color: var(--jd-gold-dim); margin: var(--jd-sp-2) 0; }
.jd-card__meta { font-size: var(--jd-fs-xs); color: var(--jd-muted); }

/* ---- Tablas ------------------------------------------------------------- */
.jd-table { width: 100%; border-collapse: collapse; background: var(--jd-surface);
  border: 1px solid var(--jd-border); border-radius: var(--jd-radius); overflow: hidden; }
.jd-table th, .jd-table td { padding: var(--jd-sp-3) var(--jd-sp-4); text-align: left;
  border-bottom: 1px solid var(--jd-border); font-size: var(--jd-fs-sm); }
.jd-table th { background: var(--jd-surface-alt); color: var(--jd-navy); font-weight: var(--jd-fw-semibold); }
.jd-table tr:last-child td { border-bottom: none; }
.jd-table tbody tr:hover { background: var(--jd-surface-alt); }

/* ---- Formularios -------------------------------------------------------- */
.jd-form { display: flex; flex-direction: column; gap: var(--jd-sp-4); }
.jd-field { display: flex; flex-direction: column; gap: var(--jd-sp-1); }
.jd-field > label { font-weight: var(--jd-fw-medium); font-size: var(--jd-fs-sm); color: var(--jd-navy); }
.jd-field .req { color: var(--jd-danger); }
.jd-field input[type=text], .jd-field input[type=email], .jd-field input[type=password],
.jd-field input[type=number], .jd-field input[type=date], .jd-field input[type=tel],
.jd-field textarea, .jd-field select {
  padding: var(--jd-sp-3); border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm);
  font-family: inherit; font-size: var(--jd-fs-body); background: var(--jd-surface); width: 100%; }
.jd-field textarea { min-height: 110px; resize: vertical; }
.jd-field input:focus, .jd-field textarea:focus, .jd-field select:focus { outline: none; box-shadow: var(--jd-ring); border-color: var(--jd-gold); }
.jd-field--check { flex-direction: row; align-items: center; gap: var(--jd-sp-2); }
.jd-field__help { font-size: var(--jd-fs-xs); color: var(--jd-muted); }
.jd-form__actions { display: flex; gap: var(--jd-sp-3); margin-top: var(--jd-sp-3); }
.jd-doc-list { list-style: none; padding: 0; margin: 0; }
.jd-doc-list li { padding: var(--jd-sp-2) 0; border-bottom: 1px dashed var(--jd-border); font-size: var(--jd-fs-sm); }

/* ---- Linea de tiempo ---------------------------------------------------- */
.jd-timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--jd-border); }
.jd-timeline li { position: relative; padding: 0 0 var(--jd-sp-5) var(--jd-sp-5); }
.jd-timeline li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--jd-gold); border: 2px solid var(--jd-cream); }
.jd-timeline__fecha { font-size: var(--jd-fs-xs); color: var(--jd-muted); }
.jd-timeline__titulo { font-weight: var(--jd-fw-semibold); color: var(--jd-navy); }

/* ---- Mensajeria --------------------------------------------------------- */
.jd-chat { display: flex; flex-direction: column; gap: var(--jd-sp-3); max-height: 400px; overflow-y: auto;
  padding: var(--jd-sp-3); background: var(--jd-surface-alt); border-radius: var(--jd-radius); }
.jd-msg { max-width: 75%; padding: var(--jd-sp-2) var(--jd-sp-3); border-radius: var(--jd-radius);
  background: var(--jd-surface); border: 1px solid var(--jd-border); }
.jd-msg--propio { align-self: flex-end; background: #FBF3DF; border-color: var(--jd-gold); }
.jd-msg__autor { font-size: var(--jd-fs-xs); font-weight: var(--jd-fw-semibold); color: var(--jd-navy); }
.jd-msg__fecha { font-size: var(--jd-fs-xs); color: var(--jd-muted); }
.jd-chat-form { display: flex; gap: var(--jd-sp-2); margin-top: var(--jd-sp-3); }
.jd-chat-form input { flex: 1; padding: var(--jd-sp-3); border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); }

/* ---- Estado de pago ----------------------------------------------------- */
.jd-result { text-align: center; padding: var(--jd-sp-7) var(--jd-sp-5); }
.jd-result--ok h1 { color: var(--jd-success); }
.jd-result--fail h1 { color: var(--jd-danger); }

.jd-field-error { color: var(--jd-danger); font-size: var(--jd-fs-sm); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 768px) {
  .jd-header__inner { gap: var(--jd-sp-3); padding: 0 var(--jd-sp-4); }
  .jd-nav { gap: var(--jd-sp-3); }
  .jd-user__name { display: none; }
  .jd-main { padding: var(--jd-sp-5) var(--jd-sp-4); }
}
@media (max-width: 480px) {
  .jd-nav { font-size: var(--jd-fs-xs); }
  .jd-bell__panel { width: calc(100vw - 32px); }
  .jd-table th:nth-child(n+4), .jd-table td:nth-child(n+4) { display: none; }
}