/* Sistema visual nuevo de Kurbby (cambio `kurbby-onboarding`): el de la página «Pantallas» del
   Figma. Hoja propia, servida por el panel (`/panel/ui/kurbby.css`, `style-src 'self'`), con
   todas las clases bajo `k-`: no comparte nombres con `panel.css`.

   Desvíos del Figma por accesibilidad AA (design D9): el gris de apoyo (#8A93AD, 3:1) pasa a
   #646E8B y el verde de texto (#1E9E57) a #16794A para llegar a 4.5:1; los bordes de casillas,
   radios y campos pasan a #8A93AD para llegar a 3:1 de contraste de componente. */

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/panel/ui/fuentes/fira-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/panel/ui/fuentes/fira-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/panel/ui/fuentes/fira-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/panel/ui/fuentes/fira-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/panel/ui/fuentes/fira-sans-latin-800-italic.woff2") format("woff2");
}

/* --- Tokens ------------------------------------------------------------------------------ */

.k-cuerpo {
  --k-marino: #021d59;
  --k-amarillo: #fdcc26;
  --k-fondo: #fafafa;
  --k-superficie: #ffffff;
  --k-texto: #0f1b3d;
  --k-texto-2: #5b6785;
  --k-texto-3: #646e8b;
  --k-enlace: #083d8e;
  --k-enlace-fuerte: #062f78;
  --k-borde: #e6e9f0;
  --k-borde-campo: #8a93ad;
  --k-borde-control: #8a93ad;
  --k-borde-boton: #c8d2ea;
  --k-elegido: #eef2fa;
  --k-apagado: #f1f3f7;
  --k-insignia: #fff4cc;
  --k-verde: #16794a;
  --k-verde-icono: #1e9e57;
  --k-verde-fondo: #e3f5ea;
  --k-rojo: #b42318;
  --k-rojo-fondo: #fdecea;
  --k-foco: #083d8e;
  --k-icono-foto: #3d5a9e;
  margin: 0;
  min-height: 100vh;
  background: var(--k-fondo);
  color: var(--k-texto);
  font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14.5px;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.k-cuerpo *,
.k-cuerpo *::before,
.k-cuerpo *::after {
  box-sizing: border-box;
}
.k-cuerpo :focus-visible {
  outline: 2px solid var(--k-foco);
  outline-offset: 2px;
}
.k-saltar {
  position: absolute;
  left: -9999px;
}
.k-saltar:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  background: var(--k-superficie);
  color: var(--k-enlace);
  padding: 8px 12px;
  border-radius: 8px;
}
.k-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Página: panel de pasos + contenido -------------------------------------------------- */

.k-pagina {
  display: flex;
  min-height: 100vh;
}
.k-panel {
  flex: none;
  width: 400px;
  background: var(--k-marino);
  color: #fff;
  padding: 44px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.k-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
}
.k-logo {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
}
.k-logo svg {
  display: block;
}
.k-logo--grande {
  width: 48px;
  height: 48px;
}
.k-marca-nombre {
  font-size: 24px;
  line-height: 29px;
  font-weight: 800;
  font-style: italic;
}
.k-intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.k-titulo-panel {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
  font-style: italic;
}
.k-intro-texto {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.72);
}
.k-progreso {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.k-progreso-texto {
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  color: rgb(255 255 255 / 0.65);
}
.k-barra {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.15);
  overflow: hidden;
}
.k-avance {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--k-amarillo);
  width: 8px;
}
.k-avance--1 { width: 16.666%; }
.k-avance--2 { width: 33.333%; }
.k-avance--3 { width: 50%; }
.k-avance--4 { width: 66.666%; }
.k-avance--5 { width: 83.333%; }
.k-avance--6 { width: 100%; }
.k-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.k-paso {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
}
a.k-paso:hover {
  background: rgb(255 255 255 / 0.06);
}
.k-paso--actual,
a.k-paso--actual:hover {
  background: rgb(255 255 255 / 0.1);
}
.k-paso :focus-visible,
.k-panel :focus-visible {
  outline-color: var(--k-amarillo);
}
.k-indicador {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
}
.k-paso--actual .k-indicador {
  background: #fff;
  color: var(--k-marino);
}
.k-paso--pendiente .k-indicador {
  border: 1.5px solid rgb(255 255 255 / 0.35);
  color: rgb(255 255 255 / 0.7);
}
.k-paso--listo .k-indicador {
  background: var(--k-amarillo);
  color: var(--k-marino);
}
.k-paso-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.k-paso-titulo {
  font-size: 15px;
  line-height: 18px;
  font-weight: 500;
}
.k-paso--actual .k-paso-titulo {
  font-weight: 600;
}
.k-paso--pendiente .k-paso-titulo {
  color: rgb(255 255 255 / 0.7);
}
.k-paso-estado {
  font-size: 12.5px;
  line-height: 15px;
  color: rgb(255 255 255 / 0.6);
}
.k-espacio {
  flex: 1 1 auto;
}
.k-ayuda {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.07);
  color: #fff;
  text-decoration: none;
}
a.k-ayuda:hover {
  background: rgb(255 255 255 / 0.12);
}
.k-ayuda-titulo {
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
}
.k-ayuda-texto {
  font-size: 13px;
  line-height: 16px;
  color: rgb(255 255 255 / 0.65);
}

