/*
 * theme/owui-skin.css — sistema de componentes compartido (WP #23004, Fase 1)
 *
 * FUENTE ÚNICA del look de OpenWebUI a nivel COMPONENTE: tipografía, header/navbar,
 * cards, KPI, secciones, botones, inputs, chips, logo, y el gate del tooltip.
 * Lo consumen TODAS las pantallas del stack (dashboards /live, landing, /sessions,
 * futuro binbot). Cambiar el look de un componente acá = cambia en todos lados.
 * Cero duplicación por pantalla.
 *
 * Depende de theme/tokens.css (define --owui-*). Los `!important` overridean el CSS
 * legacy hand-coded de cada pantalla; cuando esas pantallas se reescriban usando
 * estas clases directamente, se pueden quitar. Tenant-neutral.
 */

/* ---- Tipografía OpenWebUI: Inter en el chrome, caja normal, cifras tabulares ---- */
html, body, body * {
	font-family: var(--owui-font-sans) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}
code, pre, kbd, samp, tt { font-family: var(--owui-font-mono) !important; }
body { font-variant-numeric: tabular-nums; }

/* ---- Header / navbar compartido — layout de 3 zonas ----
 *   [ .hdr-left (brand + nav) ] [ .clock ] [ .hdr-right (controles + switcher) ]
 *   Las dos zonas laterales son flex:1 espejadas: el reloj queda centrado DE VERDAD
 *   (no por posición absoluta) y ninguna zona puede solaparse con otra por más cargado
 *   que esté el header. min-width:0 deja que el contenido se comprima antes de desbordar.
 *   Dashboards usan .topbar; landing/sessions .owui-shell. */
.topbar, .owui-shell { display: flex !important; align-items: center; gap: 14px !important; position: relative; }
.owui-shell { padding: 10px 20px; border-bottom: 1px solid var(--owui-border); background: var(--owui-bg-surface); }
.topbar .hdr-left, .owui-shell .hdr-left { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; }
.topbar .hdr-right, .owui-shell .hdr-right { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.topbar .brand, .owui-shell .brand { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--owui-text); }
.topbar .brand img, .owui-shell .brand img { height: 22px; }
.topbar .brand .sub, .owui-shell .brand .sub { color: var(--owui-text-muted); font-weight: 500; }
.topbar .topnav, .owui-shell .topnav { display: flex; gap: 8px; flex: 0 1 auto; min-width: 0; }
.topbar .topnav a, .owui-shell .topnav a { color: var(--owui-text-muted); text-decoration: none; font-size: 13px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.topbar .topnav a:hover, .topbar .topnav a.active,
.owui-shell .topnav a:hover, .owui-shell .topnav a.active { color: var(--owui-text); background: var(--owui-bg-surface-2) !important; }
.topbar .clock, .owui-shell .clock {
	position: static !important; left: auto !important; top: auto !important; transform: none !important;
	flex: 0 0 auto; margin: 0 !important; text-align: center; white-space: nowrap;
	color: var(--owui-text-muted); font-variant-numeric: tabular-nums;
}
.topbar select.owui-theme-switcher, .owui-shell select.owui-theme-switcher {
	font-size: 12px !important; cursor: pointer; flex: 0 0 auto;
	background: var(--owui-bg-elevated) !important; color: var(--owui-text) !important;
	border: 1px solid var(--owui-border-strong) !important; border-radius: 999px !important; padding: 5px 12px !important;
}

/* ---- Logo de marca (negro-sobre-transparente; default Binetz, overridable) ---- */
.brand img { filter: none; }
[data-theme="dark"] .brand img,
[data-theme="oled-dark"] .brand img,
[data-theme="rose-pine"] .brand img { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .brand img { filter: invert(1); } }

/* ---- Cards / secciones (una card = superficie gris, borde, radio) ---- */
.card, section, details, .log-panel {
	border-radius: 16px !important;
	border: 1px solid var(--owui-border) !important;
	background: var(--owui-bg-surface) !important;
}
.team-strip { background: transparent !important; border: none !important; }  /* grid contenedor, no card */

/* ---- Componente KPI: card gris, título+separador, número centrado, nota, color por estado ---- */
.kpi {
	background: var(--owui-bg-surface) !important;
	border: 1px solid var(--owui-border) !important;
	border-radius: 14px !important;
	padding: 14px 16px !important;
	display: flex !important;
	flex-direction: column !important;
}
.kpi.accent, .kpi.warn, .kpi.ok,
.kpi.kpi-sobra, .kpi.kpi-justo, .kpi.kpi-se_pasa { border-left: 1px solid var(--owui-border) !important; }
.kpi .label {
	color: var(--owui-text-muted) !important;
	border-bottom: 1px solid var(--owui-border) !important;
	padding-bottom: 9px !important; margin-bottom: 12px !important; text-align: left !important;
}
.kpi .value { font-size: 34px !important; line-height: 1.05 !important; color: var(--owui-text) !important; text-align: center !important; }
.kpi .sub { color: var(--owui-text-subtle) !important; text-align: center !important; margin-top: 8px !important; }
.kpi.ok .value, .kpi.kpi-sobra .value, .kpi.accent .value { color: var(--owui-success) !important; }
.kpi.warn .value, .kpi.kpi-justo .value { color: var(--owui-warning) !important; }
.kpi.se_pasa .value, .kpi.kpi-se_pasa .value, .kpi.bad .value { color: var(--owui-danger) !important; }

/* ---- Chips / pills ---- */
.chip, .pill, .badge, .tag,
[class*="chip"], [class*="pill"], [class*="badge"], [class*="tag"] { border-radius: 999px !important; }

/* ---- Botones / toggles ---- */
button, .btn, [role="button"], [class*="btn"], [class*="toggle"] { border-radius: 999px !important; }

/* ---- Inputs / selects / date pickers ---- */
input, select, textarea {
	border-radius: 10px !important;
	border: 1px solid var(--owui-border) !important;
	background: var(--owui-bg-surface) !important;
	color: var(--owui-text) !important;
	padding: 6px 10px !important;
}
input:focus, select:focus, textarea:focus {
	outline: 2px solid color-mix(in srgb, var(--owui-accent) 35%, transparent) !important;
	outline-offset: 1px;
}

/* ---- Tooltip gate: el popup de fórmula (#dbg-tooltip) solo con el toggle ON (body.debug) ---- */
body:not(.debug) #dbg-tooltip { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }