/* 
   arText Analytics - Premium Design System
   Color Palette: Emerald & Slate modern tech aesthetic
*/

:root {
  /* Color System */
  --bg-app: #f8fafc;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --border-color: #e2e8f0;
  
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-inverse: #ffffff;
  
  --primary: #0ea5e9;
  --primary-hover: #0284c7;
  --primary-light: rgba(14, 165, 233, 0.1);
  
  --accent-emerald: #10b981;
  --accent-emerald-dark: #0f766e;
  
  /* Category colors */
  --color-discourse: #8b5cf6;
  --color-discourse-light: rgba(139, 92, 246, 0.12);
  --color-lexical: #06b6d4;
  --color-lexical-light: rgba(6, 182, 212, 0.12);
  --color-morphosyntax: #f59e0b;
  --color-morphosyntax-light: rgba(245, 158, 11, 0.12);
  --color-acronyms: #10b981;
  --color-acronyms-light: rgba(16, 185, 129, 0.12);
  /* Subcódigo semántico de una sola regla morfosintáctica. La tarjeta sigue
     usando naranja; estos tonos distinguen singular y plural en sus marcas. */
  --hit-first-person-singular: #0f9f86;
  --hit-first-person-plural: #2878c8;
  
  /* Statuses */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* --- Acciones secundarias (`.ghost-button`) -------------------------------
     Un único juego de tokens para TODOS los botones secundarios del sitio.
     Antes `.ghost-button` estaba pintado para fondo oscuro (texto #e2e8f0,
     borde blanco al 20 %) y se usaba siempre sobre tarjetas blancas: 1,23:1 de
     contraste, o sea ilegible y con aspecto de deshabilitado. Los valores de
     abajo están medidos sobre blanco:

       texto secundario   #334155  10,35:1   (AA holgado)
       borde secundario   #7d8da4   3,38:1   (AA de componentes, 1.4.11)
       texto destacado    #005596   7,66:1
       borde destacado    #3d8fcd   3,49:1
       texto destructivo  #b91c1c   6,47:1
       deshabilitado      #94a3b8   2,34:1 sobre #f1f5f9 — BAJO A PROPÓSITO:
                                    lo inerte debe verse inerte, y WCAG exime
                                    a los controles deshabilitados. Es lo que
                                    separa «no se puede pulsar» de «secundario».
     ------------------------------------------------------------------------ */
  --btn-secondary-text: #334155;
  --btn-secondary-border: #7d8da4;
  --btn-secondary-hover-bg: #eef2f7;
  --btn-secondary-active-bg: #dfe6ef;
  --btn-key-text: #005596;
  --btn-key-border: #3d8fcd;
  --btn-key-bg: #eaf3fb;
  --btn-key-hover-bg: #dbeaf8;
  --btn-danger-text: #b91c1c;
  --btn-danger-hover-bg: #fdeeee;
  --btn-off-text: #94a3b8;
  --btn-off-bg: #f1f5f9;
  --btn-off-border: #cbd5e1;
  --focus-ring: #006fc0;

  /* Typography */
  --font-heading: 'Outfit', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  
  /* Shadow & Transitions */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 15px rgba(14, 165, 233, 0.25);
  --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Public API reference */
.openapi-reference-page .primary-button,
.openapi-reference-page .secondary-button {
  display: inline-flex;
  min-height: 44px;
  padding: 10px 16px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.openapi-reference-page .primary-button { color: white; background: #1687e8; box-shadow: 0 8px 20px rgba(22, 135, 232, .24); }
.openapi-reference-page .primary-button:hover { color: white; background: #0875d0; transform: translateY(-1px); }
.openapi-reference-page .secondary-button { color: #24466d; border-color: #cbd9e9; background: white; }
.openapi-reference-page .secondary-button:hover { color: #153a66; border-color: #9db8d6; background: #f4f8fc; transform: translateY(-1px); }
.openapi-reference-page .primary-button svg,
.openapi-reference-page .secondary-button svg { width: 18px; height: 18px; flex: 0 0 auto; }
.api-docs-grid, .api-rules-section, .api-reference-cta { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.api-docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 56px 0 24px; }
.api-docs-card { min-width: 0; padding: 26px; border: 1px solid #e3e8f0; border-radius: 18px; background: white; box-shadow: 0 8px 28px rgba(19, 43, 76, .055); }
.api-docs-card--wide { grid-column: 1 / -1; }
.api-docs-card header { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 22px; }
.api-docs-card h2, .api-rules-section h2, .api-reference-cta h2 { margin: 0 0 7px; font: 700 1.45rem/1.2 Outfit, sans-serif; }
.api-docs-card p, .section-heading p, .api-reference-cta p { margin: 0; color: #66738a; line-height: 1.55; }
.api-card-icon { display: grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #1674d1; background: #eaf4ff; }
.api-card-icon--green { color: #16815c; background: #e7f7f0; }
.api-card-icon--orange { color: #a65d00; background: #fff1dc; }
.api-card-icon svg { width: 20px; }
.api-code-tabs { overflow: hidden; border-radius: 13px; background: #111a2d; color: #e5edf9; }
.api-code-tablist { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid #29344a; }
.api-code-tablist button { padding: 9px 14px; border: 0; border-radius: 8px 8px 0 0; color: #94a6c2; background: transparent; cursor: pointer; }
.api-code-tablist button.is-active { color: white; background: #25334c; }
.api-code-panel { position: relative; display: none; overflow: auto; }
.api-code-panel.is-active { display: block; }
.api-code-panel pre { margin: 0; padding: 25px; max-height: 620px; overflow: auto; font: .84rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }
.api-copy { position: absolute; top: 13px; right: 13px; display: flex; gap: 6px; align-items: center; padding: 7px 9px; border: 1px solid #3a4862; border-radius: 7px; color: #b9c7da; background: #1d2940; cursor: pointer; }
.api-copy svg { width: 14px; }
.api-sdk-install { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 16px 0; padding: 9px 9px 9px 15px; border: 1px solid #33415c; border-radius: 9px; background: #16203a; }
.api-sdk-install code { color: #9fe3b9; font: .84rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.api-copy--inline, .api-sdk-snippet .api-copy { position: static; }
.api-sdk-snippet { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.api-sdk-snippet .api-copy { position: absolute; top: 13px; right: 13px; }
.api-sdk-snippet pre { width: 100%; }
.api-code-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 13px !important; font-size: .78rem; }
.api-code-note svg { width: 15px; flex: 0 0 auto; margin-top: 3px; color: #2778c7; }
.api-inline-code { overflow: auto; padding: 15px; border-radius: 10px; color: #24548c; background: #f0f5fb; font-size: .85rem; }
.api-statuses { display: flex; gap: 8px; flex-wrap: wrap; }
.api-statuses span { padding: 7px 9px; border-radius: 7px; color: #5b687a; background: #f3f5f8; font-size: .75rem; }
.api-statuses b { color: #243752; }
.api-lifecycle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.api-lifecycle-state { padding: 16px; border: 1px solid #e1e8f1; border-radius: 12px; background: #f8fafc; }
.api-lifecycle-state code { display: inline-flex; margin-bottom: 9px; padding: 3px 8px; border-radius: 999px; color: #385777; background: #e8eef6; font-size: .75rem; font-weight: 700; }
.api-lifecycle-state p { font-size: .8rem; }
.api-lifecycle-state--running code { color: #795100; background: #fff0c7; }
.api-lifecycle-state--completed code { color: #076443; background: #dff7eb; }
.api-lifecycle-state--failed code { color: #9a3030; background: #fde8e8; }
.api-callout { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0 0 !important; padding: 12px 14px; border-radius: 10px; color: #3d5877 !important; background: #eef5fc; font-size: .8rem; }
.api-callout svg { width: 16px; flex: 0 0 auto; margin-top: 2px; }
.api-callout--warning { color: #80510b !important; background: #fff6df; }
.api-result-contract { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.api-result-contract > div { padding: 18px; border: 1px solid #e1e8f1; border-radius: 12px; background: #f8fafc; }
.api-result-contract code { display: inline-block; margin-bottom: 9px; color: #176dbd; font-size: .85rem; font-weight: 700; }
.api-result-contract p { font-size: .84rem; }
.api-code-static { position: relative; overflow: auto; border-radius: 13px; color: #e5edf9; background: #111a2d; }
.api-code-static pre { margin: 0; padding: 25px; max-height: 520px; overflow: auto; font: .82rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }
.api-code-static--compact pre { padding-top: 55px; font-size: .75rem; }
.api-developer-docs pre code.hljs { display: block; overflow: visible; padding: 0; color: #e5edf9; background: transparent; }
.api-developer-docs .hljs-comment, .api-developer-docs .hljs-quote { color: #8292aa; font-style: italic; }
.api-developer-docs .hljs-keyword, .api-developer-docs .hljs-selector-tag { color: #ff7ab2; }
.api-developer-docs .hljs-string, .api-developer-docs .hljs-attr { color: #a8db87; }
.api-developer-docs .hljs-number, .api-developer-docs .hljs-literal { color: #79c7ff; }
.api-developer-docs .hljs-title, .api-developer-docs .hljs-function .hljs-title { color: #d9b8ff; }
.api-developer-docs .hljs-variable, .api-developer-docs .hljs-template-variable { color: #ffd580; }
.api-rules-section { padding: 48px 0 60px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading .api-docs-eyebrow, .api-reference-cta .api-docs-eyebrow { margin-bottom: 12px; color: #1674d1; }
.section-heading p { max-width: 720px; }
.api-rule-count { display: grid; width: 55px; height: 55px; place-items: center; flex: 0 0 auto; border-radius: 15px; color: #1674d1; background: #e8f3ff; font: 700 1.25rem Outfit, sans-serif; }
.api-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.api-rule-card { position: relative; display: flex; min-width: 0; min-height: 145px; padding: 22px; flex-direction: column; gap: 14px; border: 1px solid #e6ebf2; border-radius: 18px; background: linear-gradient(180deg, #ffffff, #fbfcfe); box-shadow: 0 1px 2px rgba(16, 42, 76, .04); transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s ease, border-color .22s ease; }
.api-rule-card:hover { transform: translateY(-3px); border-color: #cfe0f5; box-shadow: 0 16px 36px rgba(19, 43, 76, .1); }
.api-rule-card > div:first-child { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 9px; }
.api-rule-card h3 { margin: 1px 0; font: 650 1.02rem/1.35 Outfit, sans-serif; color: #16233b; }
.api-rule-card > div:first-child > p { margin: 0; color: #5c6b82; font-size: .88rem; line-height: 1.55; }
.api-rule-card > div:first-child > code { align-self: flex-start; padding: 3px 9px; border-radius: 7px; color: #5a6b85; background: #eef2f8; font: 600 .7rem ui-monospace, monospace; overflow-wrap: anywhere; }
.api-rule-category { display: inline-flex; align-items: center; gap: 6px; color: #2778c7; font-size: .7rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.api-rule-category::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.api-rule-catalogs { display: flex; gap: 6px; flex-wrap: wrap; }
.api-rule-catalogs span { padding: 5px 9px; border-radius: 999px; color: #4c6484; background: #eef3fa; font-size: .68rem; font-weight: 600; }
/* Collapsible "what it returns" disclosure inside each metric card */
.api-rule-card details { margin-top: auto; border-top: 1px solid #eef1f6; }
.api-rule-card summary { display: flex; align-items: center; gap: 8px; padding: 12px 2px 2px; color: #2778c7; font: 600 .82rem/1.2 Inter, sans-serif; cursor: pointer; list-style: none; user-select: none; }
.api-rule-card summary::-webkit-details-marker { display: none; }
.api-rule-card summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .22s ease; }
.api-rule-card details[open] summary::after { transform: rotate(-135deg); }
.api-rule-card summary:hover { color: #155fa8; }
.api-rule-card details[open] > *:not(summary) { animation: apiReveal .24s ease both; }
.api-rule-card details h4 { margin: 15px 0 5px; font: 700 .68rem/1.2 Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #8593a8; }
.api-rule-card details p { margin: 0; color: #566378; font-size: .84rem; line-height: 1.55; }
.api-rule-card details pre { margin: 15px 0 0; padding: 14px; max-height: 260px; overflow: auto; border-radius: 11px; color: #dce8fa; background: #121c2f; font: .74rem/1.55 ui-monospace, monospace; }
.api-rule-card details pre code { color: inherit; font-size: inherit; padding: 0; background: none; }
.api-rule-card details > a { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: #2778c7; font-weight: 600; font-size: .82rem; text-decoration: none; }
.api-rule-card details > a:hover { text-decoration: underline; }
@keyframes apiReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.api-empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: #738097; background: white; border-radius: 14px; }
.api-reference-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 65px; padding: 34px; border: 1px solid #dce4ef; border-radius: 19px; background: white; }
.api-reference-cta p { max-width: 700px; }
@media (max-width: 900px) {
  .api-rule-grid { grid-template-columns: 1fr 1fr; }
  .api-lifecycle-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .api-docs-grid, .api-rule-grid, .api-lifecycle-grid, .api-result-contract { grid-template-columns: 1fr; }
  .api-docs-grid, .api-rules-section, .api-reference-cta { width: calc(100% - 28px); }
  .api-docs-grid { padding-top: 28px; }
  .api-docs-card { padding: 19px; }
  .api-code-panel pre { padding: 58px 18px 20px; font-size: .76rem; }
  .api-reference-cta, .section-heading { align-items: flex-start; flex-direction: column; }
}

/* Self-hosted OpenAPI reference (no CDN or build step required). */
.shell:has(.openapi-reference-page) { max-width: none; padding: 0; }
.openapi-reference-page { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100vh - 64px); background: #f7f9fc; }
.openapi-sidebar { position: sticky; top: 64px; align-self: start; height: calc(100vh - 64px); padding: 27px 20px; overflow: auto; border-right: 1px solid #dfe6ef; background: white; }
.openapi-sidebar > strong, .openapi-sidebar > small { display: block; margin: 18px 8px 0; }
.openapi-sidebar > small { margin-top: 4px; color: #758297; }
.openapi-back { display: flex; align-items: center; gap: 7px; color: #2475c5; font-weight: 650; text-decoration: none; }
.openapi-back svg { width: 16px; }
.openapi-sidebar nav { display: grid; gap: 4px; margin-top: 24px; }
.openapi-sidebar nav a { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; padding: 9px 8px; border-radius: 8px; color: #536077; font-size: .75rem; line-height: 1.25; text-decoration: none; }
.openapi-sidebar nav a:hover { color: #172033; background: #f0f5fb; }
.method { display: inline-grid; min-width: 43px; padding: 4px 6px; place-items: center; border-radius: 5px; color: white; font: 750 .62rem/1 ui-monospace, monospace; text-transform: uppercase; }
.method-get { background: #16835f; }.method-post { background: #2476d2; }.method-schema { background: #68758b; }
.openapi-content { width: min(980px, calc(100% - 48px)); margin: 0 auto; padding: 52px 0 80px; }
.openapi-heading { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; margin-bottom: 38px; }
.openapi-heading h1 { margin: 10px 0; font: 700 2.45rem/1.1 Outfit, sans-serif; }.openapi-heading p { color: #66758c; }
.openapi-guide { margin-bottom: 38px; scroll-margin-top: 85px; }
.openapi-section-heading { margin-bottom: 18px; }
.openapi-section-heading h2 { margin: 10px 0 6px; font: 700 1.85rem/1.2 Outfit, sans-serif; }
.openapi-section-heading p { margin: 0; color: #66758c; line-height: 1.6; }
.openapi-guide .api-docs-grid { width: 100%; padding: 0; }
.openapi-operation, .openapi-schemas { margin-bottom: 24px; padding: 30px; border: 1px solid #dde5ef; border-radius: 16px; background: white; box-shadow: 0 7px 25px rgba(27, 47, 75, .04); scroll-margin-top: 85px; }
.openapi-operation > header { display: flex; align-items: center; gap: 11px; }.openapi-operation > header code { color: #34445c; font-size: .92rem; }
.openapi-operation h2 { margin: 20px 0 8px; font: 700 1.55rem/1.2 Outfit, sans-serif; }.openapi-operation > p { color: #66758c; line-height: 1.6; }
.openapi-operation h3 { margin: 27px 0 10px; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }
.openapi-auth { display: flex; gap: 9px; align-items: center; margin-top: 18px; padding: 11px 13px; border-radius: 8px; color: #3b5575; background: #eff5fb; }.openapi-auth svg { width: 16px; }
.openapi-operation pre, .openapi-schemas pre { max-height: 420px; margin: 9px 0 0; padding: 16px; overflow: auto; border-radius: 9px; color: #dce8fa; background: #121c2f; font: .76rem/1.55 ui-monospace, monospace; }
.openapi-table, .openapi-responses { display: grid; border: 1px solid #e1e7ef; border-radius: 10px; overflow: hidden; }
.openapi-table > div, .openapi-responses > div { display: grid; grid-template-columns: 125px 1fr; gap: 12px; padding: 13px; }.openapi-table > div + div, .openapi-responses > div + div { border-top: 1px solid #e7ebf1; }
.openapi-table span, .openapi-responses span { color: #68768b; font-size: .83rem; }.openapi-table p { grid-column: 2; margin: -5px 0 0; color: #7b8799; font-size: .8rem; }
.openapi-responses pre { grid-column: 1 / -1; }.openapi-responses strong { color: #16765a; }
.openapi-media-type { grid-column: 1 / -1; width: fit-content; margin-top: 9px; padding: 3px 7px; border-radius: 5px; color: #536b87; background: #edf3f9; font-size: .7rem; }
.openapi-operation h4 { grid-column: 1 / -1; margin: 12px 0 0; color: #536077; font-size: .78rem; }
.openapi-response-headers { display: grid; grid-column: 1 / -1; grid-template-columns: max-content 1fr; gap: 7px 10px; padding: 10px; border-radius: 7px; background: #f6f8fb; }
.openapi-response-headers code { color: #365d87; font-size: .72rem; }
.openapi-schemas > h2 { font: 700 1.55rem Outfit, sans-serif; }
.openapi-schemas > p { color: #66758c; line-height: 1.6; margin: 0 0 6px; }
.openapi-schemas details { margin-top: 10px; border: 1px solid #e7ecf3; border-radius: 12px; background: #fbfcfe; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.openapi-schemas details[open] { border-color: #cfe0f5; box-shadow: 0 8px 24px rgba(19, 43, 76, .06); }
.openapi-schemas summary { display: grid; grid-template-columns: minmax(150px, 200px) 1fr 20px; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; transition: background .16s ease; }
.openapi-schemas summary::-webkit-details-marker { display: none; }
.openapi-schemas summary:hover { background: #f2f7fc; }
.openapi-schemas details[open] > summary { border-bottom: 1px solid #edf1f6; }
.openapi-schemas summary code { padding: 3px 9px; border-radius: 7px; color: #2c5486; background: #e9f1fb; font-weight: 600; font-size: .78rem; overflow-wrap: anywhere; }
.openapi-schemas summary span { color: #788598; font-size: .8rem; }
.openapi-schemas summary svg { width: 16px; color: #94a3b8; transition: transform .22s ease; }
.openapi-schemas details[open] > summary svg { transform: rotate(180deg); }
.openapi-schemas details > pre { margin: 16px; }
.openapi-metric-documentation { padding: 6px 18px 20px; animation: apiReveal .24s ease both; }
.openapi-metric-documentation h3 { margin: 18px 0 7px; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: #8593a8; }
.openapi-metric-documentation p { margin: 0; color: #566378; line-height: 1.6; }
.openapi-metric-documentation pre { margin-top: 10px; }
.api-docs-sidebar nav { gap: 2px; }
.api-docs-sidebar nav .api-nav-group { margin: 18px 8px 6px; color: #9aa6b7; font-size: .66rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.api-docs-sidebar nav a { display: flex; grid-template-columns: none; gap: 9px; min-height: 37px; }
.api-docs-sidebar nav a > svg { width: 15px; flex: 0 0 auto; color: #8290a4; }
.api-docs-sidebar nav a.is-active { color: #155fa8; background: #eaf3fc; font-weight: 700; }
.api-docs-sidebar nav a.is-active > svg { color: #1d75c7; }
.api-doc-page { width: min(920px, calc(100% - 48px)); }
.api-doc-heading { margin-bottom: 28px; }
.api-doc-kicker { display: block; margin-bottom: 11px; color: #2475c5; font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.api-doc-heading h1 { max-width: 780px; margin: 0 0 12px; color: #15233a; font: 700 clamp(2rem, 4vw, 3rem)/1.08 Outfit, sans-serif; letter-spacing: -.025em; }
.api-doc-heading > code { display: inline-block; margin: -2px 0 14px; padding: 4px 9px; border-radius: 6px; color: #42617f; background: #edf3f8; }
.api-doc-heading > p { max-width: 760px; margin: 0; color: #617087; font-size: 1.02rem; line-height: 1.7; }
.api-doc-scope-note { margin-top: 10px; padding-left: 14px; border-left: 3px solid #cfdcec; color: #7c8aa0; font-size: .86rem; line-height: 1.6; }
.report-not-found { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 90px auto 60px; max-width: 560px; padding: 0 22px; text-align: center; }
.report-not-found svg { width: 40px; height: 40px; color: #9db4d0; }
.report-not-found h1 { margin: 0; color: #1d2b42; font: 700 1.5rem/1.3 Outfit, sans-serif; }
.report-not-found p { margin: 0; color: #65738a; line-height: 1.65; }
.report-not-found code { padding: 4px 10px; border-radius: 7px; background: #eef2f8; color: #46586f; font-size: .8rem; }
.report-not-found-action { margin-top: 10px; padding: 10px 18px; border-radius: 9px; background: #2682d6; color: white; font-weight: 600; text-decoration: none; }
.report-not-found-action:hover { background: #1f6fb8; }
.site-footer { margin-top: 44px; border-top: 1px solid #e1e8f1; background: #f8fafc; }
.site-footer-inner { display: grid; grid-template-columns: 1.2fr .8fr 1.4fr; gap: 34px; margin: 0 auto; padding: 34px 22px 26px; max-width: 1240px; }
.site-footer-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.site-footer-logo img { height: 26px; width: auto; }
.site-footer-logo strong { color: #1d2b42; font: 700 1.05rem/1 Outfit, sans-serif; }
.site-footer-brand p, .site-footer-funding p { margin: 0; color: #7c8aa0; font-size: .8rem; line-height: 1.65; }
.site-footer-links { display: flex; flex-direction: column; gap: 7px; }
.site-footer-links strong, .site-footer-funding strong { display: block; margin-bottom: 4px; color: #46586f; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.site-footer-funding strong { margin-bottom: 10px; }
.site-footer-links a { color: #5b6c84; font-size: .82rem; text-decoration: none; }
.site-footer-links a:hover { color: #2682d6; text-decoration: underline; }
/* Sin border-top: al retirarse la franja ancha del pie (2026-07-24), la barra
   inferior es lo único del pie y ya la separa el borde de .site-footer. */
.site-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 auto; padding: 18px 22px 18px; max-width: 1240px; flex-wrap: wrap; }
.site-footer-institution { display: flex; align-items: center; gap: 12px; color: #7c8aa0; font-size: .78rem; }
.site-footer-institution img { height: 30px; width: auto; border-radius: 4px; }
.site-footer-meta { display: flex; gap: 18px; }
.site-footer-meta a { color: #5b6c84; font-size: .78rem; text-decoration: none; }
.site-footer-meta a:hover { color: #2682d6; text-decoration: underline; }
@media (max-width: 860px) {
  .site-footer-inner { grid-template-columns: 1fr; gap: 24px; }
  /* En columna única, los enlaces de producto ganan un objetivo táctil
     cómodo en vez de las 21px de una línea de texto suelta. */
  .site-footer-links a { display: flex; align-items: center; min-height: 40px; }
}
/* El pie inferior se apila: en fila junto a la institución, site-footer-meta
   (seis enlaces) no cabía en 390px y quedaba recortado por `overflow-x: clip`
   en html/body (línea ~413), sin forma de desplazarse para alcanzarlo. En
   columna, cada bloque usa el ancho completo y site-footer-meta envuelve. */
@media (max-width: 620px) {
  .site-footer-bottom { flex-direction: column; align-items: flex-start; }
  .site-footer-meta { flex-wrap: wrap; row-gap: 4px; column-gap: 16px; }
  .site-footer-meta a,
  .site-footer-institution a { display: inline-flex; align-items: center; min-height: 40px; }
  .site-footer-institution a { padding: 3px; margin: -3px; }
}
.api-seq { margin: 0; }
.api-seq-actors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 4px; }
.api-seq-actors span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border: 1px solid #cfdcec; border-radius: 10px; background: #f3f7fc; color: #1d2b42; font-weight: 700; font-size: .85rem; text-align: center; }
.api-seq-actors svg { width: 16px; height: 16px; color: #2682d6; flex: 0 0 auto; }
.api-seq-lanes { position: relative; padding: 20px 0 6px; background-image: linear-gradient(#c9d6e6 55%, transparent 0), linear-gradient(#c9d6e6 55%, transparent 0), linear-gradient(#c9d6e6 55%, transparent 0); background-size: 1px 11px, 1px 11px, 1px 11px; background-repeat: repeat-y, repeat-y, repeat-y; background-position: 16.66% 0, 50% 0, 83.33% 0; }
.api-seq-msg { position: relative; margin: 0 0 22px; }
.api-seq-msg--app-api { margin-left: 16.66%; width: 33.34%; }
.api-seq-msg--api-engine { margin-left: 50%; width: 33.34%; }
.api-seq-label { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 26px 7px; text-align: center; }
.api-seq-label code { padding: 3px 9px; border-radius: 999px; background: #e8eef6; color: #234e78; font-size: .74rem; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.api-seq-label small { color: #65738a; font-size: .76rem; line-height: 1.45; }
.api-seq-badge { position: absolute; top: calc(100% - 11px); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: #2682d6; color: white; font-size: .72rem; font-weight: 800; z-index: 1; }
.api-seq-msg--right .api-seq-badge { left: -11px; }
.api-seq-msg--left .api-seq-badge { right: -11px; }
.api-seq-line { display: block; height: 2px; background: #9db4d0; position: relative; }
.api-seq-line::after { content: ""; position: absolute; top: -4px; border: 5px solid transparent; }
.api-seq-msg--right .api-seq-line::after { right: -1px; border-left-color: #9db4d0; border-right-width: 0; }
.api-seq-msg--left .api-seq-line::after { left: -1px; border-right-color: #9db4d0; border-left-width: 0; }
@media (max-width: 719px) {
  .api-seq-actors { grid-template-columns: 1fr; gap: 6px; }
  .api-seq-lanes { background: none; padding-top: 12px; }
  .api-seq-msg--app-api, .api-seq-msg--api-engine { margin-left: 0; width: auto; }
  .api-seq-msg { margin-bottom: 10px; padding: 12px 14px 12px 42px; border: 1px solid #e1e8f1; border-radius: 11px; background: #f8fafc; }
  .api-seq-label { align-items: flex-start; text-align: left; padding: 0; }
  .api-seq-badge { top: 12px; left: 12px !important; right: auto !important; }
  .api-seq-line { display: none; }
}
.api-doc-key-concept { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 26px; padding: 18px 20px; border: 1px solid #bfdbf5; border-radius: 12px; color: #234e78; background: #eef7ff; }
.api-doc-key-concept svg { width: 20px; flex: 0 0 auto; margin-top: 2px; }
.api-doc-key-concept p { margin: 0; line-height: 1.6; }
.api-doc-key-concept--important { border-left: 4px solid #2682d6; }
.api-doc-section { margin-bottom: 24px; padding: 26px; border: 1px solid #dde5ef; border-radius: 14px; background: white; box-shadow: 0 5px 20px rgba(27, 47, 75, .035); }
.api-doc-section > h2 { margin: 0 0 9px; color: #1d2b42; font: 700 1.35rem/1.25 Outfit, sans-serif; }
.api-doc-section > p { margin: 0 0 18px; color: #65738a; line-height: 1.65; }
.api-doc-flow { display: grid; gap: 10px; }
.api-doc-flow a { display: grid; grid-template-columns: 38px 1fr 20px; gap: 13px; align-items: center; padding: 16px; border: 1px solid #e1e8f1; border-radius: 11px; color: inherit; text-decoration: none; transition: border-color .16s ease, transform .16s ease; }
.api-doc-flow a:hover { border-color: #9fc5e9; transform: translateX(2px); }
.api-doc-flow a > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: #247bc9; font-weight: 750; }
.api-doc-flow h3, .api-doc-choice-grid h3 { margin: 0 0 3px; font-size: .95rem; }
.api-doc-flow p, .api-doc-choice-grid p { margin: 0; color: #6b788c; font-size: .82rem; line-height: 1.5; }
.api-doc-flow a > svg { width: 17px; color: #8290a4; }
.api-doc-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.api-doc-choice-grid a { padding: 18px; border: 1px solid #e1e8f1; border-radius: 11px; color: inherit; text-decoration: none; }
.api-doc-choice-grid a:hover { border-color: #9fc5e9; background: #f8fbfe; }
.api-doc-choice-grid svg { width: 22px; margin-bottom: 12px; color: #2475c5; }
.api-doc-auth-summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.api-doc-auth-summary h2 { margin: 0 0 5px; font: 700 1.15rem Outfit, sans-serif; }
.api-doc-auth-summary p { margin: 0; color: #68768b; }
.api-doc-auth-summary > code { flex: 0 0 auto; padding: 11px 13px; border-radius: 8px; color: #2f5c88; background: #edf4fb; }
.api-doc-section .api-lifecycle-grid { margin-top: 17px; }
.api-doc-json { max-height: 440px; margin: 12px 0 0; padding: 18px; overflow: auto; border-radius: 10px; color: #dce8fa; background: #121c2f; font: .78rem/1.58 ui-monospace, monospace; }
.api-doc-json--large { max-height: 580px; }
.api-doc-next { display: grid; grid-template-columns: 1fr 20px; gap: 3px 16px; width: min(360px, 100%); margin: 34px 0 0 auto; padding: 17px 19px; border: 1px solid #cbd9e9; border-radius: 11px; color: #265d92; text-decoration: none; background: white; }
.api-doc-next span { color: #8290a4; font-size: .7rem; text-transform: uppercase; }.api-doc-next strong { grid-column: 1; }.api-doc-next svg { grid-column: 2; grid-row: 1 / 3; width: 18px; align-self: center; }
.api-result-contract h3 { margin: 5px 0 7px; font-size: 1rem; }
.api-result-contract a { display: inline-block; margin-top: 11px; color: #1f70bb; font-size: .8rem; font-weight: 650; text-decoration: none; }
.api-field-map { display: grid; margin-top: 17px; border: 1px solid #e1e7ef; border-radius: 10px; overflow: hidden; }
.api-field-map > div { display: grid; grid-template-columns: 180px 1fr; gap: 15px; padding: 13px 15px; }.api-field-map > div + div { border-top: 1px solid #e8edf3; }
.api-field-map span { color: #68768b; font-size: .84rem; }
.api-doc-standards { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px !important; }
.api-doc-standards a { padding: 6px 9px; border-radius: 7px; color: #2b669f; background: #edf4fb; font-size: .76rem; font-weight: 600; text-decoration: none; }
.api-doc-standards a:hover { color: #164f87; background: #e2eef9; }
.api-doc-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.api-doc-two-columns h2 { margin: 0 0 7px; font: 700 1.1rem Outfit, sans-serif; }.api-doc-two-columns p { margin: 0 0 13px; color: #68768b; font-size: .85rem; }.api-doc-two-columns code { overflow-wrap: anywhere; color: #346088; font-size: .75rem; }
.api-metric-usage-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.api-metric-usage-steps li { padding: 15px; border-radius: 10px; background: #f6f9fc; }.api-metric-usage-steps span { display: grid; width: 28px; height: 28px; margin-bottom: 9px; place-items: center; border-radius: 50%; color: white; background: #287bc5; font-size: .75rem; font-weight: 700; }.api-metric-usage-steps p { margin: 0; color: #59687d; font-size: .82rem; line-height: 1.5; }
.api-metric-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.api-metric-toolbar label { display: flex; min-width: 280px; flex: 1; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid #dbe3ed; border-radius: 9px; }.api-metric-toolbar label svg { width: 16px; color: #8290a4; }.api-metric-toolbar input { width: 100%; border: 0; outline: 0; color: #24344d; background: transparent; }
.api-metric-toolbar > div { display: flex; gap: 5px; }.api-metric-toolbar button { padding: 8px 10px; border: 1px solid #dbe3ed; border-radius: 8px; color: #59687d; background: white; cursor: pointer; }.api-metric-toolbar button.is-active { color: #155fa8; border-color: #aacceb; background: #edf6ff; }.api-metric-toolbar button span { color: #8794a6; font-size: .7rem; }
.api-metric-category-filter { display: flex; align-items: center; gap: 7px; margin-bottom: 25px; padding: 12px; flex-wrap: wrap; border: 1px solid #e0e7ef; border-radius: 11px; background: #f8fafc; }
.api-metric-category-filter > span { margin: 0 5px 0 2px; color: #748196; font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.api-metric-category-filter button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid transparent; border-radius: 999px; color: #526077; background: white; box-shadow: 0 1px 2px rgba(24, 45, 75, .06); cursor: pointer; }
.api-metric-category-filter button:hover { border-color: #cbd8e7; }.api-metric-category-filter button.is-active { color: #155fa8; border-color: #a9cbea; background: #eaf4fe; }
.api-metric-category-filter button b { color: #8794a6; font-size: .68rem; }
.api-category-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #7c8ca4; }
.api-category-dot--document { background: #3976c5; }.api-category-dot--readability { background: #db5a7b; }.api-category-dot--lexical { background: var(--color-lexical); }.api-category-dot--morphosyntax { background: var(--color-morphosyntax); }.api-category-dot--discourse { background: var(--color-discourse); }.api-category-dot--acronyms { background: var(--color-acronyms); }
.api-metric-groups { display: grid; gap: 28px; }
.api-metric-group > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 10px; padding: 0 3px; }
.api-metric-group > header > div { display: flex; align-items: center; gap: 9px; }.api-metric-group > header h2 { margin: 0; color: #24344d; font: 700 1.05rem Outfit, sans-serif; }
.api-metric-group > header > span { color: #8491a4; font-size: .72rem; }.api-metric-group > header > span b { color: #526077; }
.api-problem-page { width: min(760px, calc(100% - 36px)); margin: 65px auto; padding: 35px; border: 1px solid #dfe6ef; border-radius: 16px; background: white; }
.api-problem-page > span { display: block; margin-top: 28px; color: #7a8799; font-weight: 700; }.api-problem-page h1 { margin: 8px 0 20px; font: 700 2rem Outfit, sans-serif; }.api-problem-page p { color: #59687d; line-height: 1.65; }.api-problem-page code { color: #155fa8; }
.api-metric-list { display: grid; border: 1px solid #e0e7ef; border-radius: 11px; overflow: hidden; }
.api-metric-row { display: grid; grid-template-columns: 120px 1fr 70px 18px; gap: 14px; align-items: center; padding: 17px; color: inherit; text-decoration: none; background: white; }.api-metric-row + .api-metric-row { border-top: 1px solid #e8edf3; }.api-metric-row:hover { background: #f8fbfe; }.api-metric-row > svg { width: 17px; color: #93a0b1; }
.api-metric-row h2 { margin: 0 0 4px; font: 700 1rem Outfit, sans-serif; }.api-metric-row p { margin: 7px 0 0; color: #68768b; font-size: .8rem; line-height: 1.45; }.api-metric-row div > code { color: #63738a; font-size: .7rem; }
.api-metric-kind { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 999px; color: #285f91; background: #e9f3fc; font-size: .65rem; font-weight: 750; text-transform: uppercase; }.api-metric-kind--suggestion { color: #6f4a12; background: #fff1d7; }
.api-metric-status { color: #157352; font-size: .7rem; font-weight: 700; }.api-metric-status.is-inactive { color: #9b3a3a; }
.api-doc-breadcrumb { display: flex; align-items: center; gap: 7px; margin-bottom: 22px; color: #788699; font-size: .78rem; }.api-doc-breadcrumb a { color: #2475c5; text-decoration: none; }.api-doc-breadcrumb svg { width: 14px; }
.api-metric-detail-badges { display: flex; gap: 7px; margin-bottom: 13px; }
.api-metric-use-card > div { display: flex; gap: 10px; align-items: center; margin-top: 15px; padding: 13px; border-radius: 9px; background: #f1f6fb; }.api-metric-use-card > div span:first-child { color: #788699; font-size: .72rem; text-transform: uppercase; }.api-metric-use-card > div span:last-child { color: #52647a; font-size: .78rem; }
.api-metric-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 0; overflow: hidden; background: #e1e7ef; }.api-metric-detail-grid article { padding: 23px; background: white; }.api-metric-detail-grid h2 { margin: 0 0 9px; font: 700 1.05rem Outfit, sans-serif; }.api-metric-detail-grid p { margin: 0; color: #65738a; line-height: 1.62; font-size: .87rem; }
.api-metric-detail-grid dl { display: grid; gap: 8px; }.api-metric-detail-grid dl div { display: grid; grid-template-columns: 145px 1fr; gap: 8px; }.api-metric-detail-grid dt { color: #788699; font-size: .75rem; }.api-metric-detail-grid dd { display: flex; gap: 5px; flex-wrap: wrap; margin: 0; }
.api-metric-json-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.api-metric-json-link h2 { font-size: 1rem; }.api-metric-json-link p { margin: 0; }
.api-endpoint-index { display: grid; margin-bottom: 24px; border: 1px solid #dfe6ef; border-radius: 12px; overflow: hidden; background: white; }.api-endpoint-index a { display: grid; grid-template-columns: 50px 1.1fr 1fr; gap: 12px; align-items: center; padding: 13px 15px; color: inherit; text-decoration: none; }.api-endpoint-index a + a { border-top: 1px solid #e8edf3; }.api-endpoint-index a:hover { background: #f7fafc; }.api-endpoint-index a > span:last-child { color: #6c798d; font-size: .78rem; }.api-endpoint-index code { font-size: .76rem; }
.api-schema-list { padding: 24px; }
@media (max-width: 800px) { .openapi-reference-page { grid-template-columns: 1fr; }.openapi-sidebar { position: static; width: auto; height: auto; border-right: 0; border-bottom: 1px solid #dfe6ef; }.openapi-sidebar nav { display: none; }.openapi-content { width: calc(100% - 28px); padding-top: 28px; }.openapi-heading { flex-direction: column; }.openapi-operation, .openapi-schemas { padding: 20px; }.openapi-table > div, .openapi-responses > div { grid-template-columns: 80px 1fr; }.openapi-schemas summary { grid-template-columns: minmax(120px, .7fr) 1fr 18px; }.api-doc-choice-grid, .api-metric-usage-steps { grid-template-columns: 1fr; }.api-doc-auth-summary, .api-metric-toolbar, .api-metric-json-link { align-items: flex-start; flex-direction: column; }.api-doc-two-columns, .api-metric-detail-grid { grid-template-columns: 1fr; }.api-metric-row { grid-template-columns: 1fr 70px 18px; }.api-metric-row > .api-metric-kind { grid-column: 1 / -1; }.api-metric-toolbar label { width: 100%; min-width: 0; }.api-metric-toolbar > div, .api-metric-category-filter { flex-wrap: wrap; }.api-metric-category-filter > span { width: 100%; }.api-field-map > div { grid-template-columns: 1fr; gap: 5px; }.api-doc-kicker { font-size: .75rem; }.openapi-back { min-height: 40px; } }

/* Reset & Core Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

/* Shared Analytics / Editor workspace controls */
.workspace-mode-switch {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: white;
  box-shadow: var(--shadow-sm);
}
.workspace-mode-switch > span { padding: 0 9px; color: var(--text-muted); font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.workspace-mode-button { display: inline-flex; min-height: 34px; padding: 7px 11px; align-items: center; gap: 7px; border: 0; border-radius: 8px; color: var(--text-muted); background: transparent; font: 600 13px var(--font-heading); cursor: pointer; }
.workspace-mode-button:hover { color: var(--text-main); background: #f1f5f9; }
.workspace-mode-button.is-active { color: var(--primary-hover); background: var(--primary-light); }
.workspace-mode-button svg { width: 15px; height: 15px; }
.workspace-type-dialog { width: min(720px, calc(100% - 28px)); max-height: min(720px, calc(100vh - 40px)); margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: transparent; box-shadow: 0 25px 80px rgba(15, 23, 42, .28); }
.workspace-type-dialog::backdrop { background: rgba(15, 23, 42, .52); backdrop-filter: blur(4px); }
.workspace-type-dialog-card { max-height: inherit; padding: 24px; overflow: auto; background: white; }
.workspace-type-dialog-card > header { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.workspace-type-dialog-card h2 { margin: 4px 0; font: 700 1.5rem var(--font-heading); }.workspace-type-dialog-card p { color: var(--text-muted); }
.workspace-type-list { display: grid; gap: 16px; }.workspace-type-loading { display: flex; align-items: center; gap: 8px; padding: 30px; justify-content: center; color: var(--text-muted); }.workspace-type-loading svg { animation: spin 1s linear infinite; }
.workspace-type-domain { padding: 14px; border: 1px solid var(--border-color); border-radius: 12px; }.workspace-type-domain h3 { margin-bottom: 8px; font-size: 14px; }.workspace-type-domain > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.workspace-type-domain a { display: grid; grid-template-columns: 28px 1fr 18px; gap: 9px; align-items: center; padding: 10px; border-radius: 8px; color: var(--text-main); text-decoration: none; background: #f8fafc; }.workspace-type-domain a:hover { background: var(--primary-light); }.workspace-type-domain a > svg { width: 17px; }.workspace-type-domain a span { display: grid; }.workspace-type-domain a small { color: var(--text-muted); }
.result-metrics.editor-workspace-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 16px 10px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 9px; background: var(--border-color); }.editor-workspace-metrics[hidden] { display: none; }.result-metrics.editor-workspace-metrics .metric-chip { padding: 7px 9px; border: 0; border-radius: 0; background: white; }.result-metrics.editor-workspace-metrics .metric-chip + .metric-chip { border-left: 0; }.editor-workspace-metrics .metric-ico { width: 25px; height: 25px; }.editor-workspace-metrics b { color: var(--text-main); font-size: 14px; }.editor-workspace-metrics small { color: var(--text-muted); font-size: 10px; text-transform: lowercase; }
@media (max-width: 620px) { .workspace-mode-switch { width: 100%; }.workspace-mode-switch > span { display: none; }.workspace-mode-button { flex: 1; justify-content: center; }.workspace-type-domain > div { grid-template-columns: 1fr; } }

/* The page scrolls as a document: the footer flows after the content and is
   only reached at the end. `overflow-x: clip` contains horizontal overflow
   without turning html/body into a scroll container, which would break the
   sticky topbar. */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-app);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}

/* Header Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 32px;
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  color: var(--text-main);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 28px;
}

.nav-divider {
  width: 1px;
  height: 24px;
  margin: 0 3px;
  background: var(--border-color);
}

.admin-login-link {
  color: #475569;
  background: #f8fafc;
  border: 1px solid var(--border-color);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: var(--transition-smooth);
}

.nav-link i {
  width: 16px;
  height: 16px;
}

.nav-link:hover {
  color: var(--text-main);
  background-color: rgba(15, 23, 42, 0.04);
}

.nav-link.is-active {
  color: var(--primary);
  background-color: var(--primary-light);
  border: 1px solid rgba(14, 165, 233, 0.15);
}

/* Analizador ⟷ Editor: control segmentado en la barra (espeja el switch interno). */
.nav-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.nav-switch-segment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  list-style: none;
  transition: var(--transition-smooth);
}

.nav-switch-segment > i[data-lucide] {
  width: 16px;
  height: 16px;
}

.nav-switch-segment:hover {
  color: var(--text-main);
  background: rgba(15, 23, 42, 0.04);
}

.nav-switch-segment.is-active {
  color: var(--primary);
  background: var(--primary-light);
}

.nav-switch-dropdown {
  display: inline-flex;
  align-items: stretch;
}

.nav-switch-editor-dropdown {
  display: inline-flex;
}

.nav-switch-editor-link {
  border-radius: 7px 0 0 7px;
}

.nav-switch-editor-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border-color);
  border-radius: 0 7px 7px 0;
  transition: var(--transition-smooth);
}

.nav-switch-editor-toggle:hover {
  color: var(--text-main);
  background: rgba(15, 23, 42, 0.04);
}

.nav-switch-editor-toggle.is-active {
  color: var(--primary);
  background: var(--primary-light);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown-chevron {
  width: 13px !important;
  height: 13px !important;
  margin-left: -3px;
  transition: transform 160ms ease;
}

.nav-switch-editor-toggle .nav-dropdown-chevron {
  margin-left: 0;
}

.nav-dropdown[open] .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 130;
  display: grid;
  width: max-content;
  min-width: 220px;
  padding: 7px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .16);
  backdrop-filter: blur(14px);
}

.nav-dropdown-menu::before {
  position: absolute;
  top: -5px;
  left: 24px;
  width: 9px;
  height: 9px;
  content: "";
  border-top: 1px solid rgba(203, 213, 225, .9);
  border-left: 1px solid rgba(203, 213, 225, .9);
  background: white;
  transform: rotate(45deg);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 8px;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
  color: var(--text-main);
  background: #f1f5f9;
  outline: none;
}

.nav-dropdown-item.is-active {
  color: var(--primary);
  background: var(--primary-light);
}

.nav-dropdown-item svg {
  width: 16px;
  height: 16px;
}

.prompt-language-value {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-main);
  background: #f8fafc;
  font-size: 14px;
  font-weight: 600;
}

.prompt-language-value svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.4);
}

.logo-icon i {
  width: 18px;
  height: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
  height: 44px;
}

.brand-logo-frame {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 88px;
  height: 42px;
  overflow: hidden;
  flex: 0 0 88px;
}

.brand-logo {
  width: 88px;
  height: 42px;
  max-width: 88px;
  max-height: 42px;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease;
}

.brand-logo:hover {
  transform: scale(1.02);
}

.brand-text {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-muted);
  border-left: 1px solid var(--border-color);
  padding-left: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  height: 20px;
  text-transform: uppercase;
}

/* En la portada no se muestra la etiqueta de sección («Web»): el resto de
   superficies (analizador, editor, API…) sí la conservan para ubicarse. */
.landing-topbar .brand-text {
  display: none;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.user-badge i {
  width: 14px;
  height: 14px;
  color: var(--primary);
}

.topbar .logout-btn {
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
}

.topbar .logout-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

/* Compact desktop header before reaching the mobile icon-only layout. */
@media (max-width: 1550px) {
  .topbar { padding-inline: 16px; gap: 10px; }
  .topbar-left { min-width: 0; gap: 8px; }
  .brand-text { display: none; }
  .topbar-nav { gap: 3px; margin-left: 10px; }
  .topbar-nav .nav-link { padding: 6px 9px; }
  .topbar-right { flex: 0 0 auto; gap: 7px; }
  .topbar-right .user-badge { display: none; }
  .context-selector--interface { flex: 0 0 auto; gap: 5px; padding: 4px 6px; }
  .context-selector--interface > label { display: inline; }
  .context-selector--interface select { min-width: 92px; max-width: 112px; }
}

@media (max-width: 1180px) {
  .topbar-nav .nav-link { padding: 6px 8px; }
  .topbar-nav .nav-link > span { display: none; }
  .topbar-nav .nav-switch-segment { padding: 6px 9px; }
  .topbar-nav .nav-switch-segment > span { display: none; }
  .topbar-nav .nav-dropdown-menu span { display: inline; }
  .topbar-nav .nav-dropdown-chevron { display: none; }
  .topbar-nav .nav-switch-editor-toggle .nav-dropdown-chevron { display: block; }
  .topbar .logout-btn { width: 36px; padding: 6px; }
  .topbar .logout-btn span { display: none; }
  .context-selector--interface > i { display: none; }
  .context-selector--interface > label { display: none; }
}

/* En pantallas estrechas el logotipo se mantiene entero y la navegación se
   desplaza dentro de su carril, en vez de invadir el selector de idioma. */
@media (max-width: 860px) {
  .topbar-left { min-width: 0; }
  .brand { flex: 0 0 auto; }
  .topbar-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .topbar-nav::-webkit-scrollbar { display: none; }
}

/* Shared suggestion workspace: Analytics and Editor use the same component. */
.unified-suggestion-panel { display:flex; flex-direction:column; min-height:0; height:100%; color:var(--text-main); background:#fff; }
.usp-header { position:sticky; top:0; z-index:4; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 14px; padding:14px 16px; background:rgba(255,255,255,.97); border-bottom:1px solid var(--border-color); backdrop-filter:blur(10px); }
.usp-title { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px; min-width:0; }
.usp-title svg { width:19px; color:var(--primary); }
.usp-title strong { font-size:1rem; }
.usp-title > span { min-width:28px; padding:3px 8px; text-align:center; color:#9a5b00; background:#fff1c7; border-radius:999px; font-weight:800; }
.usp-title small { grid-column:2 / -1; color:var(--text-muted); font-size:.72rem; }
.usp-metrics { display:flex; grid-column:1; gap:14px; color:var(--text-muted); font-size:.72rem; }
.usp-metrics span { display:flex; align-items:baseline; gap:4px; }.usp-metrics b { color:var(--text-main); font-size:.95rem; }
.usp-actions { grid-column:2; grid-row:1 / span 2; display:flex; align-items:center; gap:5px; }
.usp-actions a,.usp-actions button,.usp-occurrences button,.usp-preview button { display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:34px; padding:6px 9px; color:var(--text-main); background:#fff; border:1px solid var(--border-color); border-radius:9px; text-decoration:none; cursor:pointer; }
.usp-actions svg,.usp-occurrences svg { width:17px; height:17px; }.usp-actions span { color:var(--text-muted); font-size:.75rem; white-space:nowrap; }
.usp-layers { grid-column:1 / -1; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.usp-layers button { display:flex; align-items:center; gap:5px; min-height:30px; padding:5px 9px; color:var(--text-muted); white-space:nowrap; background:#f8fafc; border:1px solid var(--border-color); border-radius:999px; cursor:pointer; }
.usp-layers button.is-active { color:#075985; background:#e0f2fe; border-color:#7dd3fc; }.usp-layers b { font-size:.72rem; }
.layer-dot { display:inline-block; flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:#94a3b8; }.layer-dot-discourse{background:#8b5cf6}.layer-dot-lexical{background:#06b6d4}.layer-dot-morphosyntax{background:#f59e0b}.layer-dot-acronyms{background:#10b981}.layer-dot-general{background:#64748b}
.usp-body { display:grid; grid-template-columns:minmax(180px,34%) minmax(0,1fr); min-height:0; flex:1; overflow:hidden; }
.usp-rule-list { overflow:auto; padding:10px; background:#f8fafc; border-right:1px solid var(--border-color); }
.usp-rule { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:8px; width:100%; margin-bottom:7px; padding:10px; text-align:left; background:#fff; border:1px solid var(--border-color); border-radius:10px; cursor:pointer; }
.usp-rule.is-active { border-color:var(--primary); box-shadow:0 0 0 2px rgba(14,165,233,.1); }.usp-rule span{min-width:0}.usp-rule strong,.usp-rule small{display:block; overflow:hidden; text-overflow:ellipsis}.usp-rule strong{font-size:.82rem}.usp-rule small{margin-top:2px;color:var(--text-muted);font-family:monospace;font-size:.66rem;white-space:nowrap}.usp-rule>b{font-size:.75rem}.usp-rule svg{width:15px}
.usp-detail { min-width:0; overflow:auto; padding:14px; }.usp-card-heading>span{color:var(--primary);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.usp-card-heading h2{margin:4px 0 3px;font-size:1.05rem;line-height:1.25}.usp-card-heading code{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#64748b;background:#f1f5f9;border-radius:5px;font-size:.68rem;white-space:nowrap}.usp-summary{margin:12px 0;color:#334155;line-height:1.5}
.usp-recommendation { display:flex; gap:9px; margin:12px 0; padding:11px; color:#1e40af; background:#eff6ff; border:1px solid #bfdbfe; border-radius:10px; }.usp-recommendation svg{flex:0 0 auto;width:18px}.usp-recommendation strong{font-size:.78rem}.usp-recommendation p{margin:3px 0 0;line-height:1.4}
.usp-proposals { margin:14px 0; padding:12px; background:#f0fdf9; border:1px solid #86efc2; border-radius:12px; }.usp-proposals>header{display:flex;gap:9px;margin-bottom:10px}.usp-proposals>header svg{flex:0 0 auto;width:19px;color:#047857}.usp-proposals>header strong{color:#065f46}.usp-proposals>header p{margin:2px 0 0;color:#64748b;font-size:.78rem}.usp-connector-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}.usp-connector-controls select,.usp-connector-controls label{min-width:0;height:36px;background:#fff;border:1px solid #a7f3d0;border-radius:8px}.usp-connector-controls select{padding:0 8px}.usp-connector-controls label{display:flex;align-items:center;padding:0 8px}.usp-connector-controls label svg{width:15px;color:#64748b}.usp-connector-controls input{min-width:0;width:100%;border:0;outline:0}.usp-proposal-list{display:flex;flex-wrap:wrap;gap:7px;max-height:176px;overflow:auto}.usp-proposal{display:flex;align-items:center;max-width:100%;background:#fff;border:1px solid #a7f3d0;border-radius:999px;overflow:hidden}.usp-proposal span{overflow:hidden;padding:6px 4px 6px 10px;text-overflow:ellipsis;white-space:nowrap}.usp-proposal button{display:grid;place-items:center;width:31px;height:31px;color:#047857;background:transparent;border:0;cursor:pointer}.usp-proposal button:hover,.usp-proposal button.is-success{background:#d1fae5}.usp-proposal svg{width:15px}.usp-no-results,.usp-manual{color:var(--text-muted);font-size:.82rem}
.usp-occurrences { margin-top:15px; padding-top:12px; border-top:1px dashed var(--border-color); }.usp-occurrences>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.usp-occurrences>header strong{color:#64748b;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}.usp-occurrences>header div{display:flex;align-items:center;gap:5px}.usp-occurrences>header button{min-width:30px;min-height:30px;padding:4px}.usp-occurrences>header span{font-size:.75rem;color:#64748b}.usp-active-occurrence,.usp-occurrence-list button{width:100%;justify-content:space-between!important;gap:10px;text-align:left}.usp-active-occurrence span,.usp-occurrence-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.usp-active-occurrence small{display:flex;align-items:center;gap:4px;color:#64748b}.usp-occurrence-list{display:grid;gap:6px;max-height:210px;margin-top:7px;overflow:auto}.usp-occurrence-list button.is-active{border-color:var(--primary);background:#f0f9ff}.usp-show-all{margin:8px auto 0;color:var(--primary)!important;border:0!important}.usp-empty{display:grid;place-items:center;gap:8px;padding:30px;color:var(--text-muted);text-align:center}
.usp-preview{width:min(560px,calc(100vw - 28px));padding:0;border:0;border-radius:16px;box-shadow:0 24px 70px rgba(15,23,42,.28)}.usp-preview::backdrop{background:rgba(15,23,42,.48)}.usp-preview>div{padding:18px}.usp-preview header,.usp-preview footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.usp-preview h2{margin:0;font-size:1.1rem}.usp-preview section{margin:12px 0;padding:11px;background:#f8fafc;border-radius:10px}.usp-preview section span{color:#64748b;font-size:.72rem;font-weight:800;text-transform:uppercase}.usp-preview section p{margin:5px 0 0}.usp-preview footer{justify-content:flex-end}.editor-report-status{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f8fafc;border:1px solid var(--border-color);border-radius:10px}.editor-report-status svg{width:19px;color:var(--primary)}.editor-report-status h3,.editor-report-status p{margin:0}.editor-report-status h3{font-size:.86rem}.editor-report-status p{color:var(--text-muted);font-size:.74rem}.editor-suggestions-panel:has(.unified-suggestion-panel) { padding:0; }

@media (max-width:700px){.usp-header{grid-template-columns:1fr auto;padding:10px}.usp-metrics{display:none}.usp-actions{grid-row:1}.usp-body{display:flex;flex-direction:column;overflow:auto}.usp-rule-list{display:flex;flex:0 0 auto;max-height:none;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border-color)}.usp-rule{flex:0 0 230px;margin:0 6px 0 0}.usp-detail{overflow:visible}.usp-connector-controls{grid-template-columns:1fr}.agent-mode-switch{overflow-x:auto}}

/* Layout Shell */
/* `flex: 1 0 auto` keeps the footer at the bottom of the viewport on short
   pages without capping the shell: it grows with its content instead of
   scrolling internally. */
.shell {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

/* Layout Container */
.analytics-container {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: visible;
}

/* Grid workspace */
.workspace-grid {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 24px;
  flex: 1;
  min-height: calc(100vh - 112px);
  overflow: visible;
}

.workspace-grid.has-report {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}

/* Form Container Card */
.analysis-form-card {
  height: auto;
  min-height: 0;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.analysis-form-card:hover {
  box-shadow: var(--shadow-lg);
}

.analysis-config-summary {
  display: none;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.analysis-form-card.is-collapsed {
  min-height: 0;
  padding: 9px 14px;
  gap: 0;
  box-shadow: var(--shadow-sm);
  animation: config-collapse-in .42s cubic-bezier(.2, .8, .2, 1) both;
}

.analysis-form-card.is-collapsed .analysis-config-summary { display: flex; }
.analysis-form-card.is-collapsed > .card-header,
.analysis-form-card.is-collapsed > .error-message,
.analysis-form-card.is-collapsed > .analysis-form-body { display: none; }
.analysis-form-card.is-expanded .analysis-config-summary { display: none; }
.analysis-form-card.is-expanded { animation: config-expand-in .32s ease both; }
.config-summary-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; color: #047857; background: #ecfdf5; border-radius: 8px; }
.config-summary-icon i { width: 16px; height: 16px; }
.config-summary-copy { display: flex; flex: 1; flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
.config-summary-copy strong { font: 700 13px var(--font-heading); white-space: nowrap; }
.config-summary-copy span { overflow: hidden; color: var(--text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.config-summary-copy strong::after { content: "·"; margin-left: 8px; color: var(--border-color); font-weight: 400; }
.config-edit-button { min-height: 32px; }
.config-cancel-button { align-self: center; }

@keyframes config-collapse-in {
  from { opacity: .55; transform: translateY(-8px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes config-expand-in {
  from { opacity: .75; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.card-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-icon {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.card-header h1 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

/* Status Pill */
.status-badge-wrapper {
  display: flex;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.status-pill .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-completed {
  background-color: #ecfdf5;
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.status-completed .status-dot { background-color: var(--success); }

.status-running {
  background-color: #eff6ff;
  color: var(--info);
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.status-running .status-dot {
  background-color: var(--info);
  animation: pulse-dot 1.5s infinite;
}

.status-queued {
  background-color: #fef3c7;
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.status-queued .status-dot { background-color: var(--warning); }

.status-failed {
  background-color: #fef2f2;
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.status-failed .status-dot { background-color: var(--danger); }

/* Form inputs & editor */
.analysis-form-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flex-grow-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.label-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.label-header label {
  font-weight: 600;
  color: var(--text-main);
}

.char-count-info {
  color: var(--text-muted);
}

.textarea-container {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

textarea#text-editor {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  padding: 16px;
  background-color: var(--bg-app);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-main);
  resize: none;
  outline: none;
  transition: var(--transition-smooth);
}

textarea#text-editor:focus {
  border-color: var(--primary);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* Custom checkbox */
.checkbox-container {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  user-select: none;
  color: var(--text-main);
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 18px;
  width: 18px;
  background-color: #f1f5f9;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  transition: var(--transition-smooth);
}

.checkbox-container:hover input ~ .checkmark {
  background-color: #cbd5e1;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: var(--primary);
  border-color: var(--primary);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Buttons */
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), #0284c7);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.2);
  transition: var(--transition-smooth);
}

.primary-btn:hover {
  background: linear-gradient(135deg, var(--primary-hover), #0369a1);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(14, 165, 233, 0.3);
}

.primary-btn:active {
  transform: translateY(0);
}

.primary-btn i {
  width: 16px;
  height: 16px;
}

/* --- BOTÓN SECUNDARIO ------------------------------------------------------
   Tres variantes y un estado, y nada más. La jerarquía la marca el color del
   texto, no el peso del borde, para que una acción destructiva pueda leerse
   como peligrosa sin ser lo más llamativo de la tarjeta:

     .ghost-button            acción secundaria normal   (gris pizarra)
     .ghost-button.is-key     la acción que se espera    (azul de marca, con fondo)
     .ghost-button.is-danger  acción destructiva         (rojo, mismo marco neutro)
     [disabled] / aria-disabled="true"                   (apagado y con borde de trazos)

   El destructivo comparte marco con el secundario a propósito: solo cambia el
   color de la etiqueta y del icono. Así se distingue de un vistazo pero no
   compite con la acción que la usuaria normalmente quiere. */
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--btn-secondary-border);
  background: #fff;
  color: var(--btn-secondary-text);
  border-radius: 9px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.ghost-button:hover {
  background: var(--btn-secondary-hover-bg);
  border-color: #5b6b83;
  color: #1e293b;
}

.ghost-button:active {
  background: var(--btn-secondary-active-bg);
}

/* El foco por teclado tiene que verse sobre cualquier fondo del sitio: anillo
   grueso, separado del borde y con halo blanco por debajo. */
.ghost-button:focus-visible,
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.text-action:focus-visible,
.icon-action:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

.ghost-button.is-key {
  color: var(--btn-key-text);
  border-color: var(--btn-key-border);
  background: var(--btn-key-bg);
}

.ghost-button.is-key:hover {
  color: var(--btn-key-text);
  border-color: #006fc0;
  background: var(--btn-key-hover-bg);
}

.ghost-button.is-danger {
  color: var(--btn-danger-text);
  border-color: var(--btn-secondary-border);
  background: #fff;
}

.ghost-button.is-danger:hover {
  color: #911616;
  border-color: #a33;
  background: var(--btn-danger-hover-bg);
}

/* Deshabilitado de verdad: apagado, borde de trazos y cursor prohibido. Es el
   único botón que debe parecer inalcanzable. */
.ghost-button[disabled],
.ghost-button[aria-disabled="true"],
.ghost-button.is-disabled {
  color: var(--btn-off-text);
  border: 1px dashed var(--btn-off-border);
  background: var(--btn-off-bg);
  cursor: not-allowed;
  box-shadow: none;
}

.ghost-button[disabled]:hover,
.ghost-button[aria-disabled="true"]:hover,
.ghost-button.is-disabled:hover {
  color: var(--btn-off-text);
  border-color: var(--btn-off-border);
  background: var(--btn-off-bg);
}

.ghost-button i {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* Texto accesible solo para lectores de pantalla. Estaba en uso en las
   plantillas (`admin_rules_matrix.html`, `admin_genre_rules.html`) sin estar
   definido en ninguna hoja: en la rejilla eso imprimía el nombre del género y
   de la regla DENTRO de cada una de las ~1.000 casillas. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-card);
  color: var(--text-main);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.secondary-btn:hover {
  border-color: rgba(14, 165, 233, 0.4);
  color: var(--primary-hover);
  box-shadow: var(--shadow-md);
}

.secondary-btn.is-disabled,
.secondary-btn[aria-disabled="true"] {
  color: var(--text-muted);
  background: #f8fafc;
  border-color: var(--border-color);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.72;
}

.secondary-btn.is-disabled:hover,
.secondary-btn[aria-disabled="true"]:hover {
  color: var(--text-muted);
  border-color: var(--border-color);
  box-shadow: none;
}

.secondary-btn i {
  width: 15px;
  height: 15px;
}

/* Results panel */
.analysis-result-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.pdf-download-btn {
  white-space: nowrap;
}

/* Compact segmented metric bar (replaces the big stat cards) */
.result-metrics {
  display: inline-flex;
  align-items: stretch;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
}

.metric-chip + .metric-chip {
  border-left: 1px solid var(--border-color);
}

.metric-ico {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.metric-ico i {
  width: 15px;
  height: 15px;
}

.metric-body {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.metric-body b {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.metric-body small {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.output-tabs {
  display: flex;
  gap: 6px;
  background-color: #cbd5e1;
  background-color: rgba(148, 163, 184, 0.12);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 4px;
}

.tab-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.tab-button:hover {
  color: var(--text-main);
}

.tab-button.is-active {
  background-color: var(--bg-card);
  color: var(--primary-hover);
  box-shadow: var(--shadow-sm);
}

/* Tabs layout */
.tab-button i {
  width: 15px;
  height: 15px;
}

.tab-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tab-panel[hidden] {
  display: none !important;
}

/* Stats Cards Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.stat-icon-wrapper i {
  width: 20px;
  height: 20px;
}

.blue-stat { background-color: #f0f9ff; color: #0284c7; }
.purple-stat { background-color: #f5f3ff; color: #7c3aed; }
.orange-stat { background-color: #fffbeb; color: #d97706; }
.green-stat { background-color: #f0fdf4; color: #16a34a; }
.red-stat { background-color: #fef2f2; color: #dc2626; }

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Analyzer results: bound the app shell to the viewport (minus the sticky
   64px topbar) only while a report is shown, so the two-pane workspace below
   can scroll each pane independently instead of growing the whole page with
   the suggestion list. Scoped with :has() so every other page (and the
   upload/processing/error states of this same page, which have no
   .analysis-results) keeps the shell's normal grow-with-content sizing —
   needed to keep the footer flush on short pages. Undone below 1200px,
   where the panes stack into a single column and should scroll as a normal
   page again. */
.shell:has(.analysis-results) {
  height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
  overflow: hidden;
}

/* Main Split workspace */
.report-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(460px, 0.85fr);
  gap: 20px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Text preview Pane */
.text-preview-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  background-color: #fafbfc;
}

.pane-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pane-title-group i {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.pane-header h2 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}

.badge-info { background-color: #e0f2fe; color: #0369a1; }
.badge-warning { background-color: #fef3c7; color: #b45309; }
.badge-success { background-color: #dcfce7; color: #047857; }

.text-display-box {
  padding: 18px 20px;
  overflow-y: auto;
  flex-grow: 1;
  min-height: 0;
}

.highlighted-text {
  font-size: 15px;
  line-height: 1.85;
  color: #334155;
  white-space: pre-wrap;
}

/* Marcas de sugerencia en el texto. La base neutraliza el amarillo por
   defecto de <mark> y da un color de reserva; cada categoría solo cambia
   --hit-color, así el resto de estados (activo, atenuado, ámbito) heredan. */
.text-hit {
  --hit-color: #64748b;
  position: relative;
  display: inline;
  border-radius: 4px;
  padding: 2px 1px;
  color: inherit;
  background-color: color-mix(in srgb, var(--hit-color) 13%, transparent);
  border-bottom: 2px solid var(--hit-color);
  cursor: pointer;
  font-weight: 500;
  transition: var(--transition-smooth);
  outline: none;
}

.text-hit:focus-visible {
  box-shadow: 0 0 0 2px var(--primary);
}

.text-hit-discourse { --hit-color: var(--color-discourse); }
.text-hit-lexical { --hit-color: var(--color-lexical); }
.text-hit-morphosyntax { --hit-color: var(--color-morphosyntax); }
.text-hit-acronyms { --hit-color: var(--color-acronyms); }
.text-hit-general { --hit-color: #64748b; }
.text-hit-variant-first-person-singular { --hit-color: var(--hit-first-person-singular); }
.text-hit-variant-first-person-plural { --hit-color: var(--hit-first-person-plural); }

/* Hover and active glow */
.text-hit:hover {
  filter: brightness(0.95);
}

/* Ocurrencia activa (analizador): estado fuerte con anillo del color de la
   categoría. En el editor los estados de selección equivalentes se inyectan
   como hoja dinámica por data-hit-id (applyHitStateStyles en
   public_editor.js), porque ProseMirror revierte clases ajenas al re-pintar. */
.text-hit.is-active {
  border-bottom-color: var(--hit-color, var(--primary));
  background-color: color-mix(in srgb, var(--hit-color, var(--primary)) 26%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hit-color, var(--primary)) 40%, transparent);
}

/* Los ámbitos amplios se atenúan en el color de su categoría (nada de morados
   fijos): frase = subrayado sólido fino, párrafo = tinte suave con subrayado
   discontinuo fino, documento = punteado. */
.text-hit-scope-sentence {
  background-color: color-mix(in srgb, var(--hit-color, #64748b) 9%, transparent);
  border-bottom-style: solid;
}

.text-hit-scope-paragraph {
  background-color: color-mix(in srgb, var(--hit-color, #64748b) 6%, transparent);
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: color-mix(in srgb, var(--hit-color, #64748b) 55%, transparent);
}

.text-hit-scope-document {
  background-color: color-mix(in srgb, var(--hit-color, #64748b) 5%, transparent);
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: color-mix(in srgb, var(--hit-color, #64748b) 55%, transparent);
}

.editor-hit-popover {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 16px;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.editor-hit-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--popover-arrow-left, 50%);
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.98);
  border-left: 1px solid rgba(14, 165, 233, 0.22);
  border-top: 1px solid rgba(14, 165, 233, 0.22);
  transform: translateX(-50%) rotate(45deg);
}

.editor-hit-popover.is-above::before {
  top: auto;
  bottom: -7px;
  border: 0;
  border-right: 1px solid rgba(14, 165, 233, 0.22);
  border-bottom: 1px solid rgba(14, 165, 233, 0.22);
}

.hit-popover-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
}

.hit-popover-kicker {
  display: inline-flex;
  max-width: calc(100% - 36px);
  margin-bottom: 8px;
  padding: 2px 8px;
  color: var(--primary-hover);
  background: var(--primary-light);
  border-radius: 999px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
}

.editor-hit-popover strong {
  display: block;
  padding-right: 28px;
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.25;
}

.editor-hit-popover p {
  margin: 9px 0 14px;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

.hit-popover-stack-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  margin: -4px 0 12px;
  padding: 5px 6px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.hit-popover-stack-nav[hidden] {
  display: none;
}

.hit-popover-stack-nav span {
  min-width: 0;
  text-align: center;
  line-height: 1.25;
}

.hit-popover-assist {
  width: 100%;
  min-height: 42px;
  margin-bottom: 10px;
}

.hit-popover-assist.is-loading i {
  animation: spin 1s linear infinite;
}

.hit-ai-panel {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(48vh, 520px);
  margin: 0 0 10px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.55) transparent;
}

.hit-ai-panel::-webkit-scrollbar {
  width: 8px;
}

.hit-ai-panel::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.42);
  border-radius: 999px;
}

.hit-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--primary-hover);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hit-ai-header code {
  max-width: 160px;
  overflow: hidden;
  color: #64748b;
  background: #eef6ff;
  border-radius: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hit-ai-option {
  padding: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.hit-ai-option + .hit-ai-option {
  margin-top: 8px;
}

.hit-ai-option-label {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.hit-ai-option p {
  margin: 0;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.hit-ai-option small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.hit-ai-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.mini-action {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
}

.mini-action i {
  width: 15px;
  height: 15px;
}

.hit-ai-status,
.hit-ai-error,
.hit-ai-empty {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.hit-ai-status i {
  width: 16px;
  height: 16px;
  color: var(--primary);
  animation: spin 1s linear infinite;
}

.hit-ai-error {
  color: #b91c1c;
}

.hit-ai-error i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.hit-popover-details {
  width: 100%;
}

.text-hit-anchor {
  display: inline-block;
  width: 0;
  height: 0;
  scroll-margin-top: 28px;
}

.text-hit-anchor.is-active::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1.4em;
  margin-left: -8px;
  margin-right: 4px;
  vertical-align: -0.25em;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}

/* Final responsive placement for the shared panel (kept last in the cascade). */



.editor-main-panel { min-width:0; }.agent-editor-frame { min-height:calc(100vh - 96px); padding-bottom:10px; }.editor-workbar { gap:8px; width:100%; margin-bottom:7px; }.agent-mode-switch { padding:3px; border-radius:10px; box-shadow:none; }.agent-mode-btn { min-height:32px; padding:0 9px; gap:5px; border-radius:7px; font-size:11px; }.agent-mode-btn i { width:15px; height:15px; }.editor-analyze-btn { min-height:36px; padding:0 13px; border-radius:8px; font-size:12px; box-shadow:none; }
.editor-toolbar { top:48px; width:100%; min-height:44px; padding:4px 7px; border-radius:10px 10px 0 0; box-shadow:none; }.icon-tool { width:29px; height:30px; border-radius:6px; }.icon-tool i { width:15px; height:15px; }.toolbar-separator { height:22px; }.editor-format-select { height:30px; font-size:11px; }
.editor-document-card { width:100%; min-height:calc(100vh - 205px); border-radius:0 0 10px 10px; box-shadow:none; }.document-status-line { padding:6px 10px; font-size:10px; }.rich-editor-surface { min-height:calc(100vh - 245px); padding:28px 34px 92px; font-size:15px; line-height:1.65; }.rich-editor-content { max-width:720px; font-size:calc(15px * var(--editor-zoom,1)); line-height:1.65; }.agent-command-bar { bottom:10px; min-height:44px; width:min(620px,calc(100% - 28px)); margin-top:-66px; padding:5px 7px 5px 11px; gap:7px; border-radius:10px; box-shadow:0 8px 22px rgba(15,23,42,.12); }.agent-command-bar input { height:32px; font-size:12px; }

.editor-suggestions-panel { gap:0; border-radius:10px; box-shadow:none; }.editor-report-status { margin:7px; padding:7px 8px; border-radius:6px; }.editor-report-status p { font-size:10px; }.editor-report-status h3 { font-size:11px; }
.unified-suggestion-panel { overflow:hidden; }.usp-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; padding:9px 9px 7px; backdrop-filter:none; }.usp-title { grid-template-columns:auto minmax(0,1fr) auto; gap:5px; }.usp-title svg { width:15px; }.usp-title strong { font-size:12px; }.usp-title>span { min-width:22px; padding:2px 6px; font-size:10px; }.usp-actions { grid-column:2; grid-row:1; gap:2px; }.usp-actions a,.usp-actions button { min-width:27px; min-height:27px; padding:4px; border:0; border-radius:6px; }.usp-actions svg { width:14px;height:14px; }.usp-actions span { font-size:9px; }
.usp-layers { gap:3px; grid-column:1/-1; }.usp-layers button { min-height:24px; padding:3px 6px; gap:4px; border-radius:6px; font-size:9px; }.usp-layers .layer-dot { width:6px;height:6px; }
.usp-rule-list { flex:1; overflow:auto; padding:5px; background:#fff; border:0; }.usp-rule { display:block; width:100%; margin:0; padding:0; background:#fff; border:0; border-bottom:1px solid #edf2f7; border-radius:0; box-shadow:none; }.usp-rule.is-active { border-color:#dbeafe; box-shadow:none; background:#fbfdff; }
.usp-rule-summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:6px; width:100%; padding:9px 6px; color:var(--text-main); text-align:left; background:transparent; border:0; cursor:pointer; }.usp-rule-summary .layer-dot { width:7px;height:7px; }.usp-rule-summary strong { display:block; overflow:hidden; font:650 11px/1.3 var(--font-heading); text-overflow:ellipsis; }.usp-rule-summary b { color:#64748b; font-size:9px; }.usp-rule-summary>svg { width:13px; color:#94a3b8; transition:transform .15s ease; }.usp-rule.is-active .usp-rule-summary>svg { transform:rotate(90deg); }
.usp-rule-details { padding:0 7px 9px 19px; }.usp-summary { margin:2px 0 7px; color:#475569; font-size:10.5px; line-height:1.45; }.usp-recommendation { gap:5px; margin:6px 0; padding:6px 7px; border:0; border-left:2px solid #60a5fa; border-radius:3px; }.usp-recommendation svg { width:13px; }.usp-recommendation strong { display:none; }.usp-recommendation p { margin:0; font-size:10px; line-height:1.4; }
.usp-occurrences { margin-top:7px; padding-top:6px; }.usp-occurrences>header { margin-bottom:4px; }.usp-occurrences>header strong { font-size:9px; }.usp-occurrences>header button { min-width:24px;min-height:24px;padding:2px;border:0; }.usp-occurrences>header span { font-size:9px; }.usp-active-occurrence,.usp-occurrence-list button { min-height:30px!important;padding:5px 7px!important;border-radius:5px!important;font-size:10px!important; }.usp-active-occurrence small { font-size:8px; }.usp-show-all { min-height:24px!important;margin-top:3px!important;font-size:9px; }
.usp-proposals { margin:7px 0 0; padding:7px; border:0; border-left:2px solid #34d399; border-radius:3px; }.usp-proposals>header { gap:5px; margin-bottom:5px; }.usp-proposals>header svg { width:14px; }.usp-proposals>header strong { font-size:10px; }.usp-proposals>header p { display:none; }.usp-connector-controls { grid-template-columns:1fr; gap:4px; margin-bottom:5px; }.usp-connector-controls select,.usp-connector-controls label { height:29px; font-size:10px; border-radius:5px; }.usp-proposal-list { gap:3px; max-height:120px; }.usp-proposal { border-radius:5px; font-size:10px; }.usp-proposal span { padding:4px 3px 4px 7px; }.usp-proposal button { width:25px;height:25px; }.usp-proposal svg { width:12px; }
/* Suggestions Right Pane */
.suggestions-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.suggestion-list-wrapper {
  overflow-y: auto;
  padding: 14px;
  flex-grow: 1;
  min-height: 0;
}

/* Empty states */
.empty-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 480px;
  border: 2px dashed var(--border-color);
  border-radius: 16px;
  padding: 48px;
  background-color: var(--bg-card);
}

.empty-decor {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--primary-light);
  color: var(--primary);
  margin-bottom: 20px;
}

.empty-decor i {
  width: 32px;
  height: 32px;
}

.empty-state-card h2 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.empty-state-card p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 420px;
}

.perfect-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 16px;
}

.perfect-icon {
  width: 48px;
  height: 48px;
  color: var(--success);
  margin-bottom: 16px;
}

.perfect-state h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.perfect-state p {
  font-size: 13px;
  color: var(--text-muted);
}

/* Suggestion Accordion */
.category-section {
  margin-bottom: 20px;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
}

.category-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.category-header-discourse .category-dot { background-color: var(--color-discourse); }
.category-header-lexical .category-dot { background-color: var(--color-lexical); }
.category-header-morphosyntax .category-dot { background-color: var(--color-morphosyntax); }
.category-header-acronyms .category-dot { background-color: var(--color-acronyms); }

.category-header h3 {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  flex-grow: 1;
}

.category-count {
  font-size: 10px;
  font-weight: 700;
  background-color: #f1f5f9;
  padding: 2px 8px;
  border-radius: 99px;
  color: var(--text-muted);
}

/* Suggestion Card Item */
.suggestion-item {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: var(--bg-card);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.suggestion-item:hover {
  border-color: #cbd5e1;
}

/* Category card left accents */
.suggestion-category-discourse { border-left: 3px solid var(--color-discourse); }
.suggestion-category-lexical { border-left: 3px solid var(--color-lexical); }
.suggestion-category-morphosyntax { border-left: 3px solid var(--color-morphosyntax); }
.suggestion-category-acronyms { border-left: 3px solid var(--color-acronyms); }

.suggestion-item.is-active {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
  background-color: #fbfdff;
}

.suggestion-summary-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  min-height: 0;
}

.suggestion-summary-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.suggestion-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.suggestion-summary-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.catalog-options-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; color: #047857; background: #ecfdf5; border-radius: 999px; font-size: 10px; font-weight: 700; }
.catalog-options-badge i { width: 11px; height: 11px; }

.suggestion-code {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
  background-color: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  align-self: flex-start;
}

.arrow-indicator {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: var(--transition-smooth);
}

/* Collapsible behavior - css hook */
.suggestion-details {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid #f8fafc;
}

.suggestion-item.is-active .suggestion-details {
  display: block;
}

.suggestion-item.is-active .arrow-indicator {
  transform: rotate(90deg);
  color: var(--primary);
}

.suggestion-desc {
  font-size: 13px;
  color: #475569;
  margin-bottom: 12px;
}

/* Recommendations design */
.recommendation-box {
  display: flex;
  gap: 10px;
  background-color: #eff6ff;
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}

.rec-icon {
  width: 16px;
  height: 16px;
  color: var(--info);
  margin-top: 2px;
  flex-shrink: 0;
}

.rec-content {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.rec-label {
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 2px;
}

.rec-text {
  color: #1e40af;
}

/* Occurrences detail styling */
.occurrences-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--border-color);
  padding-top: 12px;
}

.occurrences-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.occurrences-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.occurrence-nav { display: flex; align-items: center; gap: 4px; }
.occurrence-nav > span { min-width: 38px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-align: center; }
.occurrence-nav button { display: grid; place-items: center; width: 28px; height: 28px; color: var(--text-muted); background: #fff; border: 1px solid var(--border-color); border-radius: 7px; cursor: pointer; }
.occurrence-nav button:hover { color: var(--primary-hover); background: var(--primary-light); border-color: #bae6fd; }
.occurrence-nav button i { width: 14px; height: 14px; }

.occurrence-buttons-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.occurrence-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.occurrence-jump-btn,
.occurrence-static-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  background-color: #fafbfc;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  text-align: left;
  transition: var(--transition-smooth);
}

.occurrence-jump-btn {
  cursor: pointer;
}

.occurrence-jump-btn:hover {
  background-color: var(--primary-light);
  border-color: var(--primary);
}

.occurrence-jump-btn.is-current {
  color: #075985;
  background: #f0f9ff;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, .1);
}

.occurrence-jump-btn.is-stale,
.occurrence-jump-btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.occurrence-jump-btn.is-stale:hover,
.occurrence-jump-btn:disabled:hover {
  background-color: #fafbfc;
  border-color: var(--border-color);
}

.occ-text {
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.occ-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: monospace;
  font-size: 10px;
  background-color: #f1f5f9;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
}

.occ-badge i {
  width: 10px;
  height: 10px;
}

.replacement-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding-left: 12px;
}

.rep-label {
  color: var(--text-muted);
  font-weight: 500;
}

.rep-value {
  background-color: #ecfdf5;
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.catalog-alternatives-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: linear-gradient(145deg, #f0fdf9, #f8fafc);
  border: 1px solid #a7f3d0;
  border-radius: 10px;
}

.catalog-alternatives-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.catalog-panel-title { display: flex; align-items: center; gap: 9px; }
.catalog-panel-title > span:last-child { display: flex; flex-direction: column; }
.catalog-panel-title strong { color: #065f46; font-size: 12px; }
.catalog-panel-title small { color: var(--text-muted); font-size: 10px; }
.catalog-feature-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; color: #047857; background: #d1fae5; border-radius: 10px; }
.catalog-feature-icon.compact { flex-basis: 30px; width: 30px; height: 30px; border-radius: 8px; }
.catalog-feature-icon i { width: 18px; height: 18px; }
.catalog-feature-icon.compact i { width: 14px; height: 14px; }

.catalog-alternatives-head code {
  flex-shrink: 0;
  color: #0f766e;
  background: #ccfbf1;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
}

.catalog-alternatives-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.catalog-alternative-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 9px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.catalog-alternative-chip i { width: 13px; height: 13px; margin-left: 5px; opacity: .6; }

.catalog-alternative-chip:hover,
.catalog-alternative-chip.is-selected {
  color: #064e3b;
  background: #d1fae5;
  border-color: var(--accent-emerald);
}

.catalog-alternatives-hint {
  color: var(--text-muted);
  font-size: 11px;
}

.connector-catalog-panel { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 16px; padding: 14px; background: linear-gradient(145deg, #ecfdf5, #f8fafc); border: 1px solid #a7f3d0; border-radius: 12px; }
.connector-catalog-intro { display: flex; align-items: center; gap: 11px; }
.connector-catalog-intro > div { min-width: 0; }
.connector-catalog-intro strong { color: #065f46; font-size: 13px; }
.connector-catalog-intro p { color: #475569; font-size: 11px; line-height: 1.4; }
.connector-option-groups { display: flex; flex-direction: column; gap: 5px; max-height: 280px; overflow-y: auto; }
.connector-option-group { overflow: hidden; background: rgba(255, 255, 255, .82); border: 1px solid #d1fae5; border-radius: 8px; }
.connector-option-group > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 8px; align-items: center; padding: 8px 10px; color: #334155; cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; }
.connector-option-group > summary::-webkit-details-marker { display: none; }
.connector-option-group > summary:hover { color: #065f46; background: #ecfdf5; }
.connector-option-group > summary i { width: 15px; height: 15px; transition: transform .2s ease; }
.connector-option-group[open] > summary i { transform: rotate(180deg); }
.group-option-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; color: #047857; background: #d1fae5; border-radius: 999px; font-size: 10px; }
.connector-option-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 10px; }
.connector-option-chip { border-radius: 7px; font-weight: 600; }

/* Occurrence Meta lists */
.metadata-detail {
  margin-top: 4px;
  padding: 8px;
  background-color: #fafbfc;
  border-left: 2px solid #cbd5e1;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
}

.meta-section-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
}

.meta-section-title i {
  width: 12px;
  height: 12px;
}

.meta-list {
  padding-left: 20px;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dots-list {
  list-style-type: disc;
}

.connectors-list {
  list-style-type: none;
  padding-left: 0;
}

.conn-name {
  font-weight: 700;
  color: var(--primary-hover);
}

.conn-rel {
  color: var(--text-muted);
  font-size: 11px;
}

.conn-alternatives {
  margin-top: 2px;
  font-size: 11px;
  color: #475569;
}

/* API tab panels */
.api-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.api-block-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.panel-heading-api {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background-color: #1e293b;
  border-bottom: 1px solid #0f172a;
}

.http-method {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
}

.http-method.post { background-color: #10b981; }
.http-method.get { background-color: #0ea5e9; }

.api-path {
  font-family: monospace;
  font-size: 13px;
  color: #94a3b8;
}

.code-container {
  background-color: #0f172a;
  padding: 18px;
  overflow: auto;
  flex: 1;
}

.code-container pre code {
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #e2e8f0;
}

/* Foldable JSON tree (json_tree.js). Token colours follow the github-dark
   theme used by the API reference so both views read the same. */
.jt-node { display: block; }
.jt-summary { cursor: pointer; list-style: none; border-radius: 3px; }
.jt-summary::-webkit-details-marker { display: none; }
.jt-summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 6px;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 5px solid #8b949e;
  vertical-align: 1px;
  transition: transform 0.12s ease;
}
.jt-node[open] > .jt-summary::before { transform: rotate(90deg); }
.jt-summary:hover { background: rgba(148, 163, 184, 0.14); }
.jt-summary:focus-visible { outline: 2px solid #79c0ff; outline-offset: 1px; }
.jt-children {
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid rgba(148, 163, 184, 0.24);
}
/* The details element hides the expanded brackets while collapsed; these two
   are the mirror image, shown only when collapsed. */
.jt-node[open] > .jt-summary .jt-fold { display: none; }
.jt-fold { color: #8b949e; }
.jt-summary .jt-fold:first-of-type { margin: 0 5px; font-style: italic; }
.jt-close, .jt-row { padding-left: 11px; }
.jt-key { color: #79c0ff; }
.jt-index { color: #6e7c91; }
.jt-string { color: #a5d6ff; }
.jt-number, .jt-literal { color: #79c0ff; }
.jt-punc, .jt-close { color: #8b949e; }
.jt-toolbar { display: flex; gap: 6px; margin-left: auto; }
.jt-btn {
  padding: 3px 9px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.jt-btn:hover { border-color: #79c0ff; color: #cbd5e1; }

/* Errors states */
.error-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  min-height: 400px;
}

.error-large-icon {
  width: 48px;
  height: 48px;
  color: var(--danger);
  margin-bottom: 16px;
}

.error-state-card h2 {
  font-family: var(--font-heading);
  font-size: 18px;
  margin-bottom: 8px;
}

.error-desc {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 480px;
}
.processing-state-card {
  display: flex;
  min-height: 420px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 48px;
  background-color: var(--bg-card);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.processing-loader-container {
  margin-bottom: 24px;
}

.spinner-glow-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
}

.spinner-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, rgba(14, 165, 233, 0) 70%);
  opacity: 0.55;
}

.processing-icon-wrap {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 50%;
  background-color: var(--primary-light);
  color: var(--primary);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
  z-index: 2;
}

.processing-icon-wrap i {
  width: 28px;
  height: 28px;
}

.processing-icon-wrap.status-queued {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--warning);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.processing-icon-wrap.status-queued .spinner-glow {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0) 70%);
}

.icon-spin {
  animation: spin 2s linear infinite;
}

.icon-pulse {
  animation: none;
}

.processing-state-card h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

.processing-status-text {
  max-width: 520px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* Stepper Style */
.processing-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 540px;
  margin-top: 36px;
  margin-bottom: 24px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  width: 100px;
}

.step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: #fff;
  display: grid;
  place-items: center;
  z-index: 2;
  color: var(--text-muted);
  font-size: 14px;
  transition: var(--transition-smooth);
}

.step-icon i {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

.step-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
  white-space: nowrap;
}

.step-connector {
  height: 2px;
  background-color: var(--border-color);
  flex: 1;
  margin-bottom: 26px;
  z-index: 1;
  transition: var(--transition-smooth);
}

/* Step States */
.step.is-completed .step-icon {
  background-color: var(--accent-emerald);
  border-color: var(--accent-emerald);
  color: #fff;
}

.step.is-completed .step-label {
  color: var(--text-main);
}

.step-connector.is-completed {
  background-color: var(--accent-emerald);
}

.step.is-active .step-icon {
  border-color: var(--primary);
  background-color: var(--primary-light);
  color: var(--primary);
}

.step.is-active .step-label {
  color: var(--primary);
  font-weight: 700;
}

.step-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}

.step-pulse.warning {
  background-color: var(--warning);
  animation: pulse-dot-warning 1.6s infinite;
}

.step-pulse.primary {
  background-color: var(--primary);
  animation: pulse-dot-primary 1.6s infinite;
}

.processing-note {
  margin-top: 16px;
  border-radius: 99px;
  padding: 6px 14px;
  background-color: var(--bg-app);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.processing-note i {
  width: 14px;
  height: 14px;
}

/* Animations */
@keyframes glow-pulse {
  0%, 100% {
    transform: scale(0.95);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes pulse-icon {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

@keyframes pulse-dot-warning {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

@keyframes pulse-dot-primary {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(14, 165, 233, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
  }
}

.flex-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.flex-error i {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Animations */
@keyframes pulse-dot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-pulse-slow {
  animation: pulse-slow 2s infinite;
}

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ==========================================================
   LOGIN SCREEN STYLING (Glassmorphism & Gradients)
   ========================================================== */
.login-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 160px);
  padding: 24px;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}

/* Background glowing decoration */
.login-bg-decor {
  position: absolute;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, rgba(16, 185, 129, 0.05) 70%);
  filter: blur(40px);
  border-radius: 50%;
  z-index: 1;
  animation: bg-glow-float 10s ease-in-out infinite alternate;
}

@keyframes bg-glow-float {
  0% { transform: translate(-20px, -20px); }
  100% { transform: translate(20px, 20px); }
}

.login-card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 440px;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 16px -6px rgba(0, 0, 0, 0.05);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary), #0284c7);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
}

.login-logo i {
  width: 24px;
  height: 24px;
}

.login-card h1 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 0;
  color: #0f172a;
}

.login-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.form-group select {
  width: 100%;
  min-height: 42px;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  outline: none;
  transition: var(--transition-smooth);
}

.form-group select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.input-wrapper input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 42px;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  outline: none;
  transition: var(--transition-smooth);
}

.input-wrapper input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.login-btn {
  margin-top: 8px;
  width: 100%;
}

/* ==========================================================
   ADMIN CATALOGS
   ========================================================== */
.admin-container {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.admin-header.compact {
  padding: 20px 28px;
}

.admin-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.admin-header h1 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-main);
}

.admin-header p {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-muted);
}

.language-switcher,
.context-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 6px 5px 10px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.language-switcher label,
.context-selector label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.language-switcher select,
.context-selector select {
  min-height: 34px;
  padding: 6px 32px 6px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 650;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.language-switcher select:hover,
.context-selector select:hover {
  border-color: #94a3b8;
  background: #fff;
}

.language-switcher select:focus-visible,
.context-selector select:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .14);
}

.context-selector > i {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex: 0 0 auto;
}

.context-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.context-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
}

.context-select-wrap > i {
  position: absolute;
  right: 9px;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.context-selector--interface {
  margin-left: auto;
  background: #fff;
}

.context-selector--interface select {
  min-width: 128px;
}

.admin-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: #065f46;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}

.admin-notice i {
  color: var(--success);
  flex-shrink: 0;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.catalog-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 160px;
  padding: 24px;
  color: inherit;
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.catalog-card:hover {
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.catalog-card-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.catalog-card h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
  margin-bottom: 4px;
}

.catalog-card code,
.admin-header code {
  font-family: monospace;
  font-size: 12px;
  padding: 2px 6px;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 6px;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.catalog-icon {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 12px;
  transition: var(--transition-smooth);
}

.catalog-card:hover .catalog-icon {
  background: var(--primary);
  color: #fff;
}

/* Pie de la tarjeta de glosario.
   Antes era una fila rígida (`flex` + `space-between`, sin `wrap`) con cuatro
   piezas de ancho impredecible —dos contadores, la insignia de origen y
   «Abrir →»—. En cuanto los rótulos crecían (93 activas; «Heretat»/«Inherited»)
   la última pieza se salía del borde derecho e invadía la tarjeta vecina.
   Ahora el pie es una rejilla de dos zonas que se apilan cuando no caben: los
   datos (contadores + origen) arriba y la acción abajo a la derecha. */
.catalog-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-width: 0;
  padding-top: 16px;
  color: var(--text-muted);
  font-size: 13px;
  border-top: 1px solid var(--border-color);
}

/* Los datos van juntos y envuelven entre sí antes de empujar a «Abrir». */
.catalog-counts-data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
}

.catalog-counts > *,
.catalog-counts-data > * { min-width: 0; }

.catalog-open-label { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #0369a1; font-weight: 700; white-space: nowrap; }
.catalog-open-label i { width: 14px; height: 14px; transition: transform .2s ease; }
.catalog-card:hover .catalog-open-label i { transform: translateX(3px); }

.catalog-counts strong {
  color: var(--text-main);
  margin: 0 2px;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.status-dot.active {
  background-color: var(--accent-emerald);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.status-dot.inactive {
  background-color: var(--text-muted);
}

.active-count, .inactive-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.admin-empty {
  grid-column: 1 / -1;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.back-link:hover {
  color: var(--primary-hover);
  transform: translateX(-2px);
}

.admin-toolbar,
.admin-card {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.admin-search {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 180px auto;
  gap: 16px;
  align-items: center;
}

.search-input-wrap {
  position: relative;
}

.search-input-wrap i {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transform: translateY(-50%);
}

.search-input-wrap input {
  padding-left: 44px;
}

.admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.admin-card-header h2 {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-card-header h2 i {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.list-headers {
  display: grid;
  grid-template-columns: 140px minmax(200px, 1.2fr) minmax(200px, 1.2fr) 110px 168px;
  gap: 16px;
  align-items: center;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 8px;
}

.list-headers.no-alternative {
  grid-template-columns: 140px minmax(200px, 2.4fr) 110px 168px;
}

.connector-category-headers,
.connector-category-row {
  grid-template-columns: 140px minmax(220px, 1.2fr) minmax(180px, 0.9fr) 110px 168px;
}

.connector-headers,
.connector-row {
  grid-template-columns: 140px minmax(220px, 1.2fr) minmax(240px, 1fr) 110px 168px;
}

.entry-form {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) 110px auto;
  gap: 16px;
  align-items: center;
}

.entry-form.no-alternative {
  grid-template-columns: minmax(200px, 1fr) 110px auto;
}

.connector-category-form {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.8fr) 110px auto;
}

.connector-entry-form {
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 0.9fr) 110px auto;
}

.connector-inline-create {
  grid-template-columns: minmax(220px, 1fr) 110px auto;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.connector-search {
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.6fr) auto;
}

.connector-tree {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.connector-category-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.connector-category-card.is-inactive {
  background: #f8fafc;
}

.connector-category-card-header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.connector-category-edit {
  display: grid;
  grid-template-columns: 140px minmax(220px, 1fr) minmax(180px, 0.7fr) 110px 168px;
  gap: 16px;
  align-items: center;
}

.connector-category-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.connector-nested-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.connector-nested-row {
  grid-template-columns: 140px minmax(220px, 1fr) minmax(240px, 0.9fr) 110px 168px;
}

.connector-empty-list {
  min-height: 92px;
  padding: 24px;
}

.entry-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.entry-row {
  display: grid;
  grid-template-columns: 140px minmax(200px, 1.2fr) minmax(200px, 1.2fr) 110px 168px;
  gap: 16px;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #fff;
  transition: var(--transition-smooth);
}

.entry-row.no-alternative {
  grid-template-columns: 140px minmax(200px, 2.4fr) 110px 168px;
}

.entry-row:hover {
  border-color: rgba(14, 165, 233, 0.25);
  box-shadow: var(--shadow-sm);
  background: #fafbfd;
}

.entry-row.is-inactive {
  background: #f8fafc;
  opacity: 0.75;
}

.entry-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.entry-id {
  font-family: monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.entry-source-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

.admin-toolbar input,
.admin-toolbar select,
.entry-form input,
.entry-form select {
  width: 100%;
  min-height: 42px;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  outline: none;
  transition: var(--transition-smooth);
}

.entry-row input {
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  transition: var(--transition-smooth);
}

.connector-category-edit input {
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  transition: var(--transition-smooth);
}

.entry-row select {
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  outline: none;
  transition: var(--transition-smooth);
}

.entry-row input:hover,
.connector-category-edit input:hover {
  background: #f1f5f9;
  border-color: var(--border-color);
}

.entry-row select:hover {
  border-color: rgba(14, 165, 233, 0.35);
}

.entry-row input:focus,
.connector-category-edit input:focus {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.entry-row select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.admin-toolbar input:focus,
.admin-toolbar select:focus,
.entry-form input:focus,
.entry-form select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

/* Custom Switch Toggle styling */
.admin-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  gap: 8px;
}

/* Hide default checkbox */
.admin-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* The toggle track */
.admin-checkbox .switch-track {
  position: relative;
  width: 36px;
  height: 18px;
  background-color: #cbd5e1;
  border-radius: 100px;
  transition: var(--transition-smooth);
}

/* The toggle knob */
.admin-checkbox .switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: var(--transition-smooth);
}

/* Active state of the toggle track */
.admin-checkbox input[type="checkbox"]:checked + .switch-track {
  background-color: var(--accent-emerald);
}

/* Move knob on checked state */
.admin-checkbox input[type="checkbox"]:checked + .switch-track::after {
  transform: translateX(18px);
}

/* Focus outline for accessibility */
.admin-checkbox input[type="checkbox"]:focus + .switch-track {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

.admin-button {
  min-height: 42px;
  white-space: nowrap;
}

.save-btn {
  border-color: rgba(14, 165, 233, 0.24);
  color: #0369a1;
  background: #f0f9ff;
  padding: 6px 12px;
  font-size: 13px;
  height: 36px;
}

.save-btn:hover {
  border-color: rgba(14, 165, 233, 0.4);
  background: #e0f2fe;
  color: #075985;
}

.entry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.delete-btn {
  height: 36px;
  padding: 6px 10px;
  border-color: rgba(239, 68, 68, 0.22);
  color: #b91c1c;
  background: #fff;
  font-size: 13px;
}

.delete-btn:hover {
  border-color: rgba(239, 68, 68, 0.45);
  background: #fef2f2;
  color: #991b1b;
}

.admin-empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--text-muted);
  background: #f8fafc;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  font-size: 14px;
}

.admin-empty-list i {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
}

/* Hierarchical glossary */
.admin-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -12px;
  color: var(--text-muted);
  font-size: 13px;
}

.admin-breadcrumbs a { color: var(--primary-hover); font-weight: 600; text-decoration: none; }
.admin-breadcrumbs i { width: 14px; height: 14px; }
.admin-header-actions { display: flex; align-items: center; gap: 16px; }
.glossary-toolbar { padding: 16px; }
.glossary-toolbar .ghost-button { text-decoration: none; }

.glossary-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 0 4px;
}

.glossary-section-heading h2 { font: 700 20px var(--font-heading); }
.glossary-section-heading p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.hierarchy-hint { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 12px; }
.hierarchy-hint i { width: 16px; height: 16px; }

.glossary-tree { gap: 10px; }
.glossary-branch {
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.glossary-branch[open] { border-color: #bae6fd; box-shadow: var(--shadow-md); }
.glossary-branch.is-inactive { background: #f8fafc; }
.glossary-branch > summary {
  display: grid;
  grid-template-columns: 24px 42px minmax(180px, 1fr) auto auto auto;
  gap: 14px;
  align-items: center;
  min-height: 76px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.glossary-branch > summary::-webkit-details-marker { display: none; }
.glossary-branch > summary:hover { background: #f8fafc; }
.branch-chevron { display: grid; place-items: center; color: var(--text-muted); transition: transform .2s ease; }
.branch-chevron i { width: 18px; height: 18px; }
.glossary-branch[open] .branch-chevron { transform: rotate(90deg); }
.branch-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--primary-hover); background: var(--primary-light); border-radius: 10px; }
.branch-icon i { width: 20px; height: 20px; }
.glossary-branch[open] .branch-icon i { fill: rgba(14, 165, 233, .15); }
.branch-title { display: flex; flex-direction: column; min-width: 0; }
.branch-title strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.branch-title > span { color: var(--text-muted); font-size: 11px; }
.branch-count { min-width: 92px; color: var(--text-main); font-size: 13px; font-weight: 700; text-align: right; }
.branch-count span { color: var(--text-muted); font-weight: 500; }
.branch-actions { display: flex; gap: 6px; }
.icon-action {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #556274;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
/* Botón de icono sin rótulo: el dibujo tiene que distinguirse del fondo, y al
   apuntarlo debe verse que es pulsable (#0369a1 sobre blanco = 5,93:1). */
.icon-action:hover { color: #0369a1; background: var(--primary-light); border-color: #7fc4ea; }
.icon-action i { width: 17px; height: 17px; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-pill.is-active { color: #047857; background: #ecfdf5; }
.status-pill.is-inactive { color: #64748b; background: #e2e8f0; }
.branch-body { padding: 0 18px 18px 80px; border-top: 1px solid var(--border-color); }
.branch-body-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 10px; color: var(--text-muted); font-size: 12px; }
/* Acción en texto: sin marco, pero legible. `--primary-hover` (#0284c7) daba
   4,10:1 sobre blanco, por debajo del mínimo AA; #0369a1 da 5,93:1. */
.text-action { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; color: #0369a1; background: transparent; border: 0; border-radius: 7px; font: 700 12.5px var(--font-body); text-decoration: none; cursor: pointer; }
.text-action:hover { background: var(--primary-light); color: #024b74; text-decoration: underline; }
.text-action i { width: 15px; height: 15px; }
.glossary-items { display: flex; flex-direction: column; gap: 5px; }
.glossary-item { display: grid; grid-template-columns: 26px minmax(180px, 1fr) auto 38px; gap: 10px; align-items: center; min-height: 54px; padding: 7px 8px; border-radius: 9px; }
.glossary-item:hover { background: #f8fafc; }
.glossary-item.is-inactive { opacity: .68; }
.item-node { color: #94a3b8; }
.item-node i { width: 17px; height: 17px; }
.item-name { display: flex; flex-direction: column; }
.item-name strong { font-size: 14px; font-weight: 600; }
.item-name small { color: var(--text-muted); font-size: 10px; }

.admin-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--text-main);
  background: transparent;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
}
.admin-dialog::backdrop { background: rgba(15, 23, 42, .48); backdrop-filter: blur(3px); }
.dialog-card { padding: 0; background: #fff; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 24px 18px; border-bottom: 1px solid var(--border-color); }
.dialog-header h2 { font: 700 22px var(--font-heading); }
.dialog-header p { margin-top: 3px; color: var(--text-muted); font-size: 13px; }
.dialog-close { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; color: var(--text-muted); background: #f8fafc; border: 1px solid var(--border-color); border-radius: 9px; cursor: pointer; }
.dialog-close:hover { color: var(--text-main); background: #f1f5f9; }
.dialog-close i { width: 18px; height: 18px; }
.dialog-fields { display: flex; flex-direction: column; gap: 18px; padding: 22px 24px; }
.dialog-fields > label:not(.admin-checkbox) { display: flex; flex-direction: column; gap: 6px; color: var(--text-main); font-size: 13px; font-weight: 700; }
.dialog-fields label small { color: var(--text-muted); font-weight: 400; }
.dialog-fields input:not([type=checkbox]), .dialog-fields select, .dialog-fields textarea { width: 100%; min-height: 44px; padding: 9px 12px; color: var(--text-main); background: #fff; border: 1px solid var(--border-color); border-radius: 9px; font: 14px var(--font-body); outline: none; }
.dialog-fields input:focus, .dialog-fields select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, .12); }
.dialog-switch { min-height: 36px; }
.dialog-warning { display: flex; gap: 9px; margin: -4px 24px 20px; padding: 10px 12px; color: #475569; background: #f8fafc; border-radius: 8px; font-size: 12px; }
.dialog-warning.import-warning { margin-top: 22px; }
.dialog-warning i { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color); }
.dialog-footer.split { display: grid; grid-template-columns: auto 1fr auto auto; }
.dialog-footer button { min-height: 40px; }
.card-subtitle { margin-top: 3px; color: var(--text-muted); font-size: 12px; }
.glossary-list-card { padding: 0; overflow: hidden; }
.glossary-list-card .admin-card-header { margin: 0; padding: 18px 22px; border-bottom: 1px solid var(--border-color); }
.simple-glossary-list { display: flex; flex-direction: column; }
.simple-glossary-item { display: grid; grid-template-columns: 38px minmax(180px, 1fr) auto 38px; gap: 12px; align-items: center; min-height: 68px; padding: 8px 18px; border-bottom: 1px solid #f1f5f9; }
.simple-glossary-item:last-child { border-bottom: 0; }
.simple-glossary-item:hover { background: #f8fafc; }
.simple-glossary-item.is-inactive { opacity: .68; background: #f8fafc; }
.catalog-list-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--primary-hover); background: var(--primary-light); border-radius: 8px; }
.catalog-list-icon i { width: 17px; height: 17px; }

/* Prompt laboratory */
.prompt-lab-overview { display: grid; grid-template-columns: 150px 170px minmax(280px, 1fr); gap: 12px; }
.lab-stat, .lab-model-pool { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 16px; background: #fff; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-sm); }
.lab-stat > i { width: 20px; color: var(--primary); }
.lab-stat span { display: flex; flex-direction: column; color: var(--text-muted); font-size: 11px; }
.lab-stat strong { color: var(--text-main); font-size: 20px; line-height: 1; }
.lab-model-pool { flex-wrap: wrap; }
.lab-model-pool > span { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.lab-model-pool i { width: 16px; }
.lab-model-pool code, .model-chip { padding: 3px 7px; color: #6d28d9; background: #f5f3ff; border-radius: 6px; font-size: 10px; }
.prompt-rule-tree { display: flex; flex-direction: column; gap: 9px; }
.prompt-rule-branch { overflow: hidden; background: #fff; border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--shadow-sm); }
.prompt-rule-branch[open] { border-color: #c4b5fd; box-shadow: var(--shadow-md); }
.prompt-rule-branch > summary { display: grid; grid-template-columns: 24px 42px minmax(220px, 1fr) auto auto 38px; gap: 13px; align-items: center; min-height: 74px; padding: 11px 16px; cursor: pointer; list-style: none; }
.prompt-rule-branch > summary::-webkit-details-marker { display: none; }
.prompt-rule-branch > summary:hover { background: #fafafa; }
.prompt-rule-branch[open] .branch-chevron { transform: rotate(90deg); }
.prompt-rule-branch .branch-icon { color: #7c3aed; background: #f5f3ff; }
.prompt-rule-body { padding: 8px 16px 16px 78px; border-top: 1px solid var(--border-color); }
.prompt-variant-row { display: grid; grid-template-columns: 34px minmax(190px, 1fr) minmax(120px, auto) auto auto; gap: 10px; align-items: center; min-height: 62px; padding: 7px 8px; border-bottom: 1px solid #f1f5f9; }
.prompt-variant-row:last-child { border-bottom: 0; }
.prompt-variant-row:hover { background: #fafafa; }
.prompt-variant-row.is-active { background: #f0fdf4; }
.prompt-version-icon { display: grid; place-items: center; width: 32px; height: 32px; color: #7c3aed; background: #f5f3ff; border-radius: 8px; }
.prompt-version-icon i { width: 16px; }
.prompt-row-actions { display: flex; justify-content: flex-end; gap: 3px; }
.prompt-row-actions form { display: contents; }
.publish-action { color: #047857; }
.lab-test-action { color: #7c3aed; }
.compact-empty { min-height: 110px; padding: 20px; }
.prompt-dialog { width: min(900px, calc(100vw - 32px)); }
.prompt-dialog-body { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; }
.prompt-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.prompt-editor-field textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55; }
.prompt-advanced-panel { background: #f8fafc; border: 1px solid var(--border-color); border-radius: 10px; }
.prompt-advanced-panel > summary { display: flex; align-items: center; gap: 7px; padding: 10px 12px; color: var(--text-muted); cursor: pointer; font-size: 12px; font-weight: 700; }
.prompt-advanced-panel > summary i { width: 15px; }
.editorial-domain-tree { display: flex; flex-direction: column; gap: 10px; }
.editorial-types-body { padding-left: 80px; }
.editorial-type-item { display: grid; grid-template-columns: 24px 38px minmax(180px, 1fr) auto auto; gap: 10px; align-items: center; min-height: 60px; padding: 7px 8px; color: inherit; text-decoration: none; border-radius: 9px; }
.editorial-type-item:hover { background: #f8fafc; }
.editorial-type-item.is-inactive { opacity: .65; }
.open-structure-label { display: inline-flex; align-items: center; gap: 5px; color: var(--primary-hover); font-size: 11px; font-weight: 700; }
.open-structure-label i { width: 14px; }
.dialog-two-fields { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 12px; }
.dialog-two-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.editorial-structure-tree { display: flex; flex-direction: column; gap: 10px; }
.editorial-structure-tree .structure-tree-section { overflow: hidden; background: #fff; border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--shadow-sm); }
.editorial-structure-tree .structure-tree-section[open] { border-color: #bae6fd; box-shadow: var(--shadow-md); }
.editorial-structure-tree .structure-tree-section.is-inactive, .content-tree-node.is-inactive, .phraseology-tree-item.is-inactive { opacity: .65; }
.editorial-structure-tree .structure-tree-section > summary { display: grid; grid-template-columns: 24px 42px minmax(200px, 1fr) auto auto auto; gap: 13px; align-items: center; min-height: 76px; padding: 11px 17px; cursor: pointer; list-style: none; }
.editorial-structure-tree .structure-tree-section > summary::-webkit-details-marker, .content-tree-node > summary::-webkit-details-marker { display: none; }
.editorial-structure-tree .structure-tree-section[open] > summary .branch-chevron, .content-tree-node[open] > summary .branch-chevron { transform: rotate(90deg); }
.editorial-structure-tree .structure-tree-body { display: flex; flex-direction: column; gap: 7px; padding: 0 17px 17px 78px; border-top: 1px solid var(--border-color); }
.content-tree-node { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 10px; }
.content-tree-node > summary { display: grid; grid-template-columns: 22px 32px minmax(180px, 1fr) auto auto; gap: 10px; align-items: center; min-height: 58px; padding: 7px 10px; cursor: pointer; list-style: none; }
.content-tree-node > summary:hover { background: #f8fafc; }
.content-node-icon { display: grid; place-items: center; width: 30px; height: 30px; color: #7c3aed; background: #f5f3ff; border-radius: 7px; }
.content-node-icon i { width: 15px; }
.phraseology-tree-list { display: flex; flex-direction: column; gap: 5px; padding: 7px 10px 10px 63px; background: #fafafa; border-top: 1px solid var(--border-color); }
.phraseology-tree-item { display: grid; grid-template-columns: 20px minmax(180px, 1fr) auto 34px; gap: 8px; align-items: center; min-height: 46px; padding: 5px 7px; background: #fff; border: 1px solid #f1f5f9; border-radius: 8px; }
.phraseology-tree-item > i { width: 15px; color: #94a3b8; }
.phraseology-tree-item > span { font-size: 12px; }
.phraseology-tree-item > small { color: var(--text-muted); font-size: 9px; }
.tree-empty { padding: 16px; color: var(--text-muted); font-size: 12px; text-align: center; }
.lab-test-fragment { padding: 16px; color: #334155; background: #f8fafc; border-left: 4px solid #8b5cf6; border-radius: 0 10px 10px 0; white-space: pre-wrap; }
.lab-test-alternatives { display: flex; flex-direction: column; gap: 10px; }
.lab-test-alternatives article { padding: 14px 16px; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 10px; }
.lab-test-alternatives article strong { color: #4c1d95; }
.lab-test-alternatives article p { margin-top: 5px; color: #475569; font-size: 12px; }
.lab-test-alternatives article small { color: #7c3aed; font-size: 10px; }
.lab-interaction-id { color: var(--text-muted); font-size: 11px; text-align: right; }
/* --- API Dashboard: pestañas reales --- */
.api-ops-page .api-tabs { position: sticky; top: 70px; z-index: 5; display: flex; gap: 4px; margin: 0 0 18px; padding: 5px; overflow-x: auto; background: rgba(255,255,255,.94); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); }
.api-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; color: var(--text-muted); border-radius: 8px; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.api-tab i { width: 15px; height: 15px; }
.api-tab:hover { color: var(--primary-hover); background: var(--primary-light); }
.api-tab.is-active { color: var(--primary); background: var(--primary-light); box-shadow: inset 0 -2px 0 var(--primary); }
.period-switcher { white-space: nowrap; }
.api-panel { display: flex; flex-direction: column; gap: 14px; }

/* KPIs con tendencia */
.ops-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: #fff; border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--shadow-sm); }
.kpi-label { color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.kpi-value { font: 700 27px/1 var(--font-heading); color: #0f172a; }
.kpi-value em { font: 500 14px var(--font-body); font-style: normal; color: var(--text-muted); }
.kpi-trend { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.kpi-trend i { width: 14px; height: 14px; }
.kpi-trend small { color: var(--text-muted); font-weight: 500; }
.kpi-trend.is-good { color: #047857; }
.kpi-trend.is-bad { color: #b91c1c; }
.kpi-trend.is-flat { color: var(--text-muted); }

/* Gráfico diario */
.daily-chart-card .daily-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 8px 4px 0; }
.daily-bar { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 14px; height: 100%; }
.daily-bar-fill { width: min(28px, 78%); min-height: 5px; background: linear-gradient(180deg, #38bdf8, #0284c7); border-radius: 6px 6px 3px 3px; transition: filter .15s; }
.daily-bar:hover .daily-bar-fill { filter: brightness(1.08); }
.daily-bar-count { margin-top: 5px; color: #0f172a; font-size: 10px; font-weight: 700; }
.daily-bar small { margin-top: 2px; color: var(--text-muted); font-size: 10px; }

/* Rank lists con barra de proporción */
.ops-rank-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rank-list { display: flex; flex-direction: column; gap: 4px; }
.rank-row { display: grid; grid-template-columns: minmax(0,1fr) 64px 34px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #f1f5f9; font-size: 12px; }
.rank-row:last-child { border-bottom: 0; }
.rank-name { overflow: hidden; color: #334155; text-overflow: ellipsis; white-space: nowrap; }
.rank-meter { height: 6px; background: #eef2f7; border-radius: 4px; overflow: hidden; }
.rank-meter b { display: block; height: 100%; background: linear-gradient(90deg, #7dd3fc, #0ea5e9); border-radius: 4px; }
.rank-value { font-weight: 700; text-align: right; color: #0f172a; }

/* Reglas a ancho completo */
.rules-toolbar { padding: 0 0 12px; }
.rules-search { display: flex; align-items: center; gap: 8px; max-width: 360px; padding: 8px 12px; background: #f8fafc; border: 1px solid var(--border-color); border-radius: 9px; }
.rules-search i { width: 16px; height: 16px; color: var(--text-muted); }
.rules-search input { flex: 1; border: 0; background: transparent; font-size: 13px; outline: none; }
.rule-list { display: flex; flex-direction: column; }
.rule-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 4px; border-bottom: 1px solid #f1f5f9; }
.rule-item:last-of-type { border-bottom: 0; }
.rule-item:hover { background: #f8fafc; }
.rule-item .switch-label { min-width: 58px; font-size: 12px; color: var(--text-muted); }
.rules-empty { padding: 20px; }

/* Linguistic rule catalog */
.linguistic-catalog-page { max-width: 1180px; }
.rules-hero { align-items: center; background: linear-gradient(135deg,#fff 0%,#f8fbff 100%); }
.rules-hero-copy { max-width: 650px; }
.rules-language-context { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 390px; }
.rules-language-context label { display: flex; flex-direction: column; gap: 5px; color: #64748b; font-size: 11px; font-weight: 700; }
.rules-language-context select { min-height: 42px; padding: 8px 34px 8px 11px; color: #0f172a; background: #fff; border: 1px solid #cbd5e1; border-radius: 9px; font: 650 13px var(--font-body); cursor: pointer; }
.rules-language-context select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,.12); outline: 0; }
.rules-overview { display: grid; grid-template-columns: 190px 190px minmax(280px,1fr); gap: 10px; }
.rules-overview article,.rules-overview>p { display: flex; align-items: center; gap: 11px; min-height: 70px; padding: 12px 15px; background: #fff; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-sm); }
.rules-overview article>span:last-child { display: flex; flex-direction: column; }
.rules-overview strong { color: #0f172a; font-size: 17px; }
.rules-overview small { margin-top: 2px; color: #64748b; font-size: 10.5px; }
.overview-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; color: #0369a1; background: #e0f2fe; border-radius: 9px; }
.overview-icon.is-neutral { color: #6d28d9; background: #f5f3ff; }
.overview-icon i { width: 18px; }
.rules-overview>p { color: #475569; background: #f8fafc; box-shadow: none; font-size: 11.5px; line-height: 1.45; }
.rules-overview>p>i { flex: 0 0 17px; width: 17px; color: var(--primary); }
.rules-workspace { overflow: hidden; background: #fff; border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow-sm); }
.rules-section-tabs { display: flex; gap: 4px; padding: 8px 8px 0; background: #f8fafc; border-bottom: 1px solid var(--border-color); }
.rules-section-tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 17px; color: #64748b; background: transparent; border: 0; border-radius: 9px 9px 0 0; font: 650 13px var(--font-body); cursor: pointer; }
.rules-section-tabs button:hover { color: #0369a1; background: #f0f9ff; }
.rules-section-tabs button.is-active { color: #0369a1; background: #fff; box-shadow: 0 -1px 0 var(--border-color),1px 0 0 var(--border-color),-1px 0 0 var(--border-color); }
.rules-section-tabs button.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ''; background: #fff; }
.rules-section-tabs i { width: 17px; }
.rules-section-tabs b { min-width: 23px; padding: 2px 6px; color: #475569; background: #e2e8f0; border-radius: 999px; font-size: 10px; }
.rules-section-tabs .is-active b { color: #0369a1; background: #e0f2fe; }
.rules-workspace>.rules-toolbar { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border-color); }
.rules-search-field { position: relative; flex: 1; max-width: 430px; }
.rules-search-field>i { position: absolute; top: 50%; left: 12px; width: 16px; color: #94a3b8; transform: translateY(-50%); }
.rules-search-field input { width: 100%; min-height: 40px; padding: 8px 12px 8px 38px; border: 1px solid #cbd5e1; border-radius: 9px; font: 13px var(--font-body); outline: 0; }
.rules-search-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,.1); }
.rules-state-filter { display: flex; gap: 3px; padding: 3px; background: #f1f5f9; border-radius: 9px; }
.rules-state-filter button { padding: 6px 10px; color: #64748b; background: transparent; border: 0; border-radius: 7px; font: 650 11px var(--font-body); cursor: pointer; }
.rules-state-filter button.is-active { color: #0f172a; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.rules-visible-count { margin-left: auto; color: #64748b; font-size: 11px; white-space: nowrap; }
.rule-catalog-panel { padding: 0 18px 20px; }
.rule-panel-intro { display: flex; align-items: center; justify-content: space-between; padding: 17px 2px 11px; }
.rule-panel-intro h2 { color: #0f172a; font-size: 16px; }
.rule-panel-intro p { margin-top: 2px; color: #64748b; font-size: 11.5px; }
.linguistic-rule-list { display: flex; flex-direction: column; gap: 7px; }
.linguistic-rule-card { display: grid; grid-template-columns: 42px minmax(0,1fr) 190px; gap: 13px; align-items: center; min-height: 98px; padding: 13px 14px; border: 1px solid #e2e8f0; border-radius: 12px; transition: border-color .15s,box-shadow .15s,opacity .15s; }
.linguistic-rule-card:hover { border-color: #bae6fd; box-shadow: 0 5px 18px rgba(15,23,42,.055); }
.linguistic-rule-card.is-inactive { background: #fafafa; }
.linguistic-rule-card[hidden] { display: none; }
.rule-card-icon { display: grid; place-items: center; align-self: start; width: 40px; height: 40px; color: #0369a1; background: #e0f2fe; border-radius: 10px; }
.rule-card-icon.is-metric { color: #6d28d9; background: #f5f3ff; }
.rule-card-icon i { width: 19px; }
.is-inactive .rule-card-icon { color: #64748b; background: #e2e8f0; }
.rule-card-copy { min-width: 0; }
.rule-card-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.rule-card-heading h3 { color: #0f172a; font: 700 14px/1.3 var(--font-heading); }
.rule-category { padding: 2px 7px; color: #475569; background: #f1f5f9; border-radius: 999px; font-size: 9.5px; text-transform: capitalize; }
.rule-card-copy>p { display: -webkit-box; margin-top: 5px; overflow: hidden; color: #475569; font-size: 11.5px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rule-card-meta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 8px; color: #64748b; font-size: 9.5px; }
.rule-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.rule-card-meta i { width: 12px; }
.rule-card-meta .is-warning { color: #a16207; }
.rule-card-actions { display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding-left: 13px; border-left: 1px solid #f1f5f9; }
.rule-status-switch { display: flex; align-items: center; gap: 9px; min-height: 38px; cursor: pointer; }
.rule-status-copy { display: flex; flex-direction: column; }
.rule-status-copy strong { color: #047857; font-size: 11.5px; }
.rule-status-copy small { color: #64748b; font-size: 9px; }
.is-inactive .rule-status-copy strong { color: #64748b; }
.rule-edit-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; color: #0369a1; background: #fff; border: 1px solid #bae6fd; border-radius: 8px; font: 650 10.5px var(--font-body); cursor: pointer; }
.rule-edit-button:hover { background: #f0f9ff; }
.rule-edit-button i { width: 14px; }
.rules-empty-state { padding: 55px 20px; color: #64748b; text-align: center; }
.rules-empty-state i { width: 30px; margin-bottom: 8px; color: #94a3b8; }
.rules-empty-state h3 { color: #334155; font-size: 15px; }
.rules-empty-state p { margin-top: 3px; font-size: 11.5px; }
.rule-editor-dialog { width: min(720px,calc(100vw - 32px)); }
.rule-editor-summary { display: flex; align-items: center; gap: 9px; padding: 11px 24px; color: #64748b; background: #f8fafc; border-bottom: 1px solid var(--border-color); font-size: 10.5px; text-transform: capitalize; }
.rule-editor-summary code { margin-left: auto; font-size: 9.5px; text-transform: none; }
.rule-editor-fields textarea { resize: vertical; line-height: 1.45; }
.rule-editor-fields label>small { line-height: 1.35; }
/* Las dos pestañas del diálogo de una regla: la ficha de la métrica y el texto
   que lee el usuario. Son excluyentes a propósito —las dos tienen un «resumen»
   y unos «ejemplos», y verlas a la vez es lo que invita a editar la
   equivocada— y cada una lleva encima un rótulo que dice dónde sale su texto. */
.rule-editor-tabs { display: flex; gap: 4px; padding: 0 24px; background: #f8fafc; border-bottom: 1px solid var(--border-color); }
.rule-editor-tabs button { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; color: #64748b; background: transparent; border: 0; font: 650 12.5px var(--font-body); cursor: pointer; }
.rule-editor-tabs button i { width: 15px; }
.rule-editor-tabs button:hover { color: #0369a1; }
.rule-editor-tabs button.is-active { color: #0369a1; box-shadow: inset 0 -2px 0 #0369a1; }
.rule-editor-panel[hidden] { display: none; }
.rule-editor-scope { display: flex; align-items: flex-start; gap: 8px; margin: 16px 24px 0; padding: 10px 12px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; font-size: 11.5px; line-height: 1.45; }
.rule-editor-scope.is-copy { color: #075985; background: #f0f9ff; border-color: #bae6fd; }
.rule-editor-scope i { flex: none; width: 15px; }
.copy-selectors { display: flex; flex-direction: column; gap: 8px; padding: 16px 24px 0; }
.copy-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.copy-tabs-label { min-width: 118px; color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.copy-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; color: #475569; background: #f1f5f9; border: 1px solid transparent; border-radius: 999px; font: 650 12px var(--font-body); cursor: pointer; }
.copy-tabs button i { width: 14px; }
.copy-tabs button:hover { color: #0369a1; background: #e0f2fe; }
.copy-tabs button.is-active { color: #0369a1; background: #e0f2fe; border-color: #7dd3fc; }
.copy-panel[hidden] { display: none; }
.copy-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 15px 24px 0; }
.copy-state small { color: #64748b; font-size: 11.5px; }
.status-pill.is-warning { color: #b45309; background: #fef3c7; }
.status-pill.is-draft { color: #6d28d9; background: #f3e8ff; }
/* Sin fila propia el campo va vacío y el texto del código queda de marca de
   agua: en cursiva y en gris para que no se confunda con algo ya escrito. */
.copy-fields textarea::placeholder { color: #94a3b8; font-style: italic; }
.copy-placeholders { display: flex; align-items: flex-start; gap: 7px; color: #64748b; font-size: 11.5px; line-height: 1.5; }
.copy-placeholders i { flex: none; width: 14px; }
.copy-placeholders code { padding: 1px 5px; background: #f1f5f9; border-radius: 5px; }
.copy-code-reference { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 9px; }
.copy-code-reference>summary { display: flex; align-items: center; gap: 7px; padding: 10px 12px; color: #475569; background: #f8fafc; font-size: 11.5px; font-weight: 700; cursor: pointer; list-style: none; }
.copy-code-reference>summary::-webkit-details-marker { display: none; }
.copy-code-reference>summary i { width: 15px; color: #64748b; }
.copy-code-reference>div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px; color: #475569; border-top: 1px solid #e2e8f0; font-size: 12.5px; line-height: 1.5; }
.rule-technical-fields { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 9px; }
.rule-technical-fields>summary { display: flex; align-items: center; gap: 7px; padding: 11px 12px; color: #475569; background: #f8fafc; font-size: 11.5px; font-weight: 700; cursor: pointer; list-style: none; }
.rule-technical-fields>summary::-webkit-details-marker { display: none; }
.rule-technical-fields>summary i { width: 15px; color: #64748b; }
.rule-technical-fields>div { display: flex; flex-direction: column; gap: 16px; padding: 15px; border-top: 1px solid #e2e8f0; }
.rule-technical-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; }
.rule-technical-fields p { color: #64748b; font-size: 10px; }
.code-field { font: 10.5px/1.45 monospace !important; }

@media(max-width:800px){.rules-hero{align-items:stretch;flex-direction:column}.rules-language-context{min-width:0}.rules-overview{grid-template-columns:1fr 1fr}.rules-overview>p{grid-column:1/-1}.linguistic-rule-card{grid-template-columns:38px minmax(0,1fr)}.rule-card-actions{grid-column:2;padding:9px 0 0;border-top:1px solid #f1f5f9;border-left:0;flex-direction:row}.rule-card-actions>*{flex:1}.rules-workspace>.rules-toolbar{flex-wrap:wrap}.rules-search-field{max-width:none;flex-basis:100%}.rules-visible-count{display:none}}
@media(max-width:520px){.rules-language-context,.rules-overview{grid-template-columns:1fr}.rules-overview>p{grid-column:auto}.rules-section-tabs button{flex:1;justify-content:center;padding:0 8px}.rules-section-tabs button span{font-size:11px}.rule-catalog-panel{padding-right:10px;padding-left:10px}.linguistic-rule-card{padding:11px 9px}.rule-card-actions{flex-direction:column}.rule-card-meta{gap:6px}.rules-state-filter{width:100%}.rules-state-filter button{flex:1}}

/* Actividad */
.ops-event-list { display: flex; flex-direction: column; }
.ops-event-row { display: grid; grid-template-columns: 20px 48px minmax(200px,1fr) 75px 36px; gap: 10px; align-items: center; min-height: 58px; padding: 7px 8px; border-bottom: 1px solid #f1f5f9; }
.ops-event-row:hover { background: #f8fafc; }
.event-duration { font-size: 12px; color: var(--text-muted); text-align: right; }
.http-status { padding: 3px 5px; text-align: center; border-radius: 5px; font: 700 10px monospace; }
.status-2xx { color:#047857;background:#ecfdf5 }.status-4xx,.status-5xx { color:#b91c1c;background:#fef2f2 }.status-3xx { color:#b45309;background:#fffbeb }

/* Configuración */
.retention-form { display:grid;grid-template-columns:minmax(180px,1fr) 130px auto;gap:12px;align-items:end }
.danger-card { border-color: #fed7aa; }
.danger-action-bar { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#fff7ed;border-radius:10px;color:#9a3412;font-size:12px }
.danger-action-bar form { margin: 0; }

.api-key-reveal { display:flex;align-items:center;gap:14px;padding:14px 18px;color:#065f46;background:#ecfdf5;border:1px solid #6ee7b7;border-radius:12px }
.api-key-reveal > i { width:24px }.api-key-reveal > div { display:flex;flex:1;flex-direction:column }.api-key-reveal code { margin-top:4px;padding:5px 8px;overflow-wrap:anywhere;background:#fff;border-radius:6px }
/* Claves de una cuenta de integración: sangradas bajo su cuenta para que se lea
   que pertenecen a ella y que puede haber varias vivas a la vez. */
.api-key-list { display:flex;flex-direction:column;gap:6px;padding:4px 18px 14px 68px;border-bottom:1px solid #f1f5f9 }
.api-key-row { display:flex;align-items:center;gap:10px;padding:6px 10px;background:#f8fafc;border-radius:8px }
.api-key-row.is-inactive { opacity:.55 }
.api-key-row .item-name { display:flex;flex:1;flex-direction:column }
.api-key-new { display:flex;align-items:center;gap:8px }
.api-key-new input { min-height:32px;padding:4px 10px;border:1px solid var(--border-color);border-radius:8px;font-size:12px }

/* Formularios de autenticación: pista bajo el campo y error por campo. El error
   lo pinta `field_error()` (app/web/deps.py), igual en las tres fases. */
.field-hint { color:var(--text-muted);font-size:11px }
.field-error { display:flex;align-items:center;gap:6px;margin-top:4px;color:#b42318;font-size:12px }
.field-error i { width:14px;height:14px }
.login-help { margin-top:14px;text-align:center;font-size:13px }
.notice-message { display:flex;align-items:center;gap:8px;padding:12px 14px;color:#065f46;background:#ecfdf5;border:1px solid #6ee7b7;border-radius:10px;font-size:13px }
.auth-detail { display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin-top:12px;font-size:12px }
.auth-detail dt { color:var(--text-muted) }

.trace-payload { max-height:420px;padding:14px;overflow:auto;background:#0f172a;color:#e2e8f0;border-radius:10px;font-size:11px;white-space:pre-wrap }
.trace-timeline { display:flex;flex-direction:column;gap:9px }.trace-timeline article { display:grid;grid-template-columns:24px minmax(180px,1fr) minmax(200px,1fr);gap:10px;align-items:start;padding:10px;border-left:2px solid #bae6fd }.trace-timeline i { width:17px;color:#0ea5e9 }.trace-timeline span { display:flex;flex-direction:column }.trace-timeline small { color:var(--text-muted);font-size:10px }.trace-timeline code { font-size:10px;overflow-wrap:anywhere }
@media(max-width:768px){.ops-kpis{grid-template-columns:1fr 1fr}.ops-rank-grid{grid-template-columns:1fr}.ops-event-row{grid-template-columns:18px 44px minmax(0,1fr) 32px}.ops-event-row>.event-duration{display:none}.retention-form{grid-template-columns:1fr}.danger-action-bar{align-items:stretch;flex-direction:column}.rule-item{flex-wrap:wrap;gap:8px}.trace-timeline article{grid-template-columns:20px 1fr}.trace-timeline code{grid-column:2}}

@media (max-width: 768px) {
  .admin-header-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .admin-header-actions .language-switcher { justify-content: space-between; }
  .glossary-section-heading { align-items: flex-start; flex-direction: column; }
  .hierarchy-hint { display: none; }
  .glossary-branch > summary { grid-template-columns: 20px 38px minmax(0, 1fr) auto; gap: 9px; min-height: 70px; padding: 10px 12px; }
  .branch-count { grid-column: 3; min-width: 0; text-align: left; }
  .branch-count span { display: inline; }
  .glossary-branch > summary > .status-pill { display: none; }
  .branch-actions { grid-column: 4; grid-row: 1 / span 2; }
  .branch-actions .icon-action:first-child { display: none; }
  .branch-body { padding: 0 10px 12px 34px; }
  .glossary-item { grid-template-columns: 20px minmax(0, 1fr) 34px; }
  .glossary-item > .status-pill { display: none; }
  .simple-glossary-item { grid-template-columns: 34px minmax(0, 1fr) 34px; padding: 8px 12px; }
  .simple-glossary-item > .status-pill { display: none; }
  .prompt-lab-overview { grid-template-columns: 1fr 1fr; }
  .lab-model-pool { grid-column: 1 / -1; }
  .prompt-rule-branch > summary { grid-template-columns: 20px 36px minmax(0, 1fr) 34px; gap: 8px; padding: 10px; }
  .prompt-rule-branch > summary .branch-count, .prompt-rule-branch > summary .status-pill { display: none; }
  .prompt-rule-body { padding: 6px 8px 10px 34px; }
  .prompt-variant-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .prompt-variant-row .model-chip, .prompt-variant-row > .status-pill { display: none; }
  .prompt-row-actions { grid-column: 2 / -1; }
  .prompt-form-grid { grid-template-columns: 1fr; }
  .editorial-types-body { padding-left: 34px; }
  .editorial-type-item { grid-template-columns: 20px 34px minmax(0, 1fr) 30px; }
  .editorial-type-item > .status-pill { display: none; }
  .open-structure-label { font-size: 0; }
  .structure-tree-section > summary { grid-template-columns: 20px 36px minmax(0, 1fr) 34px; gap: 8px; padding: 10px; }
  .structure-tree-section > summary .branch-count, .structure-tree-section > summary .status-pill { display: none; }
  .structure-tree-body { padding: 0 8px 10px 34px; }
  .content-tree-node > summary { grid-template-columns: 18px 30px minmax(0, 1fr) auto; }
  .content-tree-node > summary .branch-count { display: none; }
  .phraseology-tree-list { padding-left: 34px; }
  .phraseology-tree-item { grid-template-columns: 18px minmax(0, 1fr) 32px; }
  .phraseology-tree-item > small { display: none; }
  .dialog-header, .dialog-fields, .dialog-footer { padding-left: 18px; padding-right: 18px; }
  .dialog-footer.split { grid-template-columns: auto 1fr auto; }
  .dialog-footer.split > span { display: none; }
  .dialog-footer.split .ghost-button:not(.delete-btn) { display: none; }
}

/* ==========================================================
   RESPONSIVE LAYOUT MEDIA QUERIES
   ========================================================== */
@media (max-width: 1200px) {
  .workspace-grid {
    grid-template-columns: 1fr;
  }
  
  .analysis-form-card {
    position: static;
  }
  
  /* Stacked layout: read top-to-bottom like a normal page again instead of
     two bounded panes, so nothing gets clipped without a scrollbar. */
  .shell:has(.analysis-results) {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .report-workspace {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }

  .text-preview-card,
  .suggestions-card {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 768px) {
  .shell {
    padding: 16px;
  }
  
  .topbar {
    padding: 0 16px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .result-metrics {
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
  }
  .result-metrics .metric-chip {
    flex: 1 1 40%;
    justify-content: center;
  }
  .result-metrics .metric-chip:nth-child(odd) {
    border-left: 0;
  }
  .result-metrics .metric-chip:nth-child(n + 3) {
    border-top: 1px solid var(--border-color);
  }

  .api-grid {
    grid-template-columns: 1fr;
  }
  
  .login-card {
    padding: 24px;
  }

  .admin-header,
  .admin-search,
  .entry-form,
  .entry-row,
  .connector-category-form,
  .connector-category-row,
  .connector-category-edit,
  .connector-inline-create,
  .connector-entry-form,
  .connector-nested-row,
  .connector-row,
  .connector-search {
    grid-template-columns: 1fr;
  }

  .filter-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-header {
    flex-direction: column;
  }

  .analysis-form-card.is-collapsed { min-height: 62px; padding: 10px 12px; }
  .analysis-config-summary { gap: 8px; }
  .analysis-config-summary > .status-pill { display: none; }
  .config-summary-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .config-edit-button span { display: none; }
  .config-edit-button { width: 38px; padding: 0; }

  .result-header {
    align-items: stretch;
    flex-direction: column;
  }

  .pdf-download-btn {
    width: 100%;
  }
}

/* Shared editor layout elements */
.text-type-admin-row,
.editor-output-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.editor-document-card,
.editor-preview-card {
  color: inherit;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.text-type-admin-row:hover {
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.editor-structure-panel h1,
.structure-head h1 {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.2;
}


.text-type-admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 12px 14px;
  color: var(--text-main);
  text-decoration: none;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  transition: var(--transition-smooth);
}

.text-type-admin-row i:first-child {
  color: var(--primary);
}


.structure-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.structure-head-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.structure-head-top .back-link {
  margin-bottom: 0;
  min-height: 34px;
}

.structure-close-btn {
  flex: 0 0 auto;
  color: var(--text-muted);
  background: #f8fafc;
  border-color: var(--border-color);
}

.structure-close-btn:hover {
  color: var(--text-main);
  background: #eef6ff;
  border-color: rgba(14, 165, 233, 0.25);
}

.structure-head h1 {
  margin-top: 18px;
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.15;
}

.structure-head p {
  color: var(--text-muted);
}

.structure-list,
.editor-suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}

.editor-suggestion-list {
  flex: 1 1 auto;
  padding: 4px 4px 4px 0;
  overscroll-behavior: contain;
}

.editor-suggestion-list .category-section,
.editor-suggestion-list .suggestion-item {
  flex: 0 0 auto;
}

.editor-suggestion-list .suggestion-summary-btn {
  min-height: 64px;
}

.structure-list {
  flex: 1 1 auto;
  padding-top: 16px;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.structure-section {
  flex: 0 0 auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #f8fafc;
  overflow: hidden;
}

.structure-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.25;
  list-style: none;
}

.structure-section summary span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.structure-section summary i {
  flex: 0 0 auto;
}

.structure-content {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #ffffff;
  border-top: 1px solid var(--border-color);
}

.structure-content > span {
  color: var(--text-muted);
  font-size: 12px;
}

.phraseology-btn {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  color: #24415f;
  text-align: left;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  cursor: pointer;
}

.phraseology-btn i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--primary);
}

.phraseology-btn span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* El explorador de estructura en tres columnas se retiró: el carril izquierdo
   usa el árbol de compact_workspace.css. Aquí solo queda lo que sigue vivo. */
.structure-insert-action { display: grid; width: 32px; height: 32px; align-self: center; place-items: center; border: 1px solid #bae6fd; border-radius: 8px; color: var(--primary-hover); background: white; cursor: pointer; }.structure-insert-action:hover { color: white; border-color: var(--primary); background: var(--primary); }.structure-insert-action svg { width: 14px; }
.structure-empty { padding: 18px 10px; color: var(--text-muted); font-size: 12px; line-height: 1.5; text-align: center; }

.editor-main-panel {
  grid-area: editor;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.agent-editor-frame {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - 112px);
  padding: 0 0 20px;
}

.editor-workbar {
  position: sticky;
  top: 0;
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: min(100%, 1120px);
  margin: 0 auto 14px;
}

.agent-mode-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 16px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}

.editor-workbar .agent-mode-switch {
  grid-column: 2;
  margin: 0;
}

.agent-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 13px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.agent-mode-btn i {
  width: 18px;
  height: 18px;
}

.agent-mode-btn:hover,
.agent-mode-btn.is-active {
  color: var(--text-main);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.editor-toolbar {
  position: sticky;
  top: 66px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: min(100%, 1120px);
  min-height: 58px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border-color);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  overflow-x: auto;
  scrollbar-width: thin;
}

.toolbar-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 3px;
  padding: 0 4px;
}

.toolbar-separator {
  flex: 0 0 auto;
  width: 1px;
  height: 28px;
  margin: 0 2px;
  background: var(--border-color);
}

.editor-analyze-btn {
  flex: 0 0 auto;
  grid-column: 3;
  justify-self: end;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 15px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.24);
}

.editor-analyze-btn i {
  width: 20px;
  height: 20px;
}

.icon-tool {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 34px;
  color: #475569;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.icon-tool:hover {
  color: var(--text-main);
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.icon-tool i {
  width: 18px;
  height: 18px;
}

.editor-format-select {
  min-width: 72px;
  height: 34px;
  padding: 0 28px 0 12px;
  color: #4f46e5;
  background: #f8fafc;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.editor-format-select:focus {
  outline: 2px solid rgba(14, 165, 233, 0.25);
  outline-offset: 1px;
}

.editor-zoom-label {
  min-width: 48px;
  color: #475569;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
}

.compact-check {
  flex: 0 0 auto;
  min-height: 38px;
  white-space: nowrap;
}

.editor-document-card {
  display: flex;
  flex-direction: column;
  width: min(100%, 1120px);
  flex: 1;
  min-height: 0;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.editor-document-card {
  min-height: calc(100vh - 260px);
}

.document-status-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  color: var(--text-muted);
  font-size: 12px;
  border-bottom: 1px solid var(--border-color);
  background: #fbfdff;
}

.document-status-line [data-editor-dirty] {
  color: var(--warning);
  font-weight: 700;
}

.rich-editor-surface {
  --editor-zoom: 1;
  flex: 1;
  min-height: calc(100vh - 330px);
  padding: 46px 64px 132px;
  overflow-y: auto;
  color: #1f3147;
  background: #ffffff;
  font-size: 18px;
  line-height: 1.8;
  outline: none;
}

.rich-editor-content {
  min-height: 100%;
  font-size: calc(18px * var(--editor-zoom, 1));
  line-height: 1.8;
  outline: none;
}

.rich-editor-content {
  max-width: 760px;
  margin: 0 auto;
}

.rich-editor-content > *:first-child {
  margin-top: 0;
}

.rich-editor-content h1,
.rich-editor-content h2,
.rich-editor-content h3 {
  margin: 1.35em 0 0.65em;
  color: var(--text-main);
  font-family: var(--font-heading);
  line-height: 1.2;
}

.rich-editor-content h1 {
  font-size: 1.8em;
}

.rich-editor-content h2 {
  font-size: 1.45em;
}

.rich-editor-content h3 {
  font-size: 1.2em;
}

.rich-editor-surface p,
.rich-editor-content p,
.highlighted-text p {
  margin-bottom: 1em;
}

.agent-command-bar {
  position: sticky;
  bottom: 18px;
  z-index: 14;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(720px, calc(100% - 48px));
  min-height: 58px;
  margin-top: -88px;
  padding: 8px 10px 8px 16px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(14px);
}

.agent-command-bar > i {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.agent-command-bar input {
  flex: 1;
  min-width: 0;
  height: 42px;
  color: var(--text-main);
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
}

.agent-run-btn {
  flex: 0 0 auto;
  color: #ffffff;
  background: var(--text-main);
  border-color: var(--text-main);
}

.suggestion-actions-state {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 34px 20px;
  color: var(--text-muted);
  text-align: center;
  background: #f8fafc;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
}

.suggestion-actions-state i {
  color: var(--primary);
}

.suggestion-actions-state h3 {
  color: var(--text-main);
}

.layer-filter-panel {
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.layer-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.layer-filter-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.layer-filter-head i {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

.layer-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.layer-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 9px;
  color: #475569;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.layer-filter-chip:hover {
  color: var(--text-main);
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}

.layer-filter-chip.is-active {
  color: #075985;
  background: #e0f2fe;
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.12);
}

.layer-filter-chip small {
  min-width: 19px;
  padding: 1px 6px;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.layer-filter-chip.is-active small {
  color: #0369a1;
  background: rgba(255, 255, 255, 0.75);
}

.layer-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
}

.layer-dot-discourse { background: var(--color-discourse); }
.layer-dot-lexical { background: var(--color-lexical); }
.layer-dot-morphosyntax { background: var(--color-morphosyntax); }
.layer-dot-acronyms { background: var(--color-acronyms); }
.layer-dot-general { background: var(--primary); }

.editor-json-output {
  flex: 0 0 auto;
  max-height: 320px;
  overflow: auto;
  padding: 14px;
  color: #dbeafe;
  background: #0b1329;
  border-radius: 10px;
  font-size: 12px;
}

.editor-suggestions-panel .occurrence-jump-btn,
.editor-suggestions-panel .occurrence-static-box {
  flex-wrap: wrap;
  gap: 8px;
}

.editor-suggestions-panel .replacement-box {
  flex: 1 0 100%;
  padding-left: 0;
}

.editor-hit {
  scroll-margin: 120px;
}

.text-hit.is-focused {
  animation: focusPulse 1.2s ease;
}

@keyframes focusPulse {
  0%, 100% {
    box-shadow: none;
  }
  35% {
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.22);
  }
}

/* Editorial admin */
.badge-muted {
  color: var(--text-muted);
  background: #f1f5f9;
}

.editorial-domain-list,
.editorial-structure-admin,
.structure-content-admin,
.phraseology-admin-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.editorial-domain-admin.is-inactive,
.structure-admin-card.is-inactive,
.structure-content-admin-row.is-inactive,
.phraseology-form.is-inactive {
  opacity: 0.72;
  background: #f8fafc;
}

.editorial-domain-form,
.editorial-type-create,
.editorial-structure-create,
.structure-section-form,
.structure-content-form,
.phraseology-form,
.phraseology-create,
.content-create {
  display: grid;
  gap: 12px;
  align-items: center;
}

.editorial-domain-form {
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.85fr) minmax(130px, 0.6fr) 92px 132px 112px auto;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 14px;
}

.editorial-type-create,
.editorial-structure-create,
.content-create {
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.7fr) 90px 110px auto;
}

.domain-create-form {
  background: #fff;
  border-style: dashed;
}

.domain-edit-form {
  margin-bottom: 18px;
}

.domain-create-form .primary-btn,
.domain-edit-form .ghost-button,
.editorial-type-create .secondary-btn,
.editorial-structure-create .primary-btn,
.content-create .secondary-btn {
  align-self: end;
  min-height: 42px;
}

.editorial-type-create {
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.8fr) minmax(130px, 0.6fr) 92px 112px auto;
  padding: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

.editorial-domain-admin {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.text-type-admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0;
}

.text-type-admin-row span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.text-type-admin-row code {
  margin-left: auto;
}

.editorial-type-form {
  display: grid;
  gap: 18px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 16px;
}

.admin-field,
.variables-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-field input,
.admin-field select,
.admin-field textarea,
.variables-editor textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  color: var(--text-main);
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: var(--transition-smooth);
}

.admin-field textarea,
.variables-editor textarea {
  line-height: 1.55;
  resize: vertical;
}

.admin-field input:hover,
.admin-field select:hover,
.admin-field textarea:hover,
.variables-editor textarea:hover {
  border-color: rgba(14, 165, 233, 0.45);
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus,
.variables-editor textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.admin-field small {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.ai-prompt-list {
  display: grid;
  gap: 18px;
}

.ai-prompt-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.ai-prompt-card.is-inactive {
  background: #f8fafc;
}

.ai-prompt-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ai-prompt-card-head h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
}

.ai-prompt-card-head p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.ai-prompt-form {
  display: grid;
  gap: 16px;
}

.ai-prompt-actions {
  justify-content: flex-end;
}

.inline-switch {
  justify-content: flex-end;
}

.status-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 68px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.variables-panel {
  padding: 18px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid var(--border-color);
  border-radius: 14px;
}

.variables-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.variables-panel-heading h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.25;
  color: var(--text-main);
}

.variables-panel-heading p {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 13px;
}

.metadata-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: #047857;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.18);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.variable-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
}

.variable-control {
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.advanced-json-panel {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: #fbfdff;
}

.advanced-json-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  color: var(--text-main);
  cursor: pointer;
  list-style: none;
}

.advanced-json-panel summary::-webkit-details-marker {
  display: none;
}

.advanced-json-panel summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
}

.advanced-json-panel summary i {
  width: 17px;
  height: 17px;
  color: var(--primary);
}

.advanced-json-panel summary small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.advanced-json-panel[open] {
  background: #fff;
}

.advanced-json-panel .variables-editor {
  padding: 0 16px 16px;
}

.form-actions-row {
  display: flex;
  justify-content: flex-start;
}

.variables-editor textarea {
  min-height: 130px;
  font-family: monospace;
}

.structure-section-form {
  grid-template-columns: minmax(220px, 1fr) 150px 96px 112px auto auto;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.structure-content-form {
  grid-template-columns: minmax(220px, 1fr) 150px 96px 112px auto auto;
}

.structure-content-admin-row {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.phraseology-form,
.phraseology-create {
  grid-template-columns: minmax(260px, 1fr) 96px 112px 42px 42px;
}

.phraseology-create {
  grid-template-columns: minmax(260px, 1fr) 96px 112px auto;
  padding: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

.phraseology-form textarea,
.phraseology-create textarea {
  min-height: 58px;
  resize: vertical;
}

.structure-admin-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.structure-card-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-main);
}

.structure-card-label span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.structure-card-label strong {
  font-family: var(--font-heading);
  font-size: 17px;
}

.content-label strong {
  font-size: 15px;
}

.compact-field input,
.compact-field select,
.tiny-field input {
  min-height: 38px;
}

.phrase-field textarea {
  min-height: 72px;
}

.editorial-switch {
  align-self: end;
  min-height: 38px;
}

.structure-section-form .ghost-button,
.structure-content-form .ghost-button,
.phraseology-form .ghost-button {
  align-self: end;
}

.content-create {
  padding: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

.admin-container textarea,
.admin-container input,
.admin-container select {
  width: 100%;
}

.empty-admin-state {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 220px;
  padding: 32px;
  color: var(--text-muted);
  text-align: center;
  background: #ffffff;
  border: 1px dashed var(--border-color);
  border-radius: 14px;
}

@media (max-width: 1180px) {
  .editorial-domain-form,
  .editorial-type-create,
  .editorial-structure-create,
  .structure-section-form,
  .structure-content-form,
  .phraseology-form,
  .phraseology-create,
  .content-create,
  .editorial-type-form,
  .admin-form-grid,
  .variable-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .editor-workbar {
    position: static;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }

  .editor-workbar .agent-mode-switch,
  .editor-analyze-btn {
    grid-column: 1;
  }

  .editor-toolbar {
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    top: 0;
  }

  .agent-mode-switch {
    width: 100%;
    justify-content: stretch;
    overflow-x: auto;
  }

  .agent-mode-btn {
    flex: 1 0 auto;
    justify-content: center;
  }

  .toolbar-separator {
    display: block;
  }

  .editor-analyze-btn {
    justify-self: stretch;
    width: 100%;
  }

  .rich-editor-surface {
    min-height: 480px;
    padding: 28px 24px 120px;
    font-size: 16px;
  }

  .document-status-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .agent-command-bar {
    width: calc(100% - 24px);
  }
}

/* ==========================================================
   VERTICAL PROCESSING STEPS LIST (WAITING SCREEN)
   ========================================================== */
.processing-steps-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 580px;
  margin: 32px 0 24px 0;
  text-align: left;
}

.processing-step-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  transition: var(--transition-smooth);
}

/* Status: Completed */
.processing-step-item.status-completed {
  border-color: rgba(16, 185, 129, 0.15);
  background-color: rgba(16, 185, 129, 0.02);
}

.processing-step-item.status-completed .step-indicator {
  color: var(--success);
}

.processing-step-item.status-completed h3 {
  color: var(--text-main);
  text-decoration: none;
}

/* Status: Active */
.processing-step-item.status-active {
  border-color: rgba(14, 165, 233, 0.25);
  background-color: rgba(14, 165, 233, 0.02);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.04);
}

.processing-step-item.status-active h3 {
  color: var(--primary);
  font-weight: 700;
}

/* Status: Pending */
.processing-step-item.status-pending {
  opacity: 0.55;
  border-style: dashed;
}

.processing-step-item.status-pending .step-indicator {
  color: var(--text-muted);
}

/* Step Indicator Icon sizes */
.step-indicator {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
  flex-shrink: 0;
}

.step-indicator i {
  width: 20px;
  height: 20px;
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-content h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.step-content p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 !important;
  line-height: 1.4;
}

/* Inline Circular Spinner */
.step-loader-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(14, 165, 233, 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.processing-step-item.status-active.status-queued .step-loader-spinner {
  border: 2px solid rgba(245, 158, 11, 0.2);
  border-top-color: var(--warning);
}

/* ==========================================================
   REFINED WAITING SCREEN
   ========================================================== */
.processing-state-card {
  flex: 1;
  min-height: 0;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  border-radius: 16px;
  padding: 0;
  box-shadow: var(--shadow-md);
}

.processing-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border-color);
  background-color: #fafbfc;
}

.processing-loader-container {
  margin-bottom: 0;
}

.spinner-glow-wrap {
  width: 56px;
  height: 56px;
}

.spinner-glow {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.2) 0%, rgba(14, 165, 233, 0) 70%);
}

.processing-state-queued .spinner-glow {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0) 70%);
}

.processing-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: #e0f2fe;
  border: 1px solid rgba(14, 165, 233, 0.18);
  box-shadow: none;
}

.processing-icon-wrap i {
  width: 24px;
  height: 24px;
}

.processing-icon-wrap .icon-spin,
.processing-note .icon-spin {
  animation-duration: 3.5s;
  opacity: 0.82;
}

.processing-icon-wrap.status-queued {
  background-color: #fffbeb;
  border-color: rgba(245, 158, 11, 0.22);
  box-shadow: none;
}

.processing-title-block {
  min-width: 0;
}

.processing-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 99px;
  background-color: var(--primary-light);
  color: var(--primary-hover);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.processing-state-queued .processing-kicker {
  background-color: #fffbeb;
  color: #b45309;
}

.processing-state-card h2 {
  margin: 8px 0 4px;
  font-size: 20px;
  line-height: 1.2;
}

.processing-status-text {
  max-width: 820px;
  font-size: 14px;
  line-height: 1.55;
}

.processing-steps-list {
  max-width: none;
  margin: 0;
  padding: 20px 24px 18px;
  gap: 10px;
}

.processing-step-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 15px;
  border-radius: 12px;
  background-color: var(--bg-card);
  text-align: left;
  box-shadow: none;
}

.processing-step-item.status-completed {
  border-color: rgba(16, 185, 129, 0.18);
  background-color: #ffffff;
}

.processing-step-item.status-active {
  border-color: rgba(14, 165, 233, 0.28);
  background-color: #f8fcff;
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.06);
}

.processing-step-item.status-active.status-queued {
  border-color: rgba(245, 158, 11, 0.28);
  background-color: #fffdf7;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.06);
}

.processing-step-item.status-pending {
  opacity: 1;
  border-style: solid;
  background-color: #f8fafc;
}

.step-indicator {
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding-top: 0;
  border-radius: 8px;
  background-color: #f1f5f9;
  color: var(--text-muted);
}

.processing-step-item.status-completed .step-indicator {
  background-color: #ecfdf5;
  color: var(--success);
}

.processing-step-item.status-active .step-indicator {
  background-color: #e0f2fe;
  color: var(--primary);
}

.processing-step-item.status-active.status-queued .step-indicator {
  background-color: #fffbeb;
  color: var(--warning);
}

.step-indicator i {
  width: 18px;
  height: 18px;
}

.step-content {
  gap: 3px;
  min-width: 0;
}

.step-content h3 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.processing-step-item.status-active h3 {
  color: var(--text-main);
}

.step-content p {
  font-size: 13px;
  line-height: 1.45;
}

.step-loader-spinner {
  width: 16px;
  height: 16px;
}

.processing-footer {
  display: flex;
  justify-content: flex-start;
  padding: 0 24px 22px;
}

.processing-note {
  margin-top: 0;
  background-color: #f0f9ff;
  border-color: rgba(14, 165, 233, 0.18);
  color: #0369a1;
  font-weight: 600;
}

@media (max-width: 768px) {
  .topbar-left {
    gap: 8px;
  }

  .topbar-nav {
    margin-left: 8px;
    gap: 3px;
  }

  .topbar-nav .nav-link { padding: 6px 8px; }
  .topbar-nav .nav-link span { display: none; }
  .topbar-nav .nav-switch-segment { padding: 6px 9px; }
  .topbar-nav .nav-switch-segment > span { display: none; }
  .topbar-nav .nav-dropdown-menu span { display: inline; }
  .topbar-nav .nav-dropdown-chevron { display: none; }
  .topbar-nav .nav-switch-editor-toggle .nav-dropdown-chevron { display: block; }
  .topbar-nav .nav-dropdown-menu { right: 0; left: auto; min-width: 205px; }
  .topbar-nav .nav-dropdown-menu::before { right: 17px; left: auto; }
  .topbar-nav .nav-divider { margin: 0 1px; }
  .topbar-right { gap: 6px; }
  .topbar-right .user-badge { display: none; }
  .topbar .logout-btn { width: 36px; padding: 6px; }
  .topbar .logout-btn span { display: none; }
  .context-selector--interface {
    padding: 4px;
    gap: 4px;
  }
  .context-selector--interface > i,
  .context-selector--interface > label {
    display: none;
  }
  .context-selector--interface select {
    min-width: 88px;
    max-width: 104px;
    min-height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .brand-logo-frame {
    width: 64px;
    flex-basis: 64px;
  }

  .brand-logo {
    width: 64px;
    max-width: 64px;
  }

  .brand-text {
    display: none;
  }

  .processing-head {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px;
  }

  .processing-steps-list {
    padding: 16px;
  }

  .processing-footer {
    padding: 0 16px 18px;
  }
}


/* ============================================================
   Analizador: formulario de entrada centrado (hero) y subida
   de documentos. Sustituye al layout de dos carriles con panel
   izquierdo colapsable. Estados de subida honestos.
   ============================================================ */
.analyze-hero {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 5vh, 56px) 0 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.analyze-hero-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.analyze-brand-row {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px;
}
.analyze-hero-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  color: var(--primary-hover); background: var(--primary-light);
  font: 700 12px/1 var(--font-heading); letter-spacing: .04em; text-transform: uppercase;
}
.analyze-hero-kicker i { width: 15px; height: 15px; }
.analyze-brand-divider { width: 1px; height: 26px; background: #d9e5f1; }
.analyze-claro-logo {
  display: block; width: auto; height: 50px;
  object-fit: contain;
}
.analyze-hero-head h1 { font: 700 clamp(1.6rem, 3.4vw, 2.3rem)/1.12 var(--font-heading); color: var(--text-main); letter-spacing: -.02em; }
.analyze-hero-head p { max-width: 560px; color: var(--text-muted); font-size: 15px; line-height: 1.6; }

.analyze-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 15px; border-radius: 11px;
  border: 1px solid rgba(239, 68, 68, .25); background: #fef2f2; color: #9a3030;
  font-size: 14px;
}
.analyze-alert i { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }

.analyze-card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; border: 1px solid var(--border-color); border-radius: 18px;
  background: var(--bg-card); box-shadow: var(--shadow-lg);
}
.analyze-card-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.analyze-lang { display: flex; flex-direction: column; gap: 7px; min-width: 220px; }
.analyze-lang label { font-size: 13px; font-weight: 600; color: var(--text-main); }
.analyze-select-control {
  position: relative; display: flex; align-items: center;
  min-height: 42px; border: 1px solid #cbd8e7; border-radius: 10px;
  background: #f8fafc; color: #5d7189;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.analyze-select-control:hover { border-color: #9dbbd8; background: #fff; }
.analyze-select-control:focus-within {
  border-color: var(--primary); background: #fff;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .14);
}
.analyze-select-control > svg {
  position: absolute; left: 12px; width: 17px; height: 17px;
  pointer-events: none;
}
.analyze-select-control select {
  width: 100%; min-height: 40px; padding: 0 38px 0 39px;
  border: 0; outline: 0; appearance: none;
  color: var(--text-main); background: transparent;
  font: 600 13px/1.2 var(--font-body); cursor: pointer;
}
.analyze-select-control > .analyze-select-chevron {
  right: 12px; left: auto; width: 16px; height: 16px; color: #718399;
}
.analyze-top-actions { display: flex; align-items: center; gap: 6px; }
.analyze-upload-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 15px;
  border: 1px solid var(--border-color); border-radius: 10px;
  background: #f8fafc; color: var(--text-main);
  font: 600 13px var(--font-heading); cursor: pointer;
  transition: var(--transition-smooth);
}
.analyze-upload-trigger:hover { border-color: var(--primary); color: var(--primary-hover); background: var(--primary-light); }
.analyze-upload-trigger i { width: 16px; height: 16px; }

.analyze-dropzone {
  position: relative; display: flex; flex-direction: column;
  min-height: 320px; border-radius: 12px;
}
.analyze-dropzone textarea#text-editor {
  min-height: 320px; height: auto; resize: vertical; border-radius: 12px;
}
.analyze-dropzone.is-dragover textarea#text-editor {
  border-color: var(--primary); background: var(--primary-light);
}
.analyze-drop-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 2px dashed var(--primary); border-radius: 12px;
  background: rgba(14, 165, 233, .08); color: var(--primary-hover);
  font: 700 15px var(--font-heading); pointer-events: none;
}
.analyze-dropzone.is-dragover .analyze-drop-overlay { display: flex; }
.analyze-drop-overlay i { width: 34px; height: 34px; }

.analyze-upload-status {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-radius: 11px; font-size: 13.5px; line-height: 1.5;
  border: 1px solid var(--border-color); background: #f8fafc; color: var(--text-muted);
}
.analyze-upload-status i { width: 17px; height: 17px; flex: 0 0 auto; }
.analyze-upload-status.is-loading { border-color: rgba(59, 130, 246, .28); background: #eff6ff; color: #1d4ed8; }
.analyze-upload-status.is-success { border-color: rgba(16, 185, 129, .28); background: #ecfdf5; color: #047857; }
.analyze-upload-status.is-error { border-color: rgba(239, 68, 68, .28); background: #fef2f2; color: #9a3030; }

.analyze-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.analyze-hint { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.analyze-hint > i { width: 16px; height: 16px; flex: 0 0 auto; }
.analyze-hint .char-count-info { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--border-color); }
.analyze-card-foot .submit-btn { min-width: 180px; }

/* ---- Vista de resultados ---- */
.analysis-results { display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; padding-bottom: 8px; }
.results-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--border-color);
}
.results-back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 14px;
  border: 1px solid var(--border-color); border-radius: 10px;
  color: var(--text-main); background: var(--bg-card);
  font: 600 13px var(--font-heading); text-decoration: none;
  transition: var(--transition-smooth);
}
.results-back:hover { border-color: var(--primary); color: var(--primary-hover); background: var(--primary-light); }
.results-back i { width: 16px; height: 16px; }
.results-toolbar .output-tabs { margin: 0; }
.results-actions {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
}
/* Descargar PDF: accion primaria de la barra, pero contenida — un acento en
   el azul de marca arText (#006fc0), no un boton gritando en rojo. */
.report-pdf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid rgba(0, 111, 192, .32); border-radius: 10px;
  background: #f3f9fd; color: #045a96;
  font: 600 13px var(--font-heading); text-decoration: none; white-space: nowrap;
  transition: var(--transition-smooth);
}
.report-pdf-btn i { width: 16px; height: 16px; }
.report-pdf-btn:hover {
  border-color: #006fc0; background: #e9f3fc; color: #004a7a;
  box-shadow: 0 4px 12px rgba(0, 111, 192, .14); transform: translateY(-1px);
}
.report-pdf-btn:focus-visible { outline: 3px solid rgba(0, 111, 192, .25); outline-offset: 2px; }
/* Clarificar automaticamente (proximamente): mismo molde de boton que sus
   vecinos, en tono neutro y apagado para leerse como futuro/inactivo, con
   una insignia PROXIMAMENTE que sigue siendo claramente legible. */
.clarify-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px 0 15px;
  border: 1px solid var(--border-color); border-radius: 10px;
  background: #f8fafc; color: var(--text-muted);
  font: 600 13px var(--font-heading); cursor: not-allowed;
  transition: var(--transition-smooth);
}
.clarify-btn i { width: 16px; height: 16px; opacity: .75; }
.clarify-btn.is-soon { opacity: .92; }
.clarify-btn .menu-soon {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 111, 192, .1); color: #045a96;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}

/* ---- Estados de procesamiento / error centrados ---- */
.analysis-processing {
  width: min(760px, 100%); margin: 0 auto;
  padding: clamp(24px, 5vh, 56px) 0 48px;
  display: flex; flex-direction: column;
}

@media (max-width: 620px) {
  .analyze-brand-row { gap: 9px; }
  .analyze-brand-divider { height: 22px; }
  .analyze-claro-logo { height: 43px; }
  .analyze-card-top { align-items: stretch; }
  .analyze-lang { width: 100%; min-width: 0; }
  .analyze-card-foot .submit-btn { width: 100%; }
  /* La barra de resultados se compacta mas abajo, en el bloque de la hoja de
     sugerencias: alli las acciones secundarias pasan al desbordamiento. */
}

@media (max-width: 480px) {
  /* Apilados, el rótulo y el logotipo se peleaban: iban pegados (gap 1px) y el
     logotipo quedaba más pequeño que la pastilla azul, de modo que el elemento
     de marca parecía subordinado a una etiqueta. Se les da separación real y se
     invierte el peso: el logotipo manda y el rótulo pasa a ser una etiqueta
     discreta encima. No se cambia el orden del marcado. */
  .analyze-brand-row { flex-direction: column; gap: 14px; min-height: 0; }
  .analyze-brand-divider { display: none; }
  .analyze-claro-logo { height: 56px; }
  .analyze-hero-kicker {
    padding: 5px 11px;
    font-size: 11px;
    letter-spacing: .05em;
  }

  /* Las tres acciones no caben en una fila a 390px: «Abrir una copia en el
     editor» se partía en tres renglones. Dos columnas para los dos botones de
     texto y la papelera al final, alineada con ellos. */
  .analyze-top-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    width: 100%;
  }
  /* «Abrir una copia en el editor» es el rótulo más largo y en media columna se
     partía en tres renglones: fila entera para él, y la segunda fila reparte
     «Subir documento» con la papelera. */
  .analyze-top-actions > :nth-child(1) { grid-column: 1 / -1; }
  .analyze-top-actions > :nth-child(2) { grid-column: 1; }
  .analyze-top-actions > :nth-child(3) { grid-column: 2; }
  .analyze-top-actions .analyze-upload-trigger { justify-content: center; min-height: 48px; }
}

/* ==========================================================
   BARRA DE ACCIONES DEL INFORME: DESBORDAMIENTO EN MOVIL
   ==========================================================
   Por defecto (escritorio) el contenedor y su menu son transparentes al
   layout: los botones secundarios siguen siendo hijos directos de
   `.results-actions` y la barra no cambia. */
.results-overflow { display: contents; }
.results-overflow-menu { display: contents; }
.results-overflow-toggle { display: none; }

/* ==========================================================
   HOJA INFERIOR DE SUGERENCIAS (LAYOUT APILADO, <= 1200 px)
   ==========================================================
   Misma anchura a la que el informe pasa de dos columnas a una: por encima,
   el escritorio de dos paneles no se toca. En la franja apilada el panel de
   sugerencias deja de ir detras del documento y pasa a ser una hoja fija con
   tres alturas de anclaje (asomada / media / completa). El tirador es un
   boton real: cicla las alturas con teclado o toque, ademas del arrastre. */
.sheet-handle { display: none; }

@media (max-width: 1200px) {
  .suggestions-card.is-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: var(--sheet-height, 50vh);
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--border-color);
    border-radius: 18px 18px 0 0;
    background: var(--bg-card);
    box-shadow: 0 -10px 34px rgba(15, 23, 42, .18);
    overflow: hidden;
    transition: height .28s cubic-bezier(.32, .72, 0, 1);
  }
  /* En la parte alta de la franja apilada (tabletas y ventanas estrechas de
     escritorio) la hoja llegaba a medir más de 1000px de ancho: las líneas de
     cada sugerencia se estiraban hasta hacerse incómodas de leer y una hoja
     inferior a toda anchura se lee como un patrón fuera de sitio. Se acota a
     una medida de lectura y se centra; por debajo de 860px sigue ocupando
     todo el ancho, que es lo natural en un teléfono. */
  @media (min-width: 861px) {
    .suggestions-card.is-sheet {
      left: 50%;
      right: auto;
      width: min(860px, 100%);
      transform: translateX(-50%);
      border-radius: 18px 18px 0 0;
    }
  }
  /* Mientras el dedo arrastra, la altura sigue al puntero sin animacion. */
  .suggestions-card.is-sheet.is-dragging { transition: none; }
  /* Retirada mientras se mira la respuesta API. */
  .suggestions-card.is-sheet.is-hidden { display: none; }

  .suggestions-card.is-sheet > [data-unified-suggestion-panel] {
    flex: 1;
    min-height: 0;
  }
  /* El desplazamiento de la lista no debe arrastrar la pagina de detras. */
  .suggestions-card.is-sheet .sg-list { overscroll-behavior: contain; }
  /* La cabecera compacta del panel (controles + chips) hace de cabecera de la
     hoja: en estado asomado es justo lo que queda a la vista. Dentro de la
     hoja no hay nada que anclar —la lista es la que se desplaza—, asi que el
     `sticky` se vuelve estatico; y el rotulo «Sugerencias» sobra porque el
     tirador ya dice cuantas hay. */
  .suggestions-card.is-sheet .sg-sticky { position: static; }
  .suggestions-card.is-sheet .sg-controls-title { display: none; }

  .suggestions-card.is-sheet .sheet-handle {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    width: 100%;
    min-height: 42px;
    padding: 6px 14px 4px;
    border: 0;
    border-radius: 18px 18px 0 0;
    background: var(--bg-card);
    color: var(--text-main);
    font: 700 13.5px var(--font-heading);
    text-align: left;
    cursor: grab;
    /* El arrastre lo gestiona el JS con eventos de puntero. */
    touch-action: none;
  }
  .suggestions-card.is-sheet .sheet-handle:active { cursor: grabbing; }
  .suggestions-card.is-sheet .sheet-handle:focus-visible {
    outline: 3px solid rgba(0, 111, 192, .3);
    outline-offset: -3px;
  }
  .sheet-grip {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 999px;
    background: #cbd5e1;
  }
  .suggestions-card.is-sheet .sheet-handle { position: relative; padding-top: 15px; }
  .sheet-handle-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sheet-handle-icon { display: grid; place-items: center; width: 26px; height: 26px; color: var(--text-muted); }
  .sheet-handle-icon svg { width: 18px; height: 18px; transition: transform .2s ease; }
  .suggestions-card.is-sheet[data-sheet-state="full"] .sheet-handle-icon svg { transform: rotate(180deg); }

  /* Hueco al pie para que el documento y el pie de pagina no queden bajo la
     hoja asomada. */
  body.has-suggestion-sheet { padding-bottom: var(--sheet-peek, 120px); }
  /* Con la hoja completa, el cuerpo de detras no se desplaza. */
  html.sheet-scroll-locked, html.sheet-scroll-locked body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .suggestions-card.is-sheet { transition: none; }
  .sheet-handle-icon svg { transition: none; }
}

@media (max-width: 620px) {
  /* Barra de acciones compacta: una fila con volver + pestanas y otra con la
     accion principal y el desbordamiento. */
  .results-toolbar { gap: 8px; padding-bottom: 8px; }
  .results-toolbar .results-back { flex: 0 0 auto; min-height: 36px; padding: 0 10px; }
  .results-toolbar .results-back span { display: none; }
  .results-toolbar .output-tabs { order: 0; flex: 1 1 0; width: auto; min-width: 0; padding: 3px; }
  .results-toolbar .output-tabs .tab-button { flex: 1 1 0; min-width: 0; min-height: 30px; padding: 0 8px; justify-content: center; }
  .results-toolbar .output-tabs .tab-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .results-toolbar .results-actions { order: 1; flex-wrap: nowrap; width: 100%; margin-left: 0; gap: 8px; }
  .results-actions .results-primary-action { flex: 1 1 auto; min-width: 0; min-height: 38px; justify-content: center; }
  .results-actions .results-primary-action span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .results-overflow { position: relative; display: block; flex: 0 0 auto; }
  .results-overflow-toggle {
    display: grid;
    place-items: center;
    width: 42px;
    min-height: 40px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
  }
  .results-overflow-toggle i { width: 18px; height: 18px; }
  .results-overflow-toggle[aria-expanded="true"] { border-color: var(--primary); color: var(--primary-hover); background: var(--primary-light); }
  .results-overflow-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    gap: 6px;
    min-width: 250px;
    padding: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
  }
  .results-overflow-menu.is-open { display: flex; }
  .results-overflow-menu .report-pdf-btn,
  .results-overflow-menu .clarify-btn { width: 100%; justify-content: flex-start; text-align: left; }
  .results-overflow-menu .clarify-btn > span:not(.menu-soon) { white-space: nowrap; }
  .results-overflow-menu .clarify-btn .menu-soon { margin-left: auto; }
}