/* ============================================================
 * Embarques RD — Panel v2 (rediseno estilo SmartMoving)
 *
 * Generado a partir de panel.css del diseno, acotando cada regla
 * bajo .erd-pu2 para que no afecte al tema de WordPress.
 * NO editar a mano: se regenera desde diseno-panel-v4/panel.css.
 *
 * El idioma pasa de <html lang> a .erd-pu2[data-lang="es|en"].
 * ============================================================ */

/* ==========================================================================
   Embarques RD — panel interno
   Hoja de estilos única compartida por todas las pantallas.
   Todos los colores y medidas base viven en :root.
   ========================================================================== */

.erd-pu2 {
  /* --- Identidad -------------------------------------------------------- */
  --navy:        #1e3a5f;
  --navy-d:      #16293f;
  --navy-l:      #2c4f7c;
  --navy-900:    #0f2036;
  --gold:        #d4a94a;
  --gold-soft:   #f6edd6;

  /* --- Superficies ------------------------------------------------------ */
  --surface:     #f4f6fb;
  --card:        #ffffff;
  --border:      #e6ebf2;
  --row-line:    #eef2f7;
  --head-bg:     #f7f9fc;
  --empty-bg:    #f4f6fa;

  /* --- Texto ------------------------------------------------------------ */
  --text:        #33404f;
  --text-strong: #1c2836;
  --muted:       #646c74;   /* 4.6:1 sobre --surface y sobre --empty-bg */
  --muted-2:     #626e7e;   /* 4.6:1 sobre --surface, no solo sobre blanco */
  --icon-soft:   #a8b2be;   /* solo iconos decorativos, nunca texto */

  /* --- Acción ----------------------------------------------------------- */
  --green:       #2d8341;   /* 4.74:1 con texto blanco (medido) */
  --green-d:     #26773a;
  --danger:      #c0392b;
  --link:        #2c4f7c;

  /* --- Estados de orden (fijos: los usa la app móvil) ------------------- */
  --st-pend-bg:  #fef3c7;  --st-pend-tx:  #92400e;
  --st-proc-bg:  #dbeafe;  --st-proc-tx:  #1e40af;
  --st-tran-bg:  #e0e7ff;  --st-tran-tx:  #3730a3;
  --st-entr-bg:  #dcfce7;  --st-entr-tx:  #166534;
  --st-comp-bg:  #dcfce7;  --st-comp-tx:  #166534;
  --st-canc-bg:  #e5e7eb;  --st-canc-tx:  #4b5563;
  /* Estados de pago */
  --pay-ok-bg:   #dcfce7;  --pay-ok-tx:   #166534;
  --pay-no-bg:   #fee2e2;  --pay-no-tx:   #991b1b;
  --pay-par-bg:  #fef3c7;  --pay-par-tx:  #92400e;

  /* --- Geometría -------------------------------------------------------- */
  --rail-w:      70px;
  --topbar-h:    42px;
  --r-btn:       3px;
  --r-card:      4px;
  --pad-card:    18px;
  --shadow-card: 0 0 10px rgba(0, 0, 0, .1);
  --shadow-bar:  0 0 2px rgba(0, 0, 0, .15);
  --shadow-pop:  0 4px 18px rgba(15, 32, 54, .18);

  /* --- Tipografía ------------------------------------------------------- */
  /* Source Sans 3 la sirve el propio sitio (no CDN). Reserva del sistema debajo. */
  --font: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-base: 13px;
}

/* ==========================================================================
   Base
   ========================================================================== */

.erd-pu2, .erd-pu2 * { box-sizing: border-box; }

.erd-pu2, .erd-pu2 { margin: 0; padding: 0; }

.erd-pu2 {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.erd-pu2 a { color: var(--link); text-decoration: none; }
.erd-pu2 a:hover { color: var(--navy); text-decoration: underline; }

.erd-pu2 button { font-family: inherit; font-size: inherit; color: inherit; }

.erd-pu2 h1, .erd-pu2 h2, .erd-pu2 h3, .erd-pu2 h4, .erd-pu2 h5, .erd-pu2 h6 { margin: 0; font-weight: 600; }

.erd-pu2 table { border-collapse: collapse; width: 100%; }

.erd-pu2 ::-webkit-scrollbar { width: 9px; height: 9px; }
.erd-pu2 ::-webkit-scrollbar-thumb { background: #c8d2df; border-radius: 9px; }
.erd-pu2 ::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   Idioma: cada etiqueta existe dos veces y CSS enseña una
   ========================================================================== */

.erd-pu2 .lang-en { display: none; }
.erd-pu2[data-lang="en"] .lang-es { display: none; }
.erd-pu2[data-lang="en"] .lang-en { display: inline; }

/* Texto para lectores de pantalla */
/* Las celdas confinan a los .visually-hidden que llevan dentro: sin un ancestro
   posicionado, esos spans se colocan en su posicion estatica —que en una tabla
   ancha con scroll cae fuera de la pantalla— y estiran el documento. */
.erd-pu2 .panel-table th, .erd-pu2 .panel-table td { position: relative; }

.erd-pu2 .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Foco visible propio para todo lo interactivo */
.erd-pu2 a:focus-visible, .erd-pu2 button:focus-visible, .erd-pu2 input:focus-visible, .erd-pu2 select:focus-visible, .erd-pu2 textarea:focus-visible, .erd-pu2 [tabindex]:focus-visible {
  outline: 2px solid var(--navy-l);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   Barra superior
   ========================================================================== */

.erd-pu2 .panel-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px 0 0;
  background: var(--card);
  box-shadow: var(--shadow-bar);
  z-index: 70;
}

.erd-pu2 .panel-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px 0 13px;
  flex: none;
}

.erd-pu2 .panel-brand-mark {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--border);
  padding: 3px;
  display: grid;
  place-items: center;
}
.erd-pu2 .panel-brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

.erd-pu2 .panel-brand-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--navy);
  white-space: nowrap;
}

.erd-pu2 .panel-topbar-spacer { flex: 1 1 auto; }

