/* Componentes FlexOP (look Plane, código propio). Requiere tokens.css. Todo control implementa normal, hover, foco,
   presionado, deshabilitado y carga. Las clases g-* son la API; la sección final de compatibilidad viste el markup
   que todavía generan los módulos JS de las pantallas (.notice, button.primary, .muted, .actions, .check). */

/* Texto */
.g-display{font:var(--text-display);margin:0}
.g-heading{font:var(--text-heading);margin:0}
.g-title{font:var(--text-title);margin:0}
.g-subtitle{font:var(--text-subtitle);margin:0;color:var(--text-muted)}
.g-section{font:var(--text-section);color:var(--text);margin:0}
.g-body{font:var(--text-body);margin:0}
.g-small{font:var(--text-body-small);color:var(--text-muted);margin:0}
.g-caption{font:var(--text-caption);color:var(--text-subtle);margin:0}
.g-label{font:var(--text-label);color:var(--text-subtle);margin:0}
.g-muted{color:var(--text-muted)}
.g-icon{flex:none;width:var(--icon-sm);height:var(--icon-sm)}

/* Botones: secundario por defecto, sentence case, 32px */
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-3);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-sm);font:var(--text-body-small);font-weight:500;text-decoration:none;cursor:pointer;position:relative;background:var(--surface-raised);color:var(--text);white-space:nowrap;transition:background-color var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),opacity var(--motion-fast) var(--ease-out)}
.g-btn:hover{background-image:linear-gradient(var(--hover-lift),var(--hover-lift))}
.g-btn:active{transform:scale(.98)}
.g-btn:disabled,.g-btn[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:default;pointer-events:none}
.g-btn.is-loading,.g-btn.is-loading:disabled{color:transparent;pointer-events:none;opacity:1}
.g-btn.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:var(--icon-sm);height:var(--icon-sm);border-radius:50%;border:2px solid currentColor;border-right-color:transparent;color:var(--text);animation:g-spin .8s linear infinite}
.g-btn--secondary{background:var(--surface-raised);border-color:var(--border-strong)}
.g-btn--primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.g-btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);background-image:none}
.g-btn--primary.is-loading::after{color:var(--on-primary)}
.g-btn--ghost{background:transparent;border-color:transparent;color:var(--text-muted)}
.g-btn--ghost:hover{background:var(--hover-lift);background-image:none;color:var(--text)}
.g-btn--danger{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.g-btn--danger:hover{background:var(--danger);color:#fff;background-image:none}
.g-btn--sm{min-height:var(--control-sm);padding:0 var(--space-2);font:var(--text-caption);font-weight:500}
.g-btn--lg{min-height:var(--control-lg);padding:0 var(--space-4);font:var(--text-body);font-weight:500}
.g-btn--block{width:100%}
.g-btn--icon{padding:0;width:var(--control-md)}
.g-btn--icon.g-btn--sm{width:var(--control-sm)}
.g-link{background:none;border:0;padding:0;min-height:0;color:var(--primary);font:inherit;text-decoration:underline;cursor:pointer}
@keyframes g-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.g-btn.is-loading::after{animation-duration:1.6s}}

/* Campos: etiqueta encima */
.g-field{display:grid;gap:var(--space-1);min-width:0}
.g-field>span,.g-field>label,.g-field>legend{font:var(--text-body-small);font-weight:500;color:var(--text)}
.g-field .g-optional{font:var(--text-caption);color:var(--text-subtle);margin-left:var(--space-2)}
.g-input,.g-select,.g-textarea{width:100%;min-height:var(--control-md);padding:0 var(--space-3);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--field);color:var(--text);font:var(--text-body);transition:border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}
.g-textarea{min-height:calc(var(--control-md) * 2.5);padding:var(--space-2) var(--space-3);resize:vertical;line-height:1.5}
.g-input::placeholder,.g-textarea::placeholder{color:var(--text-subtle)}
.g-input:hover,.g-select:hover,.g-textarea:hover{border-color:color-mix(in srgb,var(--border-strong) 50%,var(--text-subtle))}
.g-input:focus-visible,.g-select:focus-visible,.g-textarea:focus-visible{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 25%,transparent)}
.g-input:disabled,.g-select:disabled,.g-textarea:disabled{opacity:var(--disabled-opacity)}
.g-input[readonly]{color:var(--text-muted);background:var(--surface-raised)}
.g-input[aria-invalid=true],.g-select[aria-invalid=true],.g-textarea[aria-invalid=true]{border-color:var(--danger)}
.g-input[aria-invalid=true]:focus-visible,.g-select[aria-invalid=true]:focus-visible,.g-textarea[aria-invalid=true]:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 25%,transparent)}
.g-input--mono{font-family:var(--font-mono);font-size:13px}
.g-help{font:var(--text-caption);color:var(--text-subtle);margin:0}
.g-error{font:var(--text-caption);color:var(--danger);margin:0}
.g-error:empty{display:none}
.g-input-row{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.g-input-row .g-input{flex:1}
.g-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-subtle) 50%),linear-gradient(135deg,var(--text-subtle) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:var(--space-8)}
.g-check{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);font:var(--text-body)}
.g-check input{width:16px;height:16px;margin:0;accent-color:var(--primary);flex:0 0 16px}
/* Interruptor sobre un checkbox: sin JS */
.g-toggle{appearance:none;width:32px;height:18px;margin:0;border-radius:9px;background:var(--border-strong);position:relative;cursor:pointer;flex:0 0 32px;transition:background-color var(--motion-fast) var(--ease-out)}
.g-toggle::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--motion-fast) var(--ease-out)}
.g-toggle:checked{background:var(--primary)}
.g-toggle:checked::after{transform:translateX(14px)}
.g-toggle:disabled{opacity:var(--disabled-opacity);cursor:default}
.g-color{width:32px;height:32px;padding:2px;border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--field);cursor:pointer}
@media(max-width:1023px){.g-input,.g-select,.g-textarea{font-size:16px}}

