/* public/styles/components.css — Bloque 20: componentes reutilizables.
   Todo bajo .mediador-app. Incluye las clases NUEVAS del design system
   (.btn, .badge, .alert, .toast, .tabs, .modal, .table, .skeleton...) y
   redefine los selectores YA usados en mediador.js/portal.js/lawyer-portal.js
   (button.primary/.ghost, .pill, .card, .mediation-row, .status-history-item,
   input/select/textarea, .stat, .back-link...) para que todo el HTML ya
   generado adopte el sistema nuevo sin tener que reescribir cada template. */

/* ================= BUTTONS ================= */
.mediador-app .btn,
.mediador-app .btn-primary,
.mediador-app .btn-secondary,
.mediador-app .btn-danger,
.mediador-app .btn-ghost,
.mediador-app button.primary,
.mediador-app button.ghost,
.mediador-app button.danger{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-4);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-family: var(--font-family); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}
.mediador-app .btn:disabled, .mediador-app button:disabled{ opacity: .55; cursor: not-allowed; }

.mediador-app .btn-primary,
.mediador-app button.primary{
  background: var(--color-brand); color: var(--color-sidebar); border-color: var(--color-brand);
}
.mediador-app .btn-primary:hover:not(:disabled),
.mediador-app button.primary:hover:not(:disabled){ background: var(--color-brand-dark); border-color: var(--color-brand-dark); }

.mediador-app .btn-secondary,
.mediador-app button.ghost{
  background: var(--color-surface); color: var(--color-text); border-color: var(--color-border);
}
.mediador-app .btn-secondary:hover:not(:disabled),
.mediador-app button.ghost:hover:not(:disabled){ background: var(--color-surface-2); border-color: var(--color-text-muted); }

.mediador-app .btn-danger,
.mediador-app button.danger{ background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.mediador-app .btn-danger:hover:not(:disabled),
.mediador-app button.danger:hover:not(:disabled){ filter: brightness(.92); }

.mediador-app .btn-ghost{ background: transparent; color: var(--color-text-secondary); border-color: transparent; }
.mediador-app .btn-ghost:hover:not(:disabled){ background: var(--color-surface-2); color: var(--color-text); }

.mediador-app .btn-sm, .mediador-app button.btn-sm{ height: 32px; padding: 0 var(--space-3); font-size: var(--font-size-sm); border-radius: var(--radius-sm); }

/* Bloque 37 — CTA "Nueva mediación" del dashboard: única acción que
   necesita romper el sistema flat de acá arriba a propósito. Es lo primero
   que ve un mediador al entrar, así que se trata como un botón físico de
   verdad (efecto 3D con "canto" de color que se hunde al presionar), no
   una tarjeta más entre las demás. */
.mediador-app .hero-create-btn{
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; height: 58px; margin-bottom: var(--space-6);
  background: linear-gradient(180deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
  color: #fff; border: none; border-radius: var(--radius-lg);
  font-family: var(--font-family); font-size: 17px; font-weight: var(--font-weight-semibold);
  cursor: pointer;
  box-shadow: 0 5px 0 #0C685F, 0 10px 22px rgba(21,155,145,.38);
  transform: translateY(0);
  transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
}
.mediador-app .hero-create-btn:hover{ filter: brightness(1.05); }
.mediador-app .hero-create-btn:active{
  transform: translateY(4px);
  box-shadow: 0 1px 0 #0C685F, 0 3px 10px rgba(21,155,145,.32);
}
.mediador-app .hero-create-btn svg{ width: 20px; height: 20px; flex-shrink: 0; }
.mediador-app .btn-lg, .mediador-app a.btn-lg{ height: 44px; padding: 0 var(--space-5); font-size: var(--font-size-body); }

/* botón "cargando…" — spinner inline, sin bloquear toda la pantalla */
.mediador-app .btn.is-loading, .mediador-app button.is-loading{ position: relative; color: transparent !important; pointer-events: none; }
.mediador-app .btn.is-loading::after, .mediador-app button.is-loading::after{
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; animation: mediador-spin .6s linear infinite;
}
.mediador-app .btn-secondary.is-loading::after, .mediador-app button.ghost.is-loading::after{ border-color: rgba(23,33,36,.25); border-top-color: var(--color-text); }

/* ================= INPUTS ================= */
.mediador-app input:not([type="checkbox"]):not([type="radio"]),
.mediador-app select,
.mediador-app textarea,
.mediador-app .input, .mediador-app .select, .mediador-app .textarea{
  width: 100%; min-height: 42px; background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 9px 12px; font-family: var(--font-family); font-size: var(--font-size-md);
  margin-bottom: var(--space-3); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.mediador-app textarea{ min-height: 84px; resize: vertical; }
.mediador-app input::placeholder, .mediador-app textarea::placeholder{ color: var(--color-text-muted); }
.mediador-app input:focus, .mediador-app select:focus, .mediador-app textarea:focus{
  outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(34,199,184,.12);
}
.mediador-app input.field-error, .mediador-app select.field-error, .mediador-app textarea.field-error{ border-color: var(--color-danger); }
.mediador-app input[type="checkbox"], .mediador-app input[type="radio"]{ width: auto; accent-color: var(--color-brand-dark); }
.mediador-app input:disabled, .mediador-app select:disabled, .mediador-app textarea:disabled{ background: var(--color-surface-2); color: var(--color-text-muted); cursor: not-allowed; }

/* ================= CARDS ================= */
.mediador-app .card{
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4);
  scroll-margin-top: 96px;
}
.mediador-app .card-flush{ padding: 0; overflow: hidden; }

/* Bloque 64 — vista semana de Agenda: un día sin audiencias no necesita
   la misma card grande que uno con audiencias cargadas (ver mediador.js,
   sección Agenda) — colapsa a una fila angosta en vez de ocupar el mismo
   alto que un día lleno. */
.mediador-app .card.agenda-day-empty{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-5); margin-bottom: var(--space-2);
}
.mediador-app .card.agenda-day-empty h2{ font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin: 0; }
.mediador-app .card.agenda-day-empty .empty-hint{ margin: 0; padding: 0; white-space: nowrap; }

/* Bloque 65 — vista mes de Agenda: grilla real de calendario en desktop
   (ver buildAgendaMonthGrid en mediador.js), oculta en mobile (ver
   breakpoint 767px más abajo) donde en cambio se muestra
   .agenda-month-list — la misma lista de cards que ya usa semana,
   reusada 1:1 (buildAgendaDayList), porque 7 columnas no entran en
   375px y no hay ningún "colapsa columnas" que sirva para días de la
   semana (no se puede sacar ninguno). */
.mediador-app .agenda-month-list{ display: none; }
.mediador-app .agenda-month-weekdays{
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  text-align: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary); padding: 6px 0; background: var(--color-surface);
}
.mediador-app .agenda-month-grid-wrap{ margin-bottom: var(--space-4); }
.mediador-app .agenda-month-grid{
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--color-border-light); border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg); overflow: hidden;
}
.mediador-app .month-cell{
  background: var(--color-surface); min-height: 92px; padding: 6px 8px;
  cursor: pointer; display: flex; flex-direction: column; gap: 3px;
}
.mediador-app .month-cell:hover{ background: var(--color-surface-2); }
.mediador-app .month-cell-num{ font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.mediador-app .month-cell-outside{ opacity: .45; }
.mediador-app .month-cell-today .month-cell-num{
  background: var(--color-brand); color: var(--color-sidebar);
  width: 20px; height: 20px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
}
.mediador-app .month-hearing-chip{
  font-size: 10.5px; line-height: 1.3; background: var(--color-brand-soft); color: var(--color-text);
  border-radius: var(--radius-sm); padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mediador-app .month-hearing-more{ font-size: 10.5px; color: var(--color-text-muted); padding: 0 5px; }
@media (max-width: 767px){
  /* una grilla de 7 columnas no entra en 375px — en mobile se ve la
     lista (mismas cards que semana), nunca la grilla */
  .mediador-app .agenda-month-grid-wrap{ display: none; }
  .mediador-app .agenda-month-list{ display: block; }
}

/* card destacada — "Próxima acción" en el dashboard y el expediente */
.mediador-app .card-highlight{
  background: var(--color-brand-soft); border: 1px solid var(--color-brand);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4);
}
.mediador-app .card-highlight.is-overdue{ background: var(--color-danger-soft); border-color: var(--color-danger); }

/* filas de lista (mediaciones, partes, abogados, documentos...) — el
   equivalente de "tabla" de esta app: sin <table>, cards con filas. */
.mediador-app .mediation-row, .mediador-app .status-history-item, .mediador-app .alert-row{
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-light); cursor: default;
}
.mediador-app .mediation-row, .mediador-app .alert-row{ cursor: pointer; transition: background-color var(--transition-fast); }
.mediador-app .mediation-row:hover, .mediador-app .alert-row:hover{ background: var(--color-surface-2); margin: 0 calc(-1 * var(--space-3)); padding-left: var(--space-3); padding-right: var(--space-3); border-radius: var(--radius-sm); }
.mediador-app .mediation-row:last-child, .mediador-app .status-history-item:last-child, .mediador-app .alert-row:last-child{ border-bottom: none; }
.mediador-app .mediation-row .top{ display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.mediador-app .mediation-row .code{ font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }

/* Bloque 30 — [Chat] [Historial] [Abrir] reusado en Mis Mediaciones,
   Comunicaciones, Agenda, Dashboard. */
.mediador-app .quick-actions{ display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.mediador-app .quick-actions button{ flex: 1; min-width: 80px; }

.mediador-app .stat-row{ display: flex; gap: var(--space-6); flex-wrap: wrap; }
.mediador-app .stat{ font-size: var(--font-size-xxl); font-weight: var(--font-weight-bold); color: var(--color-text); }
.mediador-app .stat-label{ font-size: var(--font-size-xs); color: var(--color-text-secondary); }

.mediador-app .back-link{ font-size: var(--font-size-sm); color: var(--color-brand-dark); cursor: pointer; margin-bottom: var(--space-4); display: inline-flex; align-items: center; gap: 4px; font-weight: var(--font-weight-medium); }
.mediador-app .back-link:hover{ text-decoration: underline; }

/* ================= BADGES (compat: .pill) ================= */
.mediador-app .badge, .mediador-app .pill{
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  padding: 4px 9px; border-radius: var(--radius-pill); text-transform: none; line-height: 1.3;
}
.mediador-app .badge-success, .mediador-app .pill.calm{ background: var(--color-brand-soft); color: var(--color-brand-dark); }
.mediador-app .badge-warning, .mediador-app .pill.warn{ background: var(--color-warning-soft); color: var(--color-warning); }
.mediador-app .badge-danger, .mediador-app .pill.danger{ background: var(--color-danger-soft); color: var(--color-danger); }
.mediador-app .badge-info{ background: var(--color-info-soft); color: var(--color-info); }
.mediador-app .badge-neutral{ background: var(--color-surface-2); color: var(--color-text-secondary); }
.mediador-app .badge-brand{ background: var(--color-brand); color: var(--color-sidebar); }

/* ================= ALERTS / TOASTS ================= */
.mediador-app .alert{
  display: flex; align-items: flex-start; gap: var(--space-3);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-md); margin-bottom: var(--space-3); border: 1px solid transparent;
}
.mediador-app .alert-success{ background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success); }
.mediador-app .alert-warning{ background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning); }
.mediador-app .alert-danger{ background: var(--color-danger-soft); color: var(--color-danger); border-color: var(--color-danger); }
.mediador-app .alert-info{ background: var(--color-info-soft); color: var(--color-info); border-color: var(--color-info); }

