/*
 * KituCloud — Firma visual (piel de marca), compartida por las vistas.
 * Depende de tokens.css (cargarlo antes que este).
 *
 * Los 6 elementos que hacen que algo "se vea KituCloud" (skill
 * kitucloud-design-system, sección "Firma visual"): superficie oscura
 * con resplandores, texto en degradado, pastilla con punto, botones de
 * marca, tarjeta destacada y lista con check en degradado. Cada vista de
 * entrada (registro, login, pago confirmado) usa al menos 3.
 */

/* 1. Superficie oscura con resplandores. En el interior del panel, como
   mucho una por pantalla (el sidebar). */
.kitu-dark { background: var(--kitu-surface-dark); color: var(--text-on-dark); }

/* 2. Texto en degradado: la segunda mitad de un titular principal, una vez
   por pantalla. Nunca en párrafos, tablas ni botones. */
.kitu-grad-text { background: var(--kitu-gradient-light); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kitu-grad-text--claro { background: var(--kitu-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 3. Pastilla con punto: etiqueta encima de un titular. */
.kitu-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill);
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: var(--text-on-dark-soft);
    font-size: 13px; letter-spacing: .04em; }
.kitu-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--state-activo-dot); box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
.kitu-pill--light { background: var(--surface-tint); border-color: #DDE3F8; color: var(--kitu-blue); }

/* 4. Botones de marca. Un solo primario visible por pantalla. */
.kitu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-btn);
    font-family: inherit; font-size: 15px; font-weight: 600; padding: 14px 28px; cursor: pointer; text-decoration: none; transition: all .2s; }
.kitu-btn--primary { background: var(--kitu-gradient); color: #fff; border: 0; box-shadow: var(--shadow-btn); }
.kitu-btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.kitu-btn--primary:disabled { opacity: .4; cursor: default; filter: none; transform: none; }
.kitu-btn--ghost-dark { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.kitu-btn--ghost-dark:hover { background: rgba(255,255,255,.12); }
.kitu-btn--secondary { background: transparent; border: 1px solid var(--border); color: var(--text-primary); }
.kitu-btn--secondary:hover { background: var(--surface-sunken); }

/* 5. Tarjeta destacada (planes, resumen de compra). */
.kitu-card-feature { position: relative; background: #fff; color: var(--text-primary); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-float); }
.kitu-card-feature.is-highlight { box-shadow: 0 0 0 2px var(--kitu-purple), 0 30px 80px rgba(79,110,247,.35); }
.kitu-badge-top { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--kitu-gradient);
    color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); white-space: nowrap; }

/* 6. Lista con check en degradado: beneficios, "qué incluye", confirmaciones. */
.kitu-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.kitu-check li { display: flex; gap: 10px; align-items: flex-start; }
.kitu-check li::before { content: "✓"; flex: 0 0 20px; height: 20px; border-radius: 50%; background: var(--kitu-gradient);
    color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }

/* Etiqueta de sección ("PASO 2", "RESUMEN"). */
.kitu-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--kitu-blue); }

/* Indicador de carga (en lugar de emojis de reloj). */
.kitu-spinner { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(79,110,247,.25);
    border-top-color: var(--kitu-blue); animation: kitu-giro .8s linear infinite; vertical-align: -3px; }
.kitu-dark .kitu-spinner { border-color: rgba(255,255,255,.25); border-top-color: #fff; }
@keyframes kitu-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kitu-spinner { animation-duration: 2.4s; } }

/* Íconos Feather por máscara CSS (static/img/icons/, licencia MIT). Toman
   el color del texto (currentColor) y funcionan dentro de HTML armado por
   JS sin tener que cargar nada: <span class="ico ico-globe"></span>.
   pointer-events: none para que el clic caiga en el botón o link que lo
   contiene. Para un ícono nuevo: bajar el SVG de Feather como
   icon-<nombre>.svg y agregar su línea .ico-<nombre>. */
.ico { display: inline-block; width: 1.1em; height: 1.1em; flex: 0 0 auto; vertical-align: -0.18em; pointer-events: none;
    background-color: currentColor; -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain; }