/* Búsqueda */
.g-search{position:relative}
.g-search .g-input{padding-left:var(--space-8)}
.g-search::before{content:"";position:absolute;left:var(--space-3);top:50%;width:12px;height:12px;margin-top:-8px;border:1.5px solid var(--text-subtle);border-radius:50%;box-sizing:border-box}
.g-search::after{content:"";position:absolute;left:calc(var(--space-3) + 9px);top:50%;width:1.5px;height:6px;margin-top:1px;background:var(--text-subtle);transform:rotate(-45deg)}

/* Superficies */
.g-card{background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--radius-md);padding:var(--space-5)}
.g-card--raised{background:var(--surface-raised)}
.g-card--compact{padding:var(--space-4)}
.g-card-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding-bottom:var(--space-4);margin-bottom:var(--space-4);border-bottom:var(--stroke) solid var(--border)}
.g-card-head>div:not(.g-actions){min-width:0;display:grid;gap:var(--space-1)}
.g-card-head>.g-actions,.g-page-header>.g-actions{align-items:flex-end;flex:none}
.g-card-head h2,.g-card-head h3{font:var(--text-title);margin:0}
.g-card-head p{margin:0}
.g-card-body{display:grid;gap:var(--space-4)}
.g-control-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:var(--stroke) solid var(--border)}
.g-control-item:last-child{border-bottom:0}
.g-control-item>div{min-width:0;display:grid;gap:2px}
.g-control-item strong{font:var(--text-body-bold)}
.g-control-item small{font:var(--text-caption);color:var(--text-subtle)}
.g-divider{border:0;border-top:var(--stroke) solid var(--border);margin:var(--space-4) 0}
.g-stack{display:grid;gap:var(--space-4)}
.g-stack--tight{gap:var(--space-2)}
.g-stack--loose{gap:var(--space-6)}
.g-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.g-row--end{justify-content:flex-end}
.g-row--between{justify-content:space-between}
.g-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.g-actions--end{justify-content:flex-end}
@media(max-width:599px){.g-actions--stack-mobile{flex-direction:column-reverse;align-items:stretch}.g-actions--stack-mobile .g-btn{width:100%}}
.g-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.g-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.g-span-all{grid-column:1/-1}
@media(max-width:1023px){.g-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){.g-grid-2,.g-grid-4{grid-template-columns:minmax(0,1fr)}.g-span-all{grid-column:auto}}

/* Encabezado de página */
.g-page{width:100%;max-width:var(--content-max);margin:0 auto;padding:var(--space-6) var(--page-margin) var(--space-12);display:grid;gap:var(--space-5);align-content:start}
.g-page-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.g-page-header>div:not(.g-actions){min-width:0;display:grid;gap:var(--space-1);flex:1 1 320px}
.g-page-header h1{font:var(--text-heading);margin:0}
.g-page-header p{margin:0;max-width:72ch}
.g-subnav{display:flex;gap:var(--space-1);border-bottom:var(--stroke) solid var(--border);overflow-x:auto;scrollbar-width:none}
.g-subnav a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-lg);padding:0 var(--space-3);border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--text-muted);font:var(--text-body-small);font-weight:500;text-decoration:none;white-space:nowrap}
.g-subnav a:hover{color:var(--text)}
.g-subnav a[aria-current=page]{color:var(--primary);border-bottom-color:var(--primary)}
.g-stat{display:grid;gap:2px;padding:var(--space-3) var(--space-4);border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);text-align:left;text-decoration:none;min-height:88px}
.g-stat span,.g-stat small{font:var(--text-caption);color:var(--text-subtle)}
.g-stat strong{font:var(--text-heading);font-variant-numeric:tabular-nums}
.g-stat:hover,.g-stat[aria-pressed=true]{border-color:var(--primary);background:var(--primary-soft)}
.g-stat--ok strong{color:var(--ok)}
.g-stat--danger strong{color:var(--danger)}

/* Indicadores */
.g-badge{display:inline-flex;align-items:center;gap:var(--space-1);min-height:20px;padding:0 var(--space-2);border-radius:var(--radius-xs);font:var(--text-label);font-weight:500;background:var(--surface-raised);color:var(--text-muted);border:var(--stroke) solid var(--border);white-space:nowrap}
.g-badge--info{background:var(--primary-soft);color:var(--primary);border-color:transparent}
.g-badge--success{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.g-badge--warning{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.g-badge--danger,.g-badge--error{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.g-badge--neutral{background:transparent}
.g-badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* Mensajes: banner inline cerca de la acción */
.g-banner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:var(--stroke) solid var(--border);background:var(--surface-raised);color:var(--text);font:var(--text-body-small);overflow-wrap:anywhere}
.g-banner::before{content:"";width:3px;align-self:stretch;border-radius:var(--radius-xs);background:var(--primary)}
.g-banner--success{background:var(--ok-soft);border-color:transparent}.g-banner--success::before{background:var(--ok)}
.g-banner--warning{background:var(--warn-soft);border-color:transparent}.g-banner--warning::before{background:var(--warn)}
.g-banner--error,.g-banner--danger{background:var(--danger-soft);border-color:transparent}.g-banner--error::before,.g-banner--danger::before{background:var(--danger)}
.g-banner strong{display:block;font:var(--text-body-bold)}
.g-banner .g-btn{margin-top:var(--space-2)}
.g-banner:focus-visible{box-shadow:var(--focus-ring)}

/* Panel de estado: cargando, vacío, error, sin permisos */
.g-state{display:grid;justify-items:center;text-align:center;gap:var(--space-2);padding:var(--space-8) var(--space-6);border:var(--stroke) dashed var(--border-strong);border-radius:var(--radius-md);color:var(--text-muted);font:var(--text-body-small)}
.g-state strong{font:var(--text-subtitle);color:var(--text)}
.g-state--error{border-color:var(--danger);color:var(--text)}
.g-spinner{width:var(--icon-lg);height:var(--icon-lg);border-radius:50%;border:2px solid var(--border);border-top-color:var(--primary);animation:g-spin .8s linear infinite}
.g-skeleton{position:relative;overflow:hidden;background:var(--surface-raised);border-radius:var(--radius-sm);min-height:1em;color:transparent}
.g-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--hover-lift),transparent);animation:g-shimmer 1.4s infinite}
@keyframes g-shimmer{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.g-skeleton::after,.g-spinner{animation:none}}

