/* =====================================================================
   INTUR CRM - Hoja de estilos
   Paleta: azul marino primario, rojo de acento, dorado de resalte,
   grises neutros. Estetica sobria, sin emojis.
   ===================================================================== */

:root {
  --navy:        #14294d;
  --navy-2:      #1e3c72;
  --navy-3:      #2a4d8f;
  --rojo:        #c8102e;
  --rojo-osc:    #a10d25;
  --dorado:      #f2b705;
  --dorado-osc:  #cf9d05;

  --gris-fondo:  #f4f6f9;
  --gris-panel:  #ffffff;
  --gris-borde:  #dfe3e8;
  --gris-suave:  #eef1f5;
  --texto:       #232a33;
  --texto-mute:  #6b7280;

  --ok:          #1f8f4e;
  --ok-bg:       #e5f4ec;
  --alerta-bg:   #fdecef;
  --sombra:      0 1px 3px rgba(20, 41, 77, .08), 0 1px 2px rgba(20, 41, 77, .06);
  --radio:       6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--texto);
  background: var(--gris-fondo);
}

a { color: var(--navy-3); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Marca */
.marca { text-align: center; padding: 20px 12px 16px; line-height: 1; }
.marca-intur { font-weight: 800; font-size: 22px; letter-spacing: 1px; color: #fff; }
.marca-sep   { color: var(--dorado); font-weight: 800; margin: 0 3px; }
.marca-peru  { font-weight: 800; font-size: 22px; letter-spacing: 1px; color: var(--dorado); }
.marca-sub   { margin-top: 4px; font-size: 11px; letter-spacing: 3px; color: #b9c6dd; text-transform: uppercase; }

/* --------------------------------------------------------------- Layout */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 230px;
  flex: 0 0 230px;
  background: var(--navy);
  color: #dbe3ef;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.menu { display: flex; flex-direction: column; padding: 6px 0 24px; }
.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  color: #cdd7e6;
  border-left: 3px solid transparent;
  font-size: 13.5px;
}
a.menu-item:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
a.menu-item.activo {
  background: var(--navy-2);
  color: #fff;
  border-left-color: var(--dorado);
  font-weight: 600;
}
.menu-item.deshabilitado { color: #7f8fa8; cursor: default; }
.proximamente {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: rgba(255,255,255,.08);
  color: #9fb0c9;
  padding: 2px 6px;
  border-radius: 10px;
}

.principal { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

/* --------------------------------------------------------------- Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--gris-panel);
  border-bottom: 1px solid var(--gris-borde);
  padding: 10px 22px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.breadcrumbs { font-size: 13px; color: var(--texto-mute); }
.breadcrumbs a { color: var(--navy-3); }
.bc-sep { margin: 0 6px; color: #b7c0cc; }
.bc-actual { color: var(--texto); font-weight: 600; }

.topbar-derecha { display: flex; align-items: center; gap: 12px; }
.busqueda-global {
  padding: 7px 10px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--gris-suave);
  width: 240px;
  color: var(--texto-mute);
}
.usuario { text-align: right; line-height: 1.2; }
.usuario-nombre { display: block; font-weight: 600; font-size: 13px; }
.usuario-rol { display: block; font-size: 11px; color: var(--texto-mute); }

/* --------------------------------------------------------------- Contenido */
.contenido { padding: 22px; flex: 1 1 auto; }
.pie {
  padding: 14px 22px;
  border-top: 1px solid var(--gris-borde);
  color: var(--texto-mute);
  font-size: 12px;
  background: var(--gris-panel);
}

.panel {
  background: var(--gris-panel);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 22px;
  margin-bottom: 20px;
}
.panel-angosto { max-width: 560px; }
.panel-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.titulo-vista { font-size: 20px; margin: 0 0 4px; color: var(--navy); }
.intro { color: var(--texto-mute); max-width: 720px; }
.panel-nota { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gris-borde); }
.panel-nota h2 { font-size: 15px; margin: 0 0 6px; color: var(--navy); }
.panel-nota p { color: var(--texto-mute); margin: 0; }

/* --------------------------------------------------------------- Tarjetas */
.tarjetas { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0; }
.tarjeta {
  border: 1px solid var(--gris-borde);
  border-top: 3px solid var(--navy-2);
  border-radius: var(--radio);
  padding: 16px 18px;
  min-width: 180px;
  background: var(--gris-panel);
}
.tarjeta-valor { font-size: 30px; font-weight: 800; color: var(--navy); }
.tarjeta-titulo { color: var(--texto-mute); font-size: 13px; margin-bottom: 8px; }
.tarjeta-enlace { font-size: 13px; }

/* --------------------------------------------------------------- Flash */
.flash {
  padding: 11px 14px;
  border-radius: var(--radio);
  margin-bottom: 14px;
  border: 1px solid transparent;
  font-size: 13.5px;
}
.flash-exito  { background: var(--ok-bg); border-color: #bfe3ce; color: #196b3c; }
.flash-error  { background: #fdecef; border-color: #f4c2cc; color: var(--rojo-osc); }
.flash-aviso  { background: #fff7e0; border-color: #f3e2a6; color: #8a6d0a; }

/* --------------------------------------------------------------- Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filtro-texto, .filtro-select {
  padding: 8px 10px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: #fff;
  font-size: 13px;
}
.filtro-texto { min-width: 220px; }
.tabla-info { color: var(--texto-mute); font-size: 13px; margin-bottom: 10px; }

/* --------------------------------------------------------------- Tabla */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--gris-borde); vertical-align: middle; }
.tabla thead th { background: var(--gris-suave); color: var(--navy); font-weight: 600; white-space: nowrap; }
.tabla tbody tr:hover { background: #fafbfd; }
.tabla a.orden { color: var(--navy); }
.fila-inactiva { color: var(--texto-mute); background: #fbfbfc; }
.col-acciones { white-space: nowrap; }
.en-linea { display: inline; margin: 0; }

/* --------------------------------------------------------------- Etiquetas */
.etq {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1.6;
}
.etq-ok     { background: var(--ok-bg); color: #196b3c; }
.etq-off    { background: #eef1f5; color: #6b7280; }
.etq-alerta { background: #fdecef; color: var(--rojo-osc); }
.etq-aviso  { background: #fff7e0; color: #8a6d0a; }
.etq-neutro { background: #e8eef7; color: var(--navy-2); }

/* --------------------------------------------------------------- Paginacion */
.paginacion { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.pag {
  padding: 7px 14px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: #fff;
}
.pag-actual { color: var(--texto-mute); font-size: 13px; }

/* --------------------------------------------------------------- Formularios */
/* Estilo base para TODOS los controles de texto: garantiza que ningun
   formulario quede con la apariencia por defecto del navegador. Las clases
   especificas (.filtro-*, .mini-select, .campo, etc.) refinan por encima. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]):not([type=search]),
select,
textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--texto);
  padding: 8px 10px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: #fff;
  max-width: 100%;
}
input:not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus { outline: 2px solid var(--navy-3); border-color: var(--navy-3); }

.formulario { margin-top: 8px; }
.campo { margin-bottom: 14px; }
.campo label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 13px; }
.campo input, .campo select, .formulario input, .formulario select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  font-size: 14px;
  background: #fff;
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--navy-3); border-color: var(--navy-3); }
.ayuda { color: var(--texto-mute); font-size: 12.5px; }
small.ayuda { display: block; margin-top: 4px; }
.acciones { display: flex; gap: 10px; margin-top: 18px; align-items: center; }

/* --------------------------------------------------------------- Botones */
.btn {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--gris-suave);
  color: var(--texto);
  text-decoration: none;
  line-height: 1.2;
}
.btn:hover { text-decoration: none; filter: brightness(.97); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-bloque { width: 100%; text-align: center; }
.btn-primario { background: var(--navy-2); color: #fff; }
.btn-primario:hover { background: var(--navy); }
.btn-linea { background: #fff; border-color: var(--gris-borde); color: var(--navy-2); }
.btn-texto { background: transparent; color: var(--navy-3); }
.btn-ok { background: var(--ok); color: #fff; }
.btn-peligro { background: var(--rojo); color: #fff; }
.btn-peligro:hover { background: var(--rojo-osc); }

/* --------------------------------------------------------------- Pantallas centradas */
.pantalla-centro {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pantalla-login { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); }

.login-caja {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  padding: 28px 26px;
}
.login-marca { text-align: center; margin-bottom: 18px; }
.login-marca .marca-intur, .login-marca .marca-peru { color: var(--navy); }
.login-marca .marca-peru { color: var(--rojo); }
.login-marca .marca-sep { color: var(--dorado); }
.login-marca .marca-sub { color: var(--texto-mute); }
.login-form { display: flex; flex-direction: column; }
.login-form label { font-weight: 600; margin: 8px 0 5px; font-size: 13px; }
.login-form .btn { margin-top: 16px; }
.login-nota { color: var(--texto-mute); font-size: 12px; text-align: center; margin-top: 16px; }

.tarjeta-error { text-align: center; background: #fff; padding: 40px; border-radius: 10px; box-shadow: var(--sombra); }
.tarjeta-error h1 { font-size: 48px; color: var(--navy); margin: 0 0 8px; }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; flex-basis: auto; height: auto; position: static; }
  .menu { flex-direction: row; flex-wrap: wrap; padding: 4px; }
  .menu-item { border-left: none; border-bottom: 3px solid transparent; }
  a.menu-item.activo { border-left: none; border-bottom-color: var(--dorado); }
  .busqueda-global { width: 150px; }
  .topbar { flex-wrap: wrap; }
  .ficha-grid { grid-template-columns: 1fr !important; }
  .pipeline { grid-auto-flow: row !important; grid-template-columns: 1fr 1fr !important; }
}

/* ===================================================================
   Sesion 2 - Leads, ficha, timeline y pipeline
   =================================================================== */

/* Badges de estado */
.etq-est-nuevo       { background: #e8eef7; color: #1e3c72; }
.etq-est-contactado  { background: #e0f2f1; color: #00695c; }
.etq-est-interesado  { background: #fff7e0; color: #8a6d0a; }
.etq-est-agendado    { background: #e9e6fb; color: #4632a8; }
.etq-est-matriculado { background: #e5f4ec; color: #196b3c; }
.etq-est-perdido     { background: #fdecef; color: #a10d25; }

.campo textarea, .formulario textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--gris-borde);
  border-radius: var(--radio); font-size: 14px; font-family: inherit; background: #fff; resize: vertical;
}
.fila-campos { display: flex; gap: 14px; }
.fila-campos .campo { flex: 1 1 0; }
.filtro-fecha { font-size: 12px; color: var(--texto-mute); display: inline-flex; align-items: center; gap: 4px; }
.filtro-fecha input { padding: 7px 8px; border: 1px solid var(--gris-borde); border-radius: var(--radio); }

.busqueda-form { margin: 0; }

/* Acciones rapidas en la tabla */
.accion-rapida { display: inline-flex; gap: 4px; align-items: center; margin-left: 4px; }
.mini-select { padding: 4px 6px; border: 1px solid var(--gris-borde); border-radius: var(--radio); font-size: 12px; max-width: 130px; }

/* Ficha */
.ficha-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.ficha-sub { color: var(--texto-mute); margin-top: 4px; }
.ficha-top-acciones { display: flex; gap: 8px; flex-shrink: 0; }
.ficha-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.ficha-col-main, .ficha-col-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.panel-titulo { font-size: 15px; color: var(--navy); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--gris-borde); }

.datos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
.datos dt { color: var(--texto-mute); font-size: 12.5px; }
.datos dd { margin: 0; font-size: 13.5px; word-break: break-word; }

.linea-accion { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; }
.linea-accion select { flex: 1 1 auto; padding: 8px 10px; border: 1px solid var(--gris-borde); border-radius: var(--radio); background: #fff; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gris-suave); }
.tl-item:last-child { border-bottom: none; }
.tl-fecha { flex: 0 0 110px; color: var(--texto-mute); font-size: 12px; }
.tl-cuerpo { flex: 1 1 auto; min-width: 0; }
.tl-cuerpo strong { font-weight: 600; }
.tl-nota { margin-top: 3px; font-size: 13px; }
.tl-prox { color: #8a6d0a; }
.tl-autor { margin-top: 3px; font-size: 11.5px; color: var(--texto-mute); }
.tl-estado .tl-cuerpo strong { color: var(--navy-2); }

/* Pipeline */
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.pipe-col { background: var(--gris-suave); border: 1px solid var(--gris-borde); border-radius: var(--radio); display: flex; flex-direction: column; }
.pipe-cab { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 2px solid var(--navy-2); font-weight: 600; }
.pipe-est-nuevo .pipe-cab       { border-bottom-color: #1e3c72; }
.pipe-est-contactado .pipe-cab  { border-bottom-color: #00695c; }
.pipe-est-interesado .pipe-cab  { border-bottom-color: var(--dorado-osc); }
.pipe-est-agendado .pipe-cab    { border-bottom-color: #4632a8; }
.pipe-est-matriculado .pipe-cab { border-bottom-color: var(--ok); }
.pipe-est-perdido .pipe-cab     { border-bottom-color: var(--rojo); }
.pipe-nombre { font-size: 13px; }
.pipe-conteo { background: var(--navy); color: #fff; border-radius: 10px; padding: 1px 9px; font-size: 12px; }
.pipe-lista { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.pipe-vacio { color: var(--texto-mute); font-size: 12px; text-align: center; padding: 8px 0; margin: 0; }
.pipe-card { background: #fff; border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 8px 10px; }
.pipe-card-nombre { font-weight: 600; font-size: 13px; display: block; }
.pipe-card-meta { color: var(--texto-mute); font-size: 11.5px; margin: 2px 0 6px; }
.pipe-avanzar { margin: 0; }
.pipe-mas { display: block; text-align: center; font-size: 12px; margin-top: 4px; }

/* ===================================================================
   Sesion 3 - Codigos e influencers
   =================================================================== */
.codigo-enlace { background: var(--gris-suave); border: 1px solid var(--gris-borde); border-radius: 4px; padding: 2px 6px; font-size: 12.5px; color: var(--navy-2); }
.codigo-enlace-bloque { display: block; padding: 10px 12px; word-break: break-all; font-size: 13px; }
.datos-notas { margin-top: 12px; font-size: 13px; color: var(--texto); }

/* ===================================================================
   Sesion 5 - Tablero (KPIs seccion 10)
   =================================================================== */
.tb-periodo { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 4px 0 16px; }
.tb-periodo-nav, .tb-periodo-toggle { display: flex; gap: 8px; align-items: center; }
.tb-periodo-rango { font-size: 14px; padding: 0 6px; font-weight: 600; color: var(--navy); }
.tb-embudo { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tb-embudo-fila { display: grid; grid-template-columns: 110px 1fr 120px; gap: 10px; align-items: center; }
.tb-embudo-label { font-size: 13px; color: var(--texto); }
.tb-embudo-barra { background: var(--gris-suave); border-radius: 4px; height: 22px; overflow: hidden; }
.tb-embudo-relleno { height: 100%; border-radius: 4px; min-width: 2px; background: var(--navy-3); }
.tb-embudo-cifra { font-size: 13px; text-align: right; color: var(--texto); }
.tb-embudo-relleno.tb-est-contactado  { background: #5a7bb5; }
.tb-embudo-relleno.tb-est-interesado  { background: #4a90a4; }
.tb-embudo-relleno.tb-est-agendado    { background: var(--dorado-osc); }
.tb-embudo-relleno.tb-est-matriculado { background: var(--ok); }
.tb-embudo-relleno.tb-est-perdido     { background: var(--rojo); }
.tb-dos-tablas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 10px; }
.tb-subtitulo { font-size: 13px; font-weight: 600; color: var(--navy); margin: 12px 0 6px; }
.tb-num { text-align: right; white-space: nowrap; }
.tb-pipeline { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tb-pipeline-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tb-pipeline-n { font-weight: 600; font-size: 15px; }
.tb-dato-grande { font-size: 32px; font-weight: 700; color: var(--navy); line-height: 1.1; margin: 4px 0; }
.tb-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.tb-lista li { padding: 8px 0; border-bottom: 1px solid var(--gris-suave); font-size: 14px; }
.tb-lista li:last-child { border-bottom: none; }
.tb-lista-nota { display: block; font-size: 12px; color: var(--texto-mute); margin-top: 2px; }
.tb-vencido { color: var(--rojo-osc); font-weight: 600; }
.tb-metrica { padding: 10px 0; border-bottom: 1px solid var(--gris-suave); }
.tb-metrica:last-child { border-bottom: none; }
.tb-metrica-cuenta { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.tb-metrica-red { font-weight: 400; font-size: 12px; color: var(--texto-mute); text-transform: capitalize; }
.tb-metrica-datos dt { color: var(--texto-mute); }
@media (max-width: 720px) {
  .tb-dos-tablas { grid-template-columns: 1fr; }
  .tb-embudo-fila { grid-template-columns: 90px 1fr 96px; }
  .tb-periodo { flex-direction: column; align-items: stretch; }
}

/* ===================================================================
   Sesion 5 - Reportes
   =================================================================== */
.rep-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 12px; }
.rep-tarjeta { display: block; padding: 18px 20px; background: var(--gris-panel); border: 1px solid var(--gris-borde); border-left: 4px solid var(--dorado); border-radius: var(--radio); text-decoration: none; color: var(--texto); }
.rep-tarjeta:hover { box-shadow: var(--sombra); transform: translateY(-2px); text-decoration: none; }
.rep-tarjeta-titulo { font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.rep-tarjeta-desc { font-size: 13px; color: var(--texto-mute); line-height: 1.4; }
.rep-tarjeta-mas { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--dorado-osc); }
.rep-embudo { margin: 18px 0 22px; padding: 16px 18px; background: var(--gris-panel); border: 1px solid var(--gris-borde); border-radius: var(--radio); }
.rep-embudo-titulo { font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.rep-barra-fila { display: grid; grid-template-columns: 190px 1fr 130px; align-items: center; gap: 12px; margin-bottom: 10px; }
.rep-barra-label { font-size: 13px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-barra-pista { background: var(--gris-fondo); border-radius: var(--radio); height: 20px; overflow: hidden; }
.rep-barra { height: 100%; min-width: 2px; background: linear-gradient(90deg, var(--navy-3), var(--navy)); border-radius: var(--radio); }
.rep-barra-valor { font-size: 13px; font-weight: 600; color: var(--navy); text-align: right; }
.rep-embudo-pie { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gris-borde); font-size: 13px; color: var(--texto-mute); }
.tabla tfoot tr.rep-total td { border-top: 2px solid var(--gris-borde); font-weight: 600; background: var(--gris-fondo); }
@media (max-width: 640px) {
  .rep-barra-fila { grid-template-columns: 120px 1fr 90px; gap: 8px; }
  .rep-barra-label { font-size: 12px; }
}

/* =====================================================================
   Test rapido publico (quiz.php)
   Caja centrada mas ancha que el login, sobre el fondo azul de pantalla.
   ===================================================================== */
.quiz-caja {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  padding: 28px 26px;
}
.quiz-titulo { color: var(--navy); font-size: 22px; margin: 0 0 8px; text-align: center; }
.quiz-intro { color: var(--texto-mute); font-size: 14px; line-height: 1.5; margin: 0 0 16px; text-align: center; }

.quiz-form { margin-top: 8px; }
.quiz-pregunta {
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin: 0 0 14px;
}
.quiz-pregunta legend {
  font-weight: 700;
  color: var(--navy);
  font-size: 14.5px;
  padding: 0 6px;
  line-height: 1.4;
}
.quiz-numero { color: var(--dorado-osc); font-weight: 800; margin-right: 4px; }

.quiz-opcion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  margin-top: 8px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: #fff;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.4;
}
.quiz-opcion:hover { background: var(--gris-suave); }
.quiz-opcion input { margin-top: 2px; accent-color: var(--navy-2); }
.quiz-opcion-sel { border-color: var(--navy-3); background: #eef3fb; }

.quiz-acciones { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }

.quiz-resultado {
  text-align: center;
  padding: 22px 16px;
  margin: 4px 0 16px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  border-radius: var(--radio);
}
.quiz-resultado-linea { color: #fff; font-size: 24px; font-weight: 800; letter-spacing: .3px; }

/* ===================================================================
   Refresco visual: menos blanco, mas identidad INTUR (navy/rojo/dorado)
   =================================================================== */
body { background: #e9eef5; }
.contenido { background: linear-gradient(180deg, #e4ebf4 0%, #e9eef5 260px); }

/* Sidebar con degradado navy y franja dorada de marca */
.sidebar { background: linear-gradient(180deg, #16305c 0%, #0d1f3d 100%); box-shadow: inset -1px 0 0 rgba(255,255,255,.04); }
.marca { border-bottom: 2px solid var(--dorado); margin-bottom: 6px; }

/* Topbar blanca con acento dorado inferior */
.topbar { box-shadow: 0 2px 0 var(--dorado); }
.bc-actual { color: var(--navy-2); }

/* Titulos de vista con subrayado dorado */
.titulo-vista { position: relative; padding-bottom: 9px; }
.titulo-vista::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--dorado); border-radius: 2px; }

/* Paneles con mas profundidad */
.panel { box-shadow: 0 2px 10px rgba(20,41,77,.07); }
.panel-titulo { color: var(--navy); }

/* Tarjetas KPI con tinte y acento navy mas marcado */
.tarjeta { background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 70%); border-top: 3px solid var(--navy-2); box-shadow: 0 1px 4px rgba(20,41,77,.06); }
.tarjeta-valor { color: var(--navy-2); }

/* Encabezado de tablas con tinte navy */
.tabla thead th { background: #e7eef8; color: var(--navy); border-bottom: 2px solid #cfdaeb; }
.tabla tbody tr:hover { background: #f2f6fd; }

/* Flash con barra lateral de color (mas presencia) */
.flash { border-left-width: 4px; border-left-style: solid; }
.flash-exito { border-left-color: var(--ok); }
.flash-error { border-left-color: var(--rojo); }
.flash-aviso { border-left-color: var(--dorado-osc); }

/* Panel de bienvenida / notas con tinte suave */
.panel-nota { background: #f4f7fc; margin: 18px -22px -22px; padding: 16px 22px; border-top: 1px solid var(--gris-borde); }

/* Boton primario con leve degradado */
.btn-primario { background: linear-gradient(180deg, #24478a 0%, var(--navy-2) 100%); }
.btn-primario:hover { background: var(--navy); }

/* ===================================================================
   ESTETICA v2 - iconos, tarjetas de color, formularios, skeletons
   =================================================================== */

/* Iconos base */
.icono { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }

/* Barra de carga superior */
#barra-carga { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000;
  background: linear-gradient(90deg, var(--dorado), var(--rojo)); box-shadow: 0 0 8px rgba(242,183,5,.6);
  opacity: 0; transition: width .2s ease, opacity .3s ease; }
#barra-carga.activa { opacity: 1; }

/* Aparicion suave del contenido */
.contenido { animation: aparecer .25s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Sidebar con iconos ---------- */
.menu-item { gap: 11px; }
.menu-icono { display: inline-flex; align-items: center; color: #8fa3c4; transition: color .15s; }
.menu-label { flex: 1 1 auto; }
a.menu-item:hover .menu-icono { color: #cfe0ff; }
a.menu-item.activo .menu-icono { color: var(--dorado); }
.menu-item.deshabilitado .menu-icono { color: #55658a; }
.proximamente { font-size: 9px; }

/* ---------- Topbar: busqueda con icono, avatar, botones de icono ---------- */
.busqueda-caja { position: relative; margin: 0; }
.busqueda-icono { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--texto-mute); pointer-events: none; }
.busqueda-global { padding-left: 34px; width: 260px; background: #f1f4f9; }
.busqueda-global:focus { background: #fff; }

.usuario-chip { display: flex; align-items: center; gap: 9px; padding-left: 4px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .5px;
  box-shadow: 0 0 0 2px rgba(242,183,5,.35); }

.btn-icono { display: inline-flex; align-items: center; justify-content: center; padding: 7px; line-height: 0; }
.btn.btn-icono .icono { display: block; }

/* ---------- Breadcrumbs con iconos ---------- */
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.breadcrumbs a { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; }
.breadcrumbs a:hover { background: var(--gris-suave); text-decoration: none; }
.bc-sep { display: inline-flex; align-items: center; color: #b7c0cc; margin: 0 1px; }
.bc-actual { padding: 3px 6px; }

/* ---------- Flash con icono y cierre ---------- */
.flash { display: flex; align-items: flex-start; gap: 10px; }
.flash-icono { display: inline-flex; margin-top: 1px; flex-shrink: 0; }
.flash-texto { flex: 1 1 auto; }
.flash-cerrar { background: none; border: none; cursor: pointer; color: inherit; opacity: .55; padding: 2px; line-height: 0; }
.flash-cerrar:hover { opacity: 1; }

/* ---------- Botones con iconos ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn .icono { display: inline-block; }

/* ---------- Tarjetas de color (rotan acento por posicion) ---------- */
.tarjeta { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.tarjeta-icono { position: absolute; right: 12px; top: 12px; opacity: .16; }
.tarjeta-icono .icono { width: 40px; height: 40px; }
.tarjetas > .tarjeta:nth-child(4n+1) { border-top-color: var(--navy-2); }
.tarjetas > .tarjeta:nth-child(4n+1) .tarjeta-valor, .tarjetas > .tarjeta:nth-child(4n+1) .tarjeta-icono { color: var(--navy-2); }
.tarjetas > .tarjeta:nth-child(4n+2) { border-top-color: var(--ok); background: linear-gradient(180deg,#f1faf4 0%,#fff 70%); }
.tarjetas > .tarjeta:nth-child(4n+2) .tarjeta-valor, .tarjetas > .tarjeta:nth-child(4n+2) .tarjeta-icono { color: var(--ok); }
.tarjetas > .tarjeta:nth-child(4n+3) { border-top-color: var(--dorado-osc); background: linear-gradient(180deg,#fef8e8 0%,#fff 70%); }
.tarjetas > .tarjeta:nth-child(4n+3) .tarjeta-valor, .tarjetas > .tarjeta:nth-child(4n+3) .tarjeta-icono { color: #b6820a; }
.tarjetas > .tarjeta:nth-child(4n+4) { border-top-color: var(--rojo); background: linear-gradient(180deg,#fdf0f2 0%,#fff 70%); }
.tarjetas > .tarjeta:nth-child(4n+4) .tarjeta-valor, .tarjetas > .tarjeta:nth-child(4n+4) .tarjeta-icono { color: var(--rojo); }

/* ---------- Formularios con estilo (no blancos) ---------- */
.campo input, .campo select, .campo textarea,
.formulario input, .formulario select, .formulario textarea,
.login-form input, .login-form select,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]):not([type=search]),
select, textarea {
  background: #f5f8fd;
  border: 1px solid #d9e1ee;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus,
.formulario input:focus, .formulario select:focus, .formulario textarea:focus,
.login-form input:focus,
input:focus, select:focus, textarea:focus {
  background: #fff; border-color: var(--navy-3); box-shadow: 0 0 0 3px rgba(42,77,143,.12); outline: none;
}
.campo label { color: var(--navy); }
.campo { position: relative; }

/* Panel de formulario con cabecera de color */
.panel-angosto .titulo-vista { margin-bottom: 14px; }

/* ---------- Skeletons ---------- */
.skeleton { position: relative; overflow: hidden; background: #e7ecf3; border-radius: 6px; }
.skeleton::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-100%); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.sk-linea { height: 12px; margin: 8px 0; }
.sk-linea.corta { width: 45%; }
.sk-tarjeta { height: 88px; }

/* ---------- Chip de red social ---------- */
.red-chip { display: inline-flex; align-items: center; gap: 6px; }
.red-ig { color: #d6249f; } .red-tt { color: #010101; } .red-fb { color: #1877f2; }
.red-yt { color: #ff0000; } .red-wa { color: #25d366; }

/* Boton WhatsApp */
.btn-wa { background: #25d366; color: #fff; border: none; }
.btn-wa:hover { background: #1eb455; filter: none; }

/* ---------- Ficha: cabecera con mas presencia ---------- */
.ficha-top { background: linear-gradient(180deg,#fff 0%,#f6f9fe 100%); border: 1px solid var(--gris-borde);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px 20px; }

/* ===================================================================
   Dashboard de inicio, tarjetas de color, cabeceras de contenedor
   =================================================================== */

/* Cabecera de contenedor con celda de color (menos blanco) */
.panel-titulo {
  display: flex; align-items: center; gap: 8px;
  margin: -22px -22px 16px; padding: 11px 22px;
  background: linear-gradient(90deg, #eef3fc, #f4f7fd);
  border-bottom: 1px solid #dde5f1;
  border-radius: var(--radio) var(--radio) 0 0;
  color: var(--navy); font-size: 15px;
}
.panel-titulo .icono { color: var(--navy-3); }

/* Hero del inicio */
.dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.dash-hola { font-size: 24px; color: var(--navy); margin: 0; }
.dash-sub { color: var(--texto-mute); margin: 4px 0 0; }

.dash-alerta { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 16px;
  background: #fdecef; border: 1px solid #f4c2cc; border-left: 4px solid var(--rojo); border-radius: var(--radio);
  color: var(--rojo-osc); text-decoration: none; }
.dash-alerta span { flex: 1 1 auto; }
.dash-alerta:hover { text-decoration: none; filter: brightness(.98); }

/* KPIs de color */
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { position: relative; overflow: hidden; border-radius: 10px; padding: 15px 17px; color: #fff; min-height: 94px;
  box-shadow: 0 3px 10px rgba(20,41,77,.13); }
.kpi-icono { position: absolute; right: 10px; top: 12px; opacity: .32; }
.kpi-valor { font-size: 30px; font-weight: 800; line-height: 1.05; }
.kpi-titulo { font-size: 12.5px; opacity: .93; margin-top: 5px; }
.kpi-azul   { background: linear-gradient(135deg,#2a4d8f,#1e3c72); }
.kpi-cian   { background: linear-gradient(135deg,#2596a4,#1c6f7a); }
.kpi-dorado { background: linear-gradient(135deg,#e0a01a,#c07f08); }
.kpi-verde  { background: linear-gradient(135deg,#26a15a,#1a7d43); }
.kpi-navy   { background: linear-gradient(135deg,#1a3560,#0d1f3d); }
.kpi-rojo   { background: linear-gradient(135deg,#d43a4f,#a10d25); }

/* Rejilla de dos graficas */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 0; }

/* Grafica de barras */
.chart-barras { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.cb-fila { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 10px; }
.cb-label { font-size: 12.5px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-pista { background: #eaeef4; border-radius: 5px; height: 20px; overflow: hidden; }
.cb-barra { height: 100%; min-width: 3px; border-radius: 5px; transition: width .4s ease; }
.cb-valor { font-size: 13px; font-weight: 700; color: var(--navy); text-align: right; }
.dash-verlink { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 13px; font-weight: 600; }

/* Accesos rapidos */
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.acceso { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  padding: 16px 10px; border: 1px solid var(--gris-borde); border-radius: 10px; background: #fff; text-decoration: none;
  transition: transform .12s, box-shadow .12s, border-color .12s; }
.acceso:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(20,41,77,.12); border-color: #c9d6ea; text-decoration: none; }
.acceso-ic { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.acceso-tx { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.ac-azul { background: linear-gradient(135deg,#2a4d8f,#1e3c72); }
.ac-cian { background: linear-gradient(135deg,#2596a4,#1c6f7a); }
.ac-verde { background: linear-gradient(135deg,#26a15a,#1a7d43); }
.ac-dorado { background: linear-gradient(135deg,#e0a01a,#c07f08); }
.ac-rojo { background: linear-gradient(135deg,#d43a4f,#a10d25); }
.ac-navy { background: linear-gradient(135deg,#1a3560,#0d1f3d); }

/* Configuracion: distribucion en rejilla (no panel angosto perdido) */
.config-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items: start; margin-bottom: 18px; }
.config-grid .panel { margin-bottom: 0; }

@media (max-width: 900px) {
  .dash-grid, .config-grid { grid-template-columns: 1fr; }
}
.cab-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ===================================================================
   Influencers: catalogo de tarjetas, perfil, grafica de pastel
   =================================================================== */
.inf-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; }
.inf-card { border: 1px solid var(--gris-borde); border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 8px rgba(20,41,77,.06); transition: transform .14s, box-shadow .14s; display: flex; flex-direction: column; }
.inf-card:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(20,41,77,.14); }
.inf-inactivo { opacity: .72; }

/* Portada: relacion de aspecto fija; la imagen se recorta para no descuadrar */
.inf-cover { position: relative; display: block; aspect-ratio: 1 / 1; background: linear-gradient(135deg,#26437a,#132a51); overflow: hidden; }
.inf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inf-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 46px; font-weight: 800; letter-spacing: 1px; background: linear-gradient(135deg,#2a4d8f,#14294d); }
.inf-red-badge { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.92);
  display: inline-flex; align-items: center; justify-content: center; color: var(--navy); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.inf-off-badge { position: absolute; top: 8px; right: 8px; background: rgba(200,16,46,.92); color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; }

.inf-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.inf-nombre { font-weight: 700; color: var(--navy); font-size: 14.5px; line-height: 1.2; }
.inf-nombre:hover { text-decoration: none; color: var(--navy-3); }
.inf-handle { font-size: 12px; color: var(--texto-mute); }
.inf-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--texto-mute); margin: 2px 0 4px; }
.inf-stats strong { color: var(--navy); }
.inf-redes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.inf-acciones { display: flex; gap: 6px; margin-top: auto; align-items: center; }

/* Iconos de red (chips redondos con color de marca al pasar) */
.red-ic { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #eef2f8; color: #6b7280; transition: background .14s, color .14s, transform .14s; }
.red-ic:hover { transform: translateY(-2px); text-decoration: none; color: #fff; }
.red-ic.red-ig:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.red-ic.red-tt:hover { background: #010101; }
.red-ic.red-fb:hover { background: #1877f2; }
.red-ic.red-yt:hover { background: #ff0000; }
.red-ic.red-wa:hover { background: #25d366; }

/* Perfil del influencer */
.inf-perfil-hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  background: linear-gradient(120deg,#16305c,#0f2244); color: #fff; border-radius: 12px; padding: 18px 20px; margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(20,41,77,.18); }
.inf-hero-foto { width: 96px; height: 96px; border-radius: 14px; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg,#2a4d8f,#14294d); box-shadow: 0 0 0 3px rgba(242,183,5,.4); }
.inf-hero-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inf-hero-ini { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: #fff; }
.inf-hero-info { flex: 1 1 260px; min-width: 220px; }
.inf-hero-nombre { font-size: 22px; margin: 0 0 4px; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inf-hero-sub { color: #c7d5ee; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inf-hero-sub .red-chip { color: #fff; }
.inf-hero-redes { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.inf-hero-redes .red-ic { background: rgba(255,255,255,.14); color: #fff; }
.inf-hero-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.inf-hero-acciones .btn-linea { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.inf-hero-acciones .btn-linea:hover { background: rgba(255,255,255,.22); }

/* Grafica de pastel (donut) */
.pastel-caja { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pastel { width: 158px; height: 158px; border-radius: 50%; position: relative; flex-shrink: 0; box-shadow: 0 3px 10px rgba(20,41,77,.12); }
.pastel-centro { position: absolute; inset: 26%; background: #fff; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: var(--navy); line-height: 1; }
.pastel-centro small { font-size: 10px; font-weight: 600; color: var(--texto-mute); text-transform: uppercase; letter-spacing: .5px; }
/* La leyenda se limita en ancho: sin tope, en pantallas anchas crecia hasta
   el borde del panel y `.ley-pct { margin-left:auto }` mandaba el porcentaje
   a mas de 1.000px del nombre, dejando un hueco enorme. */
.pastel-leyenda { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; max-width: 360px; }
.pastel-leyenda li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.pastel-leyenda strong { white-space: nowrap; }
.ley-punto { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.ley-pct { margin-left: auto; color: var(--texto-mute); font-size: 12px; padding-left: 8px; white-space: nowrap; }
.ley-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El conjunto dona + leyenda se lee como un bloque compacto, no estirado. */
.pastel-caja { align-items: center; }
@media (max-width: 520px) {
  .pastel-caja { gap: 14px; }
  .pastel { width: 132px; height: 132px; }
  .pastel-leyenda { max-width: none; }
}

/* Formulario: foto */
.inf-form-foto { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.inf-form-preview { width: 90px; height: 90px; border-radius: 12px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--gris-borde);
  background: linear-gradient(135deg,#eef2f8,#dde5f1); display: flex; align-items: center; justify-content: center; color: var(--navy-3); }
.inf-form-preview img { width: 100%; height: 100%; object-fit: cover; }
.form-subtitulo { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--navy-3); margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--gris-borde); }
input[type=file] { padding: 6px; font-size: 13px; }

@media (max-width: 700px) { .inf-hero-acciones { margin-left: 0; } }

/* ---------- Pipeline: arrastrar y soltar ---------- */
.pipe-card.pipe-drag { cursor: grab; padding-left: 20px; position: relative; }
.pipe-card.pipe-drag:active { cursor: grabbing; }
.pipe-grip { position: absolute; left: 7px; top: 12px; width: 4px; height: 18px; border-radius: 3px;
  background: repeating-linear-gradient(to bottom, #c4cede 0 2px, transparent 2px 4px); }
.pipe-card.arrastrando { opacity: .45; transform: scale(.98); }
.pipe-lista { min-height: 40px; transition: background .12s, box-shadow .12s; border-radius: 6px; }
.pipe-lista.dz-over { background: #e8f0ff; box-shadow: inset 0 0 0 2px var(--navy-3); }
.pipe-col { background: linear-gradient(180deg, #f6f9fd, var(--gris-suave)); }

/* ===================================================================
   Mejora visual v3 (2026-07-05): pipeline con color por estado,
   reportes / tablero / metricas con graficas y tarjetas (menos listas
   planas). Reutiliza primitivas: .dash-kpis/.kpi, .pastel, .chart-barras.
   =================================================================== */

/* Colores por estado del pipeline/embudo (reutilizables en todo el sistema) */
:root {
  --est-nuevo:       #2a4d8f;
  --est-contactado:  #00838f;
  --est-interesado:  #b6820a;
  --est-agendado:    #5b46c9;
  --est-matriculado: #1f8f4e;
  --est-perdido:     #c8102e;
}

/* ---------- Pipeline con color por columna (solo CSS) ---------- */
.pipe-col { overflow: hidden; border-top: 3px solid transparent; }
.pipe-est-nuevo       { border-top-color: var(--est-nuevo); }
.pipe-est-contactado  { border-top-color: var(--est-contactado); }
.pipe-est-interesado  { border-top-color: var(--est-interesado); }
.pipe-est-agendado    { border-top-color: var(--est-agendado); }
.pipe-est-matriculado { border-top-color: var(--est-matriculado); }
.pipe-est-perdido     { border-top-color: var(--est-perdido); }
.pipe-cab { border-bottom: none; color: #fff; padding: 11px 12px; }
.pipe-cab .pipe-nombre { color: #fff; }
.pipe-cab .pipe-conteo { background: rgba(255,255,255,.28); color: #fff; }
.pipe-est-nuevo       .pipe-cab { background: linear-gradient(135deg,#345da6,#1e3c72); }
.pipe-est-contactado  .pipe-cab { background: linear-gradient(135deg,#00a5b5,#00838f); }
.pipe-est-interesado  .pipe-cab { background: linear-gradient(135deg,#e0a01a,#b6820a); }
.pipe-est-agendado    .pipe-cab { background: linear-gradient(135deg,#7059de,#5b46c9); }
.pipe-est-matriculado .pipe-cab { background: linear-gradient(135deg,#26a15a,#1a7d43); }
.pipe-est-perdido     .pipe-cab { background: linear-gradient(135deg,#d43a4f,#a10d25); }
.pipe-est-nuevo       .pipe-card { border-left: 3px solid var(--est-nuevo); }
.pipe-est-contactado  .pipe-card { border-left: 3px solid var(--est-contactado); }
.pipe-est-interesado  .pipe-card { border-left: 3px solid var(--est-interesado); }
.pipe-est-agendado    .pipe-card { border-left: 3px solid var(--est-agendado); }
.pipe-est-matriculado .pipe-card { border-left: 3px solid var(--est-matriculado); }
.pipe-est-perdido     .pipe-card { border-left: 3px solid var(--est-perdido); }

/* ---------- Layout grafica + tabla lado a lado ---------- */
.rep-split { display: grid; grid-template-columns: minmax(230px, .82fr) 1.18fr; gap: 20px; align-items: start; }
.rep-split > * { min-width: 0; }
@media (max-width: 820px) { .rep-split { grid-template-columns: 1fr; } }

/* ---------- Barras horizontales de etiqueta ancha (nombres largos) ----------
   Modificador de la primitiva .chart-barras/.cb-* ya existente. La barra
   recibe su color por estilo en linea: <div class="cb-barra" style="width:X%;background:COLOR"> */
.chart-barras.cb-lg .cb-fila { grid-template-columns: 152px 1fr 108px; }
.cb-valor.cb-money { font-variant-numeric: tabular-nums; }
.cb-rank { display: inline-block; width: 18px; color: var(--texto-mute); font-weight: 700; text-align: right; margin-right: 6px; }
@media (max-width: 640px) { .chart-barras.cb-lg .cb-fila { grid-template-columns: 104px 1fr 82px; } }

/* ---------- Embudo con etapas de color + tasa de conversion ----------
   Reutiliza .tb-embudo/.tb-embudo-relleno; agrega colores de etapa et-1..4. */
.tb-embudo-relleno.et-1 { background: linear-gradient(90deg,#7059de,#5b46c9); }
.tb-embudo-relleno.et-2 { background: linear-gradient(90deg,#00a5b5,#00838f); }
.tb-embudo-relleno.et-3 { background: linear-gradient(90deg,#345da6,#1e3c72); }
.tb-embudo-relleno.et-4 { background: linear-gradient(90deg,#26a15a,#1a7d43); }
.embudo-conv { grid-column: 1 / -1; font-size: 11.5px; color: var(--texto-mute); text-align: center; padding: 0 0 2px; }
.embudo-conv strong { color: var(--ok); font-weight: 700; }

/* ---------- Franja de resumen (mini-KPIs) para encabezados de reporte ---------- */
.rep-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-bottom: 18px; }

/* ---------- Tarjetas del menu de reportes con icono y acento ---------- */
.rep-tarjeta { display: flex; flex-direction: column; }
.rep-tarjeta-ic { width: 44px; height: 44px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 11px; }
.rep-ac-1 { border-left-color: #2a4d8f; } .rep-ac-1 .rep-tarjeta-ic { background: linear-gradient(135deg,#2a4d8f,#1e3c72); }
.rep-ac-2 { border-left-color: #e0a01a; } .rep-ac-2 .rep-tarjeta-ic { background: linear-gradient(135deg,#e0a01a,#c07f08); }
.rep-ac-3 { border-left-color: #26a15a; } .rep-ac-3 .rep-tarjeta-ic { background: linear-gradient(135deg,#26a15a,#1a7d43); }
.rep-ac-4 { border-left-color: #2596a4; } .rep-ac-4 .rep-tarjeta-ic { background: linear-gradient(135deg,#2596a4,#1c6f7a); }

/* ---------- Pills de red social (metricas y listados) ---------- */
.red-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.red-pill .icono { flex-shrink: 0; }
.red-pill.red-ig { background: #fce4f4; color: #b3187a; }
.red-pill.red-tt { background: #e6e6e6; color: #111; }
.red-pill.red-fb { background: #e3edfc; color: #1257c4; }
.red-pill.red-yt { background: #fde3e3; color: #cc0000; }
.red-pill.red-wa { background: #e3f7ea; color: #128c4a; }
.red-pill.red-otro { background: var(--gris-suave); color: var(--texto-mute); }

/* ---------- Cuentas propias como tarjetas ---------- */
.cuentas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px,1fr)); gap: 14px; }
.cuenta-card { border: 1px solid var(--gris-borde); border-top: 3px solid var(--navy-2); border-radius: 12px; background: #fff;
  padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 2px 8px rgba(20,41,77,.06); }
.cuenta-card.inactiva { opacity: .68; }
.cuenta-card-top { display: flex; align-items: center; gap: 11px; }
.cuenta-avatar { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; flex-shrink: 0; }
.cuenta-avatar.red-ig { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.cuenta-avatar.red-tt { background: #010101; }
.cuenta-avatar.red-fb { background: #1877f2; }
.cuenta-avatar.red-yt { background: #ff0000; }
.cuenta-avatar.red-wa { background: #25d366; }
.cuenta-avatar.red-otro { background: var(--navy-2); }
.cuenta-info { min-width: 0; }
.cuenta-nombre { font-weight: 700; color: var(--navy); line-height: 1.2; }
.cuenta-handle { font-size: 12px; color: var(--texto-mute); }
.cuenta-acciones { display: flex; gap: 6px; margin-top: auto; align-items: center; flex-wrap: wrap; }

/* ---------- Enfasis numerico en tablas ---------- */
.tabla .num-fuerte { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

/* ---------- Barra de progreso compacta dentro de celda de tabla ---------- */
.celda-barra { display: flex; align-items: center; gap: 8px; }
.celda-barra-pista { flex: 1 1 auto; height: 8px; background: var(--gris-suave); border-radius: 5px; overflow: hidden; min-width: 40px; }
.celda-barra-relleno { height: 100%; border-radius: 5px; min-width: 2px; background: linear-gradient(90deg,var(--navy-3),var(--navy)); }

/* ===================================================================
   FASE 2 - Comunicaciones, calendario, proveedores, finanzas,
   documentos y mantenimiento. Reutiliza las primitivas ya existentes
   (.dash-kpis/.kpi, .pastel, .chart-barras, .panel, .tabla, .etq).
   =================================================================== */

/* ---------- Sidebar: encabezado de grupo ---------- */
.menu-grupo {
  padding: 14px 18px 5px; font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: #7f92b3;
}

/* ---------- Estados de pago / documento ---------- */
.etq-pendiente { background: #fff7e0; color: #8a6d0a; }
.etq-parcial   { background: #e8eef7; color: #1e3c72; }
.etq-pagado    { background: var(--ok-bg); color: #196b3c; }
.etq-anulado   { background: #eef1f5; color: #6b7280; }
.etq-vencido   { background: #fdecef; color: var(--rojo-osc); }

/* ---------- Chips de tipo (comunicacion, gasto, documento) ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 11px;
  font-size: 11.5px; font-weight: 600; background: var(--gris-suave); color: var(--texto-mute); }
.chip .icono { flex-shrink: 0; }
.chip-llamada { background: #e8eef7; color: #1e3c72; }
.chip-reunion { background: #e9e6fb; color: #4632a8; }
.chip-mensaje, .chip-whatsapp { background: #e3f7ea; color: #128c4a; }
.chip-correo, .chip-email { background: #e0f2f1; color: #00695c; }
.chip-nota { background: #fff7e0; color: #8a6d0a; }
.chip-visita { background: #fde3e3; color: #b3261e; }
.chip-otro { background: var(--gris-suave); color: var(--texto-mute); }

/* ---------- Historial de comunicacion (timeline enriquecido) ---------- */
.com-lista { list-style: none; margin: 0; padding: 0; }
.com-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--gris-suave); }
.com-item:last-child { border-bottom: none; }
.com-marca { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center; background: var(--gris-suave); color: var(--navy-2); }
.com-cuerpo { flex: 1 1 auto; min-width: 0; }
.com-cab { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; }
.com-asunto { font-weight: 700; color: var(--navy); }
.com-fecha { color: var(--texto-mute); font-size: 12px; margin-left: auto; white-space: nowrap; }
.com-detalle { font-size: 13.5px; line-height: 1.5; margin: 3px 0 0; }
.com-pie { margin-top: 5px; font-size: 11.5px; color: var(--texto-mute); display: flex; gap: 12px; flex-wrap: wrap; }
.com-prox { color: #8a6d0a; font-weight: 600; }
.com-entidad { font-size: 12px; }

/* ---------- Calendario mensual ---------- */
.cal-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px; }
.cal-mes { font-size: 17px; font-weight: 700; color: var(--navy); text-transform: capitalize; }
/* minmax(0,1fr) y min-width:0 son imprescindibles: con 1fr (= minmax(auto,1fr))
   el ancho minimo de cada columna lo impone el texto sin cortar de los eventos,
   la rejilla se desborda y las ultimas columnas quedan recortadas. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--gris-borde);
  border: 1px solid var(--gris-borde); border-radius: var(--radio); overflow: hidden; }
.cal-grid > * { min-width: 0; }
.cal-dow { background: #e7eef8; color: var(--navy); font-weight: 700; font-size: 11.5px;
  text-align: center; padding: 8px 4px; text-transform: uppercase; letter-spacing: .5px; }
.cal-dia { background: #fff; min-height: 104px; padding: 6px 7px; display: flex; flex-direction: column; gap: 4px; }
.cal-dia.otro-mes { background: #f7f9fc; }
.cal-dia.otro-mes .cal-num { color: #b7c0cc; }
.cal-dia.hoy { background: #f2f7ff; box-shadow: inset 0 0 0 2px var(--navy-3); }
.cal-num { font-size: 12px; font-weight: 700; color: var(--texto-mute); }
.cal-dia.hoy .cal-num { color: var(--navy-2); }
.cal-evento { display: block; font-size: 11px; line-height: 1.3; padding: 3px 6px; border-radius: 5px;
  color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-evento:hover { text-decoration: none; filter: brightness(1.08); }
.cal-reunion     { background: #5b46c9; }
.cal-grabacion   { background: #00838f; }
.cal-publicacion { background: #b6820a; }
.cal-vencimiento { background: #c8102e; }
.cal-campana     { background: #2a4d8f; }
.cal-pago        { background: #1f8f4e; }
.cal-seguimiento { background: #6b7280; }
.cal-otro        { background: #4a5568; }
.cal-mas { font-size: 10.5px; color: var(--texto-mute); font-weight: 600; }
.cal-leyenda { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--texto-mute); }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-punto { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
@media (max-width: 760px) {
  .cal-dia { min-height: 70px; }
  .cal-evento { font-size: 9.5px; padding: 2px 4px; }
}

/* ---------- Documentos: tarjetas de archivo ---------- */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.doc-card { border: 1px solid var(--gris-borde); border-radius: 12px; background: #fff; padding: 15px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 8px rgba(20,41,77,.06);
  transition: transform .12s, box-shadow .12s; }
.doc-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(20,41,77,.12); }
.doc-top { display: flex; align-items: flex-start; gap: 11px; }
.doc-ic { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .5px; }
.doc-pdf  { background: linear-gradient(135deg,#e0554f,#c8102e); }
.doc-word { background: linear-gradient(135deg,#3a6fd8,#1e3c72); }
.doc-excel{ background: linear-gradient(135deg,#26a15a,#1a7d43); }
.doc-img  { background: linear-gradient(135deg,#e0a01a,#b6820a); }
.doc-otro { background: linear-gradient(135deg,#6b7280,#4a5568); }
.doc-titulo { font-weight: 700; color: var(--navy); line-height: 1.25; word-break: break-word; }
.doc-meta { font-size: 11.5px; color: var(--texto-mute); }
.doc-acciones { display: flex; gap: 6px; margin-top: auto; align-items: center; flex-wrap: wrap; }

/* ---------- Adjunto en formulario / vista previa ---------- */
.adjunto-actual { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--gris-suave); border: 1px solid var(--gris-borde); border-radius: var(--radio); font-size: 13px; }
.adjunto-actual .icono { color: var(--navy-3); flex-shrink: 0; }

/* ---------- Finanzas: resumen de saldo ---------- */
.saldo-caja { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(120deg,#16305c,#0f2244); color: #fff; border-radius: 12px;
  padding: 18px 22px; margin-bottom: 18px; box-shadow: 0 4px 14px rgba(20,41,77,.18); }
.saldo-monto { font-size: 32px; font-weight: 800; line-height: 1; }
.saldo-etq { font-size: 12px; color: #c7d5ee; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; }
.saldo-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,.18); }
.saldo-item { min-width: 120px; }
.saldo-item .valor { font-size: 18px; font-weight: 700; }
.saldo-bajo { color: #ffd9a0; }
.saldo-acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.saldo-acciones .btn-linea { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.saldo-acciones .btn-linea:hover { background: rgba(255,255,255,.22); }
@media (max-width: 700px) { .saldo-acciones { margin-left: 0; } .saldo-sep { display: none; } }

/* ---------- Mantenimiento: espacio y limpieza ---------- */
.esp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 14px; margin-bottom: 6px; }
.esp-card { border: 1px solid var(--gris-borde); border-left: 4px solid var(--navy-2); border-radius: 10px;
  background: #fff; padding: 14px 16px; }
.esp-nombre { font-size: 12.5px; color: var(--texto-mute); display: flex; align-items: center; gap: 6px; }
.esp-valor { font-size: 22px; font-weight: 800; color: var(--navy); margin-top: 4px; }
.esp-detalle { font-size: 11.5px; color: var(--texto-mute); margin-top: 2px; }
.limp-caja { border: 1px solid #f4c2cc; background: #fdf5f6; border-left: 4px solid var(--rojo);
  border-radius: var(--radio); padding: 16px 18px; margin-top: 6px; }
.limp-caja h3 { margin: 0 0 6px; font-size: 14.5px; color: var(--rojo-osc); }
.previa-lista { list-style: none; margin: 10px 0 0; padding: 0; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--gris-borde); border-radius: var(--radio); background: #fff; }
.previa-lista li { display: flex; align-items: center; gap: 10px; padding: 7px 11px;
  border-bottom: 1px solid var(--gris-suave); font-size: 12.5px; }
.previa-lista li:last-child { border-bottom: none; }
.previa-peso { margin-left: auto; color: var(--texto-mute); font-variant-numeric: tabular-nums; }

/* ---------- Barra de uso de espacio ---------- */
.uso-barra { height: 12px; border-radius: 6px; background: var(--gris-suave); overflow: hidden; display: flex; }
.uso-seg { height: 100%; }

/* ---------- Ficha de dos columnas reutilizable ---------- */
.det-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.det-grid > * { min-width: 0; }
@media (max-width: 900px) { .det-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   RESPONSIVE v2 (2026-08-03)
   La barra superior imponia un ancho minimo de ~514px a TODO el sistema:
   `.topbar-derecha` (buscador de 260px + nombre completo del usuario + dos
   botones) no podia encogerse, asi que en moviles cualquier pagina obligaba
   a hacer scroll horizontal. Se corrige de forma global.
   =================================================================== */

/* Permitir que la cabecera se comprima en vez de empujar el ancho del documento */
.topbar { flex-wrap: wrap; row-gap: 8px; }
.topbar-derecha { min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
.busqueda-caja { min-width: 0; flex: 1 1 auto; max-width: 300px; }
.busqueda-global { width: 100%; min-width: 0; }
.breadcrumbs { min-width: 0; }

/* Grupos de botones: que envuelvan en vez de desbordarse */
.acciones,
.cab-acciones,
.ficha-top-acciones,
.panel-cabecera,
.doc-acciones,
.cuenta-acciones,
.inf-acciones { flex-wrap: wrap; }

@media (max-width: 900px) {
  .contenido { padding: 16px 14px; }
  .panel { padding: 16px; }
  /* La cabecera de contenedor usa margenes negativos: ajustarlos al padding */
  .panel-titulo { margin: -16px -16px 14px; padding: 10px 16px; }
  .panel-nota { margin: 16px -16px -16px; padding: 14px 16px; }
}

@media (max-width: 720px) {
  /* El nombre y el rol del usuario son lo primero que sobra: queda el avatar */
  .usuario { display: none; }
  .titulo-vista { font-size: 18px; }
  .dash-kpis { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; }
  .kpi { padding: 12px 13px; min-height: 82px; }
  .kpi-valor { font-size: 24px; }
  .kpi-titulo { font-size: 11.5px; }
  .esp-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  /* Los filtros se reparten en varias por fila; uno por linea hacia un bloque
     de mas de 300px de alto que obligaba a bajar hasta el listado. */
  .filtros { gap: 8px; }
  .filtros > * { flex: 1 1 150px; }
  .filtro-texto, .filtro-select, .filtro-fecha { min-width: 0; width: 100%; }
  .filtros .btn, .filtros .btn-texto { flex: 0 0 auto; }
}

@media (max-width: 560px) {
  .contenido { padding: 12px 10px; }
  .panel { padding: 13px; }
  .panel-titulo { margin: -13px -13px 12px; padding: 9px 13px; font-size: 14px; }
  .panel-nota { margin: 13px -13px -13px; padding: 12px 13px; }
  .breadcrumbs { font-size: 12px; }
  .busqueda-caja { max-width: none; }
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .filtros > * { flex: 1 1 100%; }
  .saldo-caja { padding: 14px 16px; gap: 12px; }
  .saldo-monto { font-size: 26px; }
  .saldo-acciones { margin-left: 0; width: 100%; }
  .saldo-acciones .btn { flex: 1 1 auto; }
  /* Tarjetas de entidad a una sola columna para que el texto respire */
  .cuentas-grid, .doc-grid, .inf-catalogo { grid-template-columns: 1fr; }
  .com-item { gap: 10px; }
  .com-marca { width: 32px; height: 32px; }
  .com-fecha { margin-left: 0; width: 100%; }
  .paginacion { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 400px) {
  .dash-kpis { grid-template-columns: 1fr; }
  .marca-intur, .marca-peru { font-size: 19px; }
  /* Botones de cabecera con textos largos ("Nuevo modelo o proveedor"):
     a lo ancho y con el texto en varias lineas en vez de desbordarse. */
  .panel-cabecera { align-items: stretch; }
  .panel-cabecera > .btn,
  .ficha-top-acciones, .cab-acciones { width: 100%; }
  .ficha-top-acciones > .btn, .cab-acciones > .btn, .panel-cabecera > .btn {
    flex: 1 1 auto; white-space: normal; text-align: center;
  }
}

/* ---------- Filtros plegables en movil (lo inyecta app.js) ---------- */
.filtros-toggle {
  display: none; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin-bottom: 12px; padding: 10px 14px; cursor: pointer;
  background: var(--gris-suave); border: 1px solid var(--gris-borde); border-radius: var(--radio);
  color: var(--navy); font-weight: 600; font-size: 13.5px; font-family: inherit;
}
.filtros-toggle:hover { background: #e7eef8; }
.filtros-chevron {
  width: 9px; height: 9px; flex-shrink: 0; margin-right: 3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s;
}
.filtros-toggle[aria-expanded="true"] .filtros-chevron { transform: rotate(-135deg) translate(-2px, -2px); }
.filtros.plegado { display: none; }

/* ---------- Buscador dentro de desplegables largos (lo inyecta app.js) ---------- */
.select-buscable { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.select-buscable select { width: 100%; }
.select-busqueda {
  width: 100%; font-size: 12.5px; padding: 6px 9px;
  background: #fff; border: 1px dashed #c3d0e4; border-radius: var(--radio); color: var(--texto);
}
.select-busqueda::placeholder { color: #9aa7b8; font-style: italic; }
.select-busqueda:focus { border-style: solid; border-color: var(--navy-3); }
.select-aviso { font-size: 11.5px; color: var(--texto-mute); min-height: 14px; }
.select-aviso.vacio { color: var(--rojo-osc); font-weight: 600; }
/* En las barras de filtros el buscador va mas compacto */
.filtros .select-buscable { flex: 1 1 190px; }
.filtros .select-aviso { display: none; }

/* Resguardo: un .panel-titulo que NO es el primer hijo se usa como separador
   dentro del panel. Su margen negativo superior (pensado para pegarlo al borde
   del panel) lo montaria sobre el contenido anterior, asi que se compensa. */
.panel > .panel-titulo:not(:first-child) { margin-top: 20px; }
/* La grafica de dona nunca debe quedar pegada al borde inferior del panel. */
.panel > .pastel-caja:last-child { margin-bottom: 2px; }

/* ---------- Menu lateral: secciones colapsables ---------- */
.menu-grupo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: none; border: none; cursor: pointer; font-family: inherit;
  text-align: left; transition: color .15s;
}
.menu-grupo:hover { color: #cfe0ff; }
.menu-grupo:focus-visible { outline: 2px solid var(--dorado); outline-offset: -2px; }
.menu-chevron {
  width: 7px; height: 7px; flex-shrink: 0; margin-right: 2px; opacity: .75;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .18s;
}
.menu-grupo[aria-expanded="false"] .menu-chevron { transform: rotate(-45deg) translate(-1px, 1px); }
.menu-grupo-items { display: flex; flex-direction: column; overflow: hidden; }
.menu-grupo-items.plegado { display: none; }
/* Aviso discreto de que un grupo plegado contiene la vista actual */
.menu-grupo.con-activo .menu-grupo-txt { color: var(--dorado); }

@media (max-width: 860px) {
  /* En horizontal la barra ya se comporta distinto: los grupos no se pliegan */
  .menu-grupo { width: auto; }
  .menu-grupo-items { flex-direction: row; flex-wrap: wrap; }
}

/* ===================================================================
   Manual de usuario
   =================================================================== */
.man-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.man-card { display: flex; gap: 12px; align-items: flex-start; padding: 15px;
  border: 1px solid var(--gris-borde); border-radius: 12px; background: #fff; text-decoration: none;
  box-shadow: 0 2px 8px rgba(20,41,77,.06); transition: transform .12s, box-shadow .12s, border-color .12s; }
.man-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(20,41,77,.13);
  border-color: #c9d6ea; text-decoration: none; }
.man-ic { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; }
.man-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.man-titulo { font-weight: 700; color: var(--navy); font-size: 14.5px; }
.man-resumen { font-size: 12.5px; color: var(--texto-mute); line-height: 1.45; }

/* Cabecera de una seccion */
.man-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(120deg,#16305c,#0f2244); color: #fff; border-radius: 12px;
  padding: 18px 22px; margin-bottom: 18px; box-shadow: 0 4px 14px rgba(20,41,77,.18); }
.man-hero-ic { width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0; color: #fff;
  background: rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px rgba(242,183,5,.35); }
.man-hero-txt { flex: 1 1 260px; min-width: 200px; }
.man-hero-grupo { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #b9c6dd; }
.man-hero-titulo { font-size: 23px; margin: 2px 0 0; color: #fff; }
.man-hero-resumen { margin: 6px 0 0; color: #c7d5ee; font-size: 13.5px; line-height: 1.5; }
.man-hero .btn-linea { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.man-hero .btn-linea:hover { background: rgba(255,255,255,.22); }

/* Contenido */
.man-parrafo { margin: 0; line-height: 1.65; font-size: 14px; }
.man-pasos { margin: 8px 0 0; padding-left: 22px; }
.man-pasos li { padding: 5px 0; line-height: 1.55; font-size: 14px; }
.man-pasos li::marker { color: var(--navy-3); font-weight: 700; }

.man-nota { display: flex; gap: 11px; align-items: flex-start; padding: 13px 16px; margin-bottom: 20px;
  border-radius: var(--radio); border: 1px solid transparent; border-left-width: 4px; border-left-style: solid;
  font-size: 13.5px; line-height: 1.55; }
.man-nota-ic { flex-shrink: 0; margin-top: 1px; }
.man-consejo { background: var(--ok-bg); border-color: #bfe3ce; border-left-color: var(--ok); color: #17603a; }
.man-aviso { background: #fff7e0; border-color: #f3e2a6; border-left-color: var(--dorado-osc); color: #7a5f08; }

/* Navegacion entre secciones */
.man-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }

/* Indice lateral */
.man-indice { position: sticky; top: 78px; }
.man-lista { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; }
.man-lista li { padding: 1px 0; }
.man-lista a { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 6px;
  font-size: 13px; color: var(--texto); }
.man-lista a:hover { background: var(--gris-suave); text-decoration: none; }
.man-lista a.man-actual { background: #e8eef7; color: var(--navy); font-weight: 700; }
.man-lista-grupo { margin-top: 10px; padding: 4px 9px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--texto-mute); }
.man-lista-grupo:first-child { margin-top: 0; }

@media (max-width: 900px) { .man-indice { position: static; } .man-lista { max-height: none; } }