.erd-pu2 .panel-hamburger {
  display: none;
  width: 32px; height: 30px;
  border: 0; background: transparent;
  color: var(--navy);
  font-size: 16px;
  cursor: pointer;
  border-radius: var(--r-btn);
}
.erd-pu2 .panel-hamburger:hover { background: #eef2f8; }

.erd-pu2 .panel-tool {
  position: relative;
  width: 30px; height: 30px;
  border: 0; background: transparent;
  color: #5a6675;
  font-size: 14.5px;
  border-radius: var(--r-btn);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.erd-pu2 .panel-tool:hover { background: #eef2f8; color: var(--navy); }
.erd-pu2 .panel-tool.is-open { background: var(--navy); color: #fff; }

.erd-pu2 .panel-tool-badge {
  position: absolute;
  top: 1px; right: 0px;
  min-width: 14px; height: 14px;
  padding: 0 3px;
  border-radius: 50rem;
  background: #e5484d;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.erd-pu2 .panel-tool-sep {
  width: 1px; height: 20px;
  margin: 0 7px;
  background: var(--border);
  flex: none;
}

.erd-pu2 .panel-tool--boxed {
  border: 1px solid var(--navy-l);
  color: var(--navy);
}
.erd-pu2 .panel-tool--boxed:hover { background: var(--navy); color: #fff; }

/* Selector de idioma */
.erd-pu2 .panel-lang {
  display: flex;
  margin: 0 8px 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  overflow: hidden;
  flex: none;
}
.erd-pu2 .panel-lang button {
  border: 0;
  background: #fff;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--muted);
  cursor: pointer;
}
.erd-pu2 .panel-lang button[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--gold);
}

.erd-pu2 .panel-avatar {
  position: relative;
  width: 28px; height: 28px;
  margin-left: 2px;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  flex: none;
}
.erd-pu2 .panel-avatar-initials { display: block; line-height: 28px; }
.erd-pu2 .panel-avatar-flag {
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #4a3405;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.5;
  padding: 0 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Barra lateral (rail) — 70px, solo iconos
   ========================================================================== */

.erd-pu2 .panel-rail {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  bottom: 0;
  width: var(--rail-w);
  background: var(--navy);
  z-index: 60;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: visible;
}

.erd-pu2 .panel-rail-item {
  position: relative;
  width: 46px; height: 32px;
  flex: none;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  font-size: 15px;
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
}
.erd-pu2 .panel-rail-item:hover { background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; }

.erd-pu2 .panel-rail-item.is-active {
  background: #fff;
  color: var(--navy);
}

/* Pastilla flotante con puntita */
.erd-pu2 .panel-rail-pill {
  position: absolute;
  left: calc(100% + 9px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--navy-900);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: 3px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .09s linear;
  pointer-events: none;
  z-index: 5;
  max-width: 210px;
}
.erd-pu2 .panel-rail-pill::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--navy-900);
}
.erd-pu2 .panel-rail-item:hover .panel-rail-pill, .erd-pu2 .panel-rail-item:focus-visible .panel-rail-pill { opacity: 1; visibility: visible; }

.erd-pu2 .panel-rail-dot {
  position: absolute;
  top: 3px; right: 5px;
  min-width: 13px; height: 13px;
  padding: 0 3px;
  border-radius: 50rem;
  background: #e5484d;
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}
.erd-pu2 .panel-rail-spacer { flex: 1 1 auto; }

/* El nombre existe siempre en el marcado; en escritorio solo lo oyen
   los lectores de pantalla y a la vista lo da la pastilla flotante. */
.erd-pu2 .panel-rail-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Lienzo de página
   ========================================================================== */

.erd-pu2 .panel-main {
  margin: var(--topbar-h) 0 0 var(--rail-w);
  min-height: calc(100vh - var(--topbar-h));
  padding: 16px 20px 40px;
}

.erd-pu2 .panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  row-gap: 10px;
  margin: 0 0 14px;
}
.erd-pu2 .panel-head > div:first-child { min-width: 0; }

.erd-pu2 .panel-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .64);
  margin: 0 0 1px;
}

.erd-pu2 .panel-title {
  font-size: 26px;
  font-weight: 300;
  line-height: 1.2;
  color: rgba(0, 0, 0, .87);
  text-wrap: pretty;
}
.erd-pu2 .panel-title > * { vertical-align: middle; }
.erd-pu2 .panel-title .panel-pill { vertical-align: 3px; margin-left: 2px; }

.erd-pu2 .panel-title-count {
  margin-left: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--muted-2);
}

.erd-pu2 .panel-title-edit {
  border: 0; background: transparent;
  color: var(--link);
  font-size: 13px;
  cursor: pointer;
  padding: 2px;
}

.erd-pu2 .panel-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.erd-pu2 .panel-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--link);
  margin: 0 0 5px;
  white-space: nowrap;
}

/* Botones ---------------------------------------------------------------- */

.erd-pu2 .panel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 33px;
  padding: 7px 18px;
  border: 0;
  border-radius: var(--r-btn);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.erd-pu2 .panel-btn:hover { text-decoration: none; }