/* Pestañas, segmentado, paginación, lista, tabla */
.g-tabs{display:flex;gap:var(--space-1);border-bottom:var(--stroke) solid var(--border)}
.g-tab{min-height:var(--control-lg);padding:0 var(--space-3);border:0;border-bottom:2px solid transparent;background:none;color:var(--text-muted);font:var(--text-body-small);font-weight:500;cursor:pointer;margin-bottom:-1px}
.g-tab:hover{color:var(--text)}
.g-tab[aria-selected=true],.g-tab[aria-pressed=true]{color:var(--primary);border-bottom-color:var(--primary)}
.g-segmented{display:inline-flex;padding:2px;gap:2px;border-radius:var(--radius-sm);background:var(--surface-raised);border:var(--stroke) solid var(--border)}
.g-segmented button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);min-height:calc(var(--control-sm) - 4px);padding:0 var(--space-2);border:0;border-radius:var(--radius-xs);background:transparent;color:var(--text-muted);font:var(--text-caption);font-weight:500;cursor:pointer}
.g-segmented button:hover{color:var(--text)}
.g-segmented button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.g-pagination{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap;font:var(--text-caption);font-variant-numeric:tabular-nums;color:var(--text-muted)}
.g-list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.g-list-item{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:var(--surface);min-width:0}
.g-list-item>*{min-width:0}
.g-list-item strong{overflow-wrap:anywhere}
.g-list-item.is-inactive{color:var(--text-muted);background:var(--field)}
.g-table-wrap{overflow-x:auto;border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.g-table{width:100%;border-collapse:collapse;font:var(--text-body-small)}
.g-table th{text-align:left;font:var(--text-caption);font-weight:500;color:var(--text-muted);padding:var(--space-2) var(--space-4);border-bottom:var(--stroke) solid var(--border);background:var(--surface-raised);white-space:nowrap}
.g-table td{padding:var(--space-2) var(--space-4);border-bottom:var(--stroke) solid var(--border);height:44px;vertical-align:middle}
.g-table tbody tr:last-child td{border-bottom:0}
.g-table tbody tr:hover{background:var(--hover-lift)}
.g-table td.g-data{font-variant-numeric:tabular-nums}
.g-table--sticky thead th{position:sticky;top:0;z-index:1}
/* Tabla de sólo lectura dentro de una tarjeta angosta: menos relleno, filas más bajas */
.g-table--compact th,.g-table--compact td{padding:var(--space-2) var(--space-3)}.g-table--compact td,.g-table--compact td:first-child{height:auto;min-width:0}.g-table-wrap:has(>.g-table--compact){max-height:none}

/* Diálogos y sheets (reglas compartidas que antes vivían en theme.css) */
html.dialog-open{overflow:hidden;overscroll-behavior:none}
html.dialog-open body{position:fixed;top:var(--dialog-scroll-top,0);left:0;right:0;width:100%;overflow:hidden}
dialog{overscroll-behavior:contain;scroll-padding-block:80px 20px}
dialog :is(input,select,textarea,button,a):focus{scroll-margin-block:80px 20px}
.g-dialog,.confirmation-dialog{width:min(720px,calc(100vw - 2 * var(--page-margin)));max-height:90dvh;overflow:auto;background:var(--surface);color:var(--text);border:var(--stroke) solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-md);overscroll-behavior:contain}
.g-dialog::backdrop,.confirmation-dialog::backdrop{background:var(--scrim)}
.g-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);position:sticky;top:calc(-1 * var(--space-6));margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4);padding:var(--space-4) var(--space-6);background:var(--surface);z-index:1;min-height:var(--touch-comfortable)}
.g-dialog-heading h2{font:var(--text-title);margin:0;min-width:0;overflow-wrap:anywhere}
.confirmation-dialog{width:min(460px,calc(100vw - 2 * var(--page-margin)))}
.confirmation-dialog h2{font:var(--text-title);margin:0 0 var(--space-3)}
.confirmation-dialog p{margin:0 0 var(--space-4);white-space:normal;overflow-wrap:anywhere}
.confirmation-dialog label{display:grid;gap:var(--space-1);font:var(--text-body-small);font-weight:500;margin-bottom:var(--space-4)}
.confirmation-dialog textarea{min-height:calc(var(--control-md) * 2.5);padding:var(--space-2) var(--space-3);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--field);color:var(--text);font:var(--text-body);resize:vertical}
.confirmation-dialog .actions{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-end}
.confirmation-dialog button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-md);padding:0 var(--space-3);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--text);font:var(--text-body-small);font-weight:500;cursor:pointer}
.confirmation-dialog button.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
@media(max-width:599px){
  html body dialog.g-dialog[open],html body dialog.confirmation-dialog[open]{position:fixed;inset:auto 0 max(0px,calc(100dvh - var(--dialog-view-bottom,100dvh)));margin:0;width:100%;max-width:100%;height:auto;max-height:calc(var(--dialog-view-height,100dvh) - var(--space-2));border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-4) var(--space-4) max(var(--space-4),env(safe-area-inset-bottom));box-shadow:var(--shadow-md)}
  .g-dialog-heading{top:calc(-1 * var(--space-4));margin:calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4);padding:var(--space-3) var(--space-4)}
  .confirmation-dialog button{min-height:var(--touch-comfortable)}
}

