/* Estilo claro de la web (web/css/claro.css), con los nombres de siempre de
   esta hoja: cambiar el valor de cada variable basta para todo el portal. */
:root {
  --tinta: #ffffff;      /* fondo */
  --tinta-2: #f4f7fb;    /* tarjetas */
  --tinta-3: #ffffff;    /* campos */
  --linea: #e3e9f1;
  --texto: #1e2b40;
  --suave: #55657d;
  --tenue: #8392a8;
  --acento: #1f6feb;
  --neon: #0e9f6e;
  --alerta: #d14343;
  --oro: #b7791f;
  --marino: #0b1b33;
}

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

body {
  margin: 0;
  background: var(--tinta);
  color: var(--texto);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

/* ===== Layout ===== */
.page-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1, h2, h3 { margin: 0 0 16px; font-weight: 600; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
p { margin: 0 0 12px; }

/* ===== Botones ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--acento), #1a5fd0);
  color: #fff;
  box-shadow: 0 8px 24px rgba(47, 129, 247, 0.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(47, 129, 247, 0.45);
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--texto);
}
.btn-outline:hover {
  background: var(--tinta-2);
}
.btn-ghost {
  background: transparent;
  color: var(--suave);
  font-size: 13px;
}

/* ===== Login / Index ===== */
.login-container {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}
.login-card {
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 40px;
}
.login-card h1 { font-size: 24px; margin-bottom: 8px; }
.login-card p.lead { color: var(--suave); margin-top: 0; }

/* ===== Formulario ===== */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 13px;
  color: var(--suave);
  margin-bottom: 6px;
}
.form-group input {
  width: 100%;
  padding: 10px 14px;
  background: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 8px;
  color: var(--texto);
  font-size: 14px;
  outline: none;
}
.form-group input:focus { border-color: var(--acento); }

.form-group .ayuda {
  font-size: 12px;
  color: var(--tenue);
  margin: 6px 0 0;
}

/* Previsualizacion del enlace mientras se escribe el codigo. Se parte por
   cualquier sitio: un codigo de 20 caracteres no cabe en un movil. */
.previsualiza {
  padding: 10px 14px;
  background: var(--tinta);
  border: 1px dashed var(--linea);
  border-radius: 8px;
  font-size: 13px;
  color: var(--suave);
  overflow-wrap: anywhere;
}
.previsualiza .cod { color: var(--neon); font-weight: 600; }

/* ===== Dashboard ===== */
.dashboard {
  width: 100%;
}
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linea);
}
.logout-btn { background: transparent; border: 1px solid var(--linea); color: var(--suave); }

/* ===== Cards ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  width: 100%;
  margin-bottom: 32px;
}
.stat-card {
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.stat-card .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--suave);
  margin-bottom: 8px;
}
.stat-card .value {
  font-size: 28px;
  font-weight: 700;
  color: var(--neon);
}
.stat-card .mono { font-family: ui-monospace, monospace; }

/* ===== Tabla de ventas ===== */
.table-wrap {
  width: 100%;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  /* Con `hidden` la tabla de ventas se recortaba en movil: son seis
     columnas y no caben. Que se desplace de lado. */
  overflow-x: auto;
  margin-bottom: 32px;
}
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { padding: 12px 16px; text-align: left; }
th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--suave);
  background: var(--tinta-3);
  border-bottom: 1px solid var(--linea);
}
td {
  border-bottom: 1px solid var(--linea);
  font-size: 14px;
}
tr:last-child td { border-bottom: none; }
td.mono { font-family: ui-monospace, monospace; font-size: 13px; }
.estado {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-block;
}
.estado.pagado { background: rgba(37, 230, 165, 0.15); color: var(--neon); }
.estado.pendiente { background: rgba(240, 180, 41, 0.15); color: var(--oro); }

/* ===== Link Generator ===== */
.link-section {
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  margin-bottom: 32px;
}
.link-section h2 { font-size: 18px; }
/* Un bloque por programa, separados por una raya: son dos enlaces que se
   copian por separado y no se pueden confundir. */