.k-contenido {
  flex: 1 1 auto;
  min-width: 0;
  padding: 56px 184px 56px 96px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.k-contenido > * {
  max-width: 760px;
}
.k-encabezado {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.k-antetitulo {
  margin: 0;
  font-size: 12px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--k-texto-3);
}
.k-antetitulo--listo {
  color: var(--k-verde);
}
.k-titulo {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
  font-style: italic;
  color: var(--k-marino);
}
.k-bajada {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--k-texto-2);
}

/* --- Tarjeta ----------------------------------------------------------------------------- */

.k-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: 18px;
  background: var(--k-superficie);
  border: 1px solid var(--k-borde);
  margin: 0;
  min-width: 0;
}
.k-cabecera {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.k-cabecera-texto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.k-tarjeta-titulo {
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  color: var(--k-texto);
}
.k-tarjeta-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 16px;
  color: var(--k-texto-2);
}
.k-contador {
  flex: none;
  font-size: 13.5px;
  line-height: 16px;
  font-weight: 600;
  color: var(--k-verde);
}

.k-pila {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.k-regla-campo--otra {
  flex-direction: column;
  gap: 20px;
}
button.k-opcion {
  font: inherit;
  text-align: left;
  color: inherit;
}
.k-opcion[aria-pressed="true"] {
  background: var(--k-elegido);
  border: 2px solid var(--k-marino);
}
.k-opcion[aria-pressed="true"] .k-marca-radio {
  border: 6px solid var(--k-marino);
}
.k-propio {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid var(--k-borde);
  background: var(--k-superficie);
}
.k-propio:has(input[type="checkbox"]:checked) {
  background: var(--k-elegido);
  border: 2px solid var(--k-marino);
}
.k-propio > label {
  position: relative;
  display: flex;
  cursor: pointer;
}
.k-propio > label input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.k-propio > label:has(input:focus-visible) .k-marca-casilla {
  outline: 2px solid var(--k-foco);
  outline-offset: 2px;
}
.k-propio-texto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.k-propio .k-caja {
  height: 40px;
}
.k-regla-exacta {
  font-size: 12.5px;
  line-height: 15px;
  color: var(--k-texto-2);
}

/* --- Botones ----------------------------------------------------------------------------- */

.k-boton {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: 22px;
  padding: 0 22px;
  border: 0;
  font: inherit;
  font-size: 14px;
  line-height: 17px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.k-boton--primario {
  background: var(--k-amarillo);
  color: var(--k-marino);
  font-weight: 700;
}
.k-boton--primario:hover {
  background: #f5c00f;
}
.k-boton--secundario {
  background: var(--k-superficie);
  color: var(--k-enlace-fuerte);
  font-weight: 600;
  border: 1.5px solid var(--k-borde-boton);
}
.k-boton--secundario:hover {
  border-color: var(--k-enlace);
}
.k-boton--texto {
  background: transparent;
  color: var(--k-enlace);
  font-weight: 500;
  padding: 0 8px;
}
.k-boton--texto:hover {
  text-decoration: underline;
}
.k-boton:disabled,
.k-boton[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}
.k-boton[aria-busy="true"] {
  cursor: progress;
}
.k-boton[aria-busy="true"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: k-girar 0.7s linear infinite;
}
@keyframes k-girar {
  to {
    transform: rotate(360deg);
  }
}
.k-enlace {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  color: var(--k-enlace);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.k-enlace:hover {
  text-decoration: underline;
}
.k-enlace:disabled {
  color: var(--k-texto-3);
  cursor: not-allowed;
  text-decoration: none;
}
.k-enlace--fuerte {
  font-size: 13.5px;
  font-weight: 600;
}
.k-acciones {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 100px;
}
.k-acciones-espacio {
  flex: 1 1 auto;
}
.k-falta {
  margin: -16px 0 0;
  font-size: 13px;
  line-height: 16px;
  color: var(--k-texto-2);
  text-align: right;
}

/* --- Opción (radio) y casilla (checkbox) en tarjeta -------------------------------------- */

.k-fila {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.k-fila--igual {
  align-items: stretch;
}
.k-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.k-opcion {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  box-sizing: content-box !important;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--k-superficie);
  border: 1px solid var(--k-borde);
  cursor: pointer;
}
.k-lista > .k-opcion {
  flex: none;
}
.k-opcion:has(input:checked) {
  background: var(--k-elegido);
  border: 2px solid var(--k-marino);
}
.k-opcion:has(input:disabled) {
  cursor: not-allowed;
}
.k-opcion:has(input:focus-visible) {
  outline: 2px solid var(--k-foco);
  outline-offset: 2px;
}
.k-opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.k-marca-radio,
.k-marca-casilla {
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--k-superficie);
  border: 1.5px solid var(--k-borde-control);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.k-marca-radio {
  border-radius: 10px;
}
.k-marca-casilla svg {
  visibility: hidden;
}
input:checked + .k-marca-radio {
  border: 6px solid var(--k-marino);
}
input:checked + .k-marca-casilla {
  border: 0;
  background: var(--k-marino);
}
input:checked + .k-marca-casilla svg {
  visibility: visible;
}
.k-opcion-texto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.k-opcion-titulo {
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
  color: var(--k-texto);
}
.k-opcion-desc {
  font-size: 13.5px;
  line-height: 16px;
  color: var(--k-texto-2);
}
.k-insignia {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 11px;
  background: var(--k-insignia);
  color: var(--k-marino);
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
}

/* --- Chips (rubro) ----------------------------------------------------------------------- */

.k-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.k-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--k-apagado);
  color: var(--k-texto);
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  cursor: pointer;
}
.k-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.k-chip svg {
  display: none;
  color: var(--k-amarillo);
}
.k-chip:has(input:checked) {
  background: var(--k-marino);
  color: #fff;
}
.k-chip:has(input:checked) svg {
  display: block;
}
.k-chip:has(input:focus-visible) {
  outline: 2px solid var(--k-foco);
  outline-offset: 2px;
}

/* --- Campo ------------------------------------------------------------------------------- */

.k-campos {
  display: flex;
  gap: 16px;
}
.k-campos > .k-campo {
  flex: 1 1 0;
  min-width: 0;
}
.k-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.k-etiqueta {
  font-size: 13.5px;
  line-height: 16px;
  font-weight: 600;
  color: var(--k-texto);
}
.k-caja {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--k-borde-campo);
  background: var(--k-superficie);
  color: var(--k-texto);
  font: inherit;
  font-size: 14.5px;
  line-height: 17px;
}
textarea.k-caja {
  height: 104px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}
