/* CRM 123edu — estilos base */
/* Colores del logo 123EDU: cubo azul/rojo/verde, gris del wordmark */
:root {
  --azul: #2e78be;
  --azul-osc: #1f5a94;
  --rojo: #e03c31;
  --verde: #8dc63f;
  --verde-osc: #6ea52c;
  --gris-marca: #58595b;
  --gris-claro: #a7a9ac;
  --acento: var(--verde);
  --fondo: #f4f6f9;
  --borde: #d9dfe7;
  --texto: #22303c;
  --ok: #1e7d43;
  --error: #b3261e;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}
a { color: var(--azul); }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
.ayuda { color: #5b6b7a; margin-top: 0; }

/* ---------- barra superior ---------- */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  background: var(--azul); color: #fff;
  padding: .55rem 1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .55rem; }
.brand-logo { width: 34px; height: 34px; background: #fff; border-radius: 8px; padding: 3px; }
.brand small { display: block; opacity: .75; font-size: .72rem; }
/* Wordmark: "123" oscuro y "EDU" claro como en el logo */
.marca-123 { font-weight: 700; }
.marca-edu { font-weight: 700; opacity: .75; letter-spacing: .03em; }
.topbar .marca-123, .topbar .marca-edu { color: #fff; }
.mainnav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.mainnav a {
  color: #fff; text-decoration: none; padding: .45rem .7rem;
  border-radius: 8px; font-size: .95rem;
}
.mainnav a:hover { background: var(--azul-osc); }
.mainnav a.active { background: var(--azul-osc); font-weight: 600; }
.navtoggle { display: none; background: none; border: 0; color: #fff; font-size: 1.4rem; }
.userbox { display: flex; align-items: center; gap: .5rem; }
.username { font-size: .9rem; }
.rolechip {
  font-size: .72rem; padding: .15rem .5rem; border-radius: 999px;
  background: var(--acento); color: #fff; font-weight: 600;
}
/* Roles con los tres colores del cubo */
.rolechip.admin { background: var(--rojo); }
.rolechip.comercial { background: var(--verde-osc); }
.rolechip.marketing { background: var(--azul-osc); border: 1px solid rgba(255,255,255,.35); }

@media (max-width: 720px) {
  .navtoggle { display: block; margin-left: auto; }
  .mainnav { display: none; width: 100%; flex-direction: column; }
  .topbar.nav-open .mainnav { display: flex; }
}

/* ---------- contenido ---------- */
.contenido { max-width: 1100px; margin: 1.2rem auto; padding: 0 1rem; }

.flash { padding: .6rem .9rem; border-radius: 8px; margin-bottom: .8rem; }
.flash.ok { background: #e2f3e8; color: var(--ok); }
.flash.error { background: #fbe7e6; color: var(--error); }

.tarjetas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .9rem; margin-top: 1rem;
}
.tarjeta {
  background: #fff; border: 1px solid var(--borde); border-radius: 12px;
  padding: 1rem;
}
.tarjeta h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.tarjeta p { margin: 0 0 .6rem; font-size: .88rem; color: #5b6b7a; }
.tarjeta.pendiente { opacity: .85; }
.etiqueta {
  font-size: .72rem; background: var(--fondo); border: 1px solid var(--borde);
  padding: .15rem .5rem; border-radius: 999px; color: #5b6b7a;
}

.panel {
  background: #fff; border: 1px solid var(--borde); border-radius: 12px;
  padding: .9rem 1rem; margin: .8rem 0;
}
.panel summary { cursor: pointer; font-weight: 600; }

.form-linea { display: flex; gap: .7rem; flex-wrap: wrap; align-items: end; margin-top: .8rem; }
.form-columna { display: flex; flex-direction: column; gap: .7rem; max-width: 380px; }
label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; font-weight: 600; }
input, select {
  padding: .45rem .6rem; border: 1px solid var(--borde); border-radius: 8px;
  font-size: .95rem; font-weight: 400; min-width: 150px;
}

.btn {
  display: inline-block; background: #fff; border: 1px solid var(--borde);
  color: var(--texto); border-radius: 8px; padding: .45rem .8rem;
  font-size: .9rem; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--fondo); }
.btn-sm { padding: .25rem .55rem; font-size: .8rem; }
.btn-primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-osc); }
.topbar .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.topbar .btn:hover { background: var(--azul-osc); }

/* ---------- tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--borde); }
/* Las tablas con muchas columnas se envuelven en esta caja para que se
   desplacen solas en pantallas angostas, en vez de arrastrar la página. */
.tabla-caja { overflow-x: auto; max-width: 100%; }
.tabla-caja > .tabla { min-width: 42rem; }
.tabla th, .tabla td { padding: .55rem .7rem; text-align: left; font-size: .9rem; }
.tabla thead { background: var(--fondo); }
.tabla tbody tr { border-top: 1px solid var(--borde); }
.tabla tr.inactivo { opacity: .55; }
.acciones { display: flex; gap: .4rem; align-items: start; flex-wrap: wrap; }
.acciones form { margin: 0; }

/* ---------- CRM (etapa 1) ---------- */
.conteo { color: #8a97a5; font-size: .85rem; font-weight: 400; }
.miga { font-size: .85rem; margin: 0 0 .2rem; }
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.filtros input[type=search] { flex: 1; min-width: 200px; }

.chip {
  display: inline-block; font-size: .75rem; padding: .12rem .55rem;
  border-radius: 999px; background: #e4efdb; color: var(--verde-osc);
  margin: 0 .2rem .2rem 0;
}
.chip.gris { background: var(--fondo); color: #5b6b7a; border: 1px solid var(--borde); }
.chip.rojo { background: #fbe7e6; color: var(--error); }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } }

.checks { display: flex; gap: .8rem; flex-wrap: wrap; font-weight: 400; }
.check { flex-direction: row; align-items: center; gap: .3rem; }
.check input { min-width: auto; }
label.ancho { flex-basis: 100%; }
textarea {
  padding: .45rem .6rem; border: 1px solid var(--borde); border-radius: 8px;
  font-size: .95rem; font-weight: 400; font-family: inherit; width: 100%;
}

.vacio { color: #8a97a5; font-style: italic; }
.panel-int { margin-top: .6rem; }
.panel-int > summary { list-style: none; display: inline-block; }
.tabla-mini td { padding: .25rem .6rem .25rem 0; font-size: .88rem; }
.tabla-mini td:first-child { color: #5b6b7a; }

.item-contacto {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .55rem 0; border-top: 1px solid var(--borde);
}
.item-contacto:first-of-type { border-top: 0; }
.nota { color: #8a97a5; }

.item-tarea { display: flex; align-items: center; gap: .45rem; padding: .3rem 0; }
.item-tarea.hecha span, tr.hecha td { text-decoration: line-through; color: #8a97a5; }
.btn-check { background: none; border: 0; font-size: 1.05rem; cursor: pointer; padding: 0; }
.vencida { color: var(--error); font-weight: 700; }
.btn-peligro { color: var(--error); border-color: #f0c4c1; margin-top: .5rem; }

.timeline { margin-top: .8rem; }
.evento {
  display: flex; gap: .6rem; padding: .5rem 0;
  border-top: 1px solid var(--borde);
}
.evento-ico { font-size: 1.1rem; }
.evento-meta { color: #8a97a5; }

/* Cobertura por línea de negocio (etapa 1B) */
.cobertura { display: inline-flex; gap: .35rem; flex-wrap: wrap; margin-left: .6rem; }
.cob {
  display: inline-block; font-size: .78rem; padding: .1rem .45rem;
  border-radius: 999px; border: 1px solid var(--borde); background: var(--fondo);
  color: #5b6b7a; white-space: nowrap;
}
.cob.\31 23edu { background: #e4efdb; border-color: var(--verde); color: var(--verde-osc); }
.cob.competidor { background: #fbe7e6; border-color: var(--rojo); color: var(--error); }
.cob.mixto { background: #fdf2dc; border-color: #e0a82e; color: #9a6d00; }
.celda-cob { white-space: nowrap; }
.celda-cob .cob { padding: .1rem .3rem; }
.sub-bloque { border-top: 1px solid var(--borde); margin-top: .8rem; padding-top: .6rem; }
.form-chip { display: inline; }
.form-chip .btn-check { font-size: .75rem; }
.cat-grupo { margin: .5rem 0; }
details.panel-int { margin-top: .55rem; }
details.panel-int > summary { margin-bottom: .3rem; }

/* Documentos de la oportunidad */
.resumen-docs { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }
.doc-total {
  font-size: .85rem; padding: .25rem .6rem; border-radius: 8px;
  background: var(--fondo); border: 1px solid var(--borde);
}
.doc-total.pendiente-cobro { background: #fdf2dc; border-color: #e0a82e; color: #9a6d00; }
tr.fila-vencida { background: #fdf1f0; }
.texto-rojo { color: var(--error); }

/* Hijos, carreras y cumpleaños */
.hijo {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .55rem 0; border-top: 1px solid var(--borde);
}
.hijo:first-of-type { border-top: 0; }
.facultad { margin: .7rem 0 .2rem; color: var(--azul); font-size: .9rem; }
.cumples { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; margin-top: .6rem; }
.cumple {
  display: flex; gap: .55rem; align-items: center; padding: .45rem .6rem;
  border: 1px solid var(--borde); border-radius: 10px; background: #fff;
  text-decoration: none; color: inherit; font-size: .88rem;
}
.cumple:hover { border-color: var(--azul); }
.cumple.hoy { border-color: var(--verde); background: #f2f9ea; }
.cumple-dia {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--fondo); color: var(--azul); font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.cumple.hoy .cumple-dia { background: var(--verde); color: #fff; }

/* Logos de colegios y empresas */
.cabecera-cuenta { display: flex; gap: .9rem; align-items: flex-start; }
.cabecera-cuenta h1 { margin-bottom: .2rem; }
.logo-ficha {
  width: 72px; height: 72px; object-fit: contain; flex: none;
  background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 5px;
}
.logo-mini {
  width: 34px; height: 34px; object-fit: contain;
  background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 2px;
}
.vacio-logo {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fondo); color: #8a97a5; font-size: 1.2rem;
}
.logo-ficha.vacio-logo { font-size: 2rem; }
.celda-logo { width: 44px; }
@media (max-width: 600px) { .cabecera-cuenta { flex-direction: column; } }

/* Investigación con IA */
.hallazgo { border-top: 1px solid var(--borde); padding: .7rem 0; }
.hallazgo:first-of-type { border-top: 0; }
.hallazgo .check { display: inline-flex; margin-right: .5rem; }
.hallazgo.vacio-bloque { opacity: .55; }
.fuente { font-size: .78rem; margin-left: .3rem; }
.oportunidad { padding: .5rem 0; border-top: 1px solid var(--borde); }
.oportunidad:first-of-type { border-top: 0; }
.fuentes { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .85rem; }
.girando { display: inline-block; animation: girar 1.6s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Kanban de oportunidades (etapa 2) */
.contenido.ancho-completo { max-width: min(1800px, 97vw); }

.kanban {
  display: grid; gap: .55rem; margin: 1rem 0; align-items: start;
  /* Una columna por etapa, todas visibles sin desplazarse. */
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
}
.col-kanban {
  background: #eef1f5; border: 1px solid var(--borde); border-radius: 12px;
  padding: .45rem; min-height: 150px; min-width: 0;
}
.col-kanban.sobre { background: #dcebfa; border-color: var(--azul); }
.col-cab { margin-bottom: .45rem; line-height: 1.25; }
.col-cab strong { font-size: .86rem; overflow-wrap: anywhere; }
.col-cab small { display: block; color: #5b6b7a; font-size: .76rem; }
.tarjeta-opo {
  display: flex; flex-direction: column; gap: .08rem;
  background: #fff; border: 1px solid var(--borde); border-radius: 10px;
  padding: .45rem .55rem; margin-bottom: .45rem; cursor: grab;
  text-decoration: none; color: inherit; font-size: .84rem;
  overflow-wrap: anywhere;
}
.tarjeta-opo strong { line-height: 1.25; }
.tarjeta-opo small { font-size: .76rem; }
.tarjeta-opo:hover { border-color: var(--azul); }
.tarjeta-opo.arrastrando { opacity: .5; }

/* En pantallas angostas el kanban vuelve a desplazarse de lado */
@media (max-width: 900px) {
  .kanban {
    grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: 78vw; overflow-x: auto; padding-bottom: .5rem;
  }
}

/* Vista de lista: la misma información en tabla, útil con muchas oportunidades */
.vistas { display: flex; gap: .3rem; margin-left: auto; }
.fila-etapa td { background: var(--fondo); font-weight: 600; font-size: .85rem; }

.tarjeta.stat { text-decoration: none; color: inherit; }
.tarjeta.stat:hover { border-color: var(--azul); }
.stat-num { font-size: 1.9rem; font-weight: 800; color: var(--azul); }

/* ---------- login ---------- */
.login-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--azul) 0%, var(--azul-osc) 100%);
}
.login-card {
  background: #fff; border-radius: 16px; padding: 2rem;
  width: min(360px, 92vw); display: flex; flex-direction: column; gap: .8rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.login-logo { width: 84px; height: 84px; align-self: center; }
.login-card h1 { text-align: center; margin: 0; letter-spacing: .02em; }
.login-card .marca-123 { color: var(--gris-marca); }
.login-card .marca-edu { color: var(--gris-claro); }
.login-card .marca-crm { color: var(--azul); font-weight: 600; font-size: .8em; }
.login-sub { text-align: center; color: var(--gris-claro); margin: 0 0 .5rem; font-size: .9rem; font-style: italic; }