.ico-alert-circle { --ico: url("/static/img/icons/icon-alert-circle.svg"); }
.ico-bar-chart { --ico: url("/static/img/icons/icon-bar-chart.svg"); }
.ico-check-circle { --ico: url("/static/img/icons/icon-check-circle.svg"); }
.ico-clock { --ico: url("/static/img/icons/icon-clock.svg"); }
.ico-copy { --ico: url("/static/img/icons/icon-copy.svg"); }
.ico-credit-card { --ico: url("/static/img/icons/icon-credit-card.svg"); }
.ico-eye-off { --ico: url("/static/img/icons/icon-eye-off.svg"); }
.ico-file-text { --ico: url("/static/img/icons/icon-file-text.svg"); }
.ico-gift { --ico: url("/static/img/icons/icon-gift.svg"); }
.ico-globe { --ico: url("/static/img/icons/icon-globe.svg"); }
.ico-grid { --ico: url("/static/img/icons/icon-grid.svg"); }
.ico-home { --ico: url("/static/img/icons/icon-home.svg"); }
.ico-key { --ico: url("/static/img/icons/icon-key.svg"); }
.ico-link { --ico: url("/static/img/icons/icon-link.svg"); }
.ico-list { --ico: url("/static/img/icons/icon-list.svg"); }
.ico-log-in { --ico: url("/static/img/icons/icon-log-in.svg"); }
.ico-log-out { --ico: url("/static/img/icons/icon-log-out.svg"); }
.ico-monitor { --ico: url("/static/img/icons/icon-monitor.svg"); }
.ico-pencil { --ico: url("/static/img/icons/icon-pencil.svg"); }
.ico-plus { --ico: url("/static/img/icons/icon-plus.svg"); }
.ico-refresh-cw { --ico: url("/static/img/icons/icon-refresh-cw.svg"); }
.ico-server { --ico: url("/static/img/icons/icon-server.svg"); }
.ico-settings { --ico: url("/static/img/icons/icon-settings.svg"); }
.ico-shopping-bag { --ico: url("/static/img/icons/icon-shopping-bag.svg"); }
.ico-shopping-cart { --ico: url("/static/img/icons/icon-shopping-cart.svg"); }
.ico-shuffle { --ico: url("/static/img/icons/icon-shuffle.svg"); }
.ico-trash { --ico: url("/static/img/icons/icon-trash.svg"); }
.ico-truck { --ico: url("/static/img/icons/icon-truck.svg"); }
.ico-user { --ico: url("/static/img/icons/icon-user.svg"); }
.ico-warning { --ico: url("/static/img/icons/icon-warning.svg"); }
.ico-zap { --ico: url("/static/img/icons/icon-zap.svg"); }
.ico-arrow-left { --ico: url("/static/img/icons/icon-arrow-left.svg"); }
.ico-code { --ico: url("/static/img/icons/icon-code.svg"); }
.ico-download { --ico: url("/static/img/icons/icon-download.svg"); }
.ico-external-link { --ico: url("/static/img/icons/icon-external-link.svg"); }
.ico-folder { --ico: url("/static/img/icons/icon-folder.svg"); }
.ico-info { --ico: url("/static/img/icons/icon-info.svg"); }
.ico-layout { --ico: url("/static/img/icons/icon-layout.svg"); }
.ico-lock { --ico: url("/static/img/icons/icon-lock.svg"); }
.ico-mail { --ico: url("/static/img/icons/icon-mail.svg"); }
.ico-rotate-ccw { --ico: url("/static/img/icons/icon-rotate-ccw.svg"); }
.ico-search { --ico: url("/static/img/icons/icon-search.svg"); }
.ico-shield { --ico: url("/static/img/icons/icon-shield.svg"); }
.ico-upload { --ico: url("/static/img/icons/icon-upload.svg"); }

/* Wordmark como texto: "KituCloud" en Inter 700 con el degradado de marca,
   sobre fondo claro. El SVG de static/img/brand/ es texto en Arial 500 y se
   ve plano; kitucloud.com usa el nombre en peso 700. */
.kitu-wordmark { display: inline-block; font-family: var(--font-kitu); font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em;
    background: var(--kitu-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; }

/* Ícono de tarjeta: cuadrado chico con fondo tintado y el ícono en azul. */
.ico-caja { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--kitu-blue); font-size: 20px; }
.ico-caja .ico { vertical-align: 0; }
.ico-caja--grande { width: 56px; height: 56px; flex-basis: 56px; border-radius: var(--radius-md); font-size: 26px; }

/* Badges de estado: mismo color para el mismo estado en las tres vistas
   del panel (skill, "Badges de estado"). */
.kitu-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.kitu-badge--activo { background: var(--state-activo-bg); color: var(--state-activo-text); }
.kitu-badge--pendiente { background: var(--state-pendiente-bg); color: var(--state-pendiente-text); }
.kitu-badge--vencido { background: var(--state-vencido-bg); color: var(--state-vencido-text); }
.kitu-badge--neutro { background: var(--state-neutro-bg); color: var(--state-neutro-text); }
.kitu-badge--marca { background: var(--surface-tint); color: var(--kitu-blue); }

/* Punto de estado delante de un texto ("CDN activado"): reemplaza los
   emojis de círculo de color. */
.punto-estado { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--state-construccion); }
.punto-estado--activo { background: var(--state-activo); box-shadow: 0 0 0 3px var(--state-activo-bg); }
.punto-estado--pendiente { background: var(--state-pendiente); }
.punto-estado--vencido { background: var(--state-vencido); }
.punto-estado--proxy { background: #F38020; }