:root {
  --fondo: #f5f6f8;
  --panel: #ffffff;
  --borde: #e3e6eb;
  --texto: #1c2430;
  --suave: #5f6b7a;
  --marca: #1f4e79;
  --marca-oscura: #163a5b;
  --ok: #1e7a46;
  --ok-fondo: #e6f4ec;
  --alerta: #9a5b00;
  --alerta-fondo: #fff4e0;
  --error: #b42318;
  --error-fondo: #fdecea;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fondo);
}
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 1.25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
.suave { color: var(--suave); }
.chico { font-size: .85rem; }

/* Estructura */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.lateral {
  background: var(--marca-oscura);
  color: #dbe6f1;
  padding: 1.25rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.lateral .logo { font-weight: 700; color: #fff; padding: 0 .75rem 1rem; line-height: 1.2; }
.lateral .logo span { display: block; font-weight: 400; font-size: .8rem; color: #9fb6cc; }
.lateral a {
  color: #dbe6f1;
  padding: .55rem .75rem;
  border-radius: 8px;
  display: block;
}
.lateral a:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
.lateral a.activo { background: rgba(255, 255, 255, .15); color: #fff; font-weight: 600; }
.lateral .marca-empresa { margin: 1.5rem .75rem 0; background: #fff; border-radius: 10px; padding: .7rem .9rem; }
.lateral .marca-empresa img { display: block; width: 100%; max-width: 150px; height: auto; margin: 0 auto; }
.lateral .pie { margin-top: auto; padding: .75rem; font-size: .85rem; color: #9fb6cc; }
.lateral .pie button { margin-top: .5rem; }
.contenido { padding: 2rem; max-width: 1200px; width: 100%; }

/* Componentes */
.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra); }
.kpi .valor { font-size: 1.75rem; font-weight: 700; }
.kpi .nombre { color: var(--suave); font-size: .85rem; }
.fila { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.separado { margin-top: 1rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }
.destacado { font-size: 1.05rem; margin: 0 0 1rem; }
.panel.inferencia { border-left: 4px solid #8a6fd1; }
blockquote { margin: .35rem 0; padding: .35rem .7rem; border-left: 3px solid var(--ok); background: var(--ok-fondo); font-size: .9rem; }
details.panel > summary { cursor: pointer; list-style: revert; }
.aviso ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.fila .campo { margin-bottom: .5rem; }
.score { font-size: 2rem; font-weight: 800; padding: .1rem .8rem; border-radius: 10px; background: #eef1f5; }
.score.ok { background: var(--ok-fondo); color: var(--ok); }
.score.alerta { background: var(--alerta-fondo); color: var(--alerta); }
.score.error { background: var(--error-fondo); color: var(--error); }
.puntos { font-weight: 700; font-variant-numeric: tabular-nums; }
.puntos.pos { color: var(--ok); }
.puntos.neg { color: var(--error); }
form.voto { border: 1px solid var(--borde); border-radius: 8px; padding: .8rem; }
form.voto.bueno { background: #f6fbf8; }
form.voto.malo { background: #fdf7f6; }
form.voto textarea { margin: .4rem 0 .6rem; }
.boton-bueno { background: var(--ok); border-color: var(--ok); width: 100%; }
.boton-bueno:hover { background: #17623a; }
.boton-malo { background: var(--error); border-color: var(--error); width: 100%; }
.boton-malo:hover { background: #8f1c13; }
button.mini { padding: .2rem .5rem; font-size: .9rem; }
button.activo-ok { background: var(--ok); border-color: var(--ok); }
button.activo-error { background: var(--error); border-color: var(--error); }
input.peso { width: 5rem; text-align: right; padding: .3rem .5rem; border: 1px solid var(--borde); border-radius: 6px; font: inherit; }
tr.sospechosa td { background: var(--alerta-fondo); }
a.boton.secundario-enlace { background: #fff; color: var(--marca); }
a.boton.secundario-enlace:hover { background: #eef4fa; }
.fila .campo input[type=text] { width: 6rem; }
.cabecera { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cabecera h1 { margin: 0; }
.cabecera select { width: auto; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); font-weight: 600; }
td.num, th.num { text-align: right; }
td.num { white-space: nowrap; }  /* un importe no se parte en dos renglones */
dl.datos { display: grid; grid-template-columns: 180px 1fr; gap: .4rem 1rem; margin: 0; }
dl.datos dt { color: var(--suave); }
dl.datos dd { margin: 0; }

.etiqueta { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #eef1f5; color: var(--suave); }
.etiqueta.ok { background: var(--ok-fondo); color: var(--ok); }
.etiqueta.alerta { background: var(--alerta-fondo); color: var(--alerta); }
.etiqueta.error { background: var(--error-fondo); color: var(--error); }
.etiqueta.multi { background: #ece8fb; color: #5b45a8; }
.desconocido { color: var(--suave); font-style: italic; }

.aviso { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.aviso.ok { background: var(--ok-fondo); color: var(--ok); }
.aviso.alerta { background: var(--alerta-fondo); color: var(--alerta); }
.aviso.error { background: var(--error-fondo); color: var(--error); }
.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--suave); }

progress.barra { display: block; width: 100%; height: 8px; margin-top: .4rem; accent-color: var(--marca); }
progress.barra.alerta { accent-color: var(--alerta); }
progress.barra.error { accent-color: var(--error); }

/* Inicio: paneo de todo el sistema */
.panel.atender { border-left: 4px solid var(--alerta); }
.lista-atender { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .35rem 1.5rem; }
.lista-atender a { color: var(--texto); text-decoration: none; display: block; padding: .3rem 0; }
.lista-atender a:hover { color: var(--marca); }
.lista-atender .etiqueta { min-width: 2.2rem; text-align: center; font-weight: 700; }
.ok-texto { color: var(--ok); margin: 0; }
.paneo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.paneo .panel { margin-bottom: 0; }
.familia-panel { border-top: 4px solid var(--color, var(--marca)); }
.familia-panel.ventas { --color: #2fae6a; }
.familia-panel.captacion { --color: #3c95d6; }
.familia-panel.compras { --color: #e0704d; }
.familia-panel.sistema { --color: #8e74d9; }
.familia-panel h2 { margin: 0; }
.familia-panel h3 { font-size: .9rem; margin: .9rem 0 .3rem; }
.mini-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; margin: .9rem 0; }
.mini-kpis .valor { font-size: 1.35rem; font-weight: 700; white-space: nowrap; }
.mini-kpis .nombre { color: var(--suave); font-size: .82rem; }
.mini-kpis a { color: inherit; text-decoration: none; }
.barras-canal .fila { margin-top: .5rem; }
progress.barra.canal-mercadolibre { accent-color: #e6b800; }
progress.barra.canal-shopify { accent-color: #2e8b57; }
progress.barra.canal-directa { accent-color: #1f4e79; }
.punto { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; background: #888; }
.punto.canal-mercadolibre { background: #e6b800; }
.punto.canal-shopify { background: #2e8b57; }
.punto.canal-directa { background: #1f4e79; }
table.compacta td { padding: .3rem .4rem; }
.embudo { background: var(--fondo); border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0; line-height: 1.8; }
.embudo a { color: var(--texto); text-decoration: none; }
.embudo strong { font-size: 1.05rem; }
@media (max-width: 1000px) { .paneo { grid-template-columns: 1fr; } }

/* Formularios */
label { display: block; font-weight: 600; margin-bottom: .3rem; }
input[type=text], input[type=email], input[type=password], select {
  width: 100%;
  max-width: 420px;
  padding: .55rem .7rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font: inherit;
  font-size: .9rem;
  resize: vertical;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #9ec3e6; border-color: var(--marca); }
button[disabled] { opacity: .5; cursor: not-allowed; }
.check.chico { font-weight: 400; margin-bottom: .35rem; }
.campo { margin-bottom: 1.1rem; }
.campo .ayuda { color: var(--suave); font-size: .85rem; margin-top: .25rem; }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 600; }
button, .boton {
  display: inline-block;
  padding: .55rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--marca);
  background: var(--marca);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button:hover, .boton:hover { background: var(--marca-oscura); text-decoration: none; }
button.secundario { background: #fff; color: var(--marca); }
button.secundario:hover { background: #eef4fa; }
button.enlace { background: none; border: none; color: #9fb6cc; padding: 0; font-weight: 400; text-decoration: underline; }
form.enlinea { display: inline; }

.paginacion { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: 1rem; }

/* Login */
.login { max-width: 380px; margin: 12vh auto; }
.login .panel { padding: 2rem; }
.login h1 { text-align: center; }

@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; }
  .lateral { flex-direction: row; flex-wrap: wrap; padding: .75rem; }
  .lateral .logo { width: 100%; padding-bottom: .5rem; }
  .lateral .pie { width: 100%; margin-top: .5rem; }
  .lateral .marca-empresa { display: none; }
  .contenido { padding: 1rem; }
  .dos-col { grid-template-columns: 1fr; }
  dl.datos { grid-template-columns: 1fr; }
}
strong.neg { color: var(--error); }
form.asociar { display: flex; gap: .4rem; align-items: center; flex-wrap: nowrap; }
form.asociar select { flex: 1; min-width: 0; margin: 0; }
form.asociar button { margin: 0; white-space: nowrap; }
pre.firma { white-space: pre-wrap; font-family: inherit; background: #f6f8fb; border: 1px solid var(--borde); border-radius: 8px; padding: .6rem .8rem; margin: 0; }
tr.tachado td:first-child { text-decoration: line-through; color: var(--suave); }
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--marca); }
.dos-col.ancho-izq { grid-template-columns: 3fr 2fr; }
@media (max-width: 800px) { .dos-col.ancho-izq { grid-template-columns: 1fr; } }
.error-texto { color: var(--error); font-size: .85rem; }
.fila a.activo { font-weight: 700; }
.lateral .familia { margin: 1.1rem .75rem .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8fa8c0; }
@media (max-width: 800px) { .lateral .familia { width: 100%; margin: .5rem 0 .1rem; } }
td .etiqueta { white-space: nowrap; margin-bottom: .2rem; }
tr.no-leida td { font-weight: 600; }
.lateral .contador { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: #e8a33d; color: #1d2b3a; font-size: .75rem; font-weight: 700; text-align: center; }
th.caja, td.caja { width: 2rem; text-align: center; }
th.caja input, td.caja input { width: 1.05rem; height: 1.05rem; }
.acciones-masivas { margin-bottom: .75rem; align-items: center; }
a.kpi.elegido { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca) inset; }
.kpis.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: .75rem; }
@media (max-width: 900px) { .kpis.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi.verde .valor, .kpi.verde .nombre { color: var(--ok); }
.kpi.amarillo .valor, .kpi.amarillo .nombre { color: var(--alerta); }
.kpi.rojo .valor, .kpi.rojo .nombre { color: var(--error); }
.kpi.patito { background: #ffd93b; border-color: #f2c200; }
.kpi.patito .valor, .kpi.patito .nombre { color: #3d3200; }
a.kpi.patito:hover { background: #ffe066; }
/* Familias del menú: cada una con su color */
.lateral .grupo { --color: #9fb6cc; border-left: 3px solid var(--color); margin: .9rem 0 0; padding-left: .25rem; }
.lateral .grupo .familia { color: var(--color); margin-top: .2rem; }
.lateral .grupo a.activo { background: color-mix(in srgb, var(--color) 28%, transparent); box-shadow: inset 3px 0 0 var(--color); }
.lateral .grupo.captacion { --color: #62b6f2; }
.lateral .grupo.ventas { --color: #4fd18b; }
.lateral .grupo.compras { --color: #f08a6b; }
.lateral .grupo.catalogo { --color: #f2b84b; }
.lateral .grupo.administracion { --color: #b9a3f5; }
@media (max-width: 800px) { .lateral .grupo { width: 100%; display: flex; flex-wrap: wrap; gap: .25rem; } }
.filtro-canal { gap: .5rem; margin-bottom: .5rem; }
.filtro-canal a { padding: .15rem .55rem; border: 1px solid var(--borde); border-radius: 999px; }
.filtro-canal a.activo { background: var(--marca); border-color: var(--marca); color: #fff; text-decoration: none; }
svg.grafico { display: block; width: 100%; height: auto; margin-top: .5rem; }
svg.grafico rect:hover { opacity: .8; }
td.barra-mes { width: 30%; vertical-align: middle; }
td.barra-mes progress.barra { margin-top: 0; }
.kpis.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: .75rem; }
@media (max-width: 800px) { .kpis.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
th a.orden { color: inherit; white-space: nowrap; }
table.presupuesto-items input { width: 100%; max-width: none; padding: .35rem .45rem; }
table.presupuesto-items input.corto { min-width: 4.5rem; }
input.num { text-align: right; }
tr.renglon-error td { background: var(--error-fondo); }
tr.renglon-error input { border-color: var(--error); }
th.interno, td.interno { background: #faf7ff; color: #5b45a8; }
.totales { text-align: right; line-height: 1.8; }
.conversacion { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .8rem; }
.mensaje { border: 1px solid var(--borde); border-radius: 10px; padding: .55rem .8rem; max-width: 85%; }
.mensaje.nuestro { align-self: flex-end; background: #eef4fa; border-color: #c9dbee; }
.mensaje.cliente { align-self: flex-start; background: #fff; }
.mensaje.no-leida { border-color: var(--alerta); background: var(--alerta-fondo); }
pre.texto-mensaje { white-space: pre-wrap; font-family: inherit; font-size: .92rem; margin: .35rem 0 0; }
.respuesta-ventas { border: 1px solid var(--borde); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .6rem; }
.respuesta-ventas.no-leida { border-color: var(--alerta); background: var(--alerta-fondo); }
th a.orden.activo { color: var(--marca); }
th.ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
th.ordenable:hover { color: var(--marca); }
th.ordenable::after { content: " ↕"; opacity: .35; font-size: .8em; }
th.ordenable[data-orden="asc"]::after { content: " ▲"; opacity: 1; }
th.ordenable[data-orden="desc"]::after { content: " ▼"; opacity: 1; }