/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Bebas_Neue","arguments":[{"weight":"400","subsets":["latin"],"variable":"--font-bebas"}],"variableName":"bebas"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: '__Bebas_Neue_d758cf';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/8b44c7e6549520b2-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Bebas_Neue_d758cf';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/6c25f6e897d845a3-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Bebas_Neue_Fallback_d758cf';src: local("Arial");ascent-override: 117.32%;descent-override: 39.11%;line-gap-override: 0.00%;size-adjust: 76.72%
}.__className_d758cf {font-family: '__Bebas_Neue_d758cf', '__Bebas_Neue_Fallback_d758cf';font-weight: 400;font-style: normal
}.__variable_d758cf {--font-bebas: '__Bebas_Neue_d758cf', '__Bebas_Neue_Fallback_d758cf'
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"IBM_Plex_Mono","arguments":[{"weight":["300","400","500","600","700"],"style":["normal","italic"],"subsets":["latin"],"variable":"--font-mono"}],"variableName":"mono"} ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/5789866e1f6c0b3a-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/1d8a6ab50b58c98f-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/6864518888912bb6-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/10b966b6a52e2569-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/854bb2d01eefbe38-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/f3d49a6cc42289e4-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/a8a4bee916c8efc4-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b741e17df1a92217-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e92542ed07ddbaee-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/251df36401e2f093-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/d19148a489889c3f-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/6e3dff35a8d2b87a-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/8b7d2a0269fd9b46-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/32e223c2320c378a-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/35a91d7a43063ba6-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/f21e69bb6a61306e-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/c1d45af601cdd93b-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/435a224332f9f6c3-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/bd7993bb7a0d0ec6-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/be134c60f3754e50-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/64b05136bc9a174a-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/3fd9755924b90055-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b243f0ae64024029-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/995d165d311a1d74-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/da6de786a91fb953-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/2654dbf24aea7c5c-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/28d9a5bcdfe1d85c-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/f9ab74ff5df93b56-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/f884487c2e174fcf-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/f36144f235cd456e-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/58f386aa6b1a2a92-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/011e180705008d6f-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/7ba5fb2a8c88521c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/92eeb95d069020cc-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/d3ebbfd689654d3a-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ef4d5661765d0e49-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/d29838c109ef09b4-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e40af3453d7c920a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/99dcf268bda04fe5-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/98e207f02528a563-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/73cb51aac9c97f90-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/d26bbd13d6b70f89-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/20535187d867b7b9-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/5356a6a4f2c8c8d8-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/db96af6b531dc71f-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/704b853f32d191d5-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/656feb427634a431-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/991629005c80bdf1-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/46e154b2fcbd6033-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__IBM_Plex_Mono_64e73f';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/37786be940ec402b-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__IBM_Plex_Mono_Fallback_64e73f';src: local("Arial");ascent-override: 76.16%;descent-override: 20.43%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_64e73f {font-family: '__IBM_Plex_Mono_64e73f', '__IBM_Plex_Mono_Fallback_64e73f'
}.__variable_64e73f {--font-mono: '__IBM_Plex_Mono_64e73f', '__IBM_Plex_Mono_Fallback_64e73f'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"DM_Sans","arguments":[{"weight":["300","400","500","600"],"subsets":["latin"],"variable":"--font-sans"}],"variableName":"sans"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: '__DM_Sans_be8b38';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/7ab938503e4547a1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__DM_Sans_be8b38';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/13971731025ec697-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: '__DM_Sans_be8b38';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/7ab938503e4547a1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__DM_Sans_be8b38';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/13971731025ec697-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: '__DM_Sans_be8b38';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/7ab938503e4547a1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__DM_Sans_be8b38';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/13971731025ec697-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: '__DM_Sans_be8b38';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/7ab938503e4547a1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__DM_Sans_be8b38';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/13971731025ec697-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__DM_Sans_Fallback_be8b38';src: local("Arial");ascent-override: 94.90%;descent-override: 29.66%;line-gap-override: 0.00%;size-adjust: 104.53%
}.__className_be8b38 {font-family: '__DM_Sans_be8b38', '__DM_Sans_Fallback_be8b38';font-style: normal
}.__variable_be8b38 {--font-sans: '__DM_Sans_be8b38', '__DM_Sans_Fallback_be8b38'
}

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════
   DESIGN SYSTEM — Brutalist Terminal
   Bebas Neue headlines + IBM Plex Mono data
   Dark void with electric amber/cyan accents

   PORTADO VERBATIM de Documentación/Prototipo/prototipo-navegable.html
   (prototipo aprobado Fase 1, derivado de Diseño/gex_backoffice.html).
   Adaptaciones (únicas) para Next.js:
   · font-family vía variables de next/font (--font-bebas/--font-mono/--font-sans)
   · .page sin display:none/.active — App Router renderiza una vista por ruta
