para el scroll horizontal. */
.tabla-scroll { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
text-align: left; font-weight: 600; font-size: 12.5px; color: var(--tinta-2);
text-transform: uppercase; letter-spacing: 0.04em;
padding: 10px 14px; border-bottom: 1px solid var(--eje);
white-space: nowrap;
}
.tabla td { padding: 9px 14px; border-bottom: 1px solid var(--gridline); vertical-align: top; }
.tabla tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: color-mix(in srgb, var(--gridline) 30%, transparent); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; } /* columnas numéricas */
.tabla .sin-datos { color: var(--tinta-suave); font-style: italic; }
.tabla tfoot td { font-weight: 650; border-top: 1px solid var(--eje); }
/* ---------- .funnel — embudo horizontal por fases ---------- */
/* Markup:
Agendadas
64
—
… (cada fase: width = valor / valorPrimeraFase × 100 %)
El ratio de cada fase respecto a la anterior va en .funnel-ratio: "72% (46/64)".
*/
.funnel { display: flex; flex-direction: column; gap: 2px; } /* hueco 2px entre marcas */
.funnel-fase {
display: grid; grid-template-columns: 130px 1fr 56px minmax(90px, auto);
gap: 10px; align-items: center;
}
.funnel-etiqueta { font-size: 13px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funnel-pista { display: block; height: 22px; }
/* Rampa ordinal del funnel: solo pasos del secuencial, de mayor a menor
(sec-550 → 450 → 350 → 250). Monótona y con ΔL ≥ 0.06 en claro y oscuro.
El min-width del 0 lo pone el render solo cuando el valor es > 0. */
.funnel-barra {
display: block; height: 100%;
background: var(--sec-550);
border-radius: 0 4px 4px 0; /* extremo de dato redondeado, base cuadrada */
}
.funnel-fase:nth-child(2) .funnel-barra { background: var(--sec-450); }
.funnel-fase:nth-child(3) .funnel-barra { background: var(--sec-350); }
.funnel-fase:nth-child(4) .funnel-barra { background: var(--sec-250); }
.funnel-valor { font-size: 14px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.funnel-ratio { font-size: 12.5px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
/* ---------- .barras — barras horizontales finas comparativas ---------- */
/* Markup:
width = valor / máximo de la serie × 100 %. Texto SIEMPRE en tintas, nunca en color de serie. */
.barras { display: flex; flex-direction: column; gap: 2px; } /* hueco 2px */
.barra-fila {
display: grid; grid-template-columns: minmax(110px, 160px) 1fr minmax(60px, auto);
gap: 10px; align-items: center;
}
.barra-etiqueta { font-size: 13px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-pista { display: block; height: 12px; background: color-mix(in srgb, var(--gridline) 45%, transparent); border-radius: 0 4px 4px 0; }
.barra {
display: block; height: 100%;
background: var(--serie-1);
border-radius: 0 4px 4px 0; /* redondeo 4px solo en el extremo de dato */
/* sin min-width aquí: un 0 real pinta 0; el render añade min-width solo si el valor > 0 */
}
.barra-valor { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
/* ---------- .badge-estado — SIEMPRE icono + texto, nunca solo color ---------- */
/* Markup:
● Activo
El carácter-icono forma parte del contenido (●, ◐, ✓, ◼, ✕, ○, …, ⚠). */
.badge-estado {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12.5px; font-weight: 600;
padding: 2px 9px; border-radius: 999px;
border: 1px solid var(--borde);
color: var(--tinta-2);
background: color-mix(in srgb, var(--gridline) 40%, transparent);
white-space: nowrap;
}
.badge-activo { color: var(--exito-texto); background: color-mix(in srgb, var(--estado-good) 12%, transparent); border-color: color-mix(in srgb, var(--estado-good) 40%, transparent); }
.badge-en-renovacion { color: var(--tinta); background: color-mix(in srgb, var(--estado-warning) 18%, transparent); border-color: color-mix(in srgb, var(--estado-warning) 50%, transparent); }
.badge-renovado { color: var(--exito-texto); background: color-mix(in srgb, var(--estado-good) 12%, transparent); border-color: color-mix(in srgb, var(--estado-good) 40%, transparent); }
.badge-finalizado { color: var(--tinta-2); }
.badge-perdido { color: var(--critico-texto); background: color-mix(in srgb, var(--estado-critical) 10%, transparent); border-color: color-mix(in srgb, var(--estado-critical) 40%, transparent); }
.badge-pendiente { color: var(--tinta-2); }
.badge-en-curso { color: var(--tinta); background: color-mix(in srgb, var(--estado-warning) 18%, transparent); border-color: color-mix(in srgb, var(--estado-warning) 50%, transparent); }
.badge-hecha { color: var(--exito-texto); background: color-mix(in srgb, var(--estado-good) 12%, transparent); border-color: color-mix(in srgb, var(--estado-good) 40%, transparent); }
.badge-alerta { color: var(--critico-texto); background: color-mix(in srgb, var(--estado-critical) 10%, transparent); border-color: color-mix(in srgb, var(--estado-critical) 40%, transparent); }
.badge-sin-rellenar { color: var(--tinta-suave); font-style: italic; }
/* ---------- formularios ---------- */
/* Markup:
*/
.formulario { display: flex; flex-direction: column; gap: 12px; }
.form-fila { display: flex; flex-direction: column; gap: 4px; }
.form-fila label { font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.ayuda { font-size: 12px; color: var(--tinta-suave); } /* también válida fuera de .form-fila (p. ej. nota SeQura en la ficha de cliente) */
.form-fila input, .form-fila select, .form-fila textarea {
font: inherit; color: var(--tinta);
background: var(--superficie);
border: 1px solid var(--eje); border-radius: 8px;
padding: 8px 10px;
}
.form-fila input:focus, .form-fila select:focus, .form-fila textarea:focus {
outline: 2px solid var(--sec-400); outline-offset: 1px; border-color: var(--sec-400);
}
.form-fila input:invalid:not(:placeholder-shown) { border-color: var(--estado-critical); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.form-acciones { display: flex; gap: 10px; margin-top: 6px; }
/* ---------- botones ---------- */
.btn {
font: inherit; font-size: 14px; font-weight: 600;
padding: 8px 14px; border-radius: 8px; cursor: pointer;
border: 1px solid var(--eje);
background: var(--superficie); color: var(--tinta);
}
.btn:hover { background: color-mix(in srgb, var(--gridline) 40%, var(--superficie)); }
.btn-primario { background: var(--sec-500); border-color: var(--sec-500); color: #ffffff; } /* sec-500: blanco a ≥4.5:1 */
.btn-primario:hover { background: var(--sec-550); border-color: var(--sec-550); }
.btn-peligro { background: transparent; border-color: var(--estado-critical); color: var(--estado-critical); }
.btn-peligro:hover { background: color-mix(in srgb, var(--estado-critical) 10%, transparent); }
.btn-pequeno { font-size: 12.5px; padding: 4px 10px; }
/* ---------- .vacio — estado vacío con explicación ---------- */
/* Nunca un "0" ni un hueco mudo: decir QUÉ falta y DÓNDE se rellena.
Sin registros de setters esta semana
Rellena el CRM del setter en Métricas.
*/
.vacio {
background: var(--superficie);
border: 1px dashed var(--eje);
border-radius: var(--radio);
padding: 26px 22px;
text-align: center;
color: var(--tinta-2);
}
.vacio-titulo { font-weight: 650; color: var(--tinta); margin: 0 0 6px; }
.vacio p { margin: 4px 0; font-size: 14px; }
/* ---------- .selector-periodo ---------- */
/* Markup:
Agosto 2026
*/
.selector-periodo {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
margin: 0 0 18px;
}
.selector-tipos { display: inline-flex; gap: 0; border: 1px solid var(--eje); border-radius: 8px; overflow: hidden; }
.selector-tipos .btn { border: none; border-radius: 0; border-right: 1px solid var(--eje); }
.selector-tipos .btn:last-child { border-right: none; }
.selector-tipos .btn.activo { background: var(--sec-450); color: #ffffff; }
.selector-nav { display: inline-flex; align-items: center; gap: 10px; }
.selector-etiqueta { font-weight: 650; min-width: 150px; text-align: center; }
/* ---------- gridlines/separadores para mini-gráficos SVG inline ---------- */
.grafico-gridline { stroke: var(--gridline); stroke-width: 1; }
.grafico-eje { stroke: var(--eje); stroke-width: 1; }
.grafico-texto { fill: var(--tinta-suave); font-size: 11px; font-family: var(--fuente); }
/* ---------- utilidades ---------- */
.texto-suave { color: var(--tinta-suave); }
.texto-2 { color: var(--tinta-2); }
.texto-exito { color: var(--exito-texto); }
.texto-critico { color: var(--critico-texto); }
.mono-num { font-variant-numeric: tabular-nums; }
.mt-0 { margin-top: 0; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.separado { justify-content: space-between; }
/* ---------- responsive ---------- */
@media (max-width: 860px) {
.app { grid-template-columns: 1fr; }
.sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.logo { padding: 0 8px; font-size: 18px; }
.nav { flex-direction: row; flex-wrap: wrap; }
.sidebar-pie { margin: 0; padding: 0; }
.btn-tema { width: auto; }
.grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
.contenido { padding: 14px; }
}
/* ============================================================
Vista Reunión (js/views/reunion.js) — prefijo reunion-
============================================================ */
.reunion-tarjeta { margin-bottom: 18px; }
/* Cabecera de tarjeta: nº del guion + título + persona + badge rellenada/pendiente */
.reunion-cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.reunion-cabecera h2 { margin: 0; }
.reunion-num {
flex: none; width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--sec-450); color: #ffffff;
font-size: 13px; font-weight: 700;
}
.reunion-persona { color: var(--tinta-2); font-size: 14px; }
.reunion-badge { margin-left: auto; }
/* Bloque de métricas de solo lectura dentro de cada tarjeta */
.reunion-metricas {
margin-top: 16px;
padding: 12px 14px;
border: 1px solid var(--gridline);
border-radius: 8px;
background: color-mix(in srgb, var(--gridline) 22%, transparent);
}
.reunion-metricas > h3 {
margin: 0 0 10px;
font-size: 12.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--tinta-suave);
}
.reunion-subtitulo-metrica { font-size: 13.5px; font-weight: 600; color: var(--tinta-2); margin: 14px 0 6px; }
/* Aviso de primera semana del mes (tarjeta CEO) */
.reunion-aviso-mes {
background: color-mix(in srgb, var(--estado-warning) 14%, var(--superficie));
border: 1px solid color-mix(in srgb, var(--estado-warning) 45%, transparent);
border-radius: 8px;
padding: 9px 12px;
font-size: 14px;
margin-bottom: 12px;
}
.reunion-lista { margin: 4px 0 0; padding-left: 20px; font-size: 14px; }
.reunion-lista li { margin: 2px 0; }
/* controles editables dentro de la tabla de revisión de tareas (tarjeta CEO):
mismo aspecto que los inputs de las tablas editables de Métricas y Ajustes */
.reunion-tarjeta .tabla input:not([type="checkbox"]),
.reunion-tarjeta .tabla select {
font: inherit; font-size: 14px; color: var(--tinta);
background: var(--superficie);
border: 1px solid var(--eje); border-radius: 6px;
padding: 4px 8px; min-width: 120px; width: 100%;
}
.reunion-tarjeta .tabla input:focus,
.reunion-tarjeta .tabla select:focus {
outline: 2px solid var(--sec-400); outline-offset: 1px; border-color: var(--sec-400);
}
/* ============================================================
Vista Inicio — añadidos propios (prefijo inicio-)
============================================================ */
.inicio-hero { max-width: 380px; margin-bottom: 14px; }
/* cabecera de sección: h2 + enlace "editar en X →" */
.inicio-bloque-cabecera {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
margin: 28px 0 10px;
}
.inicio-bloque-cabecera h2 { margin: 0; }
.inicio-enlace-editar { font-size: 13px; white-space: nowrap; }
/* lista de filas etiqueta ↔ badge/valor (relleno semanal, SeQura) */
.inicio-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.inicio-lista li {
display: flex; justify-content: space-between; align-items: center;
gap: 10px; flex-wrap: wrap;
padding: 7px 0; border-bottom: 1px solid var(--gridline);
font-size: 13.5px;
}
.inicio-lista li:last-child { border-bottom: none; }
/* barra fina de progreso vs objetivo (≤ 24px; extremo de dato redondeado 4px) */
.inicio-progreso { display: flex; flex-direction: column; gap: 8px; }
.inicio-progreso-fila {
display: grid; grid-template-columns: minmax(130px, 200px) 1fr minmax(170px, auto);
gap: 10px; align-items: center;
}
.inicio-progreso-etiqueta {
font-size: 13px; color: var(--tinta-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inicio-progreso-pista {
display: block; height: 6px;
background: color-mix(in srgb, var(--gridline) 45%, transparent);
border-radius: 0 4px 4px 0;
}
.inicio-progreso-barra {
display: block; height: 100%;
background: var(--sec-450);
border-radius: 0 4px 4px 0;
/* sin min-width aquí: el render lo añade solo cuando el valor es > 0 */
}
.inicio-progreso-barra.inicio-progreso-mala { background: var(--estado-serious); }
.inicio-progreso-valor {
font-size: 12.5px; color: var(--tinta-2); text-align: right;
font-variant-numeric: tabular-nums;
}
.inicio-progreso-valor.sin-datos { color: var(--tinta-suave); font-style: italic; }
.inicio-nota { font-size: 12.5px; color: var(--tinta-suave); margin: 8px 0 0; }
@media (max-width: 860px) {
.inicio-progreso-fila { grid-template-columns: 1fr; gap: 4px; }
.inicio-progreso-valor { text-align: left; }
}
/* ============================================================
Vista Métricas (prefijo met-) — pestañas internas, tablas
editables del CRM semanal y mapa de relleno.
============================================================ */
.met-pestanas {
display: flex; gap: 2px; flex-wrap: wrap;
border-bottom: 1px solid var(--eje);
margin: 0 0 18px;
}
.met-pestana {
font: inherit; font-size: 14.5px; font-weight: 600;
padding: 8px 16px; margin-bottom: -1px;
background: transparent; border: none;
border-bottom: 2px solid transparent;
color: var(--tinta-2); cursor: pointer;
}
.met-pestana:hover { color: var(--tinta); }
.met-pestana.activa { color: var(--tinta); border-bottom-color: var(--sec-450); }
/* inputs numéricos dentro de las tablas editables (celda vacía = «sin rellenar») */
.met-tabla-editable input {
width: 96px; font: inherit; font-size: 14px;
color: var(--tinta); background: var(--superficie);
border: 1px solid var(--eje); border-radius: 6px;
padding: 4px 8px; text-align: right; font-variant-numeric: tabular-nums;
}
.met-tabla-editable input:focus {
outline: 2px solid var(--sec-400); outline-offset: 1px; border-color: var(--sec-400);
}
.met-tabla-editable input::placeholder {
color: var(--tinta-suave); font-style: italic; font-size: 12.5px;
text-align: left; font-variant-numeric: normal;
}
/* formularios vacíos que asocian los inputs de cada fila (atributo form=) */
.met-form-oculto { display: none; }
/* mapa de relleno: celdas centradas, ✓ en tinta de éxito (icono documentado en SPEC §8.4.4) */
.met-mapa td { text-align: center; white-space: nowrap; }
.met-mapa td:first-child { text-align: left; }
.met-ok { color: var(--exito-texto); font-weight: 650; }
/* notas al pie de bloque y filas de objetivos */
.met-nota { font-size: 13px; color: var(--tinta-suave); margin: 8px 0 0; }
.met-objetivo { padding: 8px 0; border-bottom: 1px solid var(--gridline); }
.met-objetivo:last-child { border-bottom: none; }
.met-objetivo .met-nota { margin-top: 2px; }
/* histórico de setting: tabla ancha, filas de hueco visibles y total remarcado.
El hueco se pinta, no se esconde: una semana sin registrar tiene que doler a la vista. */
.hist-tabla { white-space: nowrap; }
.hist-tabla td.num, .hist-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.hist-tabla th.hist-canal { text-align: center; border-left: 1px solid var(--eje); }
.hist-tabla .texto-suave { font-size: 12.5px; }
.hist-hueco td { background: color-mix(in srgb, var(--estado-critical) 6%, transparent); }
.hist-total td { font-weight: 650; border-top: 2px solid var(--eje); background: var(--superficie-2, transparent); }
.hist-filtro { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-suave); }
.hist-filtro input { accent-color: var(--sec-450); }
/* el conmutador de vía del funnel no debe estirar la fila de cabecera */
.met-funnel-vias { flex: none; }
/* ============================================================
Vista CLIENTES (js/views/clientes.js) — estilos propios
============================================================ */
/* pestañas Clientes / Renovaciones */
.clientes-pestanas { display: inline-flex; border: 1px solid var(--eje); border-radius: 8px; overflow: hidden; margin: 0 0 16px; }
.clientes-pestanas .btn { border: none; border-radius: 0; border-right: 1px solid var(--eje); }
.clientes-pestanas .btn:last-child { border-right: none; }
.clientes-pestanas .btn.activo { background: var(--sec-450); color: #ffffff; }
/* barra de búsqueda + filtros + botón de alta */
.clientes-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 14px; }
.clientes-toolbar .form-fila { min-width: 130px; flex: 0 1 auto; }
.clientes-btn-nuevo { margin-left: auto; align-self: flex-end; }
/* filas clicables de la tabla maestra */
.clientes-fila { cursor: pointer; }
/* pipeline de renovaciones: 3 fases */
.clientes-pipeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.clientes-pipe-lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.clientes-pipe-item { border: 1px solid var(--gridline); border-radius: 8px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.clientes-pipe-item:hover { background: color-mix(in srgb, var(--gridline) 30%, transparent); }
.clientes-pipe-nombre { font-weight: 600; font-size: 14px; }
.clientes-pipe-meta { font-size: 12.5px; color: var(--tinta-2); }
/* ficha: rejilla de datos etiqueta + valor */
.clientes-detalle-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; }
.clientes-dato { display: flex; flex-direction: column; gap: 1px; }
.clientes-dato-etq { font-size: 12.5px; color: var(--tinta-2); }
.clientes-dato-val { font-size: 14.5px; font-weight: 600; }
/* bloque condicional SeQura del formulario */
.clientes-sequra { border: 1px dashed var(--eje); border-radius: var(--radio); padding: 12px 14px; margin: 0; }
.clientes-sequra legend { font-size: 13px; font-weight: 600; color: var(--tinta-2); padding: 0 6px; }
/* formularios de resolución de renovación dentro de la ficha */
.clientes-resolver { border-top: 1px solid var(--gridline); margin-top: 12px; padding-top: 12px; }
@media (max-width: 860px) {
.clientes-pipeline { grid-template-columns: 1fr; }
.clientes-btn-nuevo { margin-left: 0; }
}
/* ============================================================
Vista ENTRENADORES (js/views/entrenadores.js) — prefijo ent-
============================================================ */
/* tarjeta de detalle de un entrenador */
.ent-carta { margin-bottom: 16px; scroll-margin-top: 16px; }
/* cabecera: nombre + % renovación a la izquierda, saldo a la derecha */
.ent-cabecera {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.ent-saldo-bloque { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.ent-saldo-etiqueta { font-size: 12.5px; color: var(--tinta-2); }
.ent-saldo { font-size: 26px; font-weight: 650; line-height: 1.15; }
/* chips de clientes activos asignados (icono de estado + nombre, texto en tintas) */
.ent-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.ent-chip {
display: inline-flex; align-items: center; gap: 5px;
font-size: 13px; color: var(--tinta-2);
border: 1px solid var(--gridline); border-radius: 999px;
padding: 2px 10px; white-space: nowrap;
background: color-mix(in srgb, var(--gridline) 25%, transparent);
}
/* desglose del devengado (base + renovaciones + casos de éxito) */
.ent-desglose { list-style: none; margin: 10px 0 4px; padding: 0; font-size: 14px; }
.ent-desglose li { padding: 5px 0; border-bottom: 1px solid var(--gridline); }
.ent-desglose li:last-child { border-bottom: none; }
/* desplegables de meses y pagos */
.ent-detalle { margin: 8px 0; }
.ent-detalle > summary {
cursor: pointer; font-size: 14px; font-weight: 600; color: var(--tinta-2);
padding: 6px 0; user-select: none;
}
.ent-detalle > summary:hover { color: var(--tinta); }
.ent-detalle[open] > summary { color: var(--tinta); }
.ent-detalle .tabla-scroll { margin: 6px 0 4px; }
/* formulario de pago dentro de la tarjeta */
.ent-form-pago { border-top: 1px solid var(--gridline); margin-top: 12px; padding-top: 12px; }
@media (max-width: 860px) {
.ent-cabecera { flex-direction: column; }
.ent-saldo-bloque { align-items: flex-start; }
}
/* ============================================================
Vista AJUSTES (js/views/ajustes.js) — prefijo aj-
============================================================ */
.aj-seccion { margin-bottom: 18px; }
.aj-nota { font-size: 13px; color: var(--tinta-suave); margin: 2px 0 12px; }
/* tablas editables de catálogos: inputs compactos dentro de las celdas */
.aj-tabla input:not([type="checkbox"]), .aj-tabla select {
font: inherit; font-size: 14px; color: var(--tinta);
background: var(--superficie);
border: 1px solid var(--eje); border-radius: 6px;
padding: 5px 8px; min-width: 90px; max-width: 220px; width: 100%;
}
.aj-tabla input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; min-width: 80px; }
.aj-tabla input:focus, .aj-tabla select:focus {
outline: 2px solid var(--sec-400); outline-offset: 1px; border-color: var(--sec-400);
}
.aj-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
/* formulario de alta al pie de cada sección: en línea, alineado por la base */
.aj-alta {
display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gridline);
}
.aj-alta .form-fila { min-width: 160px; flex: 0 1 auto; }
/* mensajes de validación/estado de cada sección (texto, nunca solo color) */
.aj-msg { font-size: 13.5px; margin: 10px 0 0; color: var(--tinta-2); }
.aj-msg-error { color: var(--estado-critical); font-weight: 600; }
@media (max-width: 860px) {
.aj-alta { flex-direction: column; align-items: stretch; }
}
/* ---------- vista Comisiones (prefijo com-, añadida 2026-08-11) ---------- */
.com-tabla-bases input { width: 110px; text-align: right; }
.com-ajuste-closer { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.com-ajuste-closer legend { font-weight: 650; font-size: 13px; padding: 0 4px; }
.com-mensaje {
width: 100%; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--tinta); background: var(--plano); border: 1px solid var(--borde);
border-radius: 8px; padding: 12px; resize: vertical; white-space: pre;
}
/* la semana en curso no se pinta como hueco: aún se está viviendo */
.hist-en-curso td { background: color-mix(in srgb, var(--sec-450) 6%, transparent); }
/* la nota se recorta a una línea (el texto entero va en el title): si envuelve,
las filas crecen a 5 líneas y la tabla deja de leerse de un vistazo */
.hist-tabla td:last-child { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
/* ============================================================
Vista VENTAS (js/views/ventas.js) — CRM de llamadas y ventas
============================================================ */
.vt-tabla td.num, .vt-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.vt-tabla td { white-space: nowrap; }
.vt-nota { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.vt-filtros { justify-content: space-between; align-items: center; margin: 12px 0 6px; }
.vt-select {
font: inherit; font-size: 14px; color: var(--tinta); background: var(--superficie);
border: 1px solid var(--eje); border-radius: 8px; padding: 5px 10px;
}
/* ============================================================
ODR — matriz de cumplimiento (js/views/entrenadores.js)
Paleta de ESTADO, no categórica: cada estado lleva su glifo además del color,
así que nunca depende del color solo. «Sin rellenar» no es un estado con color:
es ausencia — fondo del papel y borde punteado, para que se lea como hueco.
============================================================ */
.odr-matriz { border-collapse: separate; border-spacing: 2px; }
.odr-matriz th, .odr-matriz td { padding: 0; }
.odr-matriz .odr-esquina { min-width: 260px; text-align: left; vertical-align: bottom; }
.odr-matriz .odr-tarea {
text-align: left; font-weight: 500; font-size: 13px; white-space: nowrap;
padding-right: 10px; color: var(--tinta);
}
.odr-matriz .odr-sem { font-size: 11px; color: var(--tinta-suave); font-weight: 500; width: 22px; }
.odr-celda {
width: 22px; height: 22px; text-align: center; border-radius: 4px;
font-size: 12px; line-height: 22px; font-weight: 700; cursor: default;
}
.odr-si { background: color-mix(in srgb, var(--estado-good) 16%, transparent); color: var(--exito-texto); }
.odr-no { background: color-mix(in srgb, var(--estado-critical) 22%, transparent); color: var(--critico-texto); }
.odr-nt { background: color-mix(in srgb, var(--eje) 22%, transparent); color: var(--tinta-suave); }
.odr-vacia { background: transparent; border: 1px dashed var(--gridline); }
.odr-leyenda { gap: 18px; align-items: center; font-size: 13px; color: var(--tinta-suave); margin: 14px 0 10px; }
.odr-muestra {
display: inline-block; width: 18px; height: 18px; border-radius: 4px; margin-right: 6px;
text-align: center; line-height: 18px; font-size: 11px; font-weight: 700; vertical-align: -4px;
}
/* tarjeta de persona: seleccionable, y la cobertura baja se marca sin gritar */
.odr-tile { cursor: pointer; transition: border-color .12s ease; }
.odr-tile:hover, .odr-tile:focus-visible { border-color: var(--sec-450); outline: none; }
.odr-tile-activa { border-color: var(--sec-450); box-shadow: inset 0 0 0 1px var(--sec-450); }
.odr-cobertura { font-size: 13px; color: var(--tinta-suave); margin-top: 2px; }
.odr-cobertura-baja { color: var(--critico-texto); font-weight: 600; }
/* pulso del equipo: el badge cabe a la derecha, sin comerse el nombre */
.pulso-valor { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* «De cuándo son estos números»: una tarjeta por fuente, con su antigüedad.
El color es de ESTADO (al día / flojeando / abandonada) y siempre va con su texto. */
.fuentes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.fuente-chip {
background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
padding: 10px 12px; box-shadow: var(--sombra); border-left-width: 3px;
}
.fuente-nombre { font-weight: 600; font-size: 14px; }
.fuente-meta { font-size: 12.5px; color: var(--tinta-suave); margin-top: 1px; }
.fuente-pie { font-size: 12.5px; color: var(--tinta-suave); margin-top: 6px; display: flex;
align-items: center; gap: 8px; flex-wrap: wrap; }
.fuente-al-dia { border-left-color: var(--estado-good); }
.fuente-flojeando { border-left-color: var(--estado-warning, #d9a200); }
.fuente-abandonada { border-left-color: var(--estado-critical); }
.fuente-sin-fecha, .fuente-vacia { border-left-color: var(--eje); }
/* ---------- embudo de llamadas (Ventas → Embudo y objeciones) ---------- */
/* Barras horizontales: la longitud es la magnitud y el número va siempre escrito al lado,
así que el color no carga identidad — los peldaños de pérdida se distinguen además por
sangrado y por el texto de su nombre. */
.emb-closer { margin-top: 28px; }
.emb-closer h3 { margin: 22px 0 8px; }
.emb-barras { margin: 14px 0 0; }
.emb-fila {
display: grid;
grid-template-columns: minmax(9rem, 15rem) 1fr minmax(4rem, auto);
align-items: center;
gap: 12px;
padding: 3px 0;
}
.emb-nombre { color: var(--tinta-2); font-size: 14px; }
.emb-pista { height: 10px; background: var(--gridline); border-radius: 99px; overflow: hidden; }
.emb-rell { height: 100%; background: var(--serie-1); border-radius: 99px; }
.emb-valor { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
/* Los peldaños que restan gente van sangrados y en otro tono: se leen como una fuga, no
como un paso más del embudo. */
.emb-perdida { padding-left: 18px; }
.emb-perdida .emb-nombre { color: var(--tinta-suave); }
.emb-perdida .emb-nombre::before { content: "↳ "; }
.emb-perdida .emb-rell { background: var(--serie-2); }
@media (max-width: 640px) {
.emb-fila { grid-template-columns: 1fr minmax(3.5rem, auto); }
.emb-pista { grid-column: 1 / -1; }
}
/* --- Cartera de servicio: los cinco estados, con los colores que usan ellos en sus hojas.
Deliberadamente parecidos a los de sus Excel para que Dani reconozca lo suyo de un vistazo. --- */
.cart-tile { border-left: 4px solid var(--borde); }
.badge-estado.cart-renovacion, .cart-tile.cart-renovacion { border-left-color: #6aa84f; }
.badge-estado.cart-no-renovacion, .cart-tile.cart-no-renovacion { border-left-color: #cc4125; }
.badge-estado.cart-congelacion, .cart-tile.cart-congelacion { border-left-color: #45818e; }
.badge-estado.cart-downsell, .cart-tile.cart-downsell { border-left-color: #8e7cc3; }
.badge-estado.cart-reto, .cart-tile.cart-reto { border-left-color: #e69138; }
.badge-estado.cart-renovacion { background: rgba(106,168,79,.14); color: #3d6b2c; }
.badge-estado.cart-no-renovacion { background: rgba(204,65,37,.14); color: #93301c; }
.badge-estado.cart-congelacion { background: rgba(69,129,142,.14); color: #2f5a63; }
.badge-estado.cart-downsell { background: rgba(142,124,195,.16); color: #5b4f88; }
.badge-estado.cart-reto { background: rgba(230,145,56,.16); color: #8a5514; }
@media (prefers-color-scheme: dark) {
.badge-estado.cart-renovacion { color: #b7dfa2; }
.badge-estado.cart-no-renovacion { color: #f0a494; }
.badge-estado.cart-congelacion { color: #a2d4de; }
.badge-estado.cart-downsell { color: #c9bdf0; }
.badge-estado.cart-reto { color: #f2c08a; }
}
/* Tablas largas dentro de una vista de decisión: se les pone techo y scroll propio, para que
64 filas de renovaciones vencidas no empujen fuera de pantalla lo que hay debajo. */
.tabla-alta { max-height: 26rem; overflow-y: auto; }
/* ---------- pestaña Mensual: casillas de gasto escribibles ---------- */
/* La casilla vacía tiene que verse como vacía, no como un cero: el placeholder en gris es la
sugerencia calculada, y mientras no se escriba encima, el mes sigue «sin rellenar». */
.mens-input {
width: 7.5rem; text-align: right; font-variant-numeric: tabular-nums;
border: 1px solid var(--gridline); border-radius: 6px; padding: 3px 7px;
background: var(--superficie); color: var(--tinta); font: inherit; font-size: 14px;
}
.mens-input:focus { outline: 2px solid var(--serie-1); outline-offset: 1px; }
.mens-input::placeholder { color: var(--tinta-suave); font-style: italic; }
.mens-tabla th[scope="row"] { white-space: nowrap; text-align: left; }
.mens-vacia th[scope="row"], .mens-vacia td { color: var(--tinta-suave); }
.mens-pendiente { color: var(--tinta-suave); font-style: italic; text-align: center; }
.chip-curso { font-size: 11px; border: 1px solid var(--gridline); border-radius: 99px;
padding: 0 6px; color: var(--tinta-suave); font-weight: 400; white-space: nowrap; }
/* ---------- entrar y letrero de modo (app con servidor) ---------- */
.entrar-fwt{max-width:22rem;margin:14vh auto;text-align:center;padding:0 16px}
.entrar-marca{font-size:2.8rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.entrar-sub{color:var(--tinta-suave);margin:4px 0 22px}
.entrar-fwt input{width:100%;text-align:center;font-size:1.2rem;letter-spacing:.12em;
text-transform:uppercase;padding:11px;border:1px solid var(--gridline);border-radius:9px;
background:var(--superficie);color:var(--tinta);margin-bottom:10px;font:inherit}
.entrar-fwt .btn{width:100%}
.entrar-error{color:var(--estado-critical);font-weight:600;margin-top:10px}
.entrar-nota{color:var(--tinta-suave);font-size:.88rem;margin-top:14px}
.sidebar.oculta{display:none}
#modo-app{font-size:.82rem;padding:5px 14px;text-align:center}
#modo-app.modo-servidor{background:var(--superficie);border-bottom:1px solid var(--gridline);
color:var(--tinta-2)}
#modo-app.modo-local{background:color-mix(in srgb,var(--estado-warning) 18%,var(--superficie));
color:var(--tinta);font-weight:600}
.btn-salir{margin-left:10px;font-size:.78rem;border:1px solid var(--gridline);background:none;
color:var(--tinta-2);border-radius:99px;padding:1px 10px;cursor:pointer}
#aviso-guardado{background:var(--estado-critical);color:#fff;padding:8px 14px;font-size:.9rem;
display:flex;justify-content:space-between;align-items:center;gap:12px}
#aviso-guardado button{background:none;border:0;color:#fff;font-size:1.1rem;cursor:pointer}
/* ---------- formulario de registrar llamada ---------- */
.obligatorio{font-size:.7rem;font-weight:600;color:var(--estado-critical);
border:1px solid var(--estado-critical);border-radius:99px;padding:0 6px;margin-left:6px;
vertical-align:1px;text-transform:uppercase;letter-spacing:.04em}
label.ancho{display:block;margin-top:12px}
label.ancho textarea{width:100%;font:inherit;padding:9px 11px;border:1px solid var(--gridline);
border-radius:9px;background:var(--superficie);color:var(--tinta);resize:vertical}
.aviso-faltan{background:color-mix(in srgb,var(--estado-critical) 12%,var(--superficie));
border:1px solid var(--estado-critical);border-radius:9px;padding:10px 13px;margin:14px 0;
color:var(--tinta)}
/* Utilidades que sustituyen a los estilos en línea (migración CSP, 2026-09-04). */
.puntero{cursor:pointer}
.m0{margin:0}.mb0{margin-bottom:0}.mt8{margin:8px 0 0}
.mt14{margin-top:14px}.mb14{margin-bottom:14px}.mb10{margin-bottom:10px}
.notita{font-size:12.5px;margin:0}
.al-final{align-self:end}
.ancho-860{max-width:860px}
.mb8{margin:0 0 8px}.mt0{margin-top:0}.mb4{margin-bottom:4px}.mb2{margin-bottom:2px}.mb16{margin-bottom:16px}
.txt-06{font-size:.6em}.peso-normal{font-weight:400}.gap6{gap:6px}