.erd-pu2 .panel-btn--green { background: var(--green); color: #fff; }
.erd-pu2 .panel-btn--green:hover { background: var(--green-d); color: #fff; }

.erd-pu2 .panel-btn--navy { background: var(--navy); color: #fff; }
.erd-pu2 .panel-btn--navy:hover { background: var(--navy-d); color: #fff; }

.erd-pu2 .panel-btn--ghost {
  background: #fff;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}
.erd-pu2 .panel-btn--ghost:hover { background: #f7f9fc; color: var(--navy); }

.erd-pu2 .panel-btn--split { padding-right: 10px; border-radius: var(--r-btn) 0 0 var(--r-btn); }
.erd-pu2 .panel-btn-caret {
  height: 33px;
  width: 26px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  font-size: 10px;
}
.erd-pu2 .panel-btn-caret:hover { background: var(--navy-d); }
.erd-pu2 .panel-btn-group { display: flex; }

.erd-pu2 .panel-btn--sm { height: 27px; padding: 5px 12px; font-size: 11.5px; }

/* Pestañas -------------------------------------------------------------- */

.erd-pu2 .panel-tabs {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--border);
}

.erd-pu2 .panel-tab {
  position: relative;
  padding: 7px 1px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  white-space: nowrap;
}
.erd-pu2 .panel-tab:hover { color: var(--navy); }
.erd-pu2 .panel-tab.is-active { color: var(--navy); font-weight: 600; }
.erd-pu2 .panel-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--navy);
}
.erd-pu2 .panel-tab-flag {
  margin-left: 6px;
  background: #dbeafe;
  color: #1e40af;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 1px 4px;
  border-radius: 2px;
  vertical-align: 1px;
}

/* Fila de filtros ------------------------------------------------------- */

.erd-pu2 .panel-filters {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.erd-pu2 .panel-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--link);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
}
.erd-pu2 .panel-filter:hover { color: var(--navy); }
.erd-pu2 .panel-filter i { font-size: 9px; opacity: .8; }

.erd-pu2 .panel-filters-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.erd-pu2 .panel-search {
  display: flex;
  align-items: center;
  height: 33px;
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.erd-pu2 .panel-search:focus-within { box-shadow: var(--shadow-card), inset 0 0 0 2px var(--navy-l); }
.erd-pu2 .panel-search input {
  border: 0;
  outline: none;  background: transparent;
  height: 100%;
  padding: 0 10px;
  width: 210px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text);
}
.erd-pu2 .panel-search input::placeholder { color: var(--muted-2); }
.erd-pu2 .panel-search button {
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 30px; height: 100%;
  cursor: pointer;
}
.erd-pu2 .panel-search button:hover { color: var(--navy); }

.erd-pu2 .panel-viewtoggle { display: flex; }
.erd-pu2 .panel-viewtoggle button {
  width: 33px; height: 33px;
  border: 0;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border);
}
.erd-pu2 .panel-viewtoggle button:first-child { border-radius: var(--r-btn) 0 0 var(--r-btn); }
.erd-pu2 .panel-viewtoggle button:last-child { border-radius: 0 var(--r-btn) var(--r-btn) 0; }
.erd-pu2 .panel-viewtoggle button.is-active { background: var(--navy); color: #fff; box-shadow: none; }

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.erd-pu2 .panel-card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
}
.erd-pu2 .panel-card--flush { padding: 0; }

.erd-pu2 .panel-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px var(--pad-card) 11px;
}
.erd-pu2 .panel-card-title { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.erd-pu2 .panel-card-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.erd-pu2 .panel-card-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.erd-pu2 .panel-count-bubble {
  background: #dbeafe;
  color: #1e40af;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 50rem;
}

.erd-pu2 .panel-grid { display: grid; gap: 14px; margin: 0 0 14px; }
.erd-pu2 .panel-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.erd-pu2 .panel-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.erd-pu2 .panel-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.erd-pu2 .panel-grid--wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.erd-pu2 .panel-grid--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }

/* Tarjeta de indicador -------------------------------------------------- */

