/* Platform app. The shell, panels and states come from Koozco.UI (koozco-ui.css); only the layout of its own screens lives here. */
.loading-progress-text:after { content: 'Preparando la plataforma…'; }

.section-cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.section-cards a { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); text-decoration: none; min-height: 44px; }
.section-cards a:hover { border-color: var(--focus); }
.section-cards a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.section-cards span { color: var(--muted); font-size: 13px; }

.detail-grid { display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0; }
.detail-grid dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.detail-grid dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.inline-form .field-shell, .inline-form > div { min-width: 0; }
.inline-form .grow { flex: 1 1 280px; }
.toolbar-search { flex: 1 1 240px; max-width: 420px; }

.link-button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; background: var(--card); }
.link-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.started-session { border: 1px solid var(--ok-line); border-left: 4px solid var(--ok-bar); background: var(--ok-bg); color: var(--ok-ink); border-radius: 8px; padding: 14px 16px; margin: 0 0 20px; }
.started-session h3 { margin: 0 0 8px; }
.token-box { display: grid; gap: 6px; margin: 10px 0; }
.token-box .text-input { font-size: 12px; }

@media (max-width: 640px) {
    .inline-form .rz-button { width: 100%; }
    .toolbar-search { max-width: none; }
}

/* Subscription screens (P9-006). */
.tab-list { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 18px; overflow-x: auto; }
.tab-button { min-height: 44px; padding: 0 18px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tab-button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--focus); }
.tab-button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.kpi-heading { margin: 14px 0 8px; font-size: 14px; color: var(--muted); }
.kpi-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi-grid li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.kpi-value { font-size: 22px; font-weight: 700; color: var(--ink); }
.kpi-label { font-size: 13px; color: var(--muted); }

.toolbar-provider { flex: 1 1 160px; max-width: 220px; }
.plan-verticals { border: 0; margin: 0; padding: 0; }
.frozen-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--muted); }

.simulator-panel { border: 2px dashed var(--warn-bar, #b45309); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(180, 83, 9, 0.06) 14px 28px); }
.test-only-mark { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.sim-days { margin-top: 14px; }

@media (max-width: 640px) {
    .toolbar-provider { max-width: none; }
}

/* Overview (P10-008): tiles reuse .kpi-grid; skeletons and tables use the shared tokens only. */
.kpi-grid li.kpi-alert { border-color: var(--danger); }
.kpi-grid li.kpi-alert .kpi-value { color: var(--danger); }
.overview-columns { display: grid; gap: var(--space-panel-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: var(--space-panel-gap); align-items: start; }
.overview-columns > .panel, .overview-skeleton + .panel { min-width: 0; }
.plain-table .num, .num { text-align: right; font-variant-numeric: tabular-nums; }
.skeleton { background: var(--card-alt); border: 1px solid var(--line); border-radius: var(--radius-md); }
.skeleton-tile { min-height: 64px; }
.skeleton-block { min-height: 180px; margin-top: var(--space-panel-gap); }
@media (prefers-reduced-motion: no-preference) { .skeleton { animation: skeleton-pulse 1.4s ease-in-out infinite; } }
@keyframes skeleton-pulse { 50% { opacity: .55; } }

/* Header business search of the console (P10-008). */
.header-business-search { display: flex; align-items: center; gap: 6px; margin: 0; }
.header-business-search .header-business-field { min-height: 44px; min-width: 0; width: clamp(140px, 22vw, 320px); }
@media (max-width: 600px) { .header-business-search .header-business-field { display: none; } }
/* Phones: two tiles per row, and long action codes wrap inside their cell instead of widening the table. */
.overview-kpis .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.plain-table td.mono { overflow-wrap: anywhere; }