.k-caja::placeholder {
  color: var(--k-texto-3);
  opacity: 1;
}
.k-caja:focus {
  outline: 2px solid var(--k-foco);
  outline-offset: 0;
  border-color: var(--k-foco);
}
.k-caja[aria-invalid="true"] {
  border-color: var(--k-rojo);
}
.k-caja:disabled,
.k-caja[readonly] {
  background: var(--k-apagado);
  color: var(--k-texto-2);
}
.k-ayuda-campo {
  font-size: 12.5px;
  line-height: 15px;
  color: var(--k-texto-3);
}
.k-error {
  margin: 0;
  font-size: 12.5px;
  line-height: 15px;
  font-weight: 600;
  color: var(--k-rojo);
}
.k-fila-boton {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.k-fila-boton > .k-campo {
  flex: 1 1 auto;
}

/* --- Fila de horario --------------------------------------------------------------------- */

.k-dias {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.k-dia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--k-borde);
  background: var(--k-superficie);
}
.k-dia:has(.k-dia-abierto:not(:checked)) {
  background: var(--k-apagado);
}
.k-dia-casilla {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 128px;
  cursor: pointer;
}
.k-dia-casilla input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.k-dia .k-marca-casilla {
  width: 18px;
  height: 18px;
}
.k-dia-casilla:has(input:focus-visible) .k-marca-casilla {
  outline: 2px solid var(--k-foco);
  outline-offset: 2px;
}
.k-dia-nombre {
  font-size: 14.5px;
  line-height: 17px;
  font-weight: 500;
  color: var(--k-texto);
}
.k-dia:has(.k-dia-abierto:not(:checked)) .k-dia-nombre {
  color: var(--k-texto-2);
}
.k-cerrado {
  display: none;
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  color: var(--k-texto-3);
}
.k-dia:has(.k-dia-abierto:not(:checked)) .k-cerrado {
  display: inline;
}
.k-dia:has(.k-dia-abierto:not(:checked)) :is(.k-franja, .k-dia-mas, .k-dia-espacio) {
  display: none;
}
.k-franja {
  display: flex;
  align-items: center;
  gap: 10px;
}
.k-hora {
  width: 84px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--k-borde-campo);
  background: var(--k-superficie);
  color: var(--k-texto);
  font: inherit;
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  text-align: center;
}
.k-hora:focus {
  outline: 2px solid var(--k-foco);
  outline-offset: 0;
}
.k-franja-a {
  font-size: 14px;
  line-height: 17px;
  color: var(--k-texto-3);
}
.k-dia-espacio {
  flex: 1 1 auto;
}
.k-franja--2 {
  display: none;
}
.k-dia:has(.k-dia-segunda:checked) .k-franja--2 {
  display: flex;
}
.k-dia-mas {
  position: relative;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  color: var(--k-enlace);
  cursor: pointer;
}
.k-dia-mas input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.k-dia-mas:has(input:focus-visible) {
  outline: 2px solid var(--k-foco);
  outline-offset: 2px;
}
.k-dia-mas .k-quitar,
.k-dia-mas:has(input:checked) .k-agregar {
  display: none;
}
.k-dia-mas:has(input:checked) .k-quitar {
  display: inline;
}
.k-dia-error {
  flex-basis: 100%;
  margin: 0 0 12px 32px;
}