/* Barra de herramientas: campos con etiqueta encima y acciones alineadas al pie */
.g-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3);min-width:0}
.g-toolbar>.g-field{flex:0 1 200px}
.g-toolbar>.g-field--wide{flex-basis:280px}
.g-toolbar>.g-actions{margin-left:auto}
@media(max-width:599px){.g-toolbar>.g-field{flex:1 1 140px}.g-toolbar>.g-field--wide{flex-basis:100%}.g-toolbar>.g-actions{margin-left:0;width:100%}.g-toolbar>.g-actions>.g-btn{flex:1 1 0}}
/* Dos columnas sólo desde escritorio; tablet y celular a una columna */
.g-grid-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);align-items:start}
@media(min-width:1024px){.g-grid-split{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Insignias adicionales: estado neutro y filtro removible */
.g-badge--unknown{background:var(--unknown-soft);color:var(--unknown);border-color:transparent}
.g-badge--removable{position:relative;min-height:var(--control-sm);padding-right:0;font:var(--text-caption);color:var(--text)}
.g-badge__remove{position:relative;display:inline-grid;place-items:center;width:var(--control-sm);height:var(--control-sm);margin:0;padding:0;border:0;border-radius:var(--radius-xs);background:transparent;color:var(--text-muted);font:var(--text-body);cursor:pointer}
.g-badge__remove::before{content:"";position:absolute;inset:calc(-1 * var(--space-2)) calc(-1 * var(--space-1))}
.g-badge__remove:hover{background:var(--hover-lift);color:var(--text)}
.g-skeleton--line{display:block;height:var(--space-3);width:60%}
.g-skeleton--value{display:block;height:var(--space-6);width:45%}
.g-skeleton--block{display:block;min-height:120px;width:100%}

/* Tarjeta KPI ejecutiva (extiende .g-stat): toda la tarjeta abre el panel; ⓘ queda por encima con su propio objetivo */
.g-kpi{position:relative;grid-template-rows:auto auto auto 1fr;gap:var(--space-1);min-height:96px;min-width:0;align-content:start;cursor:pointer}
.g-kpi:has(.g-kpi__open:focus-visible){box-shadow:var(--focus-ring)}
.g-kpi__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2);min-width:0}
.g-kpi__title{margin:0;min-width:0;font:var(--text-body-small);font-weight:500;color:var(--text-muted)}
.g-kpi__open{appearance:none;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.g-kpi__open::after{content:"";position:absolute;inset:0;border-radius:inherit}
.g-kpi__open:focus-visible{box-shadow:none}
.g-kpi__info{position:relative;z-index:1;flex:none;display:inline-grid;place-items:center;width:var(--control-sm);height:var(--control-sm);margin:calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) 0 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-subtle);font:var(--text-body);cursor:help}
.g-kpi__info::before{content:"";position:absolute;inset:calc(-1 * var(--space-2))}
.g-kpi__info:hover{background:var(--hover-lift);color:var(--text)}
.g-kpi__figure{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-2);margin:0;min-width:0}
.g-kpi .g-kpi__value{font:var(--text-heading);font-variant-numeric:tabular-nums;color:var(--text);overflow-wrap:anywhere}
.g-kpi .g-kpi__secondary{font:var(--text-body-small);font-variant-numeric:tabular-nums;color:var(--text-muted)}
.g-kpi__meta,.g-kpi__reason{margin:0;font:var(--text-caption);color:var(--text-muted);overflow-wrap:anywhere}
.g-kpi__reason{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.g-kpi__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-1) var(--space-2);align-self:end;min-width:0}
.g-kpi .g-kpi__delta{font:var(--text-caption);color:var(--text-muted);font-variant-numeric:tabular-nums}
.g-kpi .g-badge{font:var(--text-label);color:var(--text-muted)}.g-kpi .g-badge--success{color:var(--ok)}.g-kpi .g-badge--warning{color:var(--warn)}.g-kpi .g-badge--danger{color:var(--danger)}.g-kpi .g-badge--unknown{color:var(--unknown)}

