/* =====================================================================
   InfoScope -- mockups de la landing (panel del hero + formulario)
   Prefijo: ifs-   (asignado en core/helpers/module_registry.php ->
   'css_prefix'; NO "is-", que es el prefijo universal de clases de estado).
   Solo clases ifs-*. 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/infoscope/index.php.
   ===================================================================== */

/* Panel de ejemplo (hero) */
.ifs-body { display: grid; grid-template-columns: 150px 1fr; min-height: 385px; }
.ifs-side { padding: 18px 11px; border-right: 1px solid #eaecf0; background: #fafbfc; }
.ifs-side-brand { padding: 0 9px 17px; font-size: 13px; font-weight: 800; }
.ifs-side-label { padding: 0 9px 7px; color: #98a2b3; font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.ifs-side-item { margin-bottom: 3px; padding: 9px; border-radius: 8px; color: #667085; font-size: 11px; }
.ifs-side-item.ifs-active { background: color-mix(in srgb, var(--chzr-land-accent) 9%, transparent); color: var(--chzr-land-accent); font-weight: 800; }
.ifs-screen { padding: 22px; }
.ifs-screen-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ifs-screen-title { font-size: 17px; font-weight: 800; }
.ifs-mini-btn { padding: 7px 10px; border-radius: 7px; background: var(--chzr-land-accent); color: #fff; font-size: 9px; font-weight: 800; }
.ifs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 18px; }
.ifs-stat { padding: 12px; border: 1px solid #eaecf0; border-radius: 10px; }
.ifs-stat small { display: block; color: #98a2b3; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.ifs-stat strong { display: block; margin-top: 3px; font-size: 20px; }
.ifs-table { overflow: hidden; border: 1px solid #eaecf0; border-radius: 10px; }
.ifs-row { display: grid; grid-template-columns: 1.3fr 1fr .8fr; padding: 10px 12px; border-bottom: 1px solid #f2f4f7; font-size: 9px; }
.ifs-row:last-child { border-bottom: 0; }
.ifs-row.ifs-head { background: #f9fafb; color: #667085; font-weight: 800; }

/* Formulario de ejemplo (seccion oscura) */
.ifs-form { width: 100%; max-width: 470px; padding: 28px; border-radius: 18px; background: #fff; color: #101828; box-shadow: 0 30px 70px rgba(0, 0, 0, .28); }
.ifs-form-logo { width: 44px; height: 44px; margin-bottom: 17px; border-radius: 12px; background: linear-gradient(135deg, var(--chzr-land-accent), var(--chzr-land-accent-2)); }
.ifs-form h3 { margin: 0 0 5px; font-size: 20px; }
.ifs-form p { margin: 0 0 20px; color: #667085; font-size: 12px; }
.ifs-field-label { display: block; margin-bottom: 6px; color: #344054; font-size: 11px; font-weight: 800; }
.ifs-fake-input { height: 38px; margin-bottom: 13px; border: 1px solid #d0d5dd; border-radius: 8px; }
.ifs-fake-submit { width: 100%; height: 40px; border: 0; border-radius: 8px; background: var(--chzr-land-accent); color: #fff; font-weight: 800; }

@media (max-width: 600px) {
	.ifs-body { grid-template-columns: 1fr; }
	.ifs-side { display: none; }
}