/* --- Avisos ------------------------------------------------------------------------------ */

.k-aviso {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--k-elegido);
}
.k-aviso svg {
  flex: none;
  color: var(--k-marino);
}
.k-aviso-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.k-aviso-titulo {
  font-size: 14.5px;
  line-height: 17px;
  font-weight: 600;
  color: var(--k-texto);
}
.k-aviso-cuerpo {
  font-size: 13.5px;
  line-height: 16px;
  color: var(--k-texto-2);
}
.k-aviso--error {
  background: var(--k-rojo-fondo);
}
.k-aviso--error svg {
  color: var(--k-rojo);
}
.k-aviso--bien {
  background: var(--k-verde-fondo);
}
.k-aviso--bien svg {
  color: var(--k-verde);
}
.k-aviso ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

/* --- Productos (6 y 6b) ------------------------------------------------------------------ */

.k-herramientas {
  display: flex;
  align-items: center;
  gap: 16px;
}
.k-buscador {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border-radius: 21px;
  border: 1px solid var(--k-borde-campo);
  background: var(--k-superficie);
  color: var(--k-texto-3);
}
.k-buscador:focus-within {
  outline: 2px solid var(--k-foco);
}
.k-buscador input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  color: var(--k-texto);
  outline: 0;
}
.k-buscador input::placeholder {
  color: var(--k-texto-3);
  opacity: 1;
}
.k-todos {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  color: var(--k-texto);
  cursor: pointer;
  white-space: nowrap;
}
.k-parcial {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--k-marino);
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-parcial::after {
  content: "";
  width: 10px;
  height: 2.5px;
  border-radius: 1.25px;
  background: #fff;
}
.k-parcial--ninguno {
  background: var(--k-superficie);
  border: 1.5px solid var(--k-borde-control);
}
.k-parcial--ninguno::after {
  display: none;
}
.k-productos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.k-producto {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--k-borde);
  background: var(--k-superficie);
  cursor: pointer;
}
.k-producto:has(input:checked) {
  border-color: var(--k-borde-boton);
}
.k-producto:has(input:focus-visible) {
  outline: 2px solid var(--k-foco);
  outline-offset: 2px;
}
.k-producto input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.k-foto {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--k-elegido);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--k-icono-foto);
  overflow: hidden;
}
.k-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.k-producto-texto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.k-producto-nombre {
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
  color: var(--k-texto-2);
}
.k-producto-detalle {
  font-size: 13px;
  line-height: 16px;
  color: var(--k-texto-3);
}
.k-producto-precio {
  flex: none;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  color: var(--k-texto-3);
}
.k-producto:has(input:checked) :is(.k-producto-nombre, .k-producto-precio) {
  color: var(--k-texto);
}
.k-mas {
  flex-direction: column;
  gap: 8px;
}
.k-mas > summary {
  list-style: none;
  text-align: center;
  font-size: 13.5px;
  line-height: 16px;
  font-weight: 600;
  color: var(--k-enlace);
  cursor: pointer;
}
.k-mas > summary::-webkit-details-marker {
  display: none;
}
.k-mas[open] > summary {
  order: 2;
}
.k-mas[open] {
  display: flex;
}
.k-tienda {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--k-borde);
  background: var(--k-fondo);
}
.k-tienda-texto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.k-tienda-linea {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.k-tienda-nombre {
  font-size: 15.5px;
  line-height: 19px;
  font-weight: 600;
  color: var(--k-texto);
}
.k-estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 8px;
  border-radius: 11px;
  background: var(--k-verde-fondo);
  color: var(--k-verde);
  font-size: 12.5px;
  line-height: 15px;
  font-weight: 600;
}
.k-estado svg {
  color: var(--k-verde-icono);
}
.k-estado--apagado {
  background: var(--k-apagado);
  color: var(--k-texto-2);
}
.k-tienda-sub {
  font-size: 13.5px;
  line-height: 16px;
  color: var(--k-texto-2);
}
.k-vacio {
  margin: 0;
  padding: 18px;
  border-radius: 14px;
  background: var(--k-fondo);
  color: var(--k-texto-2);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
}

