/* ===========================================================
   Capa visual: tarjetas amplias, sombras suaves y tipografía
   con más presencia. Se carga después de style.css y solo
   ajusta la apariencia; la estructura y los colores de marca
   siguen definidos por la configuración de marca blanca.
   =========================================================== */

:root {
  --radio: 20px;
  --radio-chico: 12px;
  --sombra-suave: 0 18px 40px rgba(112, 144, 176, .14);
  --sombra-hover: 0 22px 48px rgba(112, 144, 176, .22);
  --tinta-fuerte: #1b2559;
  --tinta-media: #707eae;
  --linea-suave: #eaeef6;
}

body { color: #2b3674; }

/* ----------------------- Panel lateral ----------------------- */
.sidebar { padding: 26px 16px 20px; }
.sidebar .brand {
  position: relative;
  margin: 0 8px 26px;
  padding-bottom: 24px;
  font-size: 21px;
  letter-spacing: -.5px;
}
/* La línea divisoria bajo la marca, a todo el ancho del panel. */
.sidebar .brand::after {
  content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, .16);
}
.sidebar nav { gap: 4px; }
.sidebar nav button {
  position: relative;
  min-height: 48px;
  border-radius: 14px;
  font-weight: 650;
  transition: background .16s ease, color .16s ease;
}
.sidebar nav button:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.sidebar nav button.active { font-weight: 800; }
/* Barra de acento que marca la sección abierta. */
.sidebar nav button.active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 9px;
  bottom: 9px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--green);
}
.sidebar nav button.active span { color: var(--green); }

/* ----------------------- Encabezados ----------------------- */
.page-header h1 {
  margin: 7px 0 5px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--tinta-fuerte);
}
.page-header p { color: var(--tinta-media); font-size: 13px; }
.eyebrow {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(7, 150, 109, .1);
  color: var(--green);
  font-size: 9px;
  letter-spacing: 1.2px;
}

/* ----------------------- Tarjetas ----------------------- */
.stats article,
.integration-card,
.integration-help,
.metric-panel,
.flow-canvas,
.flow-settings,
.team,
.table-wrap,
.simulator-phone,
.simulator-state,
.whatsapp,
.campaign-card {
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
}

.stats { gap: 20px; }
.stats article {
  padding: 26px 24px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.stats article:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.stats article small {
  display: block;
  color: var(--tinta-media);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
}
.stats article strong {
  display: block;
  margin: 6px 0 2px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -1.2px;
  color: var(--tinta-fuerte);
}
.stats article p { margin: 0; color: var(--tinta-media); font-size: 11px; }

/* Icono circular, como en los paneles de referencia. */
.stat-icon {
  position: static;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 50%;
  font-size: 19px;
}

/* ----------------------- Botones ----------------------- */
.primary-button,
.integration-actions .primary-button,
.simulator-input button {
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .1px;
  box-shadow: 0 8px 18px rgba(7, 150, 109, .26);
  transition: transform .15s ease, box-shadow .15s ease;
}
.primary-button:hover,
.integration-actions .primary-button:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(7, 150, 109, .32); }
.integration-actions button,
.secondary-action,
.flow-zoom button { border-radius: 12px; font-weight: 750; }

/* ----------------------- Filtros y etiquetas ----------------------- */
.filters button,
.setup-pill,
.badge {
  border-radius: 999px;
  font-weight: 700;
}
.filters button { padding: 8px 16px; font-size: 11px; }