═══════════════════════════════════════ */
:root{
  --void:#060810; --deep:#0a0e18; --surface:#0f1520; --lift:#141c2a;
  --border:#1a2535; --border2:#243040;
  --cyan:#00e5ff; --cyan2:#00b3cc; --amber:#ffb300; --amber2:#cc8f00;
  --green:#00e676; --green2:#00b05a; --red:#ff1744; --red2:#cc0033;
  --purple:#d500f9; --fog:#4a6080; --mist:#2a3d52;
  --snow:#e8f4ff; --text:#b8d0e8; --dim:#5a7a95; --r:4px;
  /* tripletes rgb para rgba() theme-aware (DN-01) */
  --void-rgb:6,8,16; --deep-rgb:10,14,24; --surface-rgb:15,21,32; --lift-rgb:20,28,42;
  --border-rgb:26,37,53; --border2-rgb:36,48,64;
  --cyan-rgb:0,229,255; --amber-rgb:255,179,0; --green-rgb:0,230,118; --red-rgb:255,23,68;
  --purple-rgb:213,0,249; --fog-rgb:74,96,128; --mist-rgb:42,61,82;
  --snow-rgb:232,244,255; --text-rgb:184,208,232; --dim-rgb:90,122,149;
  color-scheme:dark;
}
[data-theme="light"]{
  --void:#eceff3; --deep:#e2e6eb; --surface:#ffffff; --lift:#f3f5f8;
  --border:#d2d8df; --border2:#bcc4cd;
  --cyan:#0e7490; --cyan2:#0b5a72; --amber:#8a5a00; --amber2:#6d4700;
  --green:#0f6e34; --green2:#0b5829; --red:#c0143a; --red2:#98062c;
  --purple:#8e24aa; --fog:#6b7785; --mist:#8a95a3;
  --snow:#0d1218; --text:#20262e; --dim:#5b6675; --r:4px;
  --void-rgb:236,239,243; --deep-rgb:226,230,235; --surface-rgb:255,255,255; --lift-rgb:243,245,248;
  --border-rgb:210,216,223; --border2-rgb:188,196,205;
  --cyan-rgb:14,116,144; --amber-rgb:138,90,0; --green-rgb:15,110,52; --red-rgb:192,20,58;
  --purple-rgb:142,36,170; --fog-rgb:107,119,133; --mist-rgb:138,149,163;
  --snow-rgb:13,18,24; --text-rgb:32,38,46; --dim-rgb:91,102,117;
  color-scheme:light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%; width: 100%;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-sans), 'DM Sans', sans-serif;
  overflow: hidden;
}

/* GRAIN TEXTURE OVERLAY */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  background-size: 128px;
  opacity: 0.4;
}

/* SCANLINES */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.06) 3px, rgba(0,0,0,.06) 4px);
}

/* ═══ LAYOUT ═══ */
.shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 52px 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ═══ TOPBAR ═══ */
.topbar {
  grid-column: 1 / -1;
  background: var(--deep);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 16px;
  gap: 0;
  position: relative;
  z-index: 50;
}

.logo-block {
  display: flex; align-items: center; gap: 10px;
  padding-right: 16px;
  border-right: 1px solid var(--border);
  margin-right: 16px;
  min-width: 184px;
}
.logo-glyph {
  width: 30px; height: 30px;
  background: var(--amber);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
          clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-bebas), 'Bebas Neue', sans-serif;
  font-size: 13px; color: var(--void);
  animation: glow-amber 3s ease-in-out infinite;
}
@keyframes glow-amber {
  0%,100% { box-shadow: 0 0 8px rgba(var(--amber-rgb),.3); }
  50% { box-shadow: 0 0 20px rgba(var(--amber-rgb),.7), 0 0 40px rgba(var(--amber-rgb),.3); }
}
.logo-text {
  font-family: var(--font-bebas), 'Bebas Neue', sans-serif;
  font-size: 20px; letter-spacing: 3px;
  color: var(--snow);
}
.logo-sub {
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 9px; color: var(--dim); letter-spacing: 1px;
}

.ticker-strip {
  display: flex; align-items: center; gap: 0;
  flex: 1 1; overflow: hidden;
}
.ticker-item {
  display: flex; flex-direction: column;
  padding: 0 16px;
  border-right: 1px solid var(--border);
  gap: 1px;
}
.ticker-label { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 9px; color: var(--dim); letter-spacing: 1.5px; text-transform: uppercase; }
.ticker-val { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; }
.ticker-val.up { color: var(--green); }
.ticker-val.dn { color: var(--red); }
.ticker-val.neu { color: var(--amber); }

.topbar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
}
/* Píldora de estado del stream en vivo. El color sale de --pill/--pill-rgb, que los
   modificadores redefinen; como apuntan a las variables de tema (--green/--amber/--red, ya
   redefinidas en [data-theme="light"]), Dark y Light salen bien sin duplicar reglas (DN-01). */
.session-pill {
  --pill: var(--green); --pill-rgb: var(--green-rgb);
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 2px;
  border: 1px solid rgba(var(--pill-rgb),.25);
  background: rgba(var(--pill-rgb),.05);
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--pill); font-weight: 600; letter-spacing: 1px;
}
.session-pill.pill-warn { --pill: var(--amber); --pill-rgb: var(--amber-rgb); }
.session-pill.pill-off  { --pill: var(--red);   --pill-rgb: var(--red-rgb); }
.session-pill .pill-retry {
  background: none; border: 0; padding: 0 0 0 4px; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline;
}
.pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pill, var(--green));
  animation: pulse 2s ease-in-out infinite;
}
/* Sin sesión no hay nada que esperar: el punto deja de latir para no sugerir actividad. */
.session-pill.pill-off .pulse-dot { animation: none; }
@keyframes pulse {
  0%,100% { opacity:1; box-shadow: 0 0 0 0 rgba(var(--pill-rgb, var(--green-rgb)),.5); }
  50% { opacity:.7; box-shadow: 0 0 0 5px rgba(var(--pill-rgb, var(--green-rgb)),0); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; }
}
.et-clock {
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 13px; color: var(--dim); font-weight: 500;
  min-width: 90px;
}