/* --- Fila de resumen (cierre) ------------------------------------------------------------ */

.k-resumen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.k-fila-resumen {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--k-borde);
  background: var(--k-superficie);
}
.k-check-verde {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--k-verde-fondo);
  color: var(--k-verde-icono);
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-resumen-texto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.k-resumen-titulo {
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
}
.k-resumen-detalle {
  font-size: 13.5px;
  line-height: 16px;
  color: var(--k-texto-2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- Mostrar y ocultar sin JavaScript (`:has`) ------------------------------------------- */

.k-solo-local,
.k-solo-transferencia,
.k-solo-otra,
.k-solo-servicios,
.k-regla-campo,
.k-solo-aqui,
.k-solo-hoja {
  display: none;
}
.k-form:has(input[name="modalidad"][value="local"]:checked) .k-solo-local,
.k-form:has(input[name="cobro_transferencia"]:checked) .k-solo-transferencia,
.k-form:has(input[name="rubro"][value="otra"]:checked) .k-solo-otra,
.k-form:has(input[name="servicios"]:checked) .k-solo-servicios,
.k-form:has(input[name="carga"][value="uno"]:checked) .k-solo-aqui,
.k-form:has(input[name="carga"][value="hoja"]:checked) .k-solo-hoja {
  display: flex;
}
.k-form:has(input[name="regla_devoluciones"]:checked) .k-regla-campo--devoluciones,
.k-form:has(input[name="regla_cambios"]:checked) .k-regla-campo--cambios,
.k-form:has(input[name="regla_garantia"]:checked) .k-regla-campo--garantia,
.k-form:has(input[name="regla_otra"]:checked) .k-regla-campo--otra {
  display: flex;
}
.k-sin-reglas {
  display: none;
}
.k-form:not(:has(input[name^="regla_"][type="checkbox"]:checked)) .k-sin-reglas {
  display: flex;
}
.k-form:not(:has(input[name^="regla_"][type="checkbox"]:checked)) .k-con-reglas {
  display: none;
}

/* Lo que está guardándose no se toca (el script pone `inert` y `aria-busy`). */
.k-form[aria-busy="true"] {
  opacity: 0.7;
}

/* --- Anchos menores (el móvil queda pendiente: solo que no se rompa) ---------------------- */

@media (max-width: 1280px) {
  .k-contenido {
    padding: 48px 48px 48px 56px;
  }
}
@media (max-width: 1000px) {
  .k-pagina {
    flex-direction: column;
  }
  .k-panel {
    width: auto;
    padding: 24px 20px;
    gap: 20px;
  }
  .k-pasos {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .k-paso {
    flex: 1 1 200px;
  }
  .k-espacio {
    display: none;
  }
  .k-contenido {
    padding: 32px 20px;
  }
}
@media (max-width: 640px) {
  .k-fila,
  .k-campos,
  .k-herramientas,
  .k-fila-boton {
    flex-direction: column;
    align-items: stretch;
  }
  .k-acciones {
    flex-wrap: wrap;
    min-height: 0;
    padding: 12px 0;
  }
  .k-dia {
    padding: 10px 12px;
    row-gap: 8px;
  }
}

/* Una lista vacía (los casos propios antes de agregar uno) no ocupa lugar ni suma espacio. */
.k-lista:empty {
  display: none;
}

.k-cuerpo [hidden] {
  display: none !important;
}
.k-seleccion {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.k-tienda-acciones {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
}
.k-lista--suelta {
  gap: 20px;
}
.k-parcial svg {
  display: none;
  color: #fff;
}
.k-parcial--todos::after {
  display: none;
}
.k-parcial--todos svg {
  display: block;
}

/* --- Cuentas y admin (cambio `kurbby-cuentas-y-admin`) --------------------------------- */

.k-formulario {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 460px;
}
.k-formulario .k-acciones {
  min-height: 0;
  flex-wrap: wrap;
}
.k-formulario--ancho {
  max-width: 760px;
}
.k-casilla-linea {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--k-texto);
  cursor: pointer;
}
.k-casilla-linea input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.k-casilla-linea input:checked + .k-marca-casilla {
  background: var(--k-marino);
  border-color: var(--k-marino);
  color: #fff;
}
.k-casilla-linea input:focus-visible + .k-marca-casilla {
  outline: 2px solid var(--k-foco);
  outline-offset: 2px;
}
.k-casilla-linea .k-marca-casilla svg {
  opacity: 0;
}
.k-casilla-linea input:checked + .k-marca-casilla svg {
  opacity: 1;
}
.k-texto {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--k-texto-2);
}
.k-codigo {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--k-apagado);
  border: 1px solid var(--k-borde);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-all;
  user-select: all;
}
.k-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.k-nav-enlace {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  color: rgb(255 255 255 / 0.82);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.k-nav-enlace:hover {
  background: rgb(255 255 255 / 0.08);
  color: #fff;
}
.k-nav-enlace[aria-current="page"] {
  background: rgb(255 255 255 / 0.14);
  color: #fff;
}
.k-panel .k-nav-enlace:focus-visible {
  outline-color: var(--k-amarillo);
}
.k-pie-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgb(255 255 255 / 0.75);
}
.k-pie-panel .k-boton--secundario {
  align-self: flex-start;
}
.k-contenido--ancho {
  padding: 48px 40px 48px 48px;
}
.k-contenido--ancho > * {
  max-width: 1120px;
}
.k-tabla-marco {
  overflow-x: auto;
  border: 1px solid var(--k-borde);
  border-radius: 14px;
  background: var(--k-superficie);
}
.k-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.35;
}
.k-tabla th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--k-texto-3);
  padding: 12px 10px;
  border-bottom: 1px solid var(--k-borde);
}
.k-tabla td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--k-borde);
  vertical-align: top;
}
.k-tabla tr:last-child td {
  border-bottom: 0;
}
.k-tabla .k-detalle {
  display: block;
  color: var(--k-texto-3);
  font-size: 13px;
  margin-top: 2px;
}
.k-pastilla {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--k-apagado);
  color: var(--k-texto-2);
}
.k-pastilla--bien {
  background: var(--k-verde-fondo);
  color: var(--k-verde);
}
.k-pastilla--aviso {
  background: var(--k-insignia);
  color: #6b4e00;
}
.k-pastilla--mal {
  background: var(--k-rojo-fondo);
  color: var(--k-rojo);
}
.k-en-linea {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}
.k-boton--chico {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
}
.k-buscar {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.k-buscar .k-campo {
  flex: 1 1 260px;
}
.k-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.k-cifra {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--k-superficie);
  border: 1px solid var(--k-borde);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.k-cifra-etiqueta {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k-texto-3);
}
.k-cifra-valor {
  font-size: 16px;
  font-weight: 600;
  color: var(--k-texto);
}
@media (max-width: 1000px) {
  .k-contenido--ancho {
    padding: 32px 20px;
  }
}