/* Banner de ayuda (ui/tooltip.js): aparece al pasar el mouse o enfocar un control con data-tip; no recibe el puntero */
.g-tip{position:fixed;z-index:70;display:grid;gap:var(--space-1);width:max-content;max-width:min(320px,calc(100vw - 2 * var(--space-2)));padding:var(--space-3);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--text);font:var(--text-body-small);box-shadow:var(--shadow-md);pointer-events:none;overflow-wrap:anywhere}
.g-tip[hidden]{display:none}
.g-tip strong{font:var(--text-body-bold)}.g-tip p{margin:0}.g-tip small{font:var(--text-caption);color:var(--text-subtle)}

/* Lista de atención requerida: gravedad con texto y borde, qué ocurre y una acción */
.g-attention-list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.g-attention-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-2) var(--space-3);border:var(--stroke) solid var(--border);border-left:3px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);min-width:0}
.g-attention-item[data-severity=critical]{border-left-color:var(--danger)}
.g-attention-item[data-severity=high]{border-left-color:var(--warn)}
.g-attention-item[data-severity=medium]{border-left-color:var(--primary)}
.g-attention-item__text{display:grid;gap:2px;min-width:0}
.g-attention-item__text strong{font:var(--text-body-bold);overflow-wrap:anywhere}
.g-attention-item__text small{font:var(--text-caption);color:var(--text-subtle);overflow-wrap:anywhere}
.g-attention-item__text .g-badge{justify-self:start}
.g-control-item>.g-control-item__value{flex:none;white-space:nowrap;font:var(--text-body);font-variant-numeric:tabular-nums}
/* En el panel lateral un valor puede ser una frase (cobertura, comparación): se parte en vez de empujar el texto fuera */
.g-side-panel__body>*{min-width:0}.g-side-panel .g-control-item>.g-control-item__value{flex:0 1 auto;max-width:60%;white-space:normal;text-align:right;overflow-wrap:anywhere}
@media(max-width:599px){.g-attention-item{grid-template-columns:minmax(0,1fr) auto}.g-attention-item>.g-badge{grid-column:1/-1;justify-self:start}}