/* ═══ SIDEBAR ═══ */
.sidebar {
  background: var(--deep);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.nav-group-label {
  padding: 16px 14px 6px;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 8px; color: var(--mist);
  letter-spacing: 2px; text-transform: uppercase;
}

.nav-btn {
  display: flex; align-items: center; gap: 9px;
  margin: 1px 6px; padding: 8px 10px;
  border-radius: var(--r);
  cursor: pointer;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 11px; color: var(--dim);
  font-weight: 400; letter-spacing: .3px;
  border: 1px solid transparent;
  transition: all .15s ease;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
}
.nav-btn:hover { background: var(--surface); color: var(--text); border-color: var(--border); }
.nav-btn.active {
  background: rgba(var(--cyan-rgb),.06);
  color: var(--cyan);
  border-color: rgba(var(--cyan-rgb),.2);
}
.nav-btn.active::before {
  content: '';
  position: absolute; left: -6px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 14px;
  background: var(--cyan);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--cyan);
}
.nav-icon { font-size: 13px; width: 16px; text-align: center; }
.nav-count {
  margin-left: auto;
  padding: 1px 6px; border-radius: 2px;
  font-size: 9px; font-weight: 700;
}
.nc-red { background: rgba(var(--red-rgb),.15); color: var(--red); border: 1px solid rgba(var(--red-rgb),.2); }
.nc-green { background: rgba(var(--green-rgb),.1); color: var(--green); border: 1px solid rgba(var(--green-rgb),.2); }
.nc-amber { background: rgba(var(--amber-rgb),.1); color: var(--amber); border: 1px solid rgba(var(--amber-rgb),.2); }

.sidebar-footer {
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid var(--border);
}
.ks-btn {
  width: 100%; padding: 9px;
  background: rgba(var(--red-rgb),.07);
  border: 1px solid rgba(var(--red-rgb),.25);
  border-radius: var(--r);
  color: var(--red); cursor: pointer;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  transition: all .2s;
}
.ks-btn:hover {
  background: rgba(var(--red-rgb),.15);
  border-color: var(--red);
  box-shadow: 0 0 20px rgba(var(--red-rgb),.2);
}
.user-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px 0;
}
.avatar {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-bebas), 'Bebas Neue', sans-serif; font-size: 13px; color: var(--void);
  flex-shrink: 0;
}
.user-name { font-size: 11px; color: var(--snow); font-weight: 500; }
.user-role { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 9px; color: var(--dim); letter-spacing: .5px; }

/* ═══ MAIN ═══ */
.main {
  overflow-y: auto; overflow-x: hidden;
  background: var(--void);
  padding: 20px;
}
.main::-webkit-scrollbar { width: 3px; }
.main::-webkit-scrollbar-track { background: var(--void); }
.main::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.page { animation: fade-in .2s ease; }
@keyframes fade-in { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }

/* ═══ PAGE HEADER ═══ */
.ph {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px;
}
.ph-title {
  font-family: var(--font-bebas), 'Bebas Neue', sans-serif;
  font-size: 30px; letter-spacing: 3px;
  color: var(--snow); line-height: 1;
}
.ph-sub {
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--dim); margin-top: 4px; letter-spacing: .5px;
}
.ph-actions { display: flex; gap: 8px; align-items: center; }

/* ═══ BUTTONS ═══ */
.btn {
  padding: 7px 14px; border-radius: var(--r);
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
  cursor: pointer; border: 1px solid; transition: all .15s;
}
.btn-cyan { background: rgba(var(--cyan-rgb),.07); border-color: rgba(var(--cyan-rgb),.3); color: var(--cyan); }
.btn-cyan:hover { background: rgba(var(--cyan-rgb),.14); box-shadow: 0 0 12px rgba(var(--cyan-rgb),.15); }
.btn-green { background: rgba(var(--green-rgb),.06); border-color: rgba(var(--green-rgb),.25); color: var(--green); }
.btn-green:hover { background: rgba(var(--green-rgb),.12); }
.btn-red { background: rgba(var(--red-rgb),.07); border-color: rgba(var(--red-rgb),.25); color: var(--red); }
.btn-red:hover { background: rgba(var(--red-rgb),.14); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--dim); }
.btn-ghost:hover { border-color: var(--border2); color: var(--text); }
.btn-amber { background: rgba(var(--amber-rgb),.07); border-color: rgba(var(--amber-rgb),.25); color: var(--amber); }

/* ═══ GRID ═══ */
.g { display: grid; grid-gap: 12px; gap: 12px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: 1fr 1fr 1fr; }
.g4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.g-13 { grid-template-columns: 1fr 3fr; }
.g-31 { grid-template-columns: 3fr 1fr; }