/* Conectá tu WhatsApp (cambio `kurbby-whatsapp-y-tope`). */
.k-qr {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}
/* El QR (cambio `kurbby-vincular-sin-fallas`): grande, negro sobre blanco y con su zona tranquila
   (la trae el SVG del puente; el marco suma aire) en cualquier tema. Los colores son fijos a
   propósito: un QR se lee por contraste, no por la paleta. `only light` y `forced-color-adjust`
   evitan que el oscurecido automático del navegador o el modo de alto contraste lo inviertan. */
.k-qr-marco {
  flex: none;
  padding: 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--k-borde);
  color-scheme: only light;
  forced-color-adjust: none;
}
.k-qr-imagen {
  display: block;
  width: 320px;
  /* En un teléfono de 320 px quedan 270 px: la zona tranquila ya viene en el SVG. */
  max-width: calc(100vw - 50px);
  height: auto;
  aspect-ratio: 1;
  background: #ffffff;
  image-rendering: pixelated;
}
.k-qr-texto {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.k-alternativa-wa {
  border-top: 1px solid var(--k-borde);
  padding-top: 16px;
}
.k-alternativa-wa summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--k-enlace);
}
.k-alternativa-wa[open] summary {
  margin-bottom: 12px;
}
.k-alternativa-wa .k-form {
  max-width: 360px;
}
.k-codigo-wa {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.k-codigo-wa-valor {
  margin: 0;
  padding: 16px 24px;
  align-self: flex-start;
  border-radius: 12px;
  background: #ffffff;
  border: 2px solid var(--k-marino);
  color: #000000;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  user-select: all;
  forced-color-adjust: none;
}
.k-espera-wa {
  display: flex;
  align-items: center;
  gap: 12px;
}
.k-espera-wa p {
  margin: 0;
}
.k-girando {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--k-marino);
  border-right-color: transparent;
  animation: k-girar 0.7s linear infinite;
}
@media (max-width: 400px) {
  .k-qr-marco {
    padding: 4px;
  }
}
@media (max-width: 480px) {
  .k-codigo-wa-valor {
    font-size: 30px;
    line-height: 38px;
    padding: 12px 16px;
  }
}
.k-pasos-wa {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 22px;
}
.k-estado-wa {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* «Ver como comercio» (cambio `kurbby-ver-como-comercio`): la banda de soporte (la misma que en
   `panel.css`; esta hoja no admite estilos en línea). */
.k-banda-soporte {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 8px 16px;
  background: var(--k-amarillo);
  color: var(--k-marino);
  font-size: 14px;
  line-height: 20px;
}
.k-banda-soporte form {
  margin: 0;
}
.k-banda-soporte-salir {
  padding: 4px 12px;
  border: 1px solid var(--k-marino);
  border-radius: 8px;
  background: #ffffff;
  color: var(--k-marino);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Lo que hace el producto, en el panel azul de entrar (marca Urbby): cada uno con su marca amarilla. */
.k-beneficios {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.k-beneficio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.4;
}
.k-beneficio-marca {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--k-amarillo);
  color: var(--k-marino);
}

/* La franja del agente que no contesta (cambio `kurbby-sin-bloqueo-envios`; la misma que en
   `panel.css`). */
.k-banda-agente {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  padding: 8px 16px;
  border-bottom: 2px solid var(--k-rojo);
  background: var(--k-rojo-fondo);
  color: var(--k-rojo);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.k-banda-agente a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}