/* Gráfico de líneas compartido (public/ui/charts.js): tres series distinguibles por color, trazo y leyenda */
.g-chart{display:block;width:100%;height:auto;max-height:240px;overflow:visible}
.g-chart__axis{stroke:var(--border);stroke-width:1}
.g-chart__label{fill:var(--text-subtle);font:var(--text-subtitle)}
.g-chart__line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.g-chart__line--1{stroke:var(--primary)}.g-chart__dot--1{fill:var(--primary)}
.g-chart__line--2{stroke:var(--ok)}.g-chart__dot--2{fill:var(--ok)}
.g-chart__line--3{stroke:var(--warn);stroke-dasharray:6 4}.g-chart__dot--3{fill:var(--warn)}
.g-chart-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:0;padding:0;list-style:none;font:var(--text-caption);color:var(--text-muted)}
.g-chart-legend li{display:inline-flex;align-items:center;gap:var(--space-2)}
.g-chart-legend i{display:inline-block;width:16px;border-top:3px solid var(--primary)}
.g-chart-legend .g-chart__key--2{border-top-color:var(--ok)}
.g-chart-legend .g-chart__key--3{border-top:3px dashed var(--warn)}

/* Panel lateral de consulta (dialog-ui.js + .g-dialog): 420/480 px a la derecha; sheet inferior bajo 600 px */
.g-side-panel{position:fixed;inset:0 0 0 auto;margin:0;width:min(var(--side-panel),100vw);max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border-width:0 0 0 var(--stroke);border-radius:var(--radius-lg) 0 0 var(--radius-lg);overflow:hidden}
.g-side-panel[open]{display:flex;flex-direction:column}
.g-side-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex:none;min-height:var(--touch-comfortable);padding:var(--space-3) var(--space-4) var(--space-3) var(--space-5);border-bottom:var(--stroke) solid var(--border);background:var(--surface)}
.g-side-panel__head h2{margin:0;min-width:0;font:var(--text-title);overflow-wrap:anywhere}
.g-side-panel__head h2:focus-visible{box-shadow:none;outline:2px solid var(--primary);outline-offset:2px}
.g-side-panel__body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;gap:var(--space-4);align-content:start;padding:var(--space-5) var(--space-5) max(var(--space-5),env(safe-area-inset-bottom))}
@media(prefers-reduced-motion:no-preference){.g-side-panel[open]{animation:g-side-panel-in var(--motion-slow) var(--ease-out)}}
@keyframes g-side-panel-in{from{opacity:0;transform:translateX(var(--space-6))}}
@keyframes g-sheet-in{from{opacity:0;transform:translateY(var(--space-6))}}
@media(max-width:599px){
  html body dialog.g-dialog.g-side-panel[open]{padding:0;border-width:var(--stroke) 0 0}
  .g-side-panel__head{padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4)}
  .g-side-panel__body{padding:var(--space-4) var(--space-4) max(var(--space-4),env(safe-area-inset-bottom))}
}
@media(max-width:599px) and (prefers-reduced-motion:no-preference){.g-side-panel[open]{animation-name:g-sheet-in}}