.erd-pu2 .panel-kpi {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px var(--pad-card);
}
.erd-pu2 .panel-kpi-icon {
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-btn);
  display: grid;
  place-items: center;
  font-size: 14px;
  background: #eaf0f8;
  color: var(--navy);
}
.erd-pu2 .panel-kpi-icon--green { background: #e4f6e9; color: #2f8f47; }
.erd-pu2 .panel-kpi-icon--gold { background: var(--gold-soft); color: #96701c; }
.erd-pu2 .panel-kpi-icon--indigo { background: #e6e8fb; color: #3730a3; }

.erd-pu2 .panel-kpi-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.erd-pu2 .panel-kpi-label {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1px;
}
.erd-pu2 .panel-kpi-value {
  display: block;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  color: rgba(0, 0, 0, .87);
}
.erd-pu2 .panel-kpi-value em { font-style: normal; color: var(--navy-l); }
.erd-pu2 .panel-kpi-help { flex: none; color: #c3ccd8; font-size: 11px; align-self: flex-start; }

/* ==========================================================================
   Tablas
   ========================================================================== */

.erd-pu2 .panel-table-scroll { overflow-x: auto; }

.erd-pu2 .panel-table { font-size: 12.5px; }

.erd-pu2 .panel-table thead th {
  background: var(--head-bg);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 8px 12px;
  white-space: nowrap;
}
.erd-pu2 .panel-table thead th i { font-size: 8px; margin-left: 4px; opacity: .55; }

.erd-pu2 .panel-table tbody td {
  padding: 8px 12px;
  border-top: 1px solid var(--row-line);
  vertical-align: middle;
  white-space: nowrap;
}
.erd-pu2 .panel-table tbody tr:hover td { background: #fafbfe; }
.erd-pu2 .panel-table tbody tr:first-child td { border-top: 1px solid var(--row-line); }

.erd-pu2 .panel-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.erd-pu2 .panel-table .t-strong { font-weight: 600; color: var(--text-strong); }
.erd-pu2 .panel-table .t-muted { color: var(--muted); }
.erd-pu2 .panel-table a { font-weight: 600; }

.erd-pu2 .panel-table-sub { display: block; font-size: 11px; color: var(--muted-2); }

.erd-pu2 .panel-checkbox {
  width: 13px; height: 13px;
  accent-color: var(--navy);
  vertical-align: -1px;
}

.erd-pu2 .panel-rowmenu {
  border: 0; background: transparent;
  color: var(--icon-soft);
  cursor: pointer;
  padding: 2px 4px;
}
.erd-pu2 .panel-rowmenu:hover { color: var(--navy); }

/* Columna de filtros a la izquierda de la tabla ------------------------- */

.erd-pu2 .panel-listwrap { display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 0; align-items: start; }

.erd-pu2 .panel-sidefilters {
  padding: 6px 14px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.erd-pu2 .panel-sidefilter {
  text-align: left;
  border: 0;
  background: transparent;
  padding: 6px 10px;
  border-radius: var(--r-btn);
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.erd-pu2 .panel-sidefilter:hover { background: #eaeff6; }
.erd-pu2 .panel-sidefilter.is-active { font-weight: 700; background: #e9eff7; color: var(--navy); }
.erd-pu2 .panel-sidefilter-count { color: var(--muted-2); font-weight: 400; margin-left: 4px; }

/* Paginación ------------------------------------------------------------ */

.erd-pu2 .panel-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px var(--pad-card);
  font-size: 12.5px;
}
.erd-pu2 .panel-pagination > a, .erd-pu2 .panel-pagination > span {
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--link);
  font-weight: 600;
}
.erd-pu2 .panel-pagination > a:hover { background: #f2f6fb; text-decoration: none; }
.erd-pu2 .panel-pagination .is-current { background: var(--navy); color: #fff; box-shadow: none; }

/* ==========================================================================
   Pastillas de estado — colores fijos del sistema
   ========================================================================== */

.erd-pu2 .panel-pill {
  display: inline-block;
  border-radius: 50rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  padding: .3em .7em;
  white-space: nowrap;
}
.erd-pu2 .pill-pendiente { background: var(--st-pend-bg); color: var(--st-pend-tx); }
.erd-pu2 .pill-proceso { background: var(--st-proc-bg); color: var(--st-proc-tx); }
.erd-pu2 .pill-transito { background: var(--st-tran-bg); color: var(--st-tran-tx); }
.erd-pu2 .pill-entregado { background: var(--st-entr-bg); color: var(--st-entr-tx); }
.erd-pu2 .pill-completado { background: var(--st-comp-bg); color: var(--st-comp-tx); }
.erd-pu2 .pill-cancelado { background: var(--st-canc-bg); color: var(--st-canc-tx); }
.erd-pu2 .pill-pagado { background: var(--pay-ok-bg);  color: var(--pay-ok-tx); }
.erd-pu2 .pill-sinpagar { background: var(--pay-no-bg);  color: var(--pay-no-tx); }
.erd-pu2 .pill-parcial { background: var(--pay-par-bg); color: var(--pay-par-tx); }

/* ==========================================================================
   Bloques varios
   ========================================================================== */

/* Tabla Hoy / Semana / Mes */
.erd-pu2 .panel-activity { font-size: 12.5px; }
.erd-pu2 .panel-activity th {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
  text-align: right;
  padding: 4px 6px 10px;
  white-space: nowrap;
}
.erd-pu2 .panel-activity th:first-child { text-align: left; }
.erd-pu2 .panel-activity td { padding: 6px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.erd-pu2 .panel-activity td:first-child { text-align: left; color: var(--text); }
.erd-pu2 .panel-activity tbody tr:hover td { background: #fafbfe; }
.erd-pu2 .panel-activity .help { color: #c3ccd8; margin-left: 4px; font-size: 10px; }

/* Rejilla de pendientes */
.erd-pu2 .panel-open-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 18px; }
.erd-pu2 .panel-open-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
}
.erd-pu2 .panel-open-icon {
  width: 28px; height: 28px;
  flex: none;
  border-radius: var(--r-btn);
  background: #eef2f8;
  color: var(--navy-l);
  display: grid;
  place-items: center;
  font-size: 12px;
}
.erd-pu2 .panel-open-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.erd-pu2 .panel-open-name small { display: block; font-size: 11px; color: var(--muted-2); }
.erd-pu2 .panel-open-num { flex: none; font-size: 17px; font-weight: 400; color: rgba(0,0,0,.8); white-space: nowrap; }
.erd-pu2 .panel-open-num.is-alert { color: #b4590f; }

/* Gráfico de barras: eje Y, área y eje X en la misma rejilla */
.erd-pu2 .panel-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding: 4px 0 0;
}
.erd-pu2 .panel-chart-y {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--muted-2);
  text-align: right;
  height: 168px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.erd-pu2 .panel-chart-plot {
  grid-column: 2;
  grid-row: 1;
  height: 168px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  background: repeating-linear-gradient(to top, var(--row-line) 0 1px, transparent 1px 42px);
}
.erd-pu2 .panel-chart-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.erd-pu2 .panel-chart-bar {
  width: 11px;
  background: var(--navy-l);
  border-radius: 1px 1px 0 0;
  transition: background .12s;
}
.erd-pu2 .panel-chart-col:hover .panel-chart-bar { background: var(--gold); }
.erd-pu2 .panel-chart-x {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 2px;
  padding: 5px 0 0;
  font-size: 10px;
  color: var(--muted-2);
}
.erd-pu2 .panel-chart-x span { flex: 1 1 0; text-align: center; }

/* Barras de ranking */
.erd-pu2 .panel-rank { display: flex; flex-direction: column; gap: 11px; }
.erd-pu2 .panel-rank-row { font-size: 12.5px; }
.erd-pu2 .panel-rank-top { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 4px; }
.erd-pu2 .panel-rank-top b { font-weight: 600; }
.erd-pu2 .panel-rank-top > span { color: var(--muted); font-variant-numeric: tabular-nums; }
.erd-pu2 .panel-rank-track { display: block; height: 7px; background: #eef2f7; border-radius: 50rem; overflow: hidden; }
.erd-pu2 .panel-rank-fill { display: block; height: 100%; background: var(--navy-l); border-radius: 50rem; }
.erd-pu2 .panel-rank-fill--gold { background: var(--gold); }

/* Estado vacío gris centrado */
.erd-pu2 .panel-empty {
  background: var(--empty-bg);
  border-radius: var(--r-btn);
  padding: 34px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.erd-pu2 .panel-empty-line { color: var(--muted); font-size: 12.5px; padding: 14px 2px; }

/* Secciones plegables */
.erd-pu2 .panel-fold { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card); margin: 0 0 14px; }
.erd-pu2 .panel-fold-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px var(--pad-card);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.erd-pu2 .panel-fold-title { margin: 0; font: inherit; }
.erd-pu2 .panel-fold-name { font-size: 15px; font-weight: 500; color: var(--text-strong); }
.erd-pu2 .panel-fold-head .panel-fold-caret { margin-left: auto; color: var(--muted); font-size: 12px; transition: transform .15s; }
.erd-pu2 .panel-fold-body { padding: 0 var(--pad-card) var(--pad-card); }
.erd-pu2 .panel-fold-body--flush { padding: 0 0 var(--pad-card); }
.erd-pu2 .panel-fold.is-closed .panel-fold-body { display: none; }
.erd-pu2 .panel-fold.is-closed .panel-fold-caret { transform: rotate(-90deg); }

/* Lista de actividad reciente */
.erd-pu2 .panel-feed { display: flex; flex-direction: column; }
.erd-pu2 .panel-feed-item { padding: 9px 0; border-top: 1px solid var(--row-line); }
.erd-pu2 .panel-feed-item:first-child { border-top: 0; }
.erd-pu2 .panel-feed-text { font-size: 12.5px; color: var(--text); }
.erd-pu2 .panel-feed-meta {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 2px;
}
.erd-pu2 .panel-feed-meta time { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 11px; display: block; }

/* Pares etiqueta / valor */
.erd-pu2 .panel-kv { display: grid; gap: 11px; }
.erd-pu2 .panel-kv-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 2px;
}
.erd-pu2 .panel-kv-value { font-size: 13.5px; color: var(--text-strong); font-weight: 600; }
.erd-pu2 .panel-kv-value--lg { font-size: 17px; font-weight: 400; }
.erd-pu2 .panel-kv-value--green { color: #2f8f47; }
.erd-pu2 .panel-kv-value--red { color: #b3261e; }
.erd-pu2 .panel-kv-value small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }

/* Aviso naranja */
.erd-pu2 .panel-note {
  background: #fff8ed;
  color: #8a5209;
  border-radius: var(--r-btn);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  display: flex;
  gap: 9px;
}
.erd-pu2 .panel-note i { margin-top: 2px; }

/* Chips de atributo */
.erd-pu2 .panel-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.erd-pu2 .panel-chip {
  background: #eef2f8;
  color: #4d5b6b;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.erd-pu2 .panel-chip--gold { background: var(--gold-soft); color: #7d5c12; }

/* Método de pago guardado */
.erd-pu2 .panel-paycard {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 14px;
  max-width: 420px;
}
.erd-pu2 .panel-paycard-logo {
  width: 52px; height: 34px;
  flex: none;
  border-radius: 3px;
  background: var(--navy);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .4px;
  display: grid;
  place-items: center;
  text-align: center;
}
.erd-pu2 .panel-paycard-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.erd-pu2 .panel-paycard-via { display: block; font-size: 11px; color: var(--muted-2); margin: 0 0 8px; }
.erd-pu2 .panel-paycard-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; font-size: 12px; }
.erd-pu2 .panel-paycard-rows dt { color: var(--muted); }
.erd-pu2 .panel-paycard-rows dd { margin: 0; color: var(--text-strong); }
.erd-pu2 .panel-trash { margin-left: auto; border: 0; background: transparent; color: #cf4a3f; cursor: pointer; font-size: 12.5px; }

/* Línea de tiempo de estados */
.erd-pu2 .panel-timeline { display: flex; flex-direction: column; }
.erd-pu2 .panel-timeline-item { display: flex; gap: 12px; padding: 0 0 14px; }
.erd-pu2 .panel-timeline-rail { position: relative; display: block; width: 11px; flex: none; }
.erd-pu2 .panel-timeline-dot {
  display: block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--navy-l);
  margin: 4px 1px 0;
}
.erd-pu2 .panel-timeline-dot--soft { background: #cbd5e1; }
.erd-pu2 .panel-timeline-line {
  position: absolute;
  top: 15px; bottom: -4px; left: 5px;
  width: 1px;
  background: var(--border);
}
.erd-pu2 .panel-timeline-item:last-child { padding-bottom: 0; }
.erd-pu2 .panel-timeline-item:last-child .panel-timeline-line { display: none; }
.erd-pu2 .panel-timeline-text { display: block; font-size: 12.5px; }
.erd-pu2 .panel-timeline-meta { display: block; font-size: 11px; color: var(--muted-2); }

/* ==========================================================================
   Tablero de asignación (Despacho)
   ========================================================================== */

.erd-pu2 .panel-board-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 9px 16px;
  margin: 0 0 12px;
  font-size: 12.5px;
}
.erd-pu2 .panel-board-strip b { color: var(--navy); font-weight: 700; }
.erd-pu2 .panel-board-metric { display: inline-flex; align-items: center; gap: 6px; color: var(--text); white-space: nowrap; }
.erd-pu2 .panel-board-metric i { color: var(--muted); font-size: 12px; }
.erd-pu2 .panel-board-strip .panel-filters-right { font-size: 12.5px; }

.erd-pu2 .panel-board { display: grid; grid-template-columns: 268px minmax(0, 1fr) 292px; gap: 12px; align-items: start; }

.erd-pu2 .panel-board-col {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.erd-pu2 .panel-board-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px 9px;
}
.erd-pu2 .panel-board-head h2 { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.erd-pu2 .panel-board-head .panel-filter { font-size: 12px; }
.erd-pu2 .panel-board-head-right { margin-left: auto; display: flex; gap: 14px; }

.erd-pu2 .panel-subtabs { display: flex; gap: 0; padding: 0 14px; }
.erd-pu2 .panel-subtabs::after { content: ""; flex: 1 1 auto; border-bottom: 2px solid var(--border); }
.erd-pu2 .panel-subtab {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 7px 16px 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.erd-pu2 .panel-subtab.is-active { color: var(--navy); border-bottom-color: var(--navy); }

.erd-pu2 .panel-board-scroll { padding: 10px 14px 12px; overflow-y: auto; max-height: 560px; }

/* Tarjeta de recurso */
.erd-pu2 .panel-res {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 0;
  border-top: 1px solid var(--row-line);
}
.erd-pu2 .panel-res:first-child { border-top: 0; }
.erd-pu2 .panel-res-avatar {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: #e6ecf5;
  color: var(--navy);
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.erd-pu2 .panel-res-avatar--gold { background: var(--gold-soft); color: #7d5c12; }
.erd-pu2 .panel-res-name { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-strong); }
.erd-pu2 .panel-res-hours { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.erd-pu2 .panel-res-hours.is-over { color: var(--danger); }
.erd-pu2 .panel-res-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; }
.erd-pu2 .panel-res-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--navy-l); flex: none; margin-top: 8px; }
.erd-pu2 .panel-res-more { border: 0; background: transparent; color: var(--icon-soft); cursor: pointer; padding: 4px 2px; }
.erd-pu2 .panel-board-foot { padding: 10px 14px 14px; }
.erd-pu2 .panel-board-foot .panel-btn { width: 100%; justify-content: center; }

/* Rejilla horaria */
.erd-pu2 .panel-sched-scroll { overflow-x: auto; overflow-y: auto; max-height: 560px; }
.erd-pu2 .panel-sched { min-width: 900px; }

.erd-pu2 .panel-sched-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: stretch; }
.erd-pu2 .panel-sched-row + .panel-sched-row { border-top: 1px solid var(--row-line); }

.erd-pu2 .panel-sched-hours {
  display: grid;
  grid-template-columns: repeat(12, minmax(62px, 1fr));
  background: var(--head-bg);
}
.erd-pu2 .panel-sched-hours span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 0 5px 7px;
  border-left: 1px solid var(--border);
}
.erd-pu2 .panel-sched-corner { background: var(--head-bg); }

.erd-pu2 .panel-sched-van { padding: 10px 12px 12px; background: #fcfdff; }
.erd-pu2 .panel-sched-van-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--navy-l);
  display: inline-block;
  margin: 0 0 6px;
}
.erd-pu2 .panel-sched-crew { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.erd-pu2 .panel-sched-crew > span { font-size: 11px; color: var(--text); display: flex; align-items: center; gap: 5px; }
.erd-pu2 .panel-sched-crew i { color: var(--icon-soft); font-size: 9px; }

.erd-pu2 .panel-sched-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(62px, 1fr));
  grid-auto-rows: minmax(30px, auto);
  gap: 4px 0;
  padding: 8px 0;
  /* Una sola parada por columna: 12 líneas, no 144. */
  background: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px calc(100% / 12));
  min-height: 62px;
}

.erd-pu2 .panel-job {
  border-left: 3px solid var(--navy-l);
  background: #eef3fa;
  border-radius: 0 2px 2px 0;
  padding: 4px 7px;
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  margin-right: 3px;
  cursor: grab;
}
.erd-pu2 .panel-job:hover { background: #e5edf8; }
.erd-pu2 .panel-job--gold { border-left-color: var(--gold); background: #fdf7e9; }
.erd-pu2 .panel-job--grey { border-left-color: #9aa5b3; background: #f1f3f6; }
.erd-pu2 .panel-job-top { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy); }
.erd-pu2 .panel-job-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: #3ba55d; flex: none; }
.erd-pu2 .panel-job-dot--gold { background: var(--gold); }
.erd-pu2 .panel-job-dot--grey { background: #9aa5b3; }
.erd-pu2 .panel-job-line { display: flex; align-items: center; gap: 5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erd-pu2 .panel-job-line i { color: var(--icon-soft); font-size: 9px; width: 11px; flex: none; }
.erd-pu2 .panel-job-metrics { display: flex; gap: 9px; color: var(--muted); font-size: 10.5px; }

.erd-pu2 .panel-sched-add {
  border: 0;
  background: transparent;
  color: var(--link);
  font-size: 12.5px;
  font-weight: 600;
  padding: 11px 12px;
  cursor: pointer;
  text-align: left;
}

/* Tarjeta de trabajo sin asignar */
.erd-pu2 .panel-unjob {
  border-left: 3px solid var(--navy-l);
  background: #f6f9fd;
  border-radius: 0 3px 3px 0;
  padding: 9px 11px;
  margin: 0 0 9px;
  cursor: grab;
}
.erd-pu2 .panel-unjob:hover { background: #eef4fc; }
.erd-pu2 .panel-unjob--gold { border-left-color: var(--gold); background: #fdf9f0; }
.erd-pu2 .panel-unjob-top { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; }
.erd-pu2 .panel-unjob-id { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.erd-pu2 .panel-unjob-time { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--text); }
.erd-pu2 .panel-unjob-rows { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
.erd-pu2 .panel-unjob-rows div { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
.erd-pu2 .panel-unjob-rows i { width: 12px; color: var(--icon-soft); font-size: 10px; flex: none; }
.erd-pu2 .panel-unjob-foot { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }

/* ==========================================================================
   Superposiciones: búsqueda global, menú "+", menú de usuario, cajón móvil
   ========================================================================== */

.erd-pu2 .panel-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 32, 54, .55);
  z-index: 80;
  display: none;
}
.erd-pu2 .panel-scrim.is-open { display: block; }

.erd-pu2 .panel-globalsearch {
  position: fixed;
  top: 0;
  left: 300px;
  width: 580px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border-radius: 0 0 var(--r-card) var(--r-card);
  box-shadow: var(--shadow-pop);
  z-index: 90;
  display: none;
}
.erd-pu2 .panel-globalsearch.is-open { display: block; }
.erd-pu2 .panel-globalsearch-tabs { display: flex; gap: 20px; padding: 0 16px; background: var(--head-bg); }
.erd-pu2 .panel-globalsearch-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.erd-pu2 .panel-globalsearch-row:focus-within { box-shadow: inset 0 0 0 2px var(--navy-l); border-radius: var(--r-btn); }
.erd-pu2 .panel-globalsearch-row input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}
.erd-pu2 .panel-globalsearch-row input::placeholder { color: var(--muted-2); }
.erd-pu2 .panel-globalsearch-close { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }

.erd-pu2 .panel-pop {
  position: fixed;
  top: calc(var(--topbar-h) + 4px);
  right: 12px;
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  z-index: 90;
  display: none;
}
.erd-pu2 .panel-pop.is-open { display: block; }

.erd-pu2 .panel-pop--create { width: 340px; }
.erd-pu2 .panel-pop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.erd-pu2 .panel-pop-grid button {
  border: 0;
  background: #fff;
  padding: 20px 8px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text);
  box-shadow: inset 0 0 0 .5px var(--border);
}
.erd-pu2 .panel-pop-grid button i { font-size: 19px; color: var(--navy-l); }
.erd-pu2 .panel-pop-grid button:hover { background: #f6f9fd; color: var(--navy); }

.erd-pu2 .panel-pop--user { width: 270px; }
.erd-pu2 .panel-pop-user-head { display: flex; gap: 11px; align-items: center; padding: 14px; }
.erd-pu2 .panel-pop-user-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}
.erd-pu2 .panel-pop-user-name { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.erd-pu2 .panel-pop-user-mail { display: block; font-size: 11.5px; color: var(--muted); }
.erd-pu2 .panel-pop-list { display: flex; flex-direction: column; padding: 4px 0 8px; }
.erd-pu2 .panel-pop-list a {
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.erd-pu2 .panel-pop-list a:hover { background: #f2f6fb; color: var(--navy); text-decoration: none; }
.erd-pu2 .panel-pop-list .panel-pop-flag {
  background: var(--gold-soft);
  color: #7d5c12;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 1px 4px;
  border-radius: 2px;
}
.erd-pu2 .panel-pop-list hr { border: 0; border-top: 1px solid var(--row-line); margin: 5px 0; }

/* Globo de chat de soporte */
.erd-pu2 .panel-support {
  position: fixed;
  right: 18px; bottom: 18px;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 17px;
  box-shadow: 0 3px 12px rgba(15, 32, 54, .3);
  cursor: pointer;
  z-index: 50;
}
.erd-pu2 .panel-support:hover { background: var(--navy-d); }

/* ==========================================================================
   Móvil — el rail se convierte en cajón lateral
   ========================================================================== */

@media (min-width: 1101px) {
  .erd-pu2 .panel-head > div:first-child { flex: 1 1 320px; }
}

/* Por debajo de 1100 px la acción principal baja a su propia línea:
   evita que el título quede aplastado con etiquetas largas en español. */
@media (max-width: 1100px) {
  .erd-pu2 .panel-head { flex-direction: column; align-items: stretch; }
  .erd-pu2 .panel-head > div:first-child { flex: 0 0 auto; }
  .erd-pu2 .panel-head-actions { width: 100%; }
}

@media (max-width: 1180px) {
  .erd-pu2 .panel-board { grid-template-columns: 232px minmax(0, 1fr) 258px; }
  .erd-pu2 .panel-grid--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  .erd-pu2 .panel-board { grid-template-columns: minmax(0, 1fr); }
  .erd-pu2 .panel-board-scroll { max-height: 320px; }
  .erd-pu2 .panel-sched-scroll { max-height: none; }
  .erd-pu2 .panel-grid--wide-left, .erd-pu2 .panel-grid--wide-right, .erd-pu2 .panel-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .erd-pu2 .panel-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .erd-pu2 .panel-hamburger { display: grid; place-items: center; }

  .erd-pu2 .panel-rail {
    width: 236px;
    transform: translateX(-100%);
    transition: transform .18s ease;
    align-items: stretch;
    padding: 10px 10px 20px;
    overflow-y: auto;
    box-shadow: 4px 0 18px rgba(15, 32, 54, .25);
  }
  .erd-pu2.rail-open .panel-rail { transform: none; }

  .erd-pu2 .panel-rail-item {
    width: 100%;
    height: 38px;
    justify-content: flex-start;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 11px;
    border-radius: var(--r-btn);
  }
  .erd-pu2 .panel-rail-item i:first-child { width: 18px; text-align: center; }
  .erd-pu2 .panel-rail-label {
    position: static;
    display: block;
    width: auto; height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    font-size: 13px;
    font-weight: 600;
  }
  .erd-pu2 .panel-rail-pill { display: none; }
  .erd-pu2 .panel-rail-dot { position: static; display: block; margin-left: auto; }

  .erd-pu2 .panel-main { margin-left: 0; padding: 14px 14px 36px; }

  .erd-pu2 .panel-listwrap { grid-template-columns: minmax(0, 1fr); }
  .erd-pu2 .panel-sidefilters {
    flex-direction: row;
    overflow-x: auto;
    padding: 4px 0 10px;
    gap: 4px;
  }

  .erd-pu2 .panel-globalsearch { left: 20px; right: 20px; width: auto; }
  .erd-pu2 .panel-brand-name { display: none; }
  .erd-pu2 .panel-search input { width: 150px; }
}

@media (max-width: 620px) {
  .erd-pu2 .panel-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .erd-pu2 .panel-open-grid { grid-template-columns: minmax(0, 1fr); }
  .erd-pu2 .panel-title { font-size: 22px; }
  .erd-pu2 .panel-head { align-items: flex-start; }
  .erd-pu2 .panel-head-actions { width: 100%; }
  .erd-pu2 .panel-tool--hide-sm { display: none; }
  .erd-pu2 .panel-filters-right { margin-left: 0; width: 100%; }
  .erd-pu2 .panel-search { flex: 1 1 auto; }
  .erd-pu2 .panel-search input { width: 100%; }
  .erd-pu2 .panel-pop--create { width: auto; left: 12px; right: 12px; }
  .erd-pu2 .panel-chart-y { display: none; }
  .erd-pu2 .panel-chart { grid-template-columns: minmax(0, 1fr); }
  .erd-pu2 .panel-chart-plot, .erd-pu2 .panel-chart-x { grid-column: 1; }
}


/* ==========================================================================
   Paneles conmutables (pestañas con contenido)
   ========================================================================== */

.erd-pu2 .panel-pane { display: none; }
.erd-pu2 .panel-pane.is-active { display: block; }

/* ==========================================================================
   Calendario — vista de mes
   ========================================================================== */

.erd-pu2 .panel-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.erd-pu2 .panel-cal-dow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px;
  background: var(--head-bg);
}

.erd-pu2 .panel-cal-cell {
  min-height: 104px;
  padding: 8px 10px 9px;
  border-top: 1px solid var(--row-line);
  border-left: 1px solid var(--row-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.erd-pu2 .panel-cal-cell:nth-child(7n + 1) { border-left: 0; }
.erd-pu2 .panel-cal-cell.is-other { background: #fbfcfe; }

.erd-pu2 .panel-cal-daynum { font-size: 15px; font-weight: 400; color: rgba(0, 0, 0, .8); }
.erd-pu2 .panel-cal-daynum small { font-size: 10px; font-weight: 600; letter-spacing: .6px; color: var(--muted-2); margin-left: 4px; text-transform: uppercase; }
.erd-pu2 .panel-cal-cell.is-other .panel-cal-daynum { color: var(--muted-2); }

.erd-pu2 .panel-cal-today {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.erd-pu2 .panel-cal-counts { display: flex; gap: 10px; font-size: 10.5px; color: var(--text); }
.erd-pu2 .panel-cal-counts span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.erd-pu2 .panel-cal-counts i { color: var(--icon-soft); font-size: 9px; }

.erd-pu2 .panel-cal-bar { margin-top: auto; display: flex; align-items: center; gap: 7px; }
.erd-pu2 .panel-cal-track { display: block; flex: 1 1 auto; height: 5px; background: #eef2f7; border-radius: 50rem; overflow: hidden; }
.erd-pu2 .panel-cal-fill { display: block; height: 100%; background: var(--navy-l); border-radius: 50rem; }
.erd-pu2 .panel-cal-fill--gold { background: var(--gold); }
.erd-pu2 .panel-cal-pct { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }

@media (max-width: 1000px) { .erd-pu2 .panel-cal-counts { display: none; } }
@media (max-width: 760px) {
  .erd-pu2 .panel-cal { grid-template-columns: repeat(7, minmax(46px, 1fr)); }
  .erd-pu2 .panel-cal-cell { min-height: 62px; padding: 5px 5px 6px; }
  .erd-pu2 .panel-cal-daynum { font-size: 12.5px; }
  .erd-pu2 .panel-cal-daynum small { display: none; }
  .erd-pu2 .panel-cal-pct { display: none; }
}

/* ==========================================================================
   Mensajes
   ========================================================================== */

.erd-pu2 .panel-chat { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 12px; align-items: start; }

.erd-pu2 .panel-convlist { max-height: 560px; overflow-y: auto; }
.erd-pu2 .panel-conv {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-top: 1px solid var(--row-line);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.erd-pu2 .panel-conv:first-child { border-top: 0; }
.erd-pu2 .panel-conv:hover { background: #fafbfe; }
.erd-pu2 .panel-conv.is-active { background: #eef3fa; box-shadow: inset 3px 0 0 var(--navy); }
.erd-pu2 .panel-conv-avatar {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: #e6ecf5;
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.erd-pu2 .panel-conv-body { display: block; flex: 1 1 auto; min-width: 0; }
.erd-pu2 .panel-conv-top { display: flex; align-items: baseline; gap: 8px; }
.erd-pu2 .panel-conv-name { min-width: 0; flex: 0 1 auto; font-size: 12.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erd-pu2 .panel-conv-time { margin-left: auto; font-size: 10.5px; color: var(--muted-2); flex: none; }
.erd-pu2 .panel-conv-preview {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erd-pu2 .panel-conv-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.erd-pu2 .panel-conv-unread {
  flex: none;
  display: block;
  min-width: 16px; height: 16px;
  border-radius: 50rem;
  background: var(--navy);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
  align-self: center;
}

.erd-pu2 .panel-thread-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.erd-pu2 .panel-msgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  max-height: 430px;
  overflow-y: auto;
  background: #fbfcfe;
}
.erd-pu2 .panel-msg-day {
  align-self: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--muted-2);
}
.erd-pu2 .panel-msg {
  max-width: 74%;
  padding: 8px 12px 7px;
  border-radius: var(--r-card);
  font-size: 12.5px;
  line-height: 1.45;
}
.erd-pu2 .panel-msg--in { background: #eef1f6; color: var(--text); align-self: flex-start; }
.erd-pu2 .panel-msg--out { background: var(--navy); color: #fff; align-self: flex-end; }
.erd-pu2 .panel-msg-time { display: block; font-size: 10px; opacity: .65; margin-top: 3px; }
.erd-pu2 .panel-msg-attach {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, .16);
  border-radius: 3px;
  font-size: 11.5px;
}
.erd-pu2 .panel-msg--in .panel-msg-attach { background: #fff; }

.erd-pu2 .panel-composer { display: flex; align-items: center; gap: 8px; padding: 12px 18px; }
.erd-pu2 .panel-composer .panel-input { flex: 1 1 auto; }

/* ==========================================================================
   Configuración — segundo menú lateral de altura completa
   ========================================================================== */

.erd-pu2 .panel-settings {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 520px;
}
.erd-pu2 .panel-settings-nav { border-right: 1px solid var(--border); padding: 8px 0; }
.erd-pu2 .panel-settings-nav button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 16px;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.erd-pu2 .panel-settings-nav button > i:last-child { margin-left: auto; color: var(--icon-soft); font-size: 10px; }
.erd-pu2 .panel-settings-nav button:hover { background: #f4f7fb; color: var(--navy); }
.erd-pu2 .panel-settings-nav button.is-active { background: #eef3fa; color: var(--navy); font-weight: 700; }
.erd-pu2 .panel-settings-nav .panel-chip--gold { margin-left: auto; }

.erd-pu2 .panel-settings-body { min-width: 0; }
.erd-pu2 .panel-settings-search { display: flex; align-items: center; gap: 9px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.erd-pu2 .panel-settings-search .panel-input { flex: 1 1 auto; }
.erd-pu2 .panel-settings-content { padding: 18px; }

@media (max-width: 900px) {
  .erd-pu2 .panel-settings { grid-template-columns: minmax(0, 1fr); }
  .erd-pu2 .panel-settings-nav { border-right: 0; border-bottom: 1px solid var(--border); }
  .erd-pu2 .panel-chat { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Formularios
   ========================================================================== */

.erd-pu2 .panel-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; }
.erd-pu2 .panel-form-full { grid-column: 1 / -1; }
.erd-pu2 .panel-form-subtitle {
  grid-column: 1 / -1;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 8px 0 -4px;
}

.erd-pu2 .panel-field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.erd-pu2 .panel-field label b { color: #c0392b; font-weight: 700; }

.erd-pu2 .panel-input {
  width: 100%;
  height: 33px;
  border: 1px solid #d8e0ea;
  border-radius: var(--r-btn);
  padding: 0 10px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: #fff;
}
.erd-pu2 textarea.panel-input { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; }
.erd-pu2 .panel-input:focus { outline: none; border-color: var(--navy-l); box-shadow: 0 0 0 2px rgba(44, 79, 124, .2); }
.erd-pu2 .panel-input:focus-visible { outline: none; }
.erd-pu2 .panel-input[readonly], .erd-pu2 .panel-input:disabled { background: #f2f5f9; color: var(--muted); }

.erd-pu2 .panel-field-lock { position: relative; }
.erd-pu2 .panel-field-lock .panel-input { padding-left: 30px; }
.erd-pu2 .panel-field-lock .panel-lock-icon {
  position: absolute;
  left: 1px; bottom: 1px;
  width: 27px; height: 31px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  background: #e9edf3;
  border-radius: 2px 0 0 2px;
}

.erd-pu2 .panel-help { font-size: 11px; color: var(--muted); margin: 4px 0 0; }

.erd-pu2 .panel-switchrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--row-line); }
.erd-pu2 .panel-switchrow:first-child { border-top: 0; }
.erd-pu2 .panel-switchrow-text { flex: 1 1 auto; min-width: 0; }
.erd-pu2 .panel-switchrow-text b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-strong); }
.erd-pu2 .panel-switchrow-text > span { font-size: 11.5px; color: var(--muted); }
.erd-pu2 .panel-switch {
  flex: none;
  width: 34px; height: 19px;
  border: 0;
  border-radius: 50rem;
  background: #cdd6e1;
  position: relative;
  cursor: pointer;
}
.erd-pu2 .panel-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  transition: transform .14s;
}
.erd-pu2 .panel-switch.is-on { background: var(--green); }
.erd-pu2 .panel-switch.is-on::after { transform: translateX(15px); }

@media (max-width: 620px) { .erd-pu2 .panel-form { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Calificaciones
   ========================================================================== */

.erd-pu2 .panel-stars { color: var(--gold); font-size: 11px; letter-spacing: 1.5px; white-space: nowrap; }
.erd-pu2 .panel-stars .off { color: #d7dde6; }

.erd-pu2 .panel-score { display: flex; align-items: baseline; gap: 8px; }
.erd-pu2 .panel-score b { font-size: 34px; font-weight: 300; line-height: 1; color: rgba(0, 0, 0, .87); }
.erd-pu2 .panel-score > span { font-size: 12px; color: var(--muted); }


/* ============================================================
 * Capa de aplicacion (anadido en la integracion, no viene del diseno)
 *
 * El diseno daba por hecho que era dueno de la pagina y estilizaba
 * <body>. Aqui el panel es un contenedor dentro de WordPress, asi que
 * es el contenedor quien asume el papel de pantalla completa por
 * encima del tema, y quien hace de area de desplazamiento.
 *
 * La barra superior y el rail siguen siendo position:fixed respecto a
 * la ventana, que es justo lo que queremos.
 * ============================================================ */
.erd-pu2 {
  position: fixed;
  inset: 0;
  z-index: 99990;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}