/* ----------------------- Formularios ----------------------- */
.integration-form input:not([type="checkbox"]),
.integration-form select,
.integration-form textarea,
.flow-settings input:not([type="checkbox"]),
.flow-settings select,
.flow-settings textarea,
.channel-config input:not([type="checkbox"]),
.simulator-input input,
.search input {
  border-radius: var(--radio-chico);
  border-color: var(--linea-suave);
  background: #fbfcfe;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.integration-form input:focus,
.integration-form select:focus,
.integration-form textarea:focus,
.flow-settings textarea:focus,
.flow-settings select:focus,
.simulator-input input:focus,
.search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(7, 150, 109, .12);
}
.switch-row { border-radius: var(--radio-chico); border-color: var(--linea-suave); background: #fbfcfe; }

/* ----------------------- Tablas ----------------------- */
.table-wrap { overflow: hidden; }
table th {
  color: var(--tinta-media);
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
table td { border-color: var(--linea-suave); }
table tbody tr { transition: background .14s ease; }
table tbody tr:hover { background: #f8fafd; }

/* ----------------------- Bandeja ----------------------- */
.whatsapp { overflow: hidden; }
.chat-list { border-right: 1px solid var(--linea-suave); }
.contact { border-radius: 0; transition: background .14s ease; }
.thread-head { border-bottom: 1px solid var(--linea-suave); }
.compose, .simulator-input { border-top: 1px solid var(--linea-suave); }

/* ----------------------- Tarjetas de integración ----------------------- */
.integration-card { padding: 30px; }
.integration-title h2 { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--tinta-fuerte); }
.integration-logo { width: 52px; height: 52px; border-radius: 16px; }
.integration-card > p { color: var(--tinta-media); font-size: 12.5px; }
.security-note { border-radius: var(--radio-chico); }

/* ----------------------- Equipos ----------------------- */
.team { padding: 26px; }
.team h2 { font-size: 19px; font-weight: 800; color: var(--tinta-fuerte); }
.person { border-radius: var(--radio-chico); }

@media (max-width: 900px) {
  .page-header h1 { font-size: 25px; }
  .stats article strong { font-size: 28px; }
  .stat-icon { width: 44px; height: 44px; margin-bottom: 12px; }
}

/* ----------------------- Pantalla de acceso ----------------------- */
.login-brand { background: linear-gradient(150deg, #0a5f4f 0%, #0b463f 45%, #0c2736 100%); }
/* Brillo suave que da profundidad al panel de marca. */
.login-brand::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7, 150, 109, .38) 0%, transparent 68%);
  pointer-events: none;
}
.login-brand .brand { position: relative; z-index: 1; }
.login-brand .brand-copy { position: relative; z-index: 1; }
.login-brand h1 { font-size: 40px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.12; }
.login-brand p { font-size: 14px; opacity: .82; }
.login-card h2 { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--tinta-fuerte); }
.login-card label { color: var(--tinta-media); font-weight: 700; }
.login-card input {
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--linea-suave);
  background: #fbfcfe;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.login-card input:focus {
  outline: none;
  background: #fff;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(7, 150, 109, .12);
}
.login-card button[type="submit"], #loginButton {
  height: 50px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(7, 150, 109, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
#loginButton:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(7, 150, 109, .34); }

/* ----------------------- Resumen con contenido ----------------------- */
.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.panel{padding:26px;border-radius:var(--radio);background:#fff;box-shadow:var(--sombra-suave)}
.panel-wide{grid-column:1/-1}
.panel-head{margin-bottom:18px}
.panel-head h2{margin:6px 0 0;font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--tinta-fuerte)}

.bar-list{display:grid;gap:14px}
.bar-row{display:grid;grid-template-columns:120px 1fr 34px;gap:12px;align-items:center;font-size:12px}
.bar-row>span{color:var(--tinta-media);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row>b{text-align:right;font-weight:800;color:var(--tinta-fuerte)}
.bar{height:9px;border-radius:999px;background:#eef2f9;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--green);transition:width .4s ease}
.bar.media i{background:#e0a33a}
.bar.alta i{background:#c0392b}

.agent-load{display:grid;gap:14px}
.agent-row{display:grid;grid-template-columns:10px 1fr 100px 42px;gap:12px;align-items:center}
.agent-row b{font-size:12px;color:var(--tinta-fuerte)}
.agent-row small{display:block;color:var(--tinta-media);font-size:10px}
.agent-row>b:last-child{text-align:right;font-size:11px}

.channel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.channel-card{display:flex;align-items:center;gap:11px;padding:15px;border-radius:var(--radio-chico);background:#f8fafd}
.channel-card>span{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.channel-card.ok>span{background:#18c486;box-shadow:0 0 0 4px rgba(24,196,134,.16)}
.channel-card.pendiente>span{background:#e0a33a;box-shadow:0 0 0 4px rgba(224,163,58,.16)}
.channel-card b{display:block;font-size:12px;color:var(--tinta-fuerte)}
.channel-card small{display:block;margin-top:2px;color:var(--tinta-media);font-size:10px;line-height:1.5}

/* ----------------------- Estados vacíos ----------------------- */
.list-empty{display:grid;place-items:center;gap:6px;padding:46px 22px;text-align:center}
.list-empty .empty-icon{font-size:30px;color:#c3cfdd}
.list-empty b{font-size:13px;color:var(--tinta-fuerte)}
.list-empty p{margin:0;color:var(--tinta-media);font-size:11px;line-height:1.6;max-width:210px}

/* ----------------------- Detalles de uso ----------------------- */
#logout{min-height:36px;padding:8px 10px;border-radius:10px}
#logout:hover{background:rgba(255,255,255,.07);color:#fff}
@media (max-width:1000px){.dashboard-grid{grid-template-columns:1fr}}

/* ===========================================================
   Corrección de contraste (WCAG AA, 4.5:1 en texto pequeño).
   Los valores anteriores quedaban entre 3.3 y 4.4.
   =========================================================== */
:root {
  --tinta-media: #566398;   /* antes #707eae · 3.97:1 */
  --muted: #5f6e78;         /* antes #8a9aa3 · 4.38:1 */
  --verde-texto: #05704f;   /* verde legible para texto pequeño */
}
.eyebrow { color: var(--verde-texto); background: rgba(5, 112, 79, .12); }
.integration-help a,
.token-steps a,
.flow-inspector .chip,
.credential-status small,
.schedule-summary,
.simulator-help,
.close-hint,
.flow-hint { color: var(--muted); }
.flow-inspector .chip { color: var(--verde-texto); }
.stats article small,
.stats article p,
.panel-head .eyebrow,
.bar-row > span,
.agent-row small,
.channel-card small,
.list-empty p { color: var(--tinta-media); }

/* ----------------------- Teclado visible ----------------------- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1169f0;
  outline-offset: 2px;
  border-radius: 10px;
}
.sidebar nav button:focus-visible { outline-color: #8ad9c2; }

/* ----------------------- Menos movimiento ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .stats article:hover,
  .primary-button:hover,
  #loginButton:hover { transform: none; }
  .bar i { transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Mensajes que viajaron por el chat web */
.msg .via{display:block;margin-top:4px;font-size:9px;font-style:normal;font-weight:800;letter-spacing:.4px;text-transform:uppercase;opacity:.65}
.msg.via-web{border-left:3px solid #1169f0}
.schedule-summary.error{color:#b4362a}

/* Aviso: el cliente recibió el enlace del chat y nunca lo abrió */
.panel-alerta{border-left:4px solid #b8791a}
.eyebrow.alerta{color:#8a5b12}
.panel-guia{margin:-6px 0 16px;color:var(--tinta-media);font-size:11.5px;line-height:1.6}
.enlaces-lista{display:grid;gap:10px}
.enlace-fila{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:12px 14px;border-radius:12px;background:#fdf5e7}
.enlace-quien b{display:block;font-size:12.5px;color:var(--tinta-fuerte)}
.enlace-quien small{display:block;margin-top:2px;color:var(--tinta-media);font-size:10.5px}
.enlace-espera{color:#8a5b12;font-size:11px;font-weight:800;white-space:nowrap}
.enlace-llamar{padding:8px 18px;border-radius:999px;background:#8a5b12;color:#fff;font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap}
.enlace-llamar:hover{background:#6d480e}
@media (max-width:640px){.enlace-fila{grid-template-columns:1fr auto}.enlace-espera{grid-column:1/-1}}