.enlace-producto {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}
.enlace-producto h3 { font-size: 16px; margin: 0 0 4px; }
/* El enlace para traer afiliados (segundo nivel) y su tabla de hijos. */
.enlace-red { margin-top: 14px; }
.link-section .table-wrap { margin-top: 18px; }
td.red { color: var(--acento, #10b981); }
.enlace-producto h3 span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--tenue);
}
.copy-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
/* El estilo base de los inputs cuelga de `.form-group`, y este no esta
   dentro de uno. Sin repetirlo aqui sale un input blanco del navegador
   sobre fondo oscuro. */
.copy-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  background: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 8px;
  color: var(--texto);
  font-family: ui-monospace, monospace;
  font-size: 13px;
  outline: none;
}
.copy-row button { min-width: 80px; }

@media (max-width: 520px) {
  .copy-row { flex-direction: column; }
}

/* ===== Retiro ===== */
.withdraw-section {
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  margin-bottom: 32px;
}
.withdraw-section h2 { font-size: 18px; }

/* ===== Mensajes ===== */
.alerta {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
}
.alerta.error { background: rgba(255, 92, 108, 0.1); border: 1px solid var(--alerta); color: var(--alerta); }
.alerta.ok { background: rgba(37, 230, 165, 0.1); border: 1px solid var(--neon); color: var(--neon); }

/* ===== Loading ===== */
.loading {
  text-align: center;
  padding: 40px;
  color: var(--suave);
}

/* ===== CTA principal ===== */
.hero-buy {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, var(--acento), #1a5fd0);
  color: #fff;
  border-radius: 16px;
  margin-bottom: 40px;
}
.hero-buy h1 { color: #fff; font-size: 32px; }
.hero-buy .precio { font-size: 36px; font-weight: 700; color: var(--oro); margin: 12px 0; }
.hero-buy .sub { color: rgba(255, 255, 255, 0.8); }

/* ===== Utilidades ===== */
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }

/* Texto secundario: el que explica, no el que informa. */
.sutil { color: var(--suave); font-size: 14px; }
.lead  { color: var(--suave); margin-bottom: 24px; }

.titulo-seccion {
  width: 100%;
  font-size: 18px;
  margin-top: 8px;
}

.pie-enlace {
  margin: 24px 0 0;
  text-align: center;
  font-size: 13px;
}

/* Importes a la derecha: alineados, la coma decimal cae en la misma
   columna y se pueden comparar de un vistazo. */
th.num, td.num { text-align: right; }
td.num { font-family: ui-monospace, monospace; }

.dashboard-header small {
  display: block;
  color: var(--tenue);
  font-size: 12px;
  margin-top: 2px;
}

.stat-card .value small {
  font-size: 13px;
  color: var(--tenue);
  font-weight: 400;
}

/* El codigo puede llegar a 20 caracteres y no cabe al tamano de un
   importe. Se encoge solo en esa tarjeta. */
#stat-codigo { font-size: 20px; overflow-wrap: anywhere; }

.vacio {
  text-align: center;
  padding: 32px;
  color: var(--tenue);
}


/* ===== Compartir ===== */
.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.share-row .btn { flex: 1 1 120px; }
.txt-codigo { color: var(--neon); }
td.destacado { color: var(--neon); font-weight: 600; }

/* ===== Como funciona ===== */
.pasos {
  list-style: none;
  counter-reset: paso;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  margin: 0 0 32px;
  padding: 0;
}
.pasos li {
  counter-increment: paso;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 16px 16px 16px 56px;
  position: relative;
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(47, 129, 247, 0.15);
  color: var(--acento);
  font-weight: 700;
  display: grid;
  place-items: center;
}
.pasos b { display: block; font-size: 14px; }
.pasos span { color: var(--suave); font-size: 13px; }

/* ===== Barra hacia el minimo de retiro ===== */
.progreso {
  height: 8px;
  background: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 14px;
}
#progreso-barra {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--acento), var(--neon));
  transition: width 0.6s ease;
}

.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ===================================================================
   Movil
   =================================================================== */
@media (max-width: 720px) {
  .page-wrap { padding: 16px 16px 40px; }
  .login-card { padding: 28px 20px; }

  /* La cabecera queda fija arriba: en movil la pagina es larga y "Cerrar
     sesion" no puede quedarse a tres pantallas de distancia. */
  .dashboard-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--tinta);
    margin: 0 -16px 20px;
    padding: 12px 16px;
    width: calc(100% + 32px);
  }
  .logout-btn { padding: 8px 12px; font-size: 13px; }

  /* Las cuatro metricas en 2 x 2: una debajo de otra ocupaban la pantalla
     entera antes de llegar al enlace, que es lo que se viene a buscar. */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
  /* Cinco metricas en dos columnas: el codigo, arriba y a lo ancho. */
  .stats-grid .stat-card:first-child { grid-column: 1 / -1; }
  /* Y si la ultima se queda sola en su fila, tambien a lo ancho. */
  .stats-grid .stat-card:last-child:nth-child(even) { grid-column: 1 / -1; }
  .stat-card { padding: 14px 10px; }
  .stat-card .label { font-size: 11px; }
  .stat-card .value { font-size: 22px; }
  #stat-codigo { font-size: 17px; }

  .link-section, .withdraw-section { padding: 18px 16px; margin-bottom: 20px; }
  .copy-row { flex-direction: column; }
  .copy-row .btn, .withdraw-section .btn-primary { width: 100%; padding: 13px; }

  .pasos { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; }
  .pasos li { padding: 12px 12px 12px 52px; }
  .pasos li::before { top: 12px; }

  h2, .titulo-seccion { font-size: 17px; }

  /* Tablas -> tarjetas. Seis columnas no caben en 360 px, y desplazar de
     lado para leer una venta es lo que nadie hace. Cada fila es una tarjeta
     y cada dato lleva delante el nombre de su columna (data-label). */
  .table-wrap { background: none; border: none; overflow: visible; margin-bottom: 20px; }
  .table-wrap table { min-width: 0; }
  .table-wrap thead { display: none; }
  .table-wrap tr {
    display: block;
    background: var(--tinta-2);
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 6px 14px;
    margin-bottom: 10px;
  }
  .table-wrap td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--linea);
    text-align: right;
    overflow-wrap: anywhere;
  }
  .table-wrap tr td:last-child { border-bottom: none; }
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    color: var(--suave);
    font-size: 12px;
    text-align: left;
    flex: 0 0 auto;
    font-family: 'Segoe UI', system-ui, sans-serif;
  }
  /* La fila de "todavia no hay nada" no es un dato: centrada y sin marco. */
  .table-wrap td.vacio, .table-wrap td.loading {
    display: block;
    text-align: center;
    border: none;
    padding: 20px 0;
  }
  td.corto { font-size: 12px; }
}

/* ===== Cabecera de la marca (como en el resto de la web) ===== */
.cab-marca { width: 100%; border-bottom: 1px solid var(--linea); background: rgba(255,255,255,.92); }
.cab-marca .dentro { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 64px;
                     display: flex; align-items: center; gap: 10px; }
.cab-marca a.marca { display: flex; align-items: center; gap: 10px; color: var(--marino);
                     font-weight: 800; font-size: 16.5px; text-decoration: none; }
.cab-marca a.marca img { width: 34px; height: 34px; border-radius: 9px; }
.cab-marca .volver { margin-left: auto; color: var(--suave); font-weight: 600; font-size: 14px; }
h1, h2, h3 { color: var(--marino); font-weight: 800; letter-spacing: -.01em; font-family: 'Manrope', 'Inter', sans-serif; }

/* ===================================================================
   Panel (17-oct): menu lateral + vistas
   =================================================================== */
/* Con el panel abierto la pagina ocupa todo el ancho: el menu va pegado a
   la izquierda, no dentro de la columna centrada de la entrada. */
.page-wrap.con-panel { max-width: none; padding: 0; align-items: stretch; }