.mediador-app .toast-stack{
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: var(--space-2);
  width: min(360px, calc(100vw - 32px)); pointer-events: none;
}
.mediador-app .toast{
  pointer-events: auto; background: var(--color-sidebar); color: var(--color-text-on-dark);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--font-size-md);
  box-shadow: var(--shadow-md); display: flex; align-items: center; gap: var(--space-2);
  opacity: 0; transform: translateY(6px); transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.mediador-app .toast.show{ opacity: 1; transform: none; }
.mediador-app .toast.toast-danger{ background: var(--color-danger); }
.mediador-app .toast.toast-success{ background: var(--color-success); }

/* ================= TABS ================= */
.mediador-app .tabs-bar{
  display: flex; gap: var(--space-5); border-bottom: 1px solid var(--color-border);
  overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.mediador-app .tabs-bar::-webkit-scrollbar{ display: none; }
.mediador-app .tab-link{
  flex-shrink: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary); text-decoration: none; padding: var(--space-3) 2px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast); cursor: pointer;
}
.mediador-app .tab-link:hover{ color: var(--color-text); }
.mediador-app .tab-link.active{ color: var(--color-brand-dark); border-bottom-color: var(--color-brand); font-weight: var(--font-weight-semibold); }

/* subnav del expediente — usa el mismo lenguaje visual que .tabs-bar.
   top:64px (no 0): la topbar (layout.css) ya es sticky a top:0 con
   z-index:20 y 64px de alto — con top:0 acá, el subnav quedaba pegado
   DEBAJO de la topbar al scrollear (mismo top, menor z-index), invisible
   del todo. Con el offset correcto queda siempre visible justo debajo,
   que es lo que mantiene a la vista en qué sección del expediente estás
   sin tener que volver arriba. */
.mediador-app .detail-subnav{
  display: flex; gap: var(--space-5); overflow-x: auto; padding: 0 2px var(--space-3);
  margin-bottom: var(--space-2); position: sticky; top: 64px; z-index: 12; background: var(--color-bg);
  border-bottom: 1px solid var(--color-border); -ms-overflow-style: none; scrollbar-width: none;
}
.mediador-app .detail-subnav::-webkit-scrollbar{ display: none; }
/* Bloque 66 — esta barra scrollea horizontal sin scrollbar visible (a
   propósito, mismo lenguaje que .tabs-bar), pero eso dejaba los últimos
   tabs (Plazos, Timeline) completamente escondidos sin ninguna pista de
   que había más — había que adivinar que se podía arrastrar. Un degradé
   fijo en el borde derecho al menos avisa que el contenido continúa. */
.mediador-app .detail-subnav-wrap{ position: relative; }
.mediador-app .detail-subnav-wrap::after{
  content: ''; position: absolute; top: 0; right: 0; bottom: var(--space-3); width: 32px;
  background: linear-gradient(to right, transparent, var(--color-bg));
  pointer-events: none;
}
/* código del expediente, fijo a la izquierda del subnav sticky — para no
   perder de vista EN QUÉ expediente estás al scrollear varias pantallas
   hacia abajo (Compromisos, Timeline, Administración quedan lejos del
   encabezado que sí lo mostraba). */
.mediador-app .detail-subnav-code{
  flex-shrink: 0; font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary); padding: var(--space-3) var(--space-3) var(--space-3) 2px;
  margin-right: var(--space-2); border-right: 1px solid var(--color-border); white-space: nowrap;
}
.mediador-app .detail-subnav a{
  flex-shrink: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-text-secondary);
  text-decoration: none; white-space: nowrap; padding: var(--space-3) 2px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mediador-app .detail-subnav a:hover{ color: var(--color-text); }
.mediador-app .detail-subnav a.active{ color: var(--color-brand-dark); border-bottom-color: var(--color-brand); font-weight: var(--font-weight-semibold); }