/* Notificación compartida */
.g-toast{position:fixed;left:50%;bottom:max(var(--space-6),env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;max-width:min(480px,calc(100vw - 2 * var(--page-margin)));box-shadow:var(--shadow-md);grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.g-toast .g-btn{margin:0}

/* Compatibilidad: markup que todavía generan brains.js, webhooks.js, products.js, brain-review.js y
   attention-memory-review.js (clases .notice, button.primary, .muted, .actions, .check, .section-heading, label>input).
   Acotada a .g-page y con :where() para que cualquier clase g-* la sobrescriba sin pelear por especificidad. */
.g-page :where(.notice){display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:var(--stroke) solid var(--border);background:var(--surface-raised);color:var(--text);font:var(--text-body-small);overflow-wrap:anywhere;margin:0}
.g-page :where(.notice)::before{content:"";width:3px;align-self:stretch;border-radius:var(--radius-xs);background:var(--primary)}
.g-page :where(.notice.error){background:var(--danger-soft);border-color:transparent}.g-page :where(.notice.error)::before{background:var(--danger)}
.g-page :where(.notice.success){background:var(--ok-soft);border-color:transparent}.g-page :where(.notice.success)::before{background:var(--ok)}
.g-page :where(.muted){color:var(--text-muted)}
.g-page :where(p.muted){font:var(--text-body-small);color:var(--text-muted)}
.g-page :where(.error){color:var(--danger)}
.g-page :where(.actions){display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.g-page :where(.section-heading){display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.g-page :where(.section-heading h2,.section-heading h3){font:var(--text-title);margin:0}
.g-page :where(button:not([class]),button.primary,.actions button,button.muted){display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-3);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--text);font:var(--text-body-small);font-weight:500;cursor:pointer;white-space:nowrap}
.g-page :where(button:not([class]),.actions button):hover{background-image:linear-gradient(var(--hover-lift),var(--hover-lift))}
.g-page :where(button.primary){background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.g-page :where(button.primary):hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.g-page :where(button):disabled{opacity:var(--disabled-opacity);cursor:default}
.g-page :where(label:not(.g-field):not(.g-check):not(.check)){display:grid;gap:var(--space-1);font:var(--text-body-small);font-weight:500;color:var(--text);min-width:0}
.g-page :where(label>small,label small){font:var(--text-caption);font-weight:400;color:var(--text-subtle)}
.g-page :where(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([class]),select:not([class]),textarea:not([class])){width:100%;min-height:var(--control-md);padding:0 var(--space-3);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--field);color:var(--text);font:var(--text-body)}
.g-page :where(textarea:not([class])){min-height:calc(var(--control-md) * 2.5);padding:var(--space-2) var(--space-3);resize:vertical;line-height:1.5}
.g-page :where(input[type=color]:not([class])){width:32px;height:32px;padding:2px;border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--field);cursor:pointer}
.g-page :where(input[type=file]:not([class])){font:var(--text-body-small)}
.g-page :where(input[readonly]:not([class])){color:var(--text-muted);background:var(--surface-raised)}
.g-page :where(input:not([type=checkbox]):not([type=radio]):not([class]),select:not([class]),textarea:not([class])):focus-visible{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 25%,transparent)}
.g-page :where(.check){display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);font:var(--text-body);font-weight:400}
.g-page :where(.check input[type=checkbox]){width:16px;height:16px;margin:0;accent-color:var(--primary);flex:0 0 16px}
.g-page :where(fieldset){min-width:0;margin:0;padding:0;border:0}
.g-page :where(details>summary){cursor:pointer}
.g-page :where(code){font-family:var(--font-mono);font-size:.92em;padding:1px var(--space-1);border-radius:var(--radius-xs);background:var(--surface-raised)}
.g-page :where(h3,h4){margin:0;font:var(--text-subtitle)}
.g-page :where(h4){font:var(--text-section)}
@media(max-width:1023px){.g-page :where(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([class]),select:not([class]),textarea:not([class])){font-size:16px}}

/* Los hijos del grid de página pueden encogerse: las tablas anchas desplazan dentro de su contenedor, no del documento. */
.g-page>*{min-width:0}
/* El chip de producto usa el color de la empresa como texto: en las páginas del shell se mezcla con el texto del tema para conservar el contraste. */
.g-page .product-chip{color:color-mix(in srgb,var(--product-color) 45%,var(--text))}