.app { display: flex; width: 100%; min-height: calc(100vh - 64px);
       /* El fondo de la columna del menu, hasta abajo: el menu es pegajoso
          (sticky) y mide una pantalla; sin esto, en una pagina larga su
          fondo se cortaba a media altura. */
       background: linear-gradient(to right, var(--tinta-2) 248px, var(--linea) 248px,
                                   var(--linea) 249px, transparent 249px); }
.app.plegado { background: linear-gradient(to right, var(--tinta-2) 72px, var(--linea) 72px,
                                           var(--linea) 73px, transparent 73px); }

/* ----- menu lateral ----- */
.lateral {
  width: 248px; flex: 0 0 248px;
  background: var(--tinta-2); border-right: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 12px; position: sticky; top: 0; height: calc(100vh - 64px);
  transition: width .2s ease, flex-basis .2s ease;
}
.lateral-cab { display: flex; align-items: flex-start; gap: 8px; padding: 4px 6px 14px;
               border-bottom: 1px solid var(--linea); margin-bottom: 8px; }
.lateral .yo { flex: 1; min-width: 0; }
.lateral .yo .eti { display: block; font-size: 11px; text-transform: uppercase;
                    letter-spacing: .5px; color: var(--tenue); }
.lateral .yo b { display: block; font-size: 17px; color: var(--neon); overflow-wrap: anywhere; }
.lateral .yo small { display: block; font-size: 12px; color: var(--tenue);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a, .lateral .salir {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--suave); font-weight: 600; font-size: 14px; text-decoration: none;
  background: none; border: none; cursor: pointer; width: 100%; text-align: left;
  font-family: inherit;
}
.menu a:hover, .lateral .salir:hover { background: var(--tinta); color: var(--texto); text-decoration: none; }
.menu a.activa { background: #e8f0fe; color: var(--acento); }
.menu svg, .lateral .salir svg, .btn-icono svg {
  width: 20px; height: 20px; flex: 0 0 20px;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.menu span, .lateral .salir span { flex: 1; white-space: nowrap; }
.globo { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px;
         border-radius: 99px; background: var(--tinta); color: var(--suave);
         border: 1px solid var(--linea); }
.globo:empty { display: none; }
.globo.dinero { background: rgba(14, 159, 110, .1); color: var(--neon); border-color: transparent; }
.lateral .salir { margin-top: auto; }

.btn-icono { display: inline-grid; place-items: center; width: 34px; height: 34px;
             border-radius: 9px; border: 1px solid var(--linea); background: var(--tinta-3);
             color: var(--suave); cursor: pointer; padding: 0; }
.btn-icono:hover { color: var(--texto); }

/* Plegado (solo PC): iconos y nada mas; el nombre sale al pasar el raton. */
.app.plegado .lateral { width: 72px; flex-basis: 72px; }
.app.plegado .lateral .yo, .app.plegado .menu span, .app.plegado .salir span,
.app.plegado .globo { display: none; }
.app.plegado .lateral-cab { justify-content: center; padding-inline: 0; }
.app.plegado .plegar svg { transform: rotate(180deg); }
.app.plegado .menu a, .app.plegado .lateral .salir { justify-content: center; padding-inline: 0; }

/* ----- contenido ----- */
.contenido { flex: 1; min-width: 0; padding: 22px 28px 48px; }
.barra-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.barra-top h1 { font-size: 24px; margin: 0; }
.hamburguesa { display: none; }
.vista[hidden] { display: none; }

.tarjeta { background: var(--tinta-2); border: 1px solid var(--linea); border-radius: 14px;
           padding: 20px 22px; margin-bottom: 18px; }
.tarjeta h2 { font-size: 17px; margin: 0 0 10px; }
.tarjeta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tarjeta-cab .mas { font-size: 13px; font-weight: 600; white-space: nowrap; }
.tarjeta .table-wrap { margin-bottom: 0; background: var(--tinta-3); }
.tarjeta .enlace-producto { margin-top: 4px; padding-top: 0; border-top: none; }
.dos-columnas { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; }
.dos-columnas .tarjeta { margin-bottom: 18px; }

/* Cifras: rejilla que se reparte sola segun el ancho. */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 14px; margin-bottom: 18px; }
.kpis-3 { grid-template-columns: repeat(3, 1fr); }
.kpi { background: var(--tinta-2); border: 1px solid var(--linea); border-radius: 14px;
       padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.kpi .eti { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); }
.kpi b { font-size: 26px; font-weight: 700; color: var(--marino); line-height: 1.2; }
.kpi b small { font-size: 12px; color: var(--tenue); font-weight: 500; }
.kpi .nota { font-size: 12px; color: var(--tenue); }
.kpi.principal { background: linear-gradient(135deg, var(--acento), #1a5fd0); border-color: transparent; }
.kpi.principal .eti, .kpi.principal b small { color: rgba(255,255,255,.8); }
.kpi.principal b { color: #fff; }

/* Buscador y filtros, en una linea que se parte sola. */
.herramientas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.herramientas .buscar { flex: 1 1 240px; }
.herramientas input, .herramientas select {
  padding: 9px 12px; border: 1px solid var(--linea); border-radius: 9px;
  background: var(--tinta-3); color: var(--texto); font-size: 14px; font-family: inherit; outline: none;
}
.herramientas input:focus, .herramientas select:focus { border-color: var(--acento); }
.herramientas .btn { padding: 9px 16px; }
.totales { font-size: 13px; color: var(--suave); margin: 0 0 10px; }
.totales b { color: var(--texto); }
.explica { margin-bottom: 14px; }
.pasos { grid-template-columns: repeat(2, 1fr); }
.progreso-barra { height: 100%; width: 0; background: linear-gradient(90deg, var(--acento), var(--neon));
                  transition: width .6s ease; }
td.red { color: var(--acento); font-weight: 600; }
.withdraw-section { width: auto; }

/* ----- pantallas medianas: sin dos columnas ----- */
@media (max-width: 1100px) {
  .dos-columnas { grid-template-columns: 1fr; gap: 0; }
}

/* ----- movil y tableta: el menu es un cajon ----- */
@media (max-width: 900px) {
  .app, .app.plegado { display: block; background: none; }
  .lateral {
    position: fixed; z-index: 40; top: 0; left: 0; height: 100vh; width: 270px;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 10px 40px rgba(11, 27, 51, .18);
  }
  .app.cajon-abierto .lateral { transform: none; }
  .plegar { display: none; }
  .velo { position: fixed; inset: 0; z-index: 30; background: rgba(11, 27, 51, .35); }
  .velo[hidden] { display: none; }
  .hamburguesa { display: inline-grid; }
  .barra-top { position: sticky; top: 0; z-index: 20; background: var(--tinta);
               margin: -12px -16px 14px; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
  .barra-top h1 { font-size: 20px; }
  .contenido { padding: 12px 16px 40px; }
  .app.plegado .lateral { width: 270px; }
  .app.plegado .lateral .yo, .app.plegado .menu span, .app.plegado .salir span { display: block; }
  .app.plegado .globo:not(:empty) { display: inline; }
  .app.plegado .menu a, .app.plegado .lateral .salir { justify-content: flex-start; padding-inline: 12px; }
}

@media (max-width: 720px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpis .kpi.principal { grid-column: 1 / -1; }
  /* Si la ultima se queda sola en su fila, a lo ancho. */
  .kpis .kpi:last-child:nth-child(even) { grid-column: 1 / -1; }
  .kpis-3 { grid-template-columns: 1fr 1fr; }
  .kpis-3 .kpi:last-child { grid-column: 1 / -1; }
  .kpi { padding: 12px 12px; }
  .kpi b { font-size: 21px; }
  .tarjeta { padding: 16px; }
  .pasos { grid-template-columns: 1fr; }
  .herramientas select, .herramientas .btn { flex: 1 1 45%; }
}

.form-group .opcional { color: var(--tenue); font-weight: 400; }