/* ---- barra de secciones del expediente: versión celular y mejoras ---- */
/* el selector "Secciones" y su panel solo existen en celular */
.mediador-app .detail-subnav-toggle,
.mediador-app .detail-subnav-panel{ display: none; }
.mediador-app .detail-subnav a{ border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.mediador-app .detail-subnav a:focus-visible,
.mediador-app .detail-subnav-toggle:focus-visible,
.mediador-app .detail-subnav-panel a:focus-visible{ outline: 2px solid var(--color-brand); outline-offset: 2px; }

@media (max-width: 767px){
  .mediador-app .detail-subnav-wrap{ position: sticky; top: 64px; z-index: 12; background: var(--color-bg); margin: 0 calc(var(--space-4) * -1) var(--space-3); padding: 0 var(--space-4); border-bottom: 1px solid var(--color-border); }
  .mediador-app .detail-subnav-wrap::after{ display: none; }
  /* en celular la barra deslizable se reemplaza por el selector */
  .mediador-app .detail-subnav{ display: none; }
  .mediador-app .detail-subnav-toggle{
    display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 48px;
    background: none; border: none; padding: var(--space-2) 0; cursor: pointer; font: inherit; color: var(--color-text); text-align: left;
  }
  .mediador-app .detail-subnav-toggle-code{ font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); padding-right: var(--space-3); border-right: 1px solid var(--color-border); white-space: nowrap; }
  .mediador-app .detail-subnav-toggle-current{ flex: 1; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-brand-dark); }
  .mediador-app .detail-subnav-toggle-caret{ transition: transform var(--transition-fast); color: var(--color-text-secondary); }
  .mediador-app .detail-subnav-toggle[aria-expanded="true"] .detail-subnav-toggle-caret{ transform: rotate(180deg); }
  .mediador-app .detail-subnav-panel:not([hidden]){
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
    padding: var(--space-3) 0 var(--space-4); max-height: calc(100vh - 64px - 56px - 24px); overflow-y: auto;
  }
  .mediador-app .detail-subnav-panel a{
    display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
    color: var(--color-text); text-decoration: none; font-size: var(--font-size-md); font-weight: var(--font-weight-medium);
  }
  .mediador-app .detail-subnav-panel a.active{ border-color: var(--color-brand); color: var(--color-brand-dark); font-weight: var(--font-weight-semibold); background: var(--color-brand-soft); }
}
/* al saltar a una sección, que no quede tapada por la barra fija (todos los anchos) */
.mediador-app [id^="section-"]{ scroll-margin-top: 128px; }
@media (min-width: 768px){
  /* escritorio: lo que entra se ve en la barra; el resto va al menú "Más".
     Nada queda cortado ni oculto fuera del borde. */
  .mediador-app .detail-subnav{ gap: 4px 6px; overflow: visible; flex-wrap: wrap; align-items: center; padding-bottom: var(--space-2); }
  .mediador-app .detail-subnav a{ padding: 6px 12px; margin-bottom: 0; border-bottom: 0; border-radius: 999px; font-size: var(--font-size-sm, 13.5px); }
  .mediador-app .detail-subnav a.active{ background: var(--color-brand-soft); border-bottom: 0; }
  .mediador-app .detail-subnav-code{ padding: 6px 12px 6px 2px; }
  .mediador-app .detail-subnav a.is-overflow{ display: none; }
  .mediador-app .detail-subnav-wrap::after{ display: none; }
  .mediador-app .detail-subnav-more{
    flex-shrink: 0; margin-left: auto; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: var(--space-3) var(--space-2); font: inherit; font-size: var(--font-size-md); font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary); cursor: pointer; white-space: nowrap;
  }
  .mediador-app .detail-subnav-more:hover{ color: var(--color-text); }
  .mediador-app .detail-subnav-more.active{ color: var(--color-brand-dark); border-bottom-color: var(--color-brand); font-weight: var(--font-weight-semibold); }
  .mediador-app .detail-subnav-more[hidden]{ display: none; }
  /* el panel pasa a ser un menú desplegable bajo el botón, con solo lo que no entró */
  .mediador-app .detail-subnav-wrap{ position: sticky; top: 64px; z-index: 12; background: var(--color-bg); }
  .mediador-app .detail-subnav-wrap .detail-subnav{ position: static; margin-bottom: 0; }
  .mediador-app .detail-subnav-panel:not([hidden]){
    display: flex; flex-direction: column; position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px; z-index: 30;
    padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  }
  .mediador-app .detail-subnav-panel a{
    padding: var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none;
    font-size: var(--font-size-md); font-weight: var(--font-weight-medium);
  }
  .mediador-app .detail-subnav-panel a:hover{ background: var(--color-surface-2); }
  .mediador-app .detail-subnav-panel a.active{ color: var(--color-brand-dark); font-weight: var(--font-weight-semibold); background: var(--color-brand-soft); }
  .mediador-app .detail-subnav-panel a.is-in-bar{ display: none; }
}

/* ================= MODALS ================= */
.mediador-app .modal-overlay{
  position: fixed; inset: 0; background: rgba(15,21,23,.55); z-index: 60;
  display: none; align-items: center; justify-content: center; padding: var(--space-5);
}
.mediador-app .modal-overlay.show{ display: flex; }
.mediador-app .modal{
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto;
}
.mediador-app .modal-header{ display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border-light); }
.mediador-app .modal-header h3{ margin: 0; }
.mediador-app .modal-close{ background: none; border: none; color: var(--color-text-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; }
.mediador-app .modal-body{ padding: var(--space-6); }
.mediador-app .modal-footer{ display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border-light); }

/* ================= EMPTY STATES ================= */
.mediador-app .empty-state{ text-align: center; padding: var(--space-8) var(--space-5); color: var(--color-text-secondary); }
.mediador-app .empty-state .empty-state-mark{ width: 40px; height: 40px; margin: 0 auto var(--space-4); opacity: .35; }
.mediador-app .empty-state h3{ color: var(--color-text); margin-bottom: var(--space-2); }
.mediador-app .empty-state p{ font-size: var(--font-size-md); max-width: 360px; margin: 0 auto var(--space-4); }

/* ================= LOADING ================= */
@keyframes mediador-spin{ to{ transform: rotate(360deg); } }
.mediador-app .spinner{
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-border);
  border-top-color: var(--color-brand-dark); animation: mediador-spin .6s linear infinite; display: inline-block;
}
@keyframes mediador-skeleton{ 0%{ background-position: -200px 0; } 100%{ background-position: calc(200px + 100%) 0; } }
.mediador-app .skeleton{
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-border-light) 37%, var(--color-surface-2) 63%);
  background-size: 400% 100%; animation: mediador-skeleton 1.4s ease infinite;
  border-radius: var(--radius-sm); display: block;
}
.mediador-app .skeleton-line{ height: 12px; margin-bottom: var(--space-2); }
.mediador-app .skeleton-line.w-60{ width: 60%; }
.mediador-app .skeleton-line.w-40{ width: 40%; }

/* ================= ONBOARDING (mini-ventanas de primer uso) ================= */
/* el div del backdrop lleva .mediador-app Y .onboarding-backdrop en el
   MISMO elemento (es un contenedor de nivel superior, como #app o
   #login-gate, no un descendiente de ellos) — por eso acá el selector es
   compuesto (.a.b), no descendiente (.a .b): con descendiente nunca
   matchea contra sí mismo, y el backdrop queda sin position:fixed ni
   centrado (bug real: el diálogo aparecía en el flujo normal de la
   página, pegado a la izquierda, en vez de superpuesto y centrado). */
.mediador-app.onboarding-backdrop{ position: fixed; inset: 0; background: rgba(15,21,23,.55); z-index: 60; display: none; align-items: center; justify-content: center; padding: var(--space-5); }
.mediador-app.onboarding-backdrop.show{ display: flex; }
.mediador-app .onboarding-card{ background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-6); max-width: 340px; width: 100%; box-shadow: var(--shadow-md); }
.mediador-app .onboarding-card .ob-step{ font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-3); }
.mediador-app .onboarding-card h3{ margin: 0 0 var(--space-2); }
.mediador-app .onboarding-card p{ font-size: var(--font-size-md); color: var(--color-text-secondary); line-height: 1.5; margin: 0 0 var(--space-5); }
.mediador-app .onboarding-card .ob-dots{ display: flex; gap: 5px; justify-content: center; margin-bottom: var(--space-4); }
.mediador-app .onboarding-card .ob-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--color-border); }
.mediador-app .onboarding-card .ob-dot.active{ background: var(--color-brand); }
.mediador-app .onboarding-card .ob-actions{ display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.mediador-app .onboarding-card .ob-skip{ font-size: var(--font-size-sm); color: var(--color-text-muted); cursor: pointer; background: none; border: none; padding: 6px 2px; }

/* ================= ACCOUNT MENU (topbar) ================= */
.mediador-app .account-btn{
  display: flex; align-items: center; gap: 7px; background: none; border: 1px solid transparent;
  border-radius: var(--radius-pill); padding: 3px 8px 3px 3px; cursor: pointer; font-family: var(--font-family);
  color: var(--color-text-secondary); -webkit-tap-highlight-color: transparent;
}
.mediador-app .account-btn:hover, .mediador-app .account-btn[aria-expanded="true"]{ border-color: var(--color-border); background: var(--color-surface-2); }
.mediador-app .account-btn .avatar{ width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; }
.mediador-app .account-btn-initial{ width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-brand-soft); color: var(--color-brand-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); flex-shrink: 0; }
.mediador-app .account-btn .account-name{ font-size: var(--font-size-sm); color: var(--color-text); font-weight: var(--font-weight-medium); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.mediador-app .account-btn .caret{ width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--color-text-muted); transition: transform var(--transition-fast); }
.mediador-app .account-btn[aria-expanded="true"] .caret{ transform: rotate(180deg); }

.mediador-app .account-menu{
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; max-width: min(280px, calc(100vw - 28px));
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 6px;
  box-shadow: var(--shadow-md); z-index: 35; display: none;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease;
}
.mediador-app .account-menu.mounted{ display: block; }
.mediador-app .account-menu.open{ opacity: 1; transform: none; }
.mediador-app .account-menu-backdrop{ position: fixed; inset: 0; z-index: 15; display: none; }
.mediador-app .account-menu-backdrop.mounted{ display: block; }
.mediador-app .account-menu-head{ padding: 9px 11px 10px; border-bottom: 1px solid var(--color-border-light); margin-bottom: 6px; }
.mediador-app .account-menu-head .who{ font-size: var(--font-size-md); color: var(--color-text); font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mediador-app .account-menu-head .sub{ font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 3px; }
.mediador-app .account-menu button.row{
  display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none;
  color: var(--color-danger); font-family: var(--font-family); font-size: var(--font-size-md); text-align: left;
  padding: 9px 11px; border-radius: var(--radius-sm); cursor: pointer;
}
.mediador-app .account-menu button.row:hover{ background: var(--color-danger-soft); }
.mediador-app .account-menu button.row svg{ width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* el botón de cuenta vive en el pie de la sidebar (fondo oscuro) — mismo
   componente, paleta invertida para legibilidad; el menú desplegable sigue
   siendo claro, pero se abre hacia ARRIBA porque el botón está al fondo. */
.mediador-app .sidebar-footer{ position: relative; }
.mediador-app .sidebar-footer .account-btn{ width: 100%; color: var(--color-text-on-dark-muted); padding: 6px 8px; border-radius: var(--radius-md); }
.mediador-app .sidebar-footer .account-btn:hover, .mediador-app .sidebar-footer .account-btn[aria-expanded="true"]{ background: var(--color-sidebar-hover); border-color: transparent; }
.mediador-app .sidebar-footer .account-btn .account-name{ color: var(--color-text-on-dark); max-width: 130px; }
.mediador-app .sidebar-footer .account-menu{ top: auto; bottom: calc(100% + 8px); left: 0; right: 0; transform-origin: bottom left; width: 100%; }

/* ================= BLOQUE 38 — DASHBOARD REDISEÑADO =================
   Componentes nuevos: encabezado con acciones, KPIs, lista de atención
   con badge de prioridad, audiencias con recuadro de fecha, tabla de
   últimas mediaciones (+ versión tarjeta para mobile), anillo de estado,
   fila de comunicaciones/tareas/documentos y bloque "Próximamente". */

.mediador-app .dash-header{ display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.mediador-app .dash-header h1{ margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -.015em; }
.mediador-app .dash-header p{ margin: 6px 0 0; font-size: 15px; color: var(--color-text-secondary); }
.mediador-app .dash-header-actions{ display: flex; gap: var(--space-3); flex-wrap: wrap; }
.mediador-app .dash-continue-btn{
  display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-4);
  border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-size: 14px; font-weight: var(--font-weight-semibold); text-decoration: none; white-space: nowrap;
}
.mediador-app .dash-continue-btn svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mediador-app .dash-continue-btn:hover{ background: var(--color-surface-2); }

.mediador-app .kpi-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-5); }
.mediador-app .kpi-card{
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
  text-decoration: none; color: var(--color-text);
}
a.kpi-card{ cursor: pointer; }
a.kpi-card:hover{ border-color: var(--color-text-muted); }
.mediador-app .kpi-card-head{ display: flex; align-items: center; gap: 12px; }
.mediador-app .kpi-icon{ width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mediador-app .kpi-icon svg{ width: 20px; height: 20px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mediador-app .kpi-icon.calm{ background: var(--color-brand-soft); }
.mediador-app .kpi-icon.calm svg{ stroke: var(--color-brand-dark); }
.mediador-app .kpi-icon.blue{ background: #EDF4FD; }
.mediador-app .kpi-icon.blue svg{ stroke: #2F5FA3; }
.mediador-app .kpi-icon.warn{ background: var(--color-warning-soft); }
.mediador-app .kpi-icon.warn svg{ stroke: #7A5310; }
.mediador-app .kpi-icon.green{ background: #E8F7F0; }
.mediador-app .kpi-icon.green svg{ stroke: #166B47; }
.mediador-app .kpi-card-head span{ font-size: 14px; font-weight: var(--font-weight-semibold); color: #3E4B4E; }
.mediador-app .kpi-value-row{ display: flex; justify-content: space-between; align-items: flex-end; }
.mediador-app .kpi-value{ font-size: 34px; font-weight: var(--font-weight-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.mediador-app .kpi-sub{ font-size: 13px; color: var(--color-text-secondary); }
.mediador-app .kpi-sub.empty{ font-style: italic; }

.mediador-app .dash-row-7-5{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); margin-bottom: var(--space-5); }
.mediador-app .dash-row-8-4{ display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-5); margin-bottom: var(--space-5); }
.mediador-app .dash-row-3{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-5); }
.mediador-app .dash-row-final{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--space-5); }
.mediador-app .dash-section{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; min-width: 0; }
.mediador-app .dash-section-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); gap: var(--space-3); }
.mediador-app .dash-section-head h2{ margin: 0; font-size: 18px; font-weight: var(--font-weight-bold); }
.mediador-app .dash-section-head .count{ font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); white-space: nowrap; }
.mediador-app .dash-section-head a{ font-size: 13px; font-weight: var(--font-weight-semibold); text-decoration: none; color: var(--color-brand-dark); white-space: nowrap; }

/* ---- centro de atención ---- */
.mediador-app .attn-row{ display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-light); }
.mediador-app .attn-row:last-child{ border-bottom: none; padding-bottom: 0; }
.mediador-app .attn-badge{ width: 84px; flex-shrink: 0; text-align: center; font-size: 12px; font-weight: var(--font-weight-semibold); padding: 4px 0; border-radius: var(--radius-pill); }
.mediador-app .attn-badge.p-vencido{ color: #A63636; background: var(--color-danger-soft); }
.mediador-app .attn-badge.p-critico{ color: #7A5310; background: var(--color-warning-soft); }
.mediador-app .attn-badge.p-proximo{ color: #2F5FA3; background: #EDF4FD; }
.mediador-app .attn-badge.p-pendiente{ color: #4A5658; background: #E4EAEB; }
.mediador-app .attn-body{ flex: 1; min-width: 0; }
.mediador-app .attn-body .mcode{ font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.mediador-app .attn-body .title{ font-size: 15px; font-weight: var(--font-weight-semibold); margin-top: 2px; }
.mediador-app .attn-body .detail{ font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.mediador-app .attn-action{ flex-shrink: 0; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--color-text); cursor: pointer; }
.mediador-app .attn-action:hover{ background: var(--color-surface-2); }

/* ---- próximas audiencias ---- */
.mediador-app .hearing-row{ display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-light); }
.mediador-app .hearing-row:last-child{ border-bottom: none; padding-bottom: 0; }
.mediador-app .hearing-date-box{ width: 52px; height: 56px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--color-bg); border: 1px solid var(--color-border-light); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mediador-app .hearing-date-box .d{ font-size: 19px; font-weight: var(--font-weight-bold); line-height: 1; }
.mediador-app .hearing-date-box .m{ font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); margin-top: 3px; }
.mediador-app .hearing-body{ flex: 1; min-width: 0; }
.mediador-app .hearing-body .who{ font-size: 15px; font-weight: var(--font-weight-semibold); }
.mediador-app .hearing-body .meta{ font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.mediador-app .hearing-confirm-badge{ flex-shrink: 0; font-size: 12px; font-weight: var(--font-weight-semibold); padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.mediador-app .hearing-confirm-badge.confirmada{ color: #166B47; background: #E8F7F0; }
.mediador-app .hearing-confirm-badge.sin_confirmar{ color: #7A5310; background: var(--color-warning-soft); }
.mediador-app .hearing-confirm-badge.propuesta_enviada{ color: #2F5FA3; background: #EDF4FD; }

/* ---- tabla de últimas mediaciones ---- */
.mediador-app .dash-table{ width: 100%; border-collapse: collapse; font-size: 14px; }
.mediador-app .dash-table thead tr{ background: var(--color-bg); }
.mediador-app .dash-table th{ text-align: left; font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); padding: 10px 12px; }
.mediador-app .dash-table td{ padding: 14px 12px; border-bottom: 1px solid var(--color-border-light); }
.mediador-app .dash-table tr:last-child td{ border-bottom: none; }
.mediador-app .dash-table .open-link{ display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--color-text-secondary); }
.mediador-app .dash-table .open-link:hover{ background: var(--color-surface-2); }
.mediador-app .dash-table .open-link svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mediador-app .dash-table .next-undefined{ color: #7A5310; font-weight: var(--font-weight-semibold); }
.mediador-app .status-badge{ font-size: 12px; font-weight: var(--font-weight-semibold); padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; display: inline-block; }
.mediador-app .status-badge.st-neutral{ color: #4A5658; background: #E4EAEB; }
.mediador-app .status-badge.st-blue{ color: #2F5FA3; background: #EDF4FD; }
.mediador-app .status-badge.st-calm{ color: #0E5F58; background: var(--color-brand-soft); }
.mediador-app .status-badge.st-green{ color: #166B47; background: #E8F7F0; }
.mediador-app .status-badge.st-danger{ color: #A63636; background: var(--color-danger-soft); }

.mediador-app .dash-table-mobile{ display: none; flex-direction: column; gap: var(--space-3); }
.mediador-app .dash-table-mobile-card{ border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--space-3); text-decoration: none; color: var(--color-text); display: block; }
.mediador-app .dash-table-mobile-card .row1{ display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: 4px; }
.mediador-app .dash-table-mobile-card .code{ font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.mediador-app .dash-table-mobile-card .parties{ font-size: 14.5px; font-weight: var(--font-weight-semibold); }
.mediador-app .dash-table-mobile-card .meta{ font-size: 12.5px; color: var(--color-text-secondary); margin-top: 4px; }

/* ---- estado de tus mediaciones (anillo SVG) ---- */
.mediador-app .ring-wrap{ display: flex; justify-content: center; position: relative; margin-bottom: var(--space-5); }
.mediador-app .ring-center{ position: absolute; top: 0; left: 0; right: 0; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mediador-app .ring-center .n{ font-size: 28px; font-weight: var(--font-weight-bold); line-height: 1; }
.mediador-app .ring-center .l{ font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }
.mediador-app .ring-legend{ display: flex; flex-direction: column; gap: 10px; }
.mediador-app .ring-legend-row{ display: flex; align-items: center; gap: 10px; font-size: 14px; }
.mediador-app .ring-legend-dot{ width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.mediador-app .ring-legend-row .lab{ flex: 1; }
.mediador-app .ring-legend-row .val{ font-weight: var(--font-weight-semibold); }

/* ---- comunicaciones / tareas / documentos (fila de 3) ---- */
.mediador-app .comm-item{ display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-border-light); text-decoration: none; color: var(--color-text); }
.mediador-app .comm-item:last-child{ border-bottom: none; padding-bottom: 0; }
.mediador-app .comm-avatar{ width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--color-brand-soft); color: var(--color-brand-dark); font-size: 13px; font-weight: var(--font-weight-bold); display: flex; align-items: center; justify-content: center; }
.mediador-app .comm-body{ flex: 1; min-width: 0; }
.mediador-app .comm-body .row1{ display: flex; justify-content: space-between; gap: 8px; }
.mediador-app .comm-body .name{ font-size: 14px; font-weight: var(--font-weight-bold); }
.mediador-app .comm-body .when{ font-size: 12px; color: var(--color-text-secondary); flex-shrink: 0; }
.mediador-app .comm-body .preview{ font-size: 13px; color: #3E4B4E; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mediador-app .task-item{ display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-border-light); }
.mediador-app .task-item:last-child{ border-bottom: none; padding-bottom: 0; }
.mediador-app .task-item .title{ font-size: 14px; font-weight: var(--font-weight-semibold); }
.mediador-app .task-item .sub{ font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }

.mediador-app .doc-item{ display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--color-border-light); text-decoration: none; color: var(--color-text); }
.mediador-app .doc-item:last-child{ border-bottom: none; padding-bottom: 0; }
.mediador-app .doc-item svg{ width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--color-text-secondary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mediador-app .doc-item .title{ font-size: 14px; font-weight: var(--font-weight-semibold); }
.mediador-app .doc-item .sub{ font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }

/* ---- fila final: Puente Connect / Qué pasó / Asistente ---- */
.mediador-app .connect-card{ background: var(--color-sidebar); border-radius: var(--radius-lg); padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); }
.mediador-app .connect-card-head{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mediador-app .connect-icon{ width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--color-sidebar-active); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mediador-app .connect-icon svg{ width: 21px; height: 21px; fill: none; stroke: var(--color-brand); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mediador-app .connect-card-head h2{ margin: 0; font-size: 19px; font-weight: var(--font-weight-bold); color: var(--color-text-on-dark); }
.mediador-app .connect-soon-pill{ font-size: 12px; font-weight: var(--font-weight-bold); color: var(--color-sidebar); background: var(--color-brand); padding: 3px 10px; border-radius: var(--radius-pill); }
.mediador-app .connect-card p{ margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-text-on-dark-muted); }
.mediador-app .connect-card p.small{ font-size: 13px; }

.mediador-app .whatpassed-item{ display: flex; gap: 12px; font-size: 13px; padding: 6px 0; }
.mediador-app .whatpassed-item .t{ width: 74px; flex-shrink: 0; white-space: nowrap; color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }

/* ---- panel de la campana (topbar-bell-panel): versión compacta de
   attn-row, sin botón de acción — ver renderBellAttentionItem. ---- */
.mediador-app .bell-item{ display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm); text-decoration: none; color: inherit; }
.mediador-app .bell-item:hover{ background: var(--color-surface-2); }
.mediador-app .bell-item .attn-badge{ width: 64px; font-size: 11px; padding: 3px 0; }
.mediador-app .bell-item-body{ flex: 1; min-width: 0; }
.mediador-app .bell-item-body .mcode{ font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.mediador-app .bell-item-body .title{ font-size: 13px; font-weight: var(--font-weight-medium); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- estados vacíos por sección (usuario nuevo) ---- */
.mediador-app .dash-empty{ padding: var(--space-5) 0; text-align: center; }
.mediador-app .dash-empty p{ margin: 0 0 var(--space-3); color: var(--color-text-secondary); font-size: 14px; }

/* ---- Herramientas legales (Bloque 39) ---- */
/* auto-fit (no auto-fill): con pocas tarjetas visibles (limpieza post-
   auditoría, ver mediador.js:visibleLegalTools), auto-fill reservaba
   columnas vacías igual y las tarjetas quedaban angostas compartiendo
   ancho con "huecos" invisibles — auto-fit los colapsa y deja que las
   tarjetas que sí están ocupen el espacio real. */
.mediador-app .legal-tools-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.mediador-app .legal-tool-card{
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer;
}
.mediador-app .legal-tool-card:hover{ border-color: var(--color-brand); box-shadow: var(--shadow-sm); }
.mediador-app .legal-tool-card.disabled{ cursor: default; opacity: .6; }
.mediador-app .legal-tool-card.disabled:hover{ border-color: var(--color-border); box-shadow: none; }
.mediador-app .legal-tool-icon{
  flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-brand-soft); color: var(--color-brand-dark);
  display: flex; align-items: center; justify-content: center;
}
.mediador-app .legal-tool-icon svg{ width: 20px; height: 20px; }
.mediador-app .legal-tool-title{ font-size: 14.5px; font-weight: var(--font-weight-semibold); }
.mediador-app .legal-tool-soon{ font-size: 11px; font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.mediador-app .legal-tool-desc{ font-size: 13px; color: var(--color-text-secondary); margin-top: 3px; }

/* ---- Auditor de expediente ---- */
.mediador-app .audit-check-row{ display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-light); }
.mediador-app .audit-check-row:last-child{ border-bottom: none; }
.mediador-app .audit-check-row .status-badge{ flex-shrink: 0; width: 108px; text-align: center; }
.mediador-app .audit-check-body{ flex: 1; min-width: 0; }
.mediador-app .audit-check-label{ font-size: 14px; font-weight: var(--font-weight-medium); }
.mediador-app .audit-check-detail{ font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; }
@media (max-width: 767px){
  .mediador-app .audit-check-row{ flex-wrap: wrap; }
  .mediador-app .audit-check-row .status-badge{ width: auto; }
}

/* ---- responsive del dashboard ---- */
@media (max-width: 1023px){
  .mediador-app .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mediador-app .dash-row-7-5, .mediador-app .dash-row-8-4, .mediador-app .dash-row-3, .mediador-app .dash-row-final{ grid-template-columns: 1fr; }
}
@media (max-width: 767px){
  .mediador-app .dash-header{ flex-direction: column; align-items: stretch; }
  .mediador-app .dash-header-actions{ flex-direction: column; align-items: stretch; }
  .mediador-app .dash-header-actions .dash-continue-btn, .mediador-app .dash-header-actions .hero-create-btn{ width: 100%; }
  .mediador-app .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .mediador-app .kpi-card{ padding: var(--space-4); }
  .mediador-app .kpi-value{ font-size: 26px; }
  .mediador-app .dash-table{ display: none; }
  .mediador-app .dash-table-mobile{ display: flex; }
  .mediador-app .dash-section{ padding: var(--space-4); }

  /* orden pedido por la spec: encabezado, KPIs, atención, audiencias,
     comunicaciones, el resto — todo el main pasa a flex column con
     `order` explícito por sección. `order` en flexbox solo compara
     hermanos DENTRO del mismo contenedor flex: dash-resto y dash-row-3
     tienen que ser `display:contents` (no contenedores propios) para que
     dash-comunicaciones (adentro de dash-row-3, adentro de dash-resto)
     termine siendo hermano directo de dash-atencion/dash-audiencias y su
     order:5 realmente lo saque antes que "el resto". */
  .mediador-app .page-content.wide{ display: flex; flex-direction: column; gap: var(--space-5); }
  .mediador-app .dash-header{ order: 1; }
  .mediador-app .kpi-grid{ order: 2; }
  .mediador-app .dash-atencion{ order: 3; }
  .mediador-app .dash-audiencias{ order: 4; }
  .mediador-app .dash-comunicaciones{ order: 5; }
  .mediador-app .dash-resto{ display: contents; }
  .mediador-app .dash-resto-item, .mediador-app .dash-row-8-4, .mediador-app .dash-row-final{ order: 6; }
  .mediador-app .dash-row-7-5, .mediador-app .dash-row-3{ display: contents; }

  /* attn-row/hearing-row: en desktop son 3 columnas (badge/date-box +
     cuerpo + acción/confirmación); a 375px esas columnas fijas dejan el
     cuerpo demasiado angosto (el título queda de una palabra por línea)
     y el botón de acción centrado verticalmente en medio del texto
     envuelto. Se apilan verticalmente. */
  .mediador-app .attn-row{ flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .mediador-app .attn-action{ width: 100%; }
  .mediador-app .hearing-row{ flex-wrap: wrap; }
  .mediador-app .hearing-body{ min-width: 140px; }
}

/* ================= AGENDA · CALENDARIO ================= */
.mediador-app .cal-layout{ display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-4); align-items: start; }
@media (min-width: 980px){
  .mediador-app .cal-layout{ grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); }
}
.mediador-app .cal-layout .card{ margin-bottom: 0; }
.mediador-app .cal-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.mediador-app .cal-title{ margin: 0; font-size: var(--font-size-xl); }
.mediador-app .cal-nav{ display: flex; align-items: center; gap: 6px; }
.mediador-app .cal-nav button{
  min-width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
}
.mediador-app .cal-nav button:hover{ background: var(--color-surface-2); }
.mediador-app .cal-nav .cal-today-btn{ width: auto; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.mediador-app .cal-weekdays, .mediador-app .cal-grid{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mediador-app .cal-weekdays{ border-bottom: 1px solid var(--color-border-light); padding-bottom: 6px; margin-bottom: 4px; }
.mediador-app .cal-weekdays div{ text-align: center; font-size: var(--font-size-xs); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.mediador-app .cal-day{
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  background: none; border: none; padding: 4px 0 6px; min-height: 52px; cursor: pointer; font: inherit; color: var(--color-text);
  border-radius: var(--radius-md);
}
.mediador-app .cal-day:hover .cal-num{ background: var(--color-surface-2); }
.mediador-app .cal-day:focus-visible{ outline: 2px solid var(--color-brand); outline-offset: 1px; }
.mediador-app .cal-num{
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-size: var(--font-size-md); font-weight: var(--font-weight-medium);
}
.mediador-app .cal-outside{ opacity: .38; }
.mediador-app .cal-today .cal-num{ background: var(--color-brand-soft); color: var(--color-brand-dark); font-weight: var(--font-weight-bold); }
.mediador-app .cal-selected .cal-num{ background: var(--color-brand); color: #fff; font-weight: var(--font-weight-bold); }
.mediador-app .cal-dots{ display: flex; gap: 3px; height: 6px; justify-content: center; }
.mediador-app .cal-dots i{ width: 6px; height: 6px; border-radius: 50%; display: block; }
.mediador-app .cal-legend{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-light); }
.mediador-app .cal-legend-item{
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); background: var(--color-surface);
  border-radius: var(--radius-pill); padding: 4px 10px; font: inherit; font-size: var(--font-size-xs); color: var(--color-text); cursor: pointer;
}
.mediador-app .cal-legend-item i{ width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mediador-app .cal-legend-item.off{ opacity: .45; text-decoration: line-through; }
.mediador-app .cal-upcoming h2{ margin-bottom: var(--space-3); }
.mediador-app .cal-item{
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; width: 100%;
  text-align: left; background: none; border: none; border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-3) 0; cursor: pointer; font: inherit; color: var(--color-text);
}
.mediador-app .cal-item:last-child{ border-bottom: none; }
.mediador-app .cal-item:hover{ background: var(--color-surface-2); }
.mediador-app .cal-item-icon{ width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mediador-app .cal-item-icon svg{ width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mediador-app .cal-item-body{ display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.mediador-app .cal-item-when{ font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.mediador-app .cal-item-title{ font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mediador-app .cal-item-sub{ font-size: var(--font-size-sm); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mediador-app .cal-pill{ font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); padding: 5px 10px; border-radius: var(--radius-md); white-space: nowrap; }
.mediador-app .cal-pill.tone-ok, .mediador-app .cal-pill.tone-today{ background: #E3F6EC; color: #137A52; }
.mediador-app .cal-pill.tone-soon{ background: #EFEAFE; color: #5B3FD0; }
.mediador-app .cal-pill.tone-pending{ background: #FFF1D6; color: #A86500; }
.mediador-app .cal-pill.tone-late{ background: #FDE7E7; color: #B42318; }
.mediador-app .cal-pill.tone-done{ background: var(--color-surface-2); color: var(--color-text-secondary); }
.mediador-app .cal-views{ display: flex; gap: 6px; margin-bottom: var(--space-3); }
.mediador-app .cal-views .ghost{ flex: 1; min-width: 0; padding-left: 4px; padding-right: 4px; }
.mediador-app .cal-views .ghost.on{ background: var(--color-brand-soft); color: var(--color-brand-dark); border-color: var(--color-brand); }
@media (max-width: 767px){
  .mediador-app .cal-title{ font-size: var(--font-size-lg); }
  .mediador-app .cal-views .ghost{ font-size: var(--font-size-sm); }
  .mediador-app .cal-item{ grid-template-columns: 40px minmax(0, 1fr); }
  .mediador-app .cal-item-icon{ width: 40px; height: 40px; }
  .mediador-app .cal-pill{ grid-column: 2; justify-self: start; }
  .mediador-app .cal-item-title{ white-space: normal; }
}

/* ---- menú inferior (solo celular) + bandeja de comunicaciones ---- */
.mediador-app .bottom-nav{ display: none; }
.mediador-app .inbox-avatar{
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-brand-soft); color: var(--color-brand-dark); font-weight: 700; font-size: 13px;
}
.mediador-app .inbox-row.unread{ border-left: 3px solid var(--color-brand); padding-left: 8px; }
.mediador-app .inbox-row.unread .code + div{ color: var(--color-text); font-weight: 600; }
@media (max-width: 767px){
  .mediador-app .bottom-nav{
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--color-surface); border-top: 1px solid var(--color-border-light);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(0,0,0,.06);
  }
  .mediador-app .bottom-nav button{
    position: relative; flex: 1; min-width: 0; background: none; border: 0; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px;
    font-size: 10.5px; color: var(--color-text-muted, #6b7280); cursor: pointer;
  }
  .mediador-app .bottom-nav button svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mediador-app .bottom-nav button.active{ color: var(--color-brand-dark); font-weight: 600; }
  .mediador-app .bottom-nav button.active svg{ stroke-width: 2.2; }
  .mediador-app .bottom-nav-badge{
    position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--danger, #d64545); color: #fff; font-size: 10px; font-style: normal;
    line-height: 16px; text-align: center;
  }
  .mediador-app .bottom-nav-badge[hidden]{ display: none; }
  /* que el contenido no quede tapado por la barra */
  .mediador-app .page-content{ padding-bottom: calc(var(--space-9) + 56px + env(safe-area-inset-bottom, 0px)); }
  .mediador-app .toast-stack{ bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .mediador-app .inbox-open-label{ display: none; }
}

/* gestos en el chat: el botón "Volver" solo en celular (el gesto lo acompaña) */
.mediador-app .conversation-back{ display: none; }
@media (max-width: 767px){
  .mediador-app .conversation-back{ display: inline-block; }
  .mediador-app #conversation-messages{ max-height: 55vh !important; touch-action: pan-y; }
}

/* panel personalizable: la grilla se adapta a la cantidad de indicadores elegidos */
@media (min-width: 1081px){
  .mediador-app .kpi-grid.kpi-n3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mediador-app .kpi-grid.kpi-n5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mediador-app .kpi-grid.kpi-n6{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Configuración: navegación a la izquierda y la sección elegida a la derecha */
.mediador-app .settings-layout{ display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--space-6); align-items: start; margin-top: var(--space-4); }
.mediador-app .settings-nav{ position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; }
.mediador-app .settings-nav-group{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted, #6b7280); margin: 14px 0 4px 10px; }
.mediador-app .settings-nav-group:first-child{ margin-top: 0; }
.mediador-app .settings-nav-item{ text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 10px; font: inherit; font-size: 14px; color: var(--color-text); cursor: pointer; }
.mediador-app .settings-nav-item:hover{ background: var(--color-surface-2, rgba(0,0,0,.04)); }
.mediador-app .settings-nav-item.is-active{ background: var(--color-brand-soft); color: var(--color-brand-dark); font-weight: 600; }
.mediador-app .settings-content > .back-link,
.mediador-app .settings-content .back-link{ display: none; }
@media (max-width: 860px){
  .mediador-app .settings-layout{ grid-template-columns: 1fr; gap: var(--space-4); }
  .mediador-app .settings-nav{ position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border-light); }
  .mediador-app .settings-nav-group{ display: none; }
  .mediador-app .settings-nav-item{ flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--color-border-light); }
}

/* ficha del expediente por pestañas: una sección a la vez */
.mediador-app .detail-pane{ display: none; }
.mediador-app .detail-pane.is-active{ display: block; }

/* prueba gratuita: chip del encabezado + aviso (no invasivo) */
.mediador-app .trial-chip{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--color-brand); background:var(--color-brand-soft); color:var(--color-brand); border-radius:999px; padding:5px 12px; font-size:12px; cursor:pointer; line-height:1.2; }
.mediador-app .trial-chip strong{ letter-spacing:.06em; font-size:11px; }
.mediador-app .trial-chip span{ color:var(--color-text); }
.mediador-app .trial-chip.is-urgent{ border-color:#c0392b; background:#fdecea; color:#c0392b; }
.mediador-app .trial-chip[hidden], .mediador-app .trial-banner[hidden]{ display:none; }
.mediador-app .trial-banner{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:10px 16px 0; padding:10px 14px; border-radius:12px; border:1px solid var(--color-border-light); background:var(--color-surface); font-size:13.5px; }
.mediador-app .trial-banner.is-urgent{ border-color:#e0b04b; background:#fff7e0; }
.mediador-app .trial-banner.is-ended{ border-color:#c0392b; background:#fdecea; }
@media (max-width: 640px){ .mediador-app .trial-chip span{ display:none; } .mediador-app .trial-banner{ margin:8px 12px 0; } }

/* ===== tarjeta de expediente en la lista ===== */
.mediador-app .med-card{ background:var(--color-surface); border:1px solid var(--color-border-light); border-radius:18px; padding:16px; margin:12px 0; cursor:pointer; box-shadow:0 1px 2px rgba(20,30,60,.04); }
.mediador-app .med-card:hover{ box-shadow:0 4px 14px rgba(20,30,60,.08); }
.mediador-app .med-card-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mediador-app .med-card-code{ font-family:var(--font-mono); font-weight:700; font-size:14px; }
.mediador-app .med-card-title{ margin:8px 0 2px; font-size:18px; line-height:1.3; }
.mediador-app .med-card-sub{ font-size:13px; color:var(--text-dim); margin-top:2px; }
.mediador-app .med-card-meta{ display:flex; gap:6px 14px; flex-wrap:wrap; font-size:12.5px; color:var(--text-faint); margin:10px 0; }
.mediador-app .med-card-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.mediador-app .med-chip{ display:inline-flex; align-items:center; padding:7px 12px; border:1px solid var(--color-border-light); border-radius:12px; font-size:13px; background:var(--color-bg); color:var(--text-dim); }
.mediador-app .med-card-next{ font-size:13px; color:var(--text-dim); margin-top:10px; }
.mediador-app .med-card-open{ width:100%; margin-top:12px; min-height:46px; font-size:15px; }
.mediador-app .med-card-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.mediador-app .med-card-actions button{ width:100%; min-height:42px; background:var(--color-surface-2, #f1f2f6); border:0; border-radius:12px; }

/* ===== cabecera del expediente ===== */
.mediador-app .exp-hero{ background:linear-gradient(160deg,#1b2440,#26325a); color:#fff; border-radius:22px; padding:18px; margin:10px 0 0; box-shadow:0 6px 20px rgba(20,30,60,.18); }
.mediador-app .exp-hero-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.mediador-app .exp-hero-badge{ display:inline-block; padding:6px 12px; border-radius:10px; background:rgba(255,255,255,.14); font-size:13px; }
.mediador-app .exp-hero-badge.is-warn{ background:rgba(255,193,7,.25); }
.mediador-app .exp-hero-code{ font-size:clamp(34px,9vw,46px); font-weight:800; letter-spacing:-.02em; margin:10px 0 2px; line-height:1.05; }
.mediador-app .exp-hero-sub{ font-size:13.5px; opacity:.75; margin-top:2px; }
.mediador-app .exp-hero-title{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; font-size:18px; opacity:.95; margin-top:6px; }
.mediador-app .exp-hero-edit{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.mediador-app .exp-hero-edit svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.mediador-app .exp-hero-state{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:rgba(255,255,255,.1); border-radius:16px; padding:12px 14px; margin-top:14px; }
.mediador-app .exp-hero-state small{ display:block; font-size:12.5px; opacity:.7; }
.mediador-app .exp-hero-state strong{ font-size:22px; }
.mediador-app .exp-hero-state span{ opacity:.7; font-size:13px; }
.mediador-app .exp-hero-state button{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:10px 14px; font-weight:600; cursor:pointer; }
.mediador-app .exp-hero-actions{ display:grid; gap:10px; margin-top:12px; }
.mediador-app .exp-hero-actions > button, .mediador-app .exp-hero-mini button{ min-height:50px; border-radius:14px; border:0; font:inherit; font-weight:700; font-size:16px; cursor:pointer; }
.mediador-app .exp-hero-actions .is-white{ background:#fff; color:#1b2440; }
.mediador-app .exp-hero-actions .is-glass{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.2); }
.mediador-app .exp-hero-mini{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (min-width:768px){ .mediador-app .exp-hero-actions{ grid-template-columns:repeat(3,1fr); } .mediador-app .exp-hero-mini{ grid-column:1 / -1; } .mediador-app .exp-hero{ padding:22px 26px; } }

/* menú de secciones del expediente en celular: pestañas siempre visibles y deslizables */
@media (max-width: 767px){
  .mediador-app .detail-subnav-toggle, .mediador-app .detail-subnav-panel{ display:none !important; }
  .mediador-app .detail-subnav{ display:flex !important; overflow-x:auto; flex-wrap:nowrap; gap:8px; padding:8px 2px 10px; border-bottom:0; position:static; margin:0; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .mediador-app .detail-subnav::-webkit-scrollbar{ display:none; }
  .mediador-app .detail-subnav-code{ display:none; }
  .mediador-app .detail-subnav a{ flex:0 0 auto; padding:9px 15px; margin:0; border:1px solid var(--color-border-light); border-radius:999px; background:var(--color-surface); font-size:14px; border-bottom-width:1px; }
  .mediador-app .detail-subnav a.active{ background:var(--color-brand-soft); border-color:var(--color-brand); color:var(--color-brand-dark); }
  .mediador-app .detail-subnav-wrap{ top:56px; border-bottom:1px solid var(--color-border); }
}

/* resumen del plan dentro del perfil */
.mediador-app .plan-summary{ background:var(--color-surface-2, #f1f2f6); border-radius:18px; padding:18px; }
.mediador-app .plan-summary-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.mediador-app .plan-summary-name{ font-size:26px; font-weight:800; letter-spacing:-.01em; }
.mediador-app .plan-summary-price{ color:var(--text-dim); margin:2px 0 14px; font-size:15px; }
.mediador-app .plan-summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.mediador-app .plan-summary-grid small{ display:block; color:var(--text-faint); font-size:13px; margin-bottom:2px; }
.mediador-app .plan-summary-grid strong{ font-size:16px; }
.mediador-app .plan-summary-bar{ height:8px; border-radius:999px; background:var(--color-border-light); margin-top:16px; overflow:hidden; }
.mediador-app .plan-summary-bar span{ display:block; height:100%; border-radius:999px; background:#2b3a67; }

/* cabecera del expediente en el color de marca (el mismo de los botones principales) */
.mediador-app .exp-hero{ background: var(--color-brand); color: var(--color-sidebar); box-shadow: 0 6px 20px rgba(21,155,145,.28); }
.mediador-app .exp-hero-badge{ background: rgba(255,255,255,.35); }
.mediador-app .exp-hero-badge.is-warn{ background: rgba(255,255,255,.7); }
.mediador-app .exp-hero-sub, .mediador-app .exp-hero-title, .mediador-app .exp-hero-state small, .mediador-app .exp-hero-state span{ opacity: .8; }
.mediador-app .exp-hero-edit{ background: rgba(255,255,255,.35); border-color: rgba(11,31,28,.18); color: var(--color-sidebar); }
.mediador-app .exp-hero-state{ background: rgba(255,255,255,.35); }
.mediador-app .exp-hero-state button{ background: rgba(255,255,255,.55); color: var(--color-sidebar); border-color: rgba(11,31,28,.15); }
.mediador-app .exp-hero-actions .is-white{ background: #fff; color: var(--color-sidebar); }
.mediador-app .exp-hero-actions .is-glass{ background: rgba(255,255,255,.35); color: var(--color-sidebar); border: 1px solid rgba(11,31,28,.15); }

/* ---- ofertas de plan (upsell) ---- */
.mediador-app .upsell-banner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; padding:14px 16px; border:1px solid var(--color-brand); border-radius:var(--radius-xl); background:var(--color-brand-soft); }
.mediador-app .upsell-banner.sev-high{ border-color:#E0A526; background:#FFF6DC; }
.mediador-app .upsell-body{ flex:1 1 320px; min-width:0; }
.mediador-app .upsell-title{ font-weight:700; font-size:15px; color:var(--color-text); }
.mediador-app .upsell-text{ margin-top:2px; font-size:13.5px; color:var(--color-text-secondary); line-height:1.45; }
.mediador-app .upsell-price{ display:inline-block; margin-left:4px; padding:1px 8px; border-radius:999px; background:var(--color-surface); border:1px solid var(--color-border-light); font-weight:600; color:var(--color-text); white-space:nowrap; }
.mediador-app .upsell-meter{ margin-top:8px; height:6px; border-radius:99px; background:rgba(0,0,0,.08); overflow:hidden; max-width:320px; }
.mediador-app .upsell-meter i{ display:block; height:100%; background:var(--color-brand-dark); border-radius:99px; }
.mediador-app .upsell-banner.sev-high .upsell-meter i{ background:#D9622B; }
.mediador-app .upsell-actions{ display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:767px){ .mediador-app .upsell-actions{ width:100%; } .mediador-app .upsell-actions button{ flex:1; } }