/* ═══ CARD ═══ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.card-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(var(--deep-rgb),.5);
}
.card-title {
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
}
.card-body { padding: 14px; }

/* ═══ STAT CARDS ═══ */
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  position: relative; overflow: hidden;
  transition: border-color .2s;
}
.stat:hover { border-color: var(--border2); }
.stat::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
}
.stat.s-cyan::before { background: linear-gradient(90deg, var(--cyan), transparent); }
.stat.s-green::before { background: linear-gradient(90deg, var(--green), transparent); }
.stat.s-red::before { background: linear-gradient(90deg, var(--red), transparent); }
.stat.s-amber::before { background: linear-gradient(90deg, var(--amber), transparent); }
.stat-lbl {
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 9px; color: var(--dim);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px;
}
.stat-val {
  font-family: var(--font-bebas), 'Bebas Neue', sans-serif;
  font-size: 34px; line-height: 1; color: var(--snow);
  letter-spacing: 1px;
}
.stat-val.up { color: var(--green); }
.stat-val.dn { color: var(--red); }
.stat-val.am { color: var(--amber); }
.stat-val.cy { color: var(--cyan); }
.stat-delta {
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 10px; margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
}
.stat-delta.up { color: var(--green); }
.stat-delta.dn { color: var(--red); }
.stat-bar { height: 2px; background: var(--border); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.stat-fill { height: 100%; border-radius: 2px; transition: width 1.2s ease; }

/* ═══ SIGNAL TABLE ═══ */
.sig-row {
  display: grid;
  grid-template-columns: 78px 56px 80px 120px 100px 80px 1fr 96px;
  grid-gap: 6px;
  gap: 6px; align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(var(--border-rgb),.6);
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 10px;
  transition: background .12s;
  cursor: default;
}
.sig-row:hover { background: rgba(var(--lift-rgb),.6); }
.sig-row.hdr {
  font-size: 9px; color: var(--mist);
  letter-spacing: 1.2px; text-transform: uppercase;
  background: rgba(var(--deep-rgb),.7);
  border-bottom: 1px solid var(--border2);
}

.dir-long {
  font-weight: 700; font-size: 10px;
  padding: 3px 7px; border-radius: 2px;
  background: rgba(var(--green-rgb),.08);
  color: var(--green); border: 1px solid rgba(var(--green-rgb),.2);
}
.dir-short {
  font-weight: 700; font-size: 10px;
  padding: 3px 7px; border-radius: 2px;
  background: rgba(var(--red-rgb),.08);
  color: var(--red); border: 1px solid rgba(var(--red-rgb),.2);
}

.badge {
  display: inline-block;
  padding: 2px 7px; border-radius: 2px;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 9px; font-weight: 700; border: 1px solid;
}
.b-active { background: rgba(var(--cyan-rgb),.08); color: var(--cyan); border-color: rgba(var(--cyan-rgb),.2); }
.b-win { background: rgba(var(--green-rgb),.08); color: var(--green); border-color: rgba(var(--green-rgb),.2); }
.b-loss { background: rgba(var(--red-rgb),.08); color: var(--red); border-color: rgba(var(--red-rgb),.2); }
.b-exp { background: rgba(var(--fog-rgb),.1); color: var(--dim); border-color: var(--border); }
.b-rej { background: rgba(var(--amber-rgb),.08); color: var(--amber); border-color: rgba(var(--amber-rgb),.2); }

.conf-track { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.conf-fill { height: 100%; background: linear-gradient(90deg, var(--amber), var(--green)); border-radius: 2px; }

/* ═══ CHANNEL CARDS ═══ */
.ch-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  position: relative; overflow: hidden;
  transition: all .2s;
}
.ch-card.ch-on { border-color: rgba(var(--green-rgb),.25); }
.ch-card.ch-off { border-color: rgba(var(--red-rgb),.15); opacity: .6; }
.ch-card::after {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
}
.ch-card.ch-on::after { background: linear-gradient(90deg, var(--green), transparent); }
.ch-card.ch-off::after { background: linear-gradient(90deg, var(--red), transparent); }

.ch-name {
  font-family: var(--font-bebas), 'Bebas Neue', sans-serif;
  font-size: 22px; letter-spacing: 2px;
  color: var(--snow); margin-bottom: 2px;
}
.ch-type {
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 9px; color: var(--dim);
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px;
}
.ch-ind {
  position: absolute; top: 16px; right: 16px;
  width: 10px; height: 10px; border-radius: 50%;
}
.ch-ind.on { background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 2s infinite; }
.ch-ind.off { background: var(--red); }
.ch-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; border-bottom: 1px solid rgba(var(--border-rgb),.5);
  font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 10px;
}
.ch-row:last-of-type { border-bottom: none; }
.ch-row .k { color: var(--dim); }
.ch-row .v { color: var(--text); font-weight: 500; }
.ch-row .v.up { color: var(--green); }
.ch-toggle {
  margin-top: 14px;
  width: 100%; padding: 8px;
  border-radius: var(--r);
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; border: 1px solid;
  transition: all .2s;
}
.ct-on { background: rgba(var(--green-rgb),.06); border-color: rgba(var(--green-rgb),.25); color: var(--green); }
.ct-on:hover { background: rgba(var(--green-rgb),.12); }
.ct-off { background: rgba(var(--red-rgb),.06); border-color: rgba(var(--red-rgb),.25); color: var(--red); }
.ct-off:hover { background: rgba(var(--red-rgb),.12); }

/* ═══ POLL LOG ═══ */
.poll-row {
  display: grid;
  grid-template-columns: 82px 100px 64px 1fr;
  grid-gap: 8px;
  gap: 8px; align-items: center;
  padding: 6px 14px;
  border-bottom: 1px solid rgba(var(--border-rgb),.4);
  font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 10px;
}
.poll-row:hover { background: rgba(var(--lift-rgb),.5); }
.poll-row.hdr {
  background: rgba(var(--deep-rgb),.7);
  font-size: 9px; color: var(--mist); letter-spacing: 1px;
  border-bottom: 1px solid var(--border2);
}

/* ═══ FORMS ═══ */
.form-grp { margin-bottom: 14px; }
.form-lbl {
  display: block; margin-bottom: 5px;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 9px; color: var(--dim);
  text-transform: uppercase; letter-spacing: 1.5px;
}
.form-inp {
  width: 100%;
  background: var(--lift); border: 1px solid var(--border);
  border-radius: var(--r); padding: 8px 10px;
  color: var(--text); font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 11px;
  outline: none; transition: border-color .15s;
}
.form-inp:focus { border-color: rgba(var(--cyan-rgb),.35); box-shadow: 0 0 0 2px rgba(var(--cyan-rgb),.04); }
.form-sel {
  width: 100%;
  background: var(--lift); border: 1px solid var(--border);
  border-radius: var(--r); padding: 8px 10px;
  color: var(--text); font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 11px;
  outline: none; cursor: pointer;
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; }

/* TOGGLE SWITCH */
.sw-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid rgba(var(--border-rgb),.4);
}
.sw-row:last-child { border-bottom: none; }
.sw-label { font-size: 12px; color: var(--text); }
.sw-label small { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 9px; color: var(--dim); display: block; margin-top: 1px; }
.switch { position: relative; width: 34px; height: 18px; cursor: pointer; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slid {
  position: absolute; inset: 0;
  background: var(--lift); border: 1px solid var(--border2);
  border-radius: 18px; transition: .25s;
}
.slid::before {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  left: 2px; top: 2px;
  background: var(--mist);
  border-radius: 50%; transition: .25s;
}
input:checked + .slid { background: rgba(var(--green-rgb),.12); border-color: rgba(var(--green-rgb),.35); }
input:checked + .slid::before { transform: translateX(16px); background: var(--green); box-shadow: 0 0 6px var(--green); }

/* ═══ CHARTS ═══ */
.chart-wrap { position: relative; }
canvas { display: block; width: 100% !important; }

/* ═══ RISK TABLE ═══ */
.rtbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.rtbl th {
  padding: 8px 12px; text-align: left;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: 1.2px;
  background: rgba(var(--deep-rgb),.6);
  border-bottom: 1px solid var(--border2);
}
.rtbl td {
  padding: 9px 12px; border-bottom: 1px solid rgba(var(--border-rgb),.5);
  color: var(--text); font-family: var(--font-mono), 'IBM Plex Mono', monospace; vertical-align: middle;
}
.rtbl tr:hover td { background: rgba(var(--lift-rgb),.4); }
.ri {
  background: var(--lift); border: 1px solid var(--border);
  border-radius: 3px; padding: 4px 8px;
  color: var(--text); font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 10px;
  outline: none; text-align: right; width: 80px;
}
.ri:focus { border-color: rgba(var(--cyan-rgb),.35); }

/* ═══ LOG FEED ═══ */
.log-row {
  display: grid;
  grid-template-columns: 70px 64px 90px 1fr;
  grid-gap: 8px;
  gap: 8px; align-items: center;
  padding: 5px 14px;
  border-bottom: 1px solid rgba(var(--border-rgb),.3);
  font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 10px;
}
.log-row:hover { background: rgba(var(--lift-rgb),.4); }
.log-row.hdr {
  background: rgba(var(--deep-rgb),.7);
  font-size: 9px; color: var(--mist); letter-spacing: 1px;
  border-bottom: 1px solid var(--border2);
}
.log-ts { color: var(--mist); }
.log-svc { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-msg { color: var(--text); }
.ll {
  display: inline-block; padding: 1px 5px; border-radius: 2px;
  font-size: 8px; font-weight: 700; text-align: center;
}
.ll-i { background: rgba(var(--cyan-rgb),.1); color: var(--cyan); }
.ll-w { background: rgba(var(--amber-rgb),.1); color: var(--amber); }
.ll-e { background: rgba(var(--red-rgb),.1); color: var(--red); }
.ll-c { background: var(--red); color: #fff; animation: blink .7s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ═══ AI SECTION ═══ */
.ai-model-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-bottom: 1px solid rgba(var(--border-rgb),.5);
}
.ai-model-row:last-child { border-bottom: none; }
.ai-ring {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-bebas), 'Bebas Neue', sans-serif; font-size: 15px;
  flex-shrink: 0;
  position: relative;
}
.ai-ring.good { border: 2px solid var(--green); color: var(--green); background: rgba(var(--green-rgb),.05); }
.ai-ring.ok { border: 2px solid var(--amber); color: var(--amber); background: rgba(var(--amber-rgb),.05); }
.ai-info .ai-name { font-size: 12px; color: var(--snow); font-weight: 500; margin-bottom: 2px; }
.ai-info .ai-sub { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 9px; color: var(--dim); }
.ai-badge { margin-left: auto; }

.news-row {
  padding: 10px 14px; border-bottom: 1px solid rgba(var(--border-rgb),.4);
  font-size: 11px;
}
.news-row:last-child { border-bottom: none; }
.news-hl { color: var(--text); margin-bottom: 3px; line-height: 1.4; }
.news-meta { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 9px; color: var(--dim); }
.snb { display: inline-block; padding: 1px 5px; border-radius: 2px; font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 8px; font-weight: 700; margin-right: 5px; }
.snb-neutral { background: rgba(var(--fog-rgb),.15); color: var(--dim); }
.snb-bullish { background: rgba(var(--green-rgb),.1); color: var(--green); }
.snb-bearish { background: rgba(var(--red-rgb),.1); color: var(--red); }

.feat-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 7px;
}
.feat-name { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 10px; width: 190px; flex-shrink: 0; }
.feat-track { flex: 1 1; height: 10px; background: var(--border); border-radius: 2px; overflow: hidden; }
.feat-bar { height: 100%; border-radius: 2px; }
.feat-pct { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 10px; color: var(--dim); width: 36px; text-align: right; }

/* PERF MINI STATS */
.mini-stat {
  background: var(--lift); border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px; text-align: center;
}
.ms-val { font-family: var(--font-bebas), 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1px; }
.ms-val.up { color: var(--green); }
.ms-val.dn { color: var(--red); }
.ms-val.am { color: var(--amber); }
.ms-lbl { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 2px; }

/* GEX STATE ITEM */
.gex-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 14px; border-bottom: 1px solid rgba(var(--border-rgb),.4);
  font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 10px;
}
.gex-row:last-child { border-bottom: none; }
.gex-k { color: var(--dim); }
.gex-v { color: var(--text); font-weight: 500; }
/* Adaptación documentada: el markup del prototipo usa class="gex-v up|neu|am" pero su CSS
   no define esas variantes (clases huérfanas) → se materializa la intención con los mismos
   acentos semánticos del resto del sistema (up=green, neu/am=amber). */
.gex-v.up { color: var(--green); }
.gex-v.neu { color: var(--amber); }
.gex-v.am { color: var(--amber); }

/* INFO CHIP */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 2px;
  background: var(--lift); border: 1px solid var(--border);
  font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 9px; color: var(--dim);
}

/* ═══ LIVE INDICATOR ═══ */
.live-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 9px;
  color: var(--cyan); letter-spacing: .5px;
}
.live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan);
  animation: pulse-c 1.5s ease-in-out infinite;
}
@keyframes pulse-c {
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(var(--cyan-rgb),.4); }
  50%{ opacity:.6; box-shadow:0 0 0 4px rgba(var(--cyan-rgb),0); }
}

/* INFOBOX */
.infobox {
  border-left: 3px solid;
  padding: 10px 12px; border-radius: 0 var(--r) var(--r) 0;
  margin: 12px 0;
}
.infobox.cy { border-color: var(--cyan); background: rgba(var(--cyan-rgb),.04); }
.infobox.am { border-color: var(--amber); background: rgba(var(--amber-rgb),.04); }
.infobox-title { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700; margin-bottom: 4px; }
.infobox.cy .infobox-title { color: var(--cyan); }
.infobox.am .infobox-title { color: var(--amber); }
.infobox p { font-size: 11px; color: var(--dim); line-height: 1.5; }

/* ── DN-01 · Botón toggle de tema ── */
.theme-tgl{font-family:var(--font-mono),'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:5px 11px;border-radius:2px;cursor:pointer;border:1px solid rgba(var(--cyan-rgb),.3);background:rgba(var(--cyan-rgb),.06);color:var(--cyan);transition:all .15s;}
.theme-tgl:hover{background:rgba(var(--cyan-rgb),.14);border-color:var(--cyan);}

/* ── LOGIN (§4.2 · gaps-login-detalle-senal.html, GAP-01 Fase 1) ──
   Port verbatim del bloque LOGIN del gaps doc; adaptaciones: fuentes via next/font y
   min-height 100vh (en el doc era 62vh por ser página de documentación). */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.login{width:360px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r);padding:28px 26px;}
.brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:20px;}
.brand .glyph{width:46px;height:46px;background:var(--amber);-webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:flex;align-items:center;justify-content:center;font-family:var(--font-bebas),'Bebas Neue',sans-serif;font-size:17px;color:var(--void);}
.brand .lt{font-family:var(--font-bebas),'Bebas Neue',sans-serif;font-size:24px;letter-spacing:3px;color:var(--snow);}
.brand .ls{font-family:var(--font-mono),'IBM Plex Mono',monospace;font-size:9px;color:var(--dim);letter-spacing:1px;}
.login h2{font-family:var(--font-mono),'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);text-align:center;margin-bottom:18px;}
.fld{margin-bottom:14px;}
.fld label{display:block;font-family:var(--font-mono),'IBM Plex Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);margin-bottom:5px;}
.fld input{width:100%;background:var(--lift);border:1px solid var(--border);border-radius:var(--r);padding:9px 11px;color:var(--text);font-family:var(--font-mono),'IBM Plex Mono',monospace;font-size:12px;outline:none;}
.fld input:focus{border-color:rgba(var(--cyan-rgb),.45);}
.login-btn{width:100%;margin-top:4px;padding:10px;border-radius:var(--r);border:1px solid rgba(var(--cyan-rgb),.4);background:rgba(var(--cyan-rgb),.1);color:var(--cyan);font-family:var(--font-mono),'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;}
.login-btn:disabled{opacity:.55;cursor:wait;}
.err{display:flex;align-items:center;gap:7px;background:rgba(var(--red-rgb),.08);border:1px solid rgba(var(--red-rgb),.25);color:var(--red);border-radius:var(--r);padding:7px 10px;font-family:var(--font-mono),'IBM Plex Mono',monospace;font-size:10px;margin-bottom:14px;}
.login-foot{margin-top:16px;text-align:center;font-family:var(--font-mono),'IBM Plex Mono',monospace;font-size:9px;color:var(--dim);line-height:1.7;}

/* ── DN-01 · Light: glows decorativos constantes atenuados ──
   Flag §6 del sistema visual (sistema-visual-temas.html): "las animaciones de glow del
   Dark pueden atenuarse en Light (esperado en una UI clara)" — los acentos Light son
   oscuros y un glow oscuro sobre fondo claro lee como mancha. Solo se atenúan los glows
   DECORATIVOS constantes; los pulsos de estado (EN VIVO, live-dot, ch-ind, pulse) no se tocan. */
[data-theme="light"] .logo-glyph { animation: none; box-shadow: 0 0 6px rgba(var(--amber-rgb),.25); }
[data-theme="light"] .nav-btn.active::before { box-shadow: 0 0 4px rgba(var(--cyan-rgb),.45); }
[data-theme="light"] input:checked + .slid::before { box-shadow: 0 0 3px rgba(var(--green-rgb),.4); }

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE (Fase 9 · QA de UI)
   El prototipo aprobado de Fase 1 es desktop-only (0 media queries) y el shell tenía
   `200px 1fr` fijo: por debajo de ~1024px el contenido se RECORTABA en silencio (a 375px
   el main quedaba en 172px con 41 elementos cortados). Estos breakpoints son una
   EXTENSIÓN aprobada por el owner en Fase 9.
   Regla de seguridad: TODO vive dentro de media queries → el layout de escritorio
   (≥1024px), que es el validado contra el prototipo, queda intacto por construcción.
   Breakpoints: ≥1024 escritorio · 640–1023 tablet (rail de iconos) · <640 móvil (tira).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Común a tablet y móvil (<1024px) ── */
@media (max-width: 1023px) {
  .main { padding: 14px; }

  /* Cabecera de página: el título y las acciones dejan de competir por el ancho */
  .ph { flex-direction: column; align-items: stretch; gap: 10px; }
  .ph-actions { flex-wrap: wrap; }

  /* Rejillas: 4 y 3 columnas no caben → 2 */
  .g3, .g4 { grid-template-columns: 1fr 1fr; }

  /* Tablas/feeds de columnas fijas: en vez de recortarse, la tarjeta scrollea en
     horizontal y las filas conservan su ancho mínimo (no se pierde ninguna columna). */
  .card { overflow-x: auto; }
  .sig-row { min-width: 760px; }   /* 610px de columnas fijas + holgura del contenido */
  .poll-row, .log-row { min-width: 420px; }

  /* El ticker del topbar se desplaza en vez de comerse los controles de la derecha */
  .ticker-strip { overflow-x: auto; scrollbar-width: none; }
  .ticker-strip::-webkit-scrollbar { display: none; }
}

/* ── Tablet (640–1023px): la barra lateral se reduce a un rail de iconos ── */
@media (min-width: 640px) and (max-width: 1023px) {
  /* minmax(0,…): sin esto el mínimo `auto` de la columna impide encoger bajo el contenido */
  .shell { grid-template-columns: 56px minmax(0, 1fr); }
  .nav-btn { justify-content: center; padding: 9px 0; margin: 1px 4px; gap: 0; }
  .nav-icon { font-size: 15px; }
  /* La etiqueta se oculta VISUALMENTE pero sigue disponible para lectores de pantalla
     (patrón sr-only) — el nombre accesible del enlace no se pierde. */
  .nav-label,
  .nav-group-label,
  .ks-label,
  .user-info {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .nav-count { position: absolute; top: 3px; right: 4px; margin-left: 0; padding: 0 4px; }
  .sidebar-footer { padding: 8px 6px; }
  .ks-btn { padding: 9px 0; font-size: 13px; letter-spacing: 0; }
  .user-row { justify-content: center; padding: 8px 0 0; }
}

/* ── Móvil (<640px): una sola columna; la navegación pasa a tira horizontal ── */
@media (max-width: 639px) {
  /* minmax(0,…): la tira horizontal del nav tiene un min-content grande y, con `1fr`,
     estiraba la columna (main llegaba a 966px en un viewport de 375 → recorte invisible). */
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px auto 1fr; }
  .sidebar, .main { min-width: 0; }
  .main { padding: 12px; }

  /* Nav horizontal desplazable: con las etiquetas visibles (un icono solo es críptico) */
  .sidebar {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar > div { display: flex; align-items: center; flex-shrink: 0; }
  .nav-group-label { display: none; }          /* los rótulos de grupo no caben en la tira */
  .nav-btn { white-space: nowrap; margin: 0 3px; }
  .nav-btn.active::before { display: none; }   /* el indicador lateral no aplica en horizontal */
  .sidebar-footer {
    margin-top: 0; margin-left: auto;
    border-top: 0; padding: 6px 8px;
    display: flex; align-items: center; flex-shrink: 0;
  }
  .ks-btn { width: auto; padding: 8px 10px; white-space: nowrap; }
  .user-row { display: none; }                 /* informativo: cede espacio en móvil */

  /* Todo a una columna */
  .g2, .g3, .g4, .g-13, .g-31, .form-row-2 { grid-template-columns: 1fr; }

  /* El reloj ET del topbar cede espacio a los controles */
  .et-clock { display: none; }
}

/* ═══ ADMINISTRACIÓN · usuarios y auditoría (F3.4) ═══
   Sin colores propios: todo sale de las variables de tema, así que Dark y Light (DN-01)
   quedan cubiertos por construcción y no hay que mantener dos paletas. */

/* Nombre accesible para las tablas sin encabezado visible (WCAG 1.3.1). NO display:none:
   eso las sacaría del árbol de accesibilidad, que es justo lo contrario de lo buscado. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Las acciones por fila caben apretadas; el gap evita que se toquen al pulsar en móvil. */
.rtbl td .btn { padding: 3px 8px; font-size: 10px; }
.rtbl td .btn + .btn { margin-left: 4px; }

/* Aviso de resultado (alta correcta, usuario desactivado…). Verde del sistema, sin inventar. */
.infobox[role='status'] {
  border-color: rgba(var(--green-rgb), .25);
  background: rgba(var(--green-rgb), .06);
  color: var(--green);
}

/* ═══════════════════════════════════════
   DETALLE DE SEÑAL — portado de
   Documentación/Prototipo/gaps-login-detalle-senal.html
   (gap de diseño aprobado en Fase 1: GET /admin/signals/{id})

   Los nombres son los del prototipo salvo el bloque de features, que ahí se llamaba `.feat`
   y aquí va como `.sd-feat`: esta hoja ya tiene una familia `.feat-row/.feat-name/.feat-bar`
   para las barras de importancia del modelo, y dos cosas distintas con el mismo prefijo se
   acaban confundiendo al mantenerlas.
═══════════════════════════════════════ */
.sd-back {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(var(--void-rgb), .72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto;
}
.sd-panel {
  width: 100%; max-width: 1100px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r); overflow: hidden;
}
.sd-head {
  background: color-mix(in srgb, var(--deep) 60%, var(--surface));
  border-bottom: 1px solid var(--border);
  padding: 12px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sd-head .tk { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 14px; color: var(--cyan); font-weight: 700; }
.sd-head .sid { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 11px; color: var(--dim); }
.sd-head .sd-close {
  margin-left: auto; color: var(--dim); cursor: pointer;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 11px;
  background: none; border: 0; padding: 4px 6px;
}
.sd-head .sd-close:hover { color: var(--text); }
.sd-body { padding: 14px 16px; }
.sd-g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 14px; gap: 14px; }
@media (max-width: 760px) { .sd-g3 { grid-template-columns: 1fr; } }
.sd-sub {
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim);
  margin: 0 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 5px;
}
.kvr {
  display: flex; justify-content: space-between; gap: 10px; padding: 4px 0;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 11px;
  border-bottom: 1px dashed rgba(var(--border-rgb), .7);
}
.kvr:last-child { border-bottom: none; }
.kvr .k { color: var(--dim); }
.kvr .v { color: var(--text); font-weight: 500; text-align: right; }
.kvr .v.up { color: var(--green); } .kvr .v.dn { color: var(--red); }
.kvr .v.cy { color: var(--cyan); } .kvr .v.am { color: var(--amber); }
.sd-feat { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2px 16px; gap: 2px 16px; }
@media (max-width: 760px) { .sd-feat { grid-template-columns: 1fr; } }
.sd-feat .fr {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 10.5px;
  padding: 3px 0; border-bottom: 1px dashed rgba(var(--border-rgb), .6);
}
.sd-feat .fr .fn { color: var(--dim); }
.sd-feat .fr .fv { color: var(--text); }
.sd-feat .dimlbl {
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 9px; color: var(--cyan); text-transform: uppercase; letter-spacing: .5px;
  margin: 8px 0 2px; grid-column: 1 / -1;
}
.tl { display: flex; flex-wrap: wrap; gap: 0; margin-top: 4px; }
.tl .st { display: flex; flex-direction: column; align-items: center; flex: 1 1; min-width: 80px; position: relative; padding-top: 14px; }
.tl .st::before { content: ''; position: absolute; top: 4px; left: 50%; width: 100%; height: 2px; background: var(--border); }
.tl .st:first-child::before { display: none; }
.tl .st .dot { position: absolute; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--mist); }
.tl .st.done .dot { background: var(--green); }
/* El paso ACTUAL es el que el owner busca de un vistazo: se marca con el halo, no solo el color. */
.tl .st.now .dot { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.tl .st .nm { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 9px; color: var(--text); font-weight: 700; }
.tl .st .ts { font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 8px; color: var(--dim); }
table.x { width: 100%; border-collapse: collapse; font-family: var(--font-mono), 'IBM Plex Mono', monospace; font-size: 10.5px; }
table.x th { text-align: left; color: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: .5px; padding: 5px 7px; border-bottom: 1px solid var(--border2); }
table.x td { padding: 5px 7px; border-bottom: 1px dashed rgba(var(--border-rgb), .6); color: var(--text); }

/* Previas a operar (CANDIDATE/APPROVED). Cian apagado: se lee como «camino a activa» sin dar a
   entender que ya hay posición abierta, que es lo que sugeriría el cian pleno de .b-active. */
.b-pend { background: rgba(var(--cyan-rgb), .04); color: var(--dim); border-color: rgba(var(--cyan-rgb), .18); }

/* Fila del feed pinchable: el feed pasa a ser navegable hacia el detalle. */
.sig-row.clickable { cursor: pointer; }
.sig-row.clickable:hover { background: rgba(var(--cyan-rgb), .04); }
.sig-row.clickable:focus-visible { outline: 1px solid var(--cyan); outline-offset: -1px; }

/* Detalle expandible de una línea de log (F4.3). El feed recorta a una línea, y los mensajes
   que importan son largos y con saltos: aquí se ven enteros y se pueden copiar. */
.log-row.clickable { cursor: pointer; }
.log-row.clickable:hover { background: rgba(var(--cyan-rgb), .04); }
.log-row.clickable:focus-visible { outline: 1px solid var(--cyan); outline-offset: -1px; }
.log-detalle {
  padding: 10px 14px 12px;
  background: rgba(var(--deep-rgb), .55);
  border-bottom: 1px solid var(--border);
}
.log-traza-lbl {
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px;
  margin: 10px 0 4px;
}
.log-traza {
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 10.5px; line-height: 1.55; color: var(--text);
  background: var(--void); border: 1px solid var(--border); border-radius: var(--r);
  padding: 10px 12px; margin: 0;
  /* Una traza es ancha: se respeta el formato y se desplaza dentro de su caja, sin arrastrar
     la página entera en horizontal. */
  white-space: pre; overflow-x: auto; max-height: 340px; overflow-y: auto;
}

/* Frescura del ticker (F4.6). Un valor que no es de ahora NO puede tener el mismo aspecto que
   uno que sí: enseñar el último conocido como si fuera actual es peor que decir que no hay
   conexión, porque invita a operar sobre un precio viejo sin saberlo. */
.ticker-val.tv-cerrado { opacity: .55; }            /* mercado cerrado: es el cierre, es normal */
.ticker-val.tv-rancio {                              /* sesión abierta y sin dato: avería */
  opacity: .5;
  text-decoration: line-through;
  -webkit-text-decoration-color: rgba(var(--red-rgb), .8);
          text-decoration-color: rgba(var(--red-rgb), .8);
}