/* ===== GIN.Suscriptores ===== */
:root {
    --azul: #1976d2;
    --azul-oscuro: #0d47a1;
    --azul-texto: #1554a6;
    --azul-claro: #e8f1fc;
    --azul-fondo: #f3f7fc;
    --fondo: #f5f6fa;
    --blanco: #ffffff;
    --texto: #1f2430;
    --texto-fuerte: #14171f;
    --texto-2: #3a3f4b;
    --gris: #5b6170;
    --linea: #e3e5ea;
    --linea-suave: #eef0f3;
    --borde: #c3c7d1;
    --subrayado: #8a8f9c;
    --verde-fondo: #e6f4ea; --verde: #1e6b34;
    --naranja-fondo: #fff3e0; --naranja: #8a4b00;
    --rojo-fondo: #fdecea; --rojo: #a52a1f;
    --sombra: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
    --radio: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 15px;
}

a { color: #1565c0; }
a:hover { color: var(--azul-oscuro); }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
h1:focus { outline: none; }
button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .6; }

.muted { color: var(--gris); }
.chico { font-size: 12px; }
.fuerte { font-weight: 600; }
.mono { font-family: Consolas, ui-monospace, monospace; }
.num { font-variant-numeric: tabular-nums; }
.der { text-align: right; }
.nowrap { white-space: nowrap; }
.mayusculas { text-transform: uppercase; }
.texto-azul { color: var(--azul-texto); }
.texto-renovar { color: var(--naranja); }
.texto-vencido { color: var(--rojo); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cargando { color: var(--gris); padding: 24px 0; }
.vacio { border: 1px dashed var(--borde); border-radius: var(--radio); padding: 56px 24px; text-align: center; color: var(--gris); }
.vacio-chico { color: var(--gris); text-align: center; padding: 24px 0; margin: 0; }
.separador { border-top: 1px solid var(--linea); margin: 20px 0 16px; }

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

.menu {
    flex: 1 1 220px;
    background: var(--blanco);
    border-right: 1px dashed var(--borde);
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.menu-marca { display: flex; align-items: center; gap: 10px; padding: 4px 12px 18px; border-bottom: 1px solid var(--linea); margin-bottom: 12px; }
.menu-logo { color: var(--azul); }
.menu-titulo { font-size: 18px; font-weight: 700; color: var(--texto-fuerte); line-height: 1.1; }
.menu-sub { font-size: 12px; color: var(--gris); }
.menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; min-height: 44px;
    border-radius: 8px; color: #2b2f3a; text-decoration: none; font-size: 15px;
}
.menu-item:hover { background: #f0f2f7; color: #2b2f3a; }
.menu-item.active { background: var(--azul-claro); color: var(--azul-texto); font-weight: 600; }
.menu-subitem { padding-left: 44px; font-size: 14px; }
.menu-subitem.active { background: transparent; }
.menu-espacio { flex-grow: 1; min-height: 24px; }
.menu-boton { width: 100%; border: none; background: transparent; text-align: left; }

.contenido { flex: 999 1 560px; min-width: 0; padding: 28px 32px 48px; }
.pagina { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.usuario-actual { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 14px; color: var(--texto-2); margin-bottom: -16px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--azul-oscuro); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }

@media (max-width: 640px) {
    .contenido { padding: 20px 16px 40px; }
    .menu { border-right: none; border-bottom: 1px dashed var(--borde); }
}

/* ===== Encabezado ===== */
.encabezado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.encabezado h1 { margin: 0; font-size: 32px; font-weight: 700; color: var(--texto-fuerte); }
.subtitulo { margin: 6px 0 10px; color: var(--gris); font-size: 14px; }
.subrayado { width: 120px; height: 3px; background: var(--azul); border-radius: 2px; }
.encabezado-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.regresar { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 6px; }

/* ===== Botones ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px; border-radius: 6px;
    font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent;
}
.btn-primario { background: var(--azul); color: #fff; box-shadow: 0 2px 4px rgba(25,118,210,.3); font-weight: 700; }
.btn-primario:hover:not(:disabled) { background: #1565c0; color: #fff; }
.btn-contorno { background: var(--blanco); border-color: var(--borde); color: #2b2f3a; }
.btn-contorno:hover:not(:disabled) { background: #f0f2f7; color: #2b2f3a; }
.btn-contorno-azul { background: var(--blanco); border-color: var(--azul); color: var(--azul); }
.btn-contorno-azul:hover { background: var(--azul-claro); }
.btn-chico { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn-bloque { width: 100%; }
.btn-texto { min-height: 36px; padding: 0 12px; border: none; background: transparent; border-radius: 6px; font-size: 13px; font-weight: 600; color: #1565c0; }
.btn-texto:hover { background: var(--azul-claro); }
.enlace { border: none; background: none; color: #1565c0; text-decoration: underline; padding: 0; font-size: inherit; }

/* ===== Avisos ===== */
.aviso { display: flex; align-items: center; gap: 12px; border-radius: 8px; padding: 14px 18px; font-size: 14px; font-weight: 600; }
.aviso span { flex: 1 1 auto; }
.aviso-ok { background: var(--verde-fondo); color: var(--verde); }
.aviso-error { background: var(--rojo-fondo); color: var(--rojo); }
.aviso-cerrar { border: none; background: transparent; color: inherit; font-size: 20px; line-height: 1; width: 32px; height: 32px; border-radius: 6px; }

/* ===== Tarjetas ===== */
.tarjeta { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 24px; min-width: 0; }
.tarjeta h2 { margin: 0 0 14px; font-size: 18px; font-weight: 700; }
.tarjeta-titulo { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tarjeta-titulo h2 { margin: 0; }
.tarjeta-titulo a { font-size: 14px; font-weight: 600; }
.fila-tarjetas { display: flex; flex-wrap: wrap; gap: 24px; }
.fila-tarjetas > .tarjeta { flex: 1 1 300px; }
.fila-tarjetas > .tarjeta-ancha { flex: 2 1 480px; }
.alinear-inicio { align-items: flex-start; }
.columna-tarjetas { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.renglon { padding: 10px 0; border-bottom: 1px solid var(--linea-suave); display: flex; justify-content: space-between; gap: 12px; align-items: center; }

/* ===== KPIs ===== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.kpi { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.kpi-etiqueta { font-size: 13px; color: var(--gris); font-weight: 600; }
.kpi-valor { font-size: 26px; font-weight: 700; color: var(--texto-fuerte); font-variant-numeric: tabular-nums; }
.kpi-valor.texto-renovar { color: var(--naranja); }
.kpi-valor.texto-vencido { color: var(--rojo); }
.kpi-sub { font-size: 12px; color: var(--gris); }

/* ===== Gráficas ===== */
.barras { display: flex; align-items: flex-end; gap: 16px; height: 240px; border-bottom: 1px solid #d5d8df; padding: 0 4px; }
.barra-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.barra-valor { font-size: 12px; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.barra { width: 100%; max-width: 56px; background: var(--azul); border-radius: 4px 4px 0 0; }
.barras-etiquetas { display: flex; gap: 16px; padding: 8px 4px 0; }
.barras-etiquetas > div { flex: 1 1 0; text-align: center; font-size: 12px; color: var(--gris); }
.hbarras { display: flex; flex-direction: column; gap: 12px; }
.hbarra-etiqueta { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.hbarra-fondo { height: 8px; background: #edf0f5; border-radius: 4px; }
.hbarra { height: 8px; background: var(--azul); border-radius: 4px; }
.barra-dividida { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: #edf0f5; }
.seg-mensual { background: var(--azul); }
.seg-anual { background: #e8820c; flex: 1 1 0; }
.leyenda { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; }
.leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* ===== Tablas ===== */
.tabla-zona { overflow-x: auto; }
.tabla { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.tabla-ancha { min-width: 980px; }
.tabla th { text-align: left; color: var(--gris); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; padding: 10px 8px; border-bottom: 1px solid var(--linea); }
.tabla th.der { text-align: right; }
.tabla td { padding: 12px 8px; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
.tabla tbody tr:hover { background: #f7f9fc; }
.tabla tr.seleccionado { background: var(--azul-fondo); }
.pie-tabla { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 14px 0 0; font-size: 13px; color: var(--gris); }
.pie-tabla strong { color: var(--texto); }

/* ===== Chips / pastillas ===== */
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip-activo { background: var(--verde-fondo); color: var(--verde); }
.chip-renovar { background: var(--naranja-fondo); color: var(--naranja); }
.chip-vencido { background: var(--rojo-fondo); color: var(--rojo); }
.chip-trial { background: var(--azul-claro); color: var(--azul-texto); }
.pastillas, .atajos { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilla { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco); color: #2b2f3a; font-size: 13px; font-weight: 600; }
.atajos .pastilla { min-height: 32px; padding: 0 12px; font-weight: 400; }
.pastilla.activo { background: var(--azul); border-color: var(--azul); color: #fff; }

/* ===== Filtros ===== */
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.filtros-derecha { display: flex; flex-wrap: wrap; gap: 10px; }
.buscador { position: relative; display: flex; align-items: center; color: var(--gris); }
.buscador svg { position: absolute; left: 10px; }
.buscador input, .select-caja { min-height: 40px; border: 1px solid var(--borde); border-radius: 6px; font-family: inherit; font-size: 14px; background: var(--blanco); color: var(--texto); }
.buscador input { width: 220px; padding: 0 12px 0 36px; }
.select-caja { padding: 0 10px; }
.buscador input:focus, .select-caja:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }

/* ===== Formularios ===== */
.formulario { display: flex; flex-direction: column; gap: 28px; padding: 28px; }
.formulario-vendedor form { display: flex; flex-direction: column; gap: 20px; }
.formulario-vendedor { flex: 1 1 360px !important; }
.seccion { display: flex; flex-direction: column; gap: 16px; }
.seccion + .seccion { border-top: 1px solid var(--linea); padding-top: 24px; }
.seccion-titulo { margin: 0; font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.ic-azul { color: var(--azul); }
.ic-morado { color: #7b1fa2; }
.ic-verde { color: #2e7d32; }
.ic-naranja { color: #e8820c; }
.ic-turquesa { color: #00838f; }
.ic-fondo-azul { background: var(--azul); }
.ic-fondo-naranja { background: #e8820c; }
.ic-fondo-turquesa { background: #00838f; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; }
.completo { grid-column: 1 / -1; }

.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--gris); }
.campo input, .campo select {
    border: none; border-bottom: 1px solid var(--subrayado); border-radius: 0;
    padding: 7px 0; font-size: 15px; font-family: inherit; color: var(--texto); background: transparent; width: 100%;
}
.campo input:focus, .campo select:focus { outline: none; border-bottom-color: var(--azul); box-shadow: 0 1px 0 var(--azul); }
.campo input.invalid, .campo select.invalid { border-bottom-color: var(--rojo); }
.campo .con-prefijo input, .con-boton input { border-bottom: none; box-shadow: none; }
.con-prefijo { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--subrayado); color: var(--texto-2); font-size: 15px; }
.con-prefijo:focus-within { border-bottom-color: var(--azul); box-shadow: 0 1px 0 var(--azul); }
.con-boton { display: flex; gap: 10px; align-items: flex-end; }
.con-boton input { flex: 1 1 auto; min-width: 0; border-bottom: 1px solid var(--subrayado) !important; }
.con-boton input:focus { border-bottom-color: var(--azul) !important; }
.validation-message { color: var(--rojo); font-size: 12px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto-2); }
.check input { width: 18px; height: 18px; margin: 0; }

.segmentado { display: inline-flex; border: 1px solid var(--azul); border-radius: 6px; overflow: hidden; align-self: flex-start; margin-top: 4px; }
.segmentado button { min-height: 40px; padding: 0 22px; border: none; font-size: 14px; font-weight: 600; background: var(--blanco); color: var(--azul); }
.segmentado button + button { border-left: 1px solid var(--azul); }
.segmentado button.activo { background: var(--azul); color: #fff; }

.fechas-calculadas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; background: var(--azul-fondo); border-radius: 8px; padding: 16px; }
.fecha-dato { font-size: 16px; font-weight: 700; margin-top: 2px; }
.acciones { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--linea); padding-top: 20px; }

.selector-vendedor { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; padding: 20px 24px; }
.selector-vendedor .campo { flex: 0 1 360px; min-width: 240px; }

/* ===== Resumen (alta) ===== */
.resumen { display: flex; flex-direction: column; gap: 16px; flex: 1 1 280px; }
.resumen h2 { margin: 0; }
.resumen dl { margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.resumen dl > div { display: flex; justify-content: space-between; gap: 12px; }
.resumen dt { color: var(--gris); }
.resumen dd { margin: 0; font-weight: 600; text-align: right; }
.linea-tiempo { border-top: 1px solid var(--linea); padding-top: 16px; }
.lt-titulo { font-size: 13px; font-weight: 700; color: var(--texto-2); margin-bottom: 12px; }
.lt-paso { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
.lt-paso:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: #d5d8df; }
.lt-punto { width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 3px; }

/* ===== Login ===== */
.login { min-height: 100vh; display: flex; flex-wrap: wrap; }
.login-panel { flex: 1 1 380px; background: var(--azul-oscuro); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.login-panel h1 { font-size: 44px; line-height: 1.1; margin: 0 0 16px; max-width: 520px; }
.login-panel p { font-size: 17px; line-height: 1.55; margin: 0; color: #d6e4fb; max-width: 480px; }
.login-marca { display: flex; align-items: center; gap: 12px; }
.login-marca-titulo { font-size: 20px; font-weight: 700; line-height: 1.1; }
.login-marca-sub, .login-pie { font-size: 13px !important; color: #c9dcfa !important; }
.login-form-zona { flex: 1 1 420px; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.login-form { width: 100%; max-width: 400px; background: var(--blanco); border-radius: 12px; padding: 40px; box-shadow: 0 1px 3px rgba(16,24,40,.08), 0 8px 24px rgba(16,24,40,.06); display: flex; flex-direction: column; gap: 22px; }
.login-form h2 { margin: 0 0 6px; font-size: 26px; color: var(--texto-fuerte); }
.login-form p { margin: 0; font-size: 14px; }
@media (max-width: 640px) { .login-panel { padding: 32px 24px; } .login-panel h1 { font-size: 32px; } .login-form { padding: 28px 20px; } }

/* ===== Error de Blazor ===== */
#blazor-error-ui {
    background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }