/* =====================================================================
   Tickets & Caja -- mockup del hero de la landing  (prefijo: tkts-)
   Prefijo asignado en core/helpers/module_registry.php -> 'css_prefix'.
   Solo clases tkts-*. La estructura de la pagina es de chzr.css (.chzr-*).
   Color: --chzr-land-accent (= --app de la app, tabla [data-app] en chzr.css;
   2026-09-23). Tonos translucidos con color-mix(), no con --chzr-land-accent-rgb.
   Se carga unicamente desde saas/tickets/index.php.
   ===================================================================== */
.tkts-body { padding: 28px 30px 30px; }
.tkts-head, .tkts-line, .tkts-total { display: flex; justify-content: space-between; align-items: center; }
.tkts-head { padding-bottom: 18px; border-bottom: 1px solid #edf0f5; }
.tkts-head small { display: block; margin-bottom: 4px; color: #6b7686; font-size: .62rem; font-weight: 800; letter-spacing: .08em; }
.tkts-head strong { color: var(--chzr-land-accent); font-size: 1.1rem; }
.tkts-mode { padding: 5px 11px; border-radius: 6px; background: color-mix(in srgb, var(--chzr-land-accent) 9%, transparent); color: var(--chzr-land-accent); font-size: .66rem; font-weight: 800; letter-spacing: .06em; }
.tkts-line { padding: 13px 0; border-bottom: 1px solid #f0f1f5; font-size: .8rem; }
.tkts-line span { display: flex; flex-direction: column; gap: 3px; }
.tkts-line small { color: #6b7686; font-size: .68rem; }
.tkts-total { padding: 16px 0 20px; }
.tkts-total span { color: #747c8c; font-size: .78rem; font-weight: 700; }
.tkts-total strong { color: var(--chzr-land-accent); font-size: 1.5rem; }
.tkts-flow-title { margin-bottom: 9px; color: #6b7686; font-size: .62rem; font-weight: 800; letter-spacing: .08em; }
.tkts-flow { display: flex; flex-wrap: wrap; gap: 6px; }
.tkts-step { padding: 6px 10px; border: 1px solid #e3e6ee; border-radius: 100px; color: #6b7686; font-size: .68rem; font-weight: 700; }
.tkts-step.tkts-done { border-color: #cfe9da; background: #f0faf5; color: #16834b; }
.tkts-step.tkts-now { border-color: var(--chzr-land-accent); background: color-mix(in srgb, var(--chzr-land-accent) 7%, transparent); color: var(--chzr-land-accent); }

@media (max-width: 600px) {
	.tkts-body { padding: 20px; }
}