/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/d7864107-ee57-4e4d-b25e-8346e1d9816a.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/a95dc371-2c9d-4c8b-adab-337fe48ac54f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/c044b64b-3fc0-4d63-b97e-c8e33b83ed52.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/7af3bb03-e7e5-4a3e-bf60-1e2d47fefad4.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/ae3e14b6-5ce3-4b18-9e97-724de974226c.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/15ed5250-cf19-4870-ad37-ab26c38a24cb.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/d7864107-ee57-4e4d-b25e-8346e1d9816a.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/a95dc371-2c9d-4c8b-adab-337fe48ac54f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/c044b64b-3fc0-4d63-b97e-c8e33b83ed52.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/7af3bb03-e7e5-4a3e-bf60-1e2d47fefad4.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/ae3e14b6-5ce3-4b18-9e97-724de974226c.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/15ed5250-cf19-4870-ad37-ab26c38a24cb.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/d7864107-ee57-4e4d-b25e-8346e1d9816a.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/a95dc371-2c9d-4c8b-adab-337fe48ac54f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/c044b64b-3fc0-4d63-b97e-c8e33b83ed52.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/7af3bb03-e7e5-4a3e-bf60-1e2d47fefad4.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/ae3e14b6-5ce3-4b18-9e97-724de974226c.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/15ed5250-cf19-4870-ad37-ab26c38a24cb.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/d7864107-ee57-4e4d-b25e-8346e1d9816a.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/a95dc371-2c9d-4c8b-adab-337fe48ac54f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/c044b64b-3fc0-4d63-b97e-c8e33b83ed52.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/7af3bb03-e7e5-4a3e-bf60-1e2d47fefad4.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/ae3e14b6-5ce3-4b18-9e97-724de974226c.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/15ed5250-cf19-4870-ad37-ab26c38a24cb.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: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/072c5bd3-d5c0-4c33-975c-a8548943c5bb.woff") format('woff');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/d6288fae-3b44-43e9-bf52-c5510f9ad1e8.woff") format('woff');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fcd33d40-7294-4a13-b447-be6e812eba76.woff") format('woff');
  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: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/a046e5a3-f2d3-4d5c-942c-b99b5972e578.woff") format('woff');
  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: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fa4e9165-cb6b-4226-98a5-f9995e1781f7.woff") format('woff');
  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: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/85316349-e4e3-4417-8ea1-5b9973c247d4.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: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fdb0aeac-967a-493d-a2f9-6f0f2019b776.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/5cda156d-c889-4426-837b-f4d86376bd72.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: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/e15e449d-0fc9-494a-9741-92bec3d3191f.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: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/1f414d62-6867-4cb1-a32f-888ad822215d.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: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/85316349-e4e3-4417-8ea1-5b9973c247d4.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: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fdb0aeac-967a-493d-a2f9-6f0f2019b776.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/5cda156d-c889-4426-837b-f4d86376bd72.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: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/e15e449d-0fc9-494a-9741-92bec3d3191f.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: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/1f414d62-6867-4cb1-a32f-888ad822215d.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: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/85316349-e4e3-4417-8ea1-5b9973c247d4.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: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fdb0aeac-967a-493d-a2f9-6f0f2019b776.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/5cda156d-c889-4426-837b-f4d86376bd72.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: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/e15e449d-0fc9-494a-9741-92bec3d3191f.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: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/1f414d62-6867-4cb1-a32f-888ad822215d.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: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/85316349-e4e3-4417-8ea1-5b9973c247d4.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: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fdb0aeac-967a-493d-a2f9-6f0f2019b776.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/5cda156d-c889-4426-837b-f4d86376bd72.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: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/e15e449d-0fc9-494a-9741-92bec3d3191f.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: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/1f414d62-6867-4cb1-a32f-888ad822215d.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: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/85316349-e4e3-4417-8ea1-5b9973c247d4.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: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fdb0aeac-967a-493d-a2f9-6f0f2019b776.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/5cda156d-c889-4426-837b-f4d86376bd72.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: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/e15e449d-0fc9-494a-9741-92bec3d3191f.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: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/1f414d62-6867-4cb1-a32f-888ad822215d.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: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/85316349-e4e3-4417-8ea1-5b9973c247d4.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: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fdb0aeac-967a-493d-a2f9-6f0f2019b776.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/5cda156d-c889-4426-837b-f4d86376bd72.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: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/e15e449d-0fc9-494a-9741-92bec3d3191f.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: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/1f414d62-6867-4cb1-a32f-888ad822215d.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;
}

/* ============================================================
   FarmacoBox v2 — Sistema visual
   Marca Farmacotips: rojo #E63946 · Montserrat · isotipo serpiente
   ============================================================ */

:root{
  /* ----- Marca ----- */
  --red:#E63946;          /* Rojo Farmacotips — acento de marca */
  --red-deep:#C42B38;
  --red-soft:#FCE4E6;
  --navy:#1D3557;         /* Azul marino — nivel Extendido / estructura */
  --yellow:#FFF59D;       /* Badge */
  --gold:#F5A800;
  --green:#2A9D8F;
  --blue-verified:#1D9BF0;
  --purple:#6A0DAD;

  /* ----- Clínicos funcionales (markers de ficha) ----- */
  --c-core:#15803D;
  --c-ext:#7F1D1D;
  --c-warn:#CA8A04;
  --c-danger:#B91C1C;
  --c-danger-deep:#7F1D1D;

  /* ----- Superficie (tema claro) ----- */
  --stage-1:#FAFAF8;
  --stage-2:#EFEDE6;
  --ink:#0A0A0A;
  --ink-2:#3A3A3A;
  --muted:#6B6E76;
  --line:rgba(10,10,10,0.10);
  --line-2:rgba(10,10,10,0.16);
  --surface:#FFFFFF;
  --surface-2:#F6F5F1;
  --glass:rgba(255,255,255,0.72);
  --glass-line:rgba(255,255,255,0.6);
  --box-face:#FFFFFF;
  --box-edge:#E7E5DD;
  --box-inner:#1A1F28;
  --shadow-color:rgba(20,18,14,0.18);
  --scrim:rgba(28,26,22,0.42);

  /* ----- Tipografía ----- */
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',ui-monospace,Menlo,monospace;

  /* ----- Tiempos ----- */
  --t-fast:.16s;
  --t-mid:.28s;
  --t-slow:.5s;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.2,.8,.3,1);
  --ease-box:cubic-bezier(.25,.46,.45,.94);

  --topbar-h:60px;
  --history-h:78px;
}

[data-theme="dark"]{
  --stage-1:#0E1116;
  --stage-2:#070A0E;
  --ink:#F4F3EF;
  --ink-2:#C7C9CE;
  --muted:#8A8F99;
  --line:rgba(255,255,255,0.10);
  --line-2:rgba(255,255,255,0.18);
  --surface:#161B22;
  --surface-2:#1C222B;
  --glass:rgba(22,27,34,0.74);
  --glass-line:rgba(255,255,255,0.08);
  --box-face:#F4F3EF;
  --box-edge:#D8D6CE;
  --shadow-color:rgba(0,0,0,0.55);
  --scrim:rgba(4,6,9,0.66);
  --red-soft:rgba(230,57,70,0.16);
  --surface-paper:#1C222B;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(60% 50% at 14% 8%, rgba(230,57,70,.10), transparent 60%),
    radial-gradient(55% 55% at 88% 96%, rgba(29,53,87,.12), transparent 60%),
    radial-gradient(120% 95% at 50% 32%, var(--stage-1) 0%, var(--stage-2) 100%);
  background-attachment:fixed;
  line-height:1.45;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
  height:100vh;
  perspective:1500px;
  transition:color var(--t-mid) var(--ease);
}
button{font-family:inherit;cursor:pointer;color:inherit}
::selection{background:var(--red);color:#fff}

/* Layered background mesh + grid */
.bg-mesh{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-mesh::before{ /* dot grid */
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(10,10,10,.05) 1.1px, transparent 1.1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 40%, #000, transparent 78%);
          mask-image:radial-gradient(75% 70% at 50% 40%, #000, transparent 78%);
}
[data-theme="dark"] .bg-mesh::before{background-image:radial-gradient(rgba(255,255,255,.06) 1.1px, transparent 1.1px)}
.bg-mesh__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;mix-blend-mode:multiply;animation:blobDrift 24s ease-in-out infinite}
[data-theme="dark"] .bg-mesh__blob{mix-blend-mode:screen;opacity:.32}
.bg-mesh__blob.b1{width:520px;height:520px;left:-120px;top:-120px;background:radial-gradient(circle,var(--red),transparent 65%)}
.bg-mesh__blob.b2{width:560px;height:560px;right:-140px;bottom:-160px;background:radial-gradient(circle,var(--navy),transparent 65%);animation-delay:-8s}
.bg-mesh__blob.b3{width:380px;height:380px;right:18%;top:-160px;background:radial-gradient(circle,var(--gold),transparent 66%);opacity:.28;animation-delay:-15s}
@keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,30px) scale(1.08)}66%{transform:translate(-30px,20px) scale(.96)}}

/* Floating background particles */
.bg-particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-particles span{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--red);opacity:.05;
  animation:floatP linear infinite;
}
[data-theme="dark"] .bg-particles span{opacity:.10}
@keyframes floatP{
  from{transform:translateY(0) translateX(0)}
  to{transform:translateY(-120vh) translateX(40px)}
}

/* Spotlight following cursor over the stage */
.spotlight{
  position:fixed;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(230,57,70,.10), transparent 62%);
  pointer-events:none;z-index:1;opacity:0;transition:opacity .4s var(--ease);
  mix-blend-mode:multiply;transform:translate(-50%,-50%);
}
[data-theme="dark"] .spotlight{mix-blend-mode:screen;background:radial-gradient(circle, rgba(230,57,70,.16), transparent 62%)}

/* ============================================================ TOPBAR */
.topbar{
  position:relative;z-index:20;flex-shrink:0;
  min-height:var(--topbar-h);
  flex-wrap:wrap;row-gap:8px;
  display:flex;align-items:center;gap:14px;
  padding:0 18px;
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand__logo{height:34px;width:auto;flex-shrink:0}
[data-theme="dark"] .brand__logo{filter:none}
.brand__text{display:flex;flex-direction:column;line-height:1;min-width:0}
.brand__title{
  font-weight:900;font-size:17px;letter-spacing:-.02em;
  text-transform:uppercase;display:flex;align-items:baseline;gap:2px;
}
.brand__title b{color:var(--red)}
.brand__sub{
  font-size:9.5px;color:var(--muted);font-weight:600;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;
}

.topbar__center{flex:0 1 auto;display:flex;justify-content:flex-start;min-width:0}
.topbar__right{display:flex;align-items:center;gap:7px;flex-shrink:0;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;row-gap:7px}

/* Level segmented */
.seg{
  display:inline-flex;background:var(--surface-2);
  border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px;
}
.seg__btn{
  border:none;background:transparent;color:var(--muted);
  font-weight:700;font-size:11.5px;letter-spacing:.02em;
  padding:7px 15px;border-radius:8px;white-space:nowrap;
  transition:all var(--t-fast) var(--ease);display:flex;align-items:center;gap:7px;
}
.seg__btn:hover{color:var(--ink)}
.seg__btn.active{background:var(--ink);color:var(--stage-1);box-shadow:0 1px 4px var(--shadow-color)}
.seg__btn[data-nivel="2"].active{background:var(--navy);color:#fff}
.seg__cnt{
  font-family:var(--mono);font-size:10px;font-weight:600;
  padding:1px 6px;border-radius:20px;background:rgba(0,0,0,.10);
  font-variant-numeric:tabular-nums;
}
.seg__btn.active .seg__cnt{background:rgba(255,255,255,.22)}

/* Stat pills */
.stat{
  display:flex;align-items:center;gap:9px;height:38px;padding:0 13px 0 10px;
  border-radius:10px;border:1px solid var(--line);background:var(--surface-2);
}
.stat__ic{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;background:var(--red-soft);flex-shrink:0}
.stat__ic svg{width:14px;height:14px;stroke:var(--red);stroke-width:2.2;fill:none}
.stat__txt{display:flex;flex-direction:column;line-height:1}
.stat__num{font-family:var(--mono);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;color:var(--red)}
.stat__lbl{font-size:8px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:700;margin-top:3px}

/* Prominent search pill */
.search-pill{
  display:flex;align-items:center;gap:9px;height:38px;padding:0 10px 0 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  font-weight:600;font-size:12.5px;transition:all var(--t-fast) var(--ease);min-width:172px;
}
.search-pill:hover{border-color:var(--red);color:var(--ink);box-shadow:0 2px 10px rgba(230,57,70,.14)}
.search-pill svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none;flex-shrink:0}
.search-pill span{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-pill kbd{font-family:var(--mono);font-size:9.5px;border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;background:var(--surface-2);color:var(--muted)}

/* History dropdown */
.hist-wrap{position:relative}
.hist-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-family:var(--mono);font-size:9.5px;font-weight:700;display:none;place-items:center;border:2px solid var(--glass);font-variant-numeric:tabular-nums}
.hist-badge.show{display:grid}
.hist-panel{position:absolute;top:48px;right:0;width:330px;max-height:64vh;background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:0 20px 56px var(--shadow-color);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none;transition:all var(--t-fast) var(--ease-out);z-index:60}
.hist-panel.open{opacity:1;transform:none;pointer-events:auto}
.hist-panel__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.hist-panel__head h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.hist-panel__head .n{font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.hist-panel__list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:5px;scrollbar-width:thin}
.hist-panel__list::-webkit-scrollbar{width:6px}.hist-panel__list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
.hist-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);font-size:12.5px;font-weight:600;text-align:left;transition:all var(--t-fast) var(--ease);width:100%}
.hist-row:hover{border-color:var(--red);transform:translateX(2px)}
.hist-row .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.hist-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-row .gp{font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-panel__foot{display:flex;gap:7px;padding:11px 13px;border-top:1px solid var(--line);background:var(--surface-2)}
.hist-panel__foot .mini-btn{flex:1;justify-content:center}
.hist-empty2{padding:30px 16px;text-align:center;color:var(--muted);font-size:12.5px;font-style:italic;line-height:1.5}

/* Icon buttons */
.iconbtn{
  width:38px;height:38px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);display:grid;place-items:center;
  transition:all var(--t-fast) var(--ease);position:relative;flex-shrink:0;
}
.iconbtn:hover{border-color:var(--line-2);transform:translateY(-1px)}
.iconbtn:active{transform:translateY(1px)}
.iconbtn svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.iconbtn.is-off svg{stroke:var(--muted)}
.iconbtn.is-off::after{
  content:"";position:absolute;left:7px;right:7px;top:50%;height:2px;
  background:var(--muted);transform:rotate(-32deg);border-radius:2px;
}

.btn-temas{
  display:flex;align-items:center;gap:8px;height:38px;padding:0 13px;
  border:1px solid var(--line);border-radius:10px;background:var(--ink);color:var(--stage-1);
  font-weight:700;font-size:12px;transition:all var(--t-fast) var(--ease);
}
.btn-temas:hover{transform:translateY(-1px)}
.btn-temas svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}
.btn-temas .cnt{font-family:var(--mono);font-size:11px;opacity:.8;font-variant-numeric:tabular-nums}

/* Mode tabs (Sorteo / Estudio / Examen / Flashcard) */
.modes{display:inline-flex;gap:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:3px}
.modes__btn{
  border:none;background:transparent;color:var(--muted);font-weight:700;font-size:11.5px;
  padding:7px 13px;border-radius:8px;transition:all var(--t-fast) var(--ease);
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.modes__btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none}
.modes__btn:hover{color:var(--ink)}
.modes__btn.active{background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(230,57,70,.32)}

/* ============================================================ STAGE */
.stage{
  position:relative;z-index:5;flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform-style:preserve-3d;
}
.mode-banner{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  display:none;align-items:center;gap:10px;z-index:8;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px 8px 12px;box-shadow:0 6px 24px var(--shadow-color);font-size:12.5px;font-weight:600;
}
.mode-banner.show{display:flex}
.mode-banner .badge{background:var(--red);color:#fff;font-weight:800;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.mode-banner .timer{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}

/* Scene wrapper does the choreography transforms */
.scene{
  position:relative;width:340px;height:340px;
  transform-style:preserve-3d;
  transition:transform var(--t-mid) var(--ease-out), filter var(--t-mid) var(--ease);
  cursor:pointer;
  animation:idleFloat 5.5s var(--ease) infinite;
}
@keyframes idleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.scene.disabled{cursor:not-allowed;opacity:.5;filter:grayscale(.5)}

/* The cube */
.cube{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(-22deg) rotateY(-32deg);
  transition:transform .4s var(--ease-out);
}
.scene:hover .cube{transform:rotateX(-20deg) rotateY(-26deg) scale(1.03)}
.face{
  position:absolute;width:340px;height:340px;
  background:linear-gradient(150deg,#ffffff 0%,#FBFAF6 46%, var(--box-edge) 124%);
  border-radius:22px;
  border:1px solid rgba(0,0,0,.07);
  display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;overflow:hidden;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.95), inset 0 -34px 60px rgba(60,40,10,.06), inset 0 0 0 6px rgba(255,255,255,.4);
}
.face::before{ /* paper grain */
  content:"";position:absolute;inset:0;opacity:.55;
  background-image:radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);
  background-size:7px 7px;
}
.face__q{font-weight:900;font-size:150px;color:var(--ink);opacity:.07;line-height:1;user-select:none;position:relative;z-index:1}
.face__logo{position:absolute;width:120px;height:auto;opacity:.12;filter:none;z-index:2}
.face--front .face__logo{top:26px;left:26px;width:70px;opacity:.5}

/* gift-box ribbon (cross bands) */
.ribbon{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(50% - 26px), var(--red) calc(50% - 26px), var(--red) calc(50% - 8px), var(--red-deep) calc(50% + 8px), var(--red-deep) calc(50% + 26px), transparent calc(50% + 26px)),
    linear-gradient(0deg,transparent calc(50% - 26px), var(--red) calc(50% - 26px), var(--red) calc(50% - 8px), var(--red-deep) calc(50% + 8px), var(--red-deep) calc(50% + 26px), transparent calc(50% + 26px));
}
.ribbon::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent calc(50% - 26px), rgba(255,255,255,.28) calc(50% - 26px), transparent calc(50% - 16px)),
    linear-gradient(0deg,transparent calc(50% - 26px), rgba(255,255,255,.28) calc(50% - 26px), transparent calc(50% - 16px));
}
.knot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 32%, #FF6B76, var(--red) 55%, var(--red-deep));
  box-shadow:0 8px 24px rgba(230,57,70,.45), inset 0 3px 8px rgba(255,255,255,.4), inset 0 -8px 14px rgba(120,20,28,.5);
  border:3px solid rgba(255,255,255,.55);
}
.knot span{font-weight:900;font-size:58px;color:#fff;line-height:1;text-shadow:0 2px 4px rgba(120,20,28,.5)}
.face--seal{background:linear-gradient(155deg,#fff,#F4F1EA)}
.face--seal .seal{
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.face--seal .seal__mark{
  width:118px;height:118px;border-radius:50%;display:grid;place-items:center;
  border:3px solid var(--red);background:var(--red-soft);
}
.face--seal .seal__mark img{width:74px;opacity:.95}
.face--seal .seal__txt{font-weight:900;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--red)}
.face--seal .seal__sub{font-size:9px;letter-spacing:.18em;color:var(--muted);font-weight:700;text-transform:uppercase;margin-top:-8px}

/* Cube face transforms (half = 170) */
.face--front {transform:translateZ(170px)}
.face--back  {transform:rotateY(180deg) translateZ(170px)}
.face--right {transform:rotateY(90deg) translateZ(170px)}
.face--left  {transform:rotateY(-90deg) translateZ(170px)}
.face--bottom{transform:rotateX(-90deg) translateZ(170px)}
/* top is the lid that opens */
.face--top{
  transform:rotateX(90deg) translateZ(170px);
  transition:transform .6s var(--ease-box);
}
.cube__inner{
  position:absolute;inset:26px;border-radius:14px;
  background:radial-gradient(circle at 50% 30%, #FFEFC4, #D9A441 90%);
  transform:rotateX(90deg) translateZ(150px);
  opacity:0;display:grid;place-items:center;
  box-shadow:inset 0 0 50px rgba(160,110,20,.5);
}

/* Box glow */
.scene::after{
  content:"";position:absolute;inset:-40px;border-radius:50px;z-index:-1;
  background:radial-gradient(circle, rgba(230,57,70,.12), transparent 68%);
  transition:background var(--t-mid) var(--ease);pointer-events:none;
}
.scene:hover::after{background:radial-gradient(circle, rgba(230,57,70,.30), transparent 70%)}

.scene .box-shadow{
  position:absolute;bottom:-58px;left:50%;width:280px;height:54px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse, var(--shadow-color), transparent 70%);
  transition:all var(--t-mid) var(--ease);z-index:-2;
}

/* --- choreography states --- */
.scene.shaking{animation:boxShake 1.2s var(--ease) both}
@keyframes boxShake{
  0%,100%{transform:translate(0,0) rotate(0)}
  10%{transform:translate(-6px,2px) rotate(-2deg)}
  20%{transform:translate(7px,-3px) rotate(2.4deg)}
  30%{transform:translate(-8px,3px) rotate(-2.8deg)}
  40%{transform:translate(8px,-4px) rotate(3deg)}
  55%{transform:translate(-9px,4px) rotate(-3.4deg)}
  70%{transform:translate(9px,-3px) rotate(3.4deg)}
  85%{transform:translate(-6px,2px) rotate(-2deg)}
}
.scene.shaking .box-shadow{animation:shadowSquish 1.2s var(--ease) both}
@keyframes shadowSquish{0%,100%{width:280px}50%{width:230px;opacity:.7}}

.scene.spinning .cube{animation:boxSpin 2.6s var(--ease-box) both}
@keyframes boxSpin{
  from{transform:rotateX(-22deg) rotateY(-32deg)}
  to{transform:rotateX(698deg) rotateY(1048deg)}
}
.scene.spinning{animation:spinGlow 2.6s var(--ease) both}
@keyframes spinGlow{
  0%{filter:blur(0)}
  15%{filter:blur(1.5px)}
  50%{filter:blur(0.5px)}
  85%{filter:blur(1.5px)}
  100%{filter:blur(0)}
}
.scene.spinning::after{background:radial-gradient(circle, rgba(230,57,70,.4), transparent 70%);animation:glowPulse .4s var(--ease) infinite alternate}
@keyframes glowPulse{from{opacity:.5}to{opacity:1}}

.scene.opening{animation:boxLift .7s var(--ease-out) forwards}
@keyframes boxLift{
  from{transform:translateY(0) scale(1)}
  to{transform:translateY(-58px) scale(1.14)}
}
.scene.opening .face--top{transform:rotateX(90deg) translateZ(300px) rotateX(-52deg)}
.scene.opening .cube__inner{opacity:1;transition:opacity .35s ease .12s}

/* ---- Tipos de caja (skins) ---- */
.cube.skin-clasica .ribbon{opacity:0}
.cube.skin-clasica .knot{background:none;box-shadow:none;border:none;width:auto;height:auto}
.cube.skin-clasica .knot span{color:var(--ink);opacity:.10;font-size:160px;text-shadow:none}
.cube.skin-clasica .face--seal .ribbon{opacity:0}

.cube.skin-marca .face{background:linear-gradient(150deg,#28385a 0%,#1a2740 58%,#0f1830 130%);border-color:rgba(255,255,255,.09);box-shadow:inset 0 3px 0 rgba(255,255,255,.10), inset 0 -34px 60px rgba(0,0,0,.42), inset 0 0 0 6px rgba(255,255,255,.05)}
.cube.skin-marca .face::before{background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px)}
.cube.skin-marca .face--seal{background:linear-gradient(150deg,#28385a,#0f1830)}
.cube.skin-marca .seal__mark{border-color:var(--red);background:rgba(230,57,70,.20)}
.cube.skin-marca .seal__txt{color:#fff}
.cube.skin-marca .seal__sub{color:rgba(255,255,255,.6)}
.cube.skin-marca .face__logo{opacity:.55}

/* skin picker */
.skin-picker{position:absolute;left:50%;bottom:80px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;z-index:8;
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:999px;padding:6px 10px 6px 15px;box-shadow:0 8px 28px var(--shadow-color)}
.skin-picker__lbl{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.skin-chip{width:30px;height:30px;border-radius:9px;border:2px solid var(--line-2);cursor:pointer;position:relative;overflow:hidden;transition:all var(--t-fast) var(--ease);flex-shrink:0}
.skin-chip:hover{transform:translateY(-2px)}
.skin-chip.active{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.skin-chip[data-skin="regalo"]{background:#fff}
.skin-chip[data-skin="regalo"]::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 41%,var(--red) 41%,var(--red) 59%,transparent 59%),linear-gradient(0deg,transparent 41%,var(--red) 41%,var(--red) 59%,transparent 59%)}
.skin-chip[data-skin="clasica"]{background:#fff;display:grid;place-items:center;font-weight:900;color:var(--ink);font-size:16px}
.skin-chip[data-skin="marca"]{background:linear-gradient(135deg,#28385a,#0f1830)}
.skin-chip[data-skin="marca"]::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 41%,var(--red) 41%,var(--red) 59%,transparent 59%),linear-gradient(0deg,transparent 41%,var(--red) 41%,var(--red) 59%,transparent 59%)}

/* camera flash */
.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:90}
.flash.fire{animation:flashFire .42s ease}
@keyframes flashFire{0%{opacity:0}8%{opacity:.85}100%{opacity:0}}

/* particles */
.particle{position:fixed;width:9px;height:9px;border-radius:2px;pointer-events:none;z-index:60}

/* hint */
.hint{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-size:12.5px;color:var(--muted);font-weight:600;text-align:center;
  transition:opacity var(--t-mid) var(--ease);max-width:80vw;
}
.hint b{color:var(--ink)}
.key{
  display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:6px;border:1px solid var(--line-2);
  background:var(--surface);box-shadow:0 1px 0 var(--line-2);color:var(--ink);
}
.empty-state{display:none;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:24px}
.empty-state.show{display:flex}
.empty-state svg{width:90px;height:90px;stroke:var(--muted);stroke-width:1.5;fill:none;opacity:.6}
.empty-state p{color:var(--muted);font-size:14px;font-weight:600;max-width:320px}

/* ============================================================ HISTORY */
.history{
  position:relative;z-index:15;flex-shrink:0;height:var(--history-h);
  display:flex;align-items:center;gap:12px;padding:0 16px;
  background:var(--glass);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);
}
.history__label{font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:800;writing-mode:vertical-rl;transform:rotate(180deg);flex-shrink:0}
.history__scroll{flex:1;display:flex;gap:8px;overflow-x:auto;padding:8px 4px;scrollbar-width:thin;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.history__scroll::-webkit-scrollbar{height:5px}
.history__scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px}
.hist-pill{
  flex-shrink:0;display:flex;align-items:center;gap:8px;
  padding:7px 13px 7px 9px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);font-size:12px;font-weight:600;white-space:nowrap;
  transition:all var(--t-fast) var(--ease);max-width:200px;
}
.hist-pill:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:0 6px 16px var(--shadow-color)}
.hist-pill__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.hist-pill__name{overflow:hidden;text-overflow:ellipsis}
.hist-empty{color:var(--muted);font-size:12.5px;font-style:italic;padding-left:8px}
.history__actions{display:flex;gap:7px;flex-shrink:0}
.mini-btn{
  display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface-2);font-size:11.5px;font-weight:700;color:var(--ink-2);
  transition:all var(--t-fast) var(--ease);
}
.mini-btn:hover{border-color:var(--line-2);color:var(--ink)}
.mini-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none}

@keyframes histIn{from{opacity:0;transform:translateX(-14px) scale(.9)}to{opacity:1;transform:none}}
.hist-pill.new{animation:histIn .4s var(--ease-out)}

/* ============================================================ DRAWER */
.scrim{
  position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity var(--t-mid) var(--ease);z-index:40;
}
.scrim.show{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;top:0;right:0;height:100%;width:470px;max-width:92vw;z-index:50;
  background:var(--surface);border-left:1px solid var(--line);
  box-shadow:-20px 0 60px var(--shadow-color);
  transform:translateX(100%);transition:transform var(--t-slow) var(--ease-out);
  display:flex;flex-direction:column;
}
.drawer.open{transform:none}
.drawer__head{padding:18px 20px 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.drawer__titlerow{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.drawer__title{font-weight:900;font-size:17px;text-transform:uppercase;letter-spacing:-.01em}
.drawer__title b{color:var(--red)}
.drawer__close{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center}
.drawer__close svg{width:16px;height:16px;stroke:var(--ink);stroke-width:2.4;fill:none}

.search-field{position:relative;display:flex;align-items:center}
.search-field svg{position:absolute;left:12px;width:16px;height:16px;stroke:var(--muted);stroke-width:2.2;fill:none;pointer-events:none}
.search-field input{
  width:100%;height:42px;padding:0 14px 0 38px;border-radius:11px;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);
  font-family:inherit;font-size:13.5px;font-weight:500;outline:none;transition:border var(--t-fast)}
.search-field input:focus{border-color:var(--red)}
.search-field input::placeholder{color:var(--muted)}

.drawer__tabs{display:flex;gap:4px;margin-top:12px;background:var(--surface-2);padding:3px;border-radius:10px}
.drawer__tab{flex:1;border:none;background:transparent;color:var(--muted);font-weight:700;font-size:11.5px;padding:8px;border-radius:7px;transition:all var(--t-fast) var(--ease)}
.drawer__tab.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px var(--shadow-color)}

.quick-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.qa-btn{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:6px 12px;font-size:11px;font-weight:700;color:var(--ink-2);transition:all var(--t-fast) var(--ease)}
.qa-btn:hover{border-color:var(--red);color:var(--red)}

.drawer__body{flex:1;overflow-y:auto;padding:10px 14px 28px;scrollbar-width:thin}
.drawer__body::-webkit-scrollbar{width:6px}
.drawer__body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}

.tema-card{border:1px solid var(--line);border-radius:13px;margin-bottom:9px;overflow:hidden;background:var(--surface)}
.tema-card.hidden{display:none}
.tema-head{display:flex;align-items:center;gap:11px;padding:13px 14px;cursor:pointer;transition:background var(--t-fast)}
.tema-head:hover{background:var(--surface-2)}
.tema-chip{width:5px;align-self:stretch;border-radius:4px;flex-shrink:0}
.tri{width:20px;height:20px;border-radius:6px;border:2px solid var(--line-2);display:grid;place-items:center;flex-shrink:0;transition:all var(--t-fast) var(--ease);background:var(--surface)}
.tri svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;opacity:0}
.tri.on{background:var(--red);border-color:var(--red)}
.tri.on svg{opacity:1}
.tri.partial{background:var(--red-soft);border-color:var(--red)}
.tri.partial::after{content:"";width:9px;height:3px;background:var(--red);border-radius:2px}
.tema-meta{flex:1;min-width:0}
.tema-name{font-weight:700;font-size:13px;line-height:1.25}
.tema-info{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:2px;display:flex;gap:8px;align-items:center}
.tema-info .materia{text-transform:uppercase;letter-spacing:.06em;font-weight:800;font-size:9px}
.tema-count{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}
.tema-caret{width:16px;height:16px;stroke:var(--muted);stroke-width:2.4;fill:none;transition:transform var(--t-fast);flex-shrink:0}
.tema-card.open .tema-caret{transform:rotate(180deg)}
.tema-subs{display:none;padding:0 14px 8px 30px;border-top:1px solid var(--line)}
.tema-card.open .tema-subs{display:block}
.sub-row{display:flex;align-items:center;gap:10px;padding:9px 4px}
.sub-row .tri{width:18px;height:18px}
.sub-meta{flex:1;min-width:0}
.sub-name{font-size:12px;font-weight:600;line-height:1.3}
.sub-count{font-family:var(--mono);font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.search-hit{font-size:11.5px;padding:8px 12px;border-radius:9px;background:var(--surface-2);margin-bottom:5px;display:flex;align-items:center;gap:9px;cursor:pointer}
.search-hit:hover{background:var(--red-soft)}
.search-hit .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.search-hit b{font-weight:700}
.search-hit small{color:var(--muted);margin-left:auto;font-size:10px}

/* ============================================================ OVERLAY FICHA */
.overlay{
  position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity var(--t-mid) var(--ease);padding:28px;
}
.overlay.shown{opacity:1;pointer-events:auto}
.ficha{
  width:min(1080px,100%);max-height:90vh;background:var(--surface);border-radius:22px;
  border:1px solid var(--line);box-shadow:0 40px 120px rgba(0,0,0,.4);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  transform:scale(.86);opacity:0;transition:transform var(--t-mid) var(--ease-out),opacity var(--t-mid);
}
.overlay.shown .ficha{transform:scale(1);opacity:1}
.ficha__watermark{position:absolute;right:-40px;bottom:-30px;width:340px;opacity:.05;pointer-events:none;z-index:0}
.ficha__head{position:relative;z-index:2;padding:26px 30px 20px;border-bottom:1px solid var(--line)}
.ficha__tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.tag{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;padding:5px 11px;border-radius:7px}
.tag--family{background:var(--ink)}
.tag--level-core{background:var(--c-core)}
.tag--level-ext{background:var(--c-ext)}
.tag--grupo{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.ficha__name{font-weight:900;font-size:clamp(34px,5vw,60px);line-height:.98;letter-spacing:-.02em;text-transform:uppercase;min-height:1.1em}
.ficha__name .cursor{display:inline-block;width:.5ch;background:var(--red);animation:blink .7s step-end infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}
.ficha__name-underline{height:5px;width:78px;background:var(--red);border-radius:3px;margin-top:14px}
.fallback-note{margin:14px 30px 0;padding:11px 14px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;color:var(--ink-2);line-height:1.5}
.fallback-note strong{color:var(--red)}

.ficha__body{position:relative;z-index:2;flex:1;overflow-y:auto;padding:18px 30px 24px;scrollbar-width:thin}
.ficha__body::-webkit-scrollbar{width:7px}
.ficha__body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:7px}

.acc{display:flex;flex-direction:column;gap:11px}
.acc-item{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.acc-item.open{border-color:var(--line-2);box-shadow:0 4px 18px var(--shadow-color)}
.acc-trigger{width:100%;display:flex;align-items:center;gap:13px;padding:16px 18px;border:none;background:transparent;text-align:left}
.acc-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:900;font-size:15px;color:#fff;flex-shrink:0}
.acc-item:nth-child(1) .acc-icon{background:var(--navy)}
.acc-item:nth-child(2) .acc-icon{background:var(--green)}
.acc-item:nth-child(3) .acc-icon{background:var(--red)}
.acc-item:nth-child(4) .acc-icon{background:var(--c-danger-deep)}
.acc-title{flex:1;font-weight:800;font-size:14.5px;letter-spacing:-.01em}
.acc-chevron{width:18px;height:18px;stroke:var(--muted);stroke-width:2.4;fill:none;transition:transform var(--t-mid)}
.acc-item.open .acc-chevron{transform:rotate(180deg)}
.acc-content{max-height:0;overflow:hidden;transition:max-height .34s var(--ease-box)}
.acc-item.open .acc-content{max-height:2600px}
.acc-inner{padding:2px 20px 20px 65px;font-size:13.5px;line-height:1.62;color:var(--ink-2)}

/* clinical markers (reused from v1 data html) */
.acc-inner strong{color:var(--ink);font-weight:700}
.acc-inner em{color:var(--muted)}
.acc-inner ul{margin:6px 0 10px;padding-left:18px}
.acc-inner li{margin-bottom:4px}
.acc-inner br{content:"";display:block;margin-top:4px}
.sub-h{display:block;font-weight:800;color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin:14px 0 5px}
.sub-h:first-child{margin-top:0}
.dosis-pill{
  display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;
  background:var(--red-soft);color:var(--red-deep);padding:3px 10px;border-radius:7px;margin:3px 4px 3px 0;line-height:1.5;
}
[data-theme="dark"] .dosis-pill{color:#FF9aa3}
.ram-grave{color:var(--c-danger);font-weight:700}
.contraindicacion{color:var(--c-danger-deep);font-weight:800;text-decoration:underline;text-decoration-color:var(--c-danger)}

.ficha__foot{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:16px 30px;border-top:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap}
.ficha__source{font-size:10.5px;color:var(--muted);flex:1;min-width:160px;line-height:1.4}
.btn{
  display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:11px;
  font-weight:700;font-size:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  transition:all var(--t-fast) var(--ease);position:relative;overflow:hidden;
}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}
.btn:hover{transform:translateY(-1px);border-color:var(--line-2)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent}
.btn--primary{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 4px 16px rgba(230,57,70,.34)}
.btn--primary:hover{background:var(--red-deep)}
.btn:disabled{opacity:.5;pointer-events:none}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:translate(-50%,-50%) scale(0);animation:ripple .55s ease-out;pointer-events:none}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(4);opacity:0}}

/* ============================================================ COMMAND PALETTE */
.cmdk{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;
  background:var(--scrim);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity var(--t-fast)}
.cmdk.show{opacity:1;pointer-events:auto}
.cmdk__box{width:min(640px,92vw);background:var(--surface);border:1px solid var(--line-2);border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.45);overflow:hidden;transform:translateY(-12px);transition:transform var(--t-fast) var(--ease-out)}
.cmdk.show .cmdk__box{transform:none}
.cmdk__field{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.cmdk__field svg{width:20px;height:20px;stroke:var(--muted);stroke-width:2.2;fill:none;flex-shrink:0}
.cmdk__field input{flex:1;border:none;background:transparent;outline:none;font-family:inherit;font-size:16px;color:var(--ink);font-weight:500}
.cmdk__field kbd{font-family:var(--mono);font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.cmdk__results{max-height:48vh;overflow-y:auto;padding:8px;scrollbar-width:thin}
.cmdk__item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;cursor:pointer}
.cmdk__item.sel{background:var(--red-soft)}
.cmdk__item .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cmdk__item .name{font-weight:700;font-size:13.5px}
.cmdk__item .grp{font-size:11px;color:var(--muted);margin-left:auto;text-align:right}
.cmdk__empty{padding:26px;text-align:center;color:var(--muted);font-size:13px}

/* ============================================================ EXAM MODE */
.exam-card{width:min(680px,94vw);background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 30px 90px var(--shadow-color);overflow:hidden;display:none;flex-direction:column}
.exam-card.show{display:flex}
.exam-head{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.exam-head .lbl{font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:14px}
.exam-head .lbl b{color:var(--red)}
.exam-score{font-family:var(--mono);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.exam-body{padding:24px}
.exam-clue{font-size:14px;line-height:1.6;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:18px;max-height:240px;overflow:auto}
.exam-clue .sub-h{margin-top:10px}
.exam-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.exam-opt{padding:14px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--surface);font-weight:700;font-size:13.5px;text-align:left;transition:all var(--t-fast) var(--ease)}
.exam-opt:hover{border-color:var(--red)}
.exam-opt.correct{background:var(--green);color:#fff;border-color:var(--green)}
.exam-opt.wrong{background:var(--c-danger);color:#fff;border-color:var(--c-danger)}
.exam-opt:disabled{pointer-events:none}
.exam-foot{padding:16px 24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:var(--surface-2)}
.exam-attempts{display:flex;gap:6px}
.exam-attempts span{width:11px;height:11px;border-radius:50%;background:var(--line-2)}
.exam-attempts span.used{background:var(--c-danger)}

/* stats radial */
.stats-panel{position:absolute;top:16px;right:16px;width:260px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 12px 40px var(--shadow-color);padding:16px;display:none;z-index:9}
.stats-panel.show{display:block}
.stats-panel h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}
.stat-bar{margin-bottom:9px}
.stat-bar__top{display:flex;justify-content:space-between;font-size:11px;font-weight:700;margin-bottom:3px}
.stat-bar__top .n{font-family:var(--mono);color:var(--muted)}
.stat-bar__track{height:7px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.stat-bar__fill{height:100%;border-radius:5px;transition:width .6s var(--ease-out)}

/* toast */
.toast{position:fixed;bottom:calc(var(--history-h) + 16px);left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--stage-1);padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;
  box-shadow:0 12px 40px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:all var(--t-mid) var(--ease-out);z-index:95}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* tooltip */
[data-tip]{position:relative}

/* ============================================================ RESPONSIVE */
@media (max-width:1340px){
  .brand__sub{display:none}
  .modes__btn span{display:none}
  .modes__btn{padding:8px 11px}
  .search-pill span,.search-pill kbd{display:none}
  .search-pill{min-width:0;width:38px;justify-content:center;padding:0}
}
@media (max-width:920px){
  .topbar{flex-wrap:wrap;height:auto;padding:10px 12px;gap:8px}
  .topbar__center{order:3;flex-basis:100%;justify-content:stretch}
  .modes{width:100%;justify-content:space-between}
  .modes__btn{flex:1;justify-content:center}
  .stat{display:none}
  .scene,.face,.face--front,.cube{width:260px;height:260px}
  .face{width:260px;height:260px}
  .face--front{transform:translateZ(130px)}
  .face--back{transform:rotateY(180deg) translateZ(130px)}
  .face--right{transform:rotateY(90deg) translateZ(130px)}
  .face--left{transform:rotateY(-90deg) translateZ(130px)}
  .face--bottom{transform:rotateX(-90deg) translateZ(130px)}
  .face--top{transform:rotateX(90deg) translateZ(130px)}
  .face__q{font-size:110px}
}
@media (max-width:560px){
  .history__label{display:none}
  .ficha__foot{gap:7px}
  .btn{height:38px;padding:0 13px;font-size:12px}
  .ficha__body{padding:14px 18px}
  .acc-inner{padding:2px 14px 16px 16px}
  .exam-options{grid-template-columns:1fr}
  .overlay{padding:10px}
  .seg__btn{padding:7px 11px}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.05ms !important}
  .bg-particles{display:none}
}


/* ===================== 3 MODOS — CSS adaptado a la paleta del bundle ===================== */
/* Timer chip de FarmacoBox */
.fbx-timer{display:none;align-items:center;gap:10px;padding:8px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:5;
  font-family:var(--mono);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.fbx-timer.show{display:inline-flex}
.fbx-timer__lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.fbx-timer__val{font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;min-width:46px;text-align:center}
.fbx-timer__bar{display:block;width:90px;height:5px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.fbx-timer__bar-fill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#16A34A,#65A30D);transition:width 1s linear,background .3s}
.fbx-timer.warning .fbx-timer__bar-fill{background:linear-gradient(90deg,#CA8A04,#EAB308)}
.fbx-timer.expired{border-color:var(--red);background:var(--red-soft)}
.fbx-timer.expired .fbx-timer__val{color:var(--red)}
.fbx-timer.expired .fbx-timer__bar-fill{background:var(--red);width:100%!important;animation:fbx-pulse 1s ease-in-out infinite}
@keyframes fbx-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* Submenú Estudio */
.estudio-tabs{display:none;justify-content:center;gap:6px;padding:10px 16px;margin-top:8px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;width:fit-content;margin-left:auto;margin-right:auto}
.estudio-tabs.show{display:flex}
.estudio-tab{padding:8px 18px;background:transparent;border:none;border-radius:10px;
  font-family:inherit;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;
  transition:all var(--t-fast) var(--ease)}
.estudio-tab:hover{color:var(--ink)}
.estudio-tab.active{background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(230,57,70,.25)}

/* FarmaBank panel — usa surface/line/red del bundle */
.fb-panel{display:none;max-width:880px;margin:24px auto 32px;padding:24px;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 4px 24px rgba(0,0,0,.04)}
.fb-panel.show{display:block}
.fb-view{animation:fb-fade .25s var(--ease)}
@keyframes fb-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fb-head{margin-bottom:18px;text-align:center}
.fb-title{font-size:24px;font-weight:800;color:var(--ink);margin:0}
.fb-title b{color:var(--red)}
.fb-sub{font-size:13px;color:var(--muted);margin:4px 0 0}
.fb-section{margin-bottom:18px;padding:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px}
.fb-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.fb-tema-chips{display:flex;flex-wrap:wrap;gap:6px}
.fb-chip{padding:6px 12px;background:var(--surface);border:1px solid var(--line);border-radius:999px;
  font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit;
  transition:all var(--t-fast) var(--ease)}
.fb-chip:hover{border-color:var(--red);color:var(--ink)}
.fb-chip.sel{background:var(--red);color:#fff;border-color:var(--red)}
.fb-chip .fb-chip-n{opacity:.75;font-size:10px;margin-left:4px;font-variant-numeric:tabular-nums}
.fb-section-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.mini-btn{padding:5px 10px;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  font-size:11px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit}
.mini-btn:hover{border-color:var(--red);color:var(--red)}
.fb-num-grid{display:flex;gap:8px;flex-wrap:wrap}
.fb-num{padding:10px 22px;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  font-family:var(--mono);font-weight:800;font-size:14px;color:var(--ink);cursor:pointer;min-width:56px}
.fb-num.sel{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.fb-modo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fb-modo{padding:16px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;
  cursor:pointer;font-family:inherit;text-align:left;transition:all var(--t-fast) var(--ease)}
.fb-modo:hover{border-color:var(--red)}
.fb-modo.sel{border-color:var(--red);background:var(--red-soft)}
.fb-modo-name{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:4px}
.fb-modo-desc{font-size:12px;color:var(--muted);line-height:1.45}
.fb-start-row{display:flex;justify-content:center;gap:10px;margin-top:6px;flex-wrap:wrap}

/* Sesión */
.fb-sesion-head{margin-bottom:20px}
.fb-sesion-meta{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.fb-tema-tag,.fb-parcial-tag{display:inline-block;padding:3px 10px;background:var(--red-soft);color:var(--red);
  border-radius:6px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.fb-parcial-tag{background:var(--surface-2);color:var(--ink-2)}
.fb-progress{width:100%;height:5px;background:var(--surface-2);border-radius:5px;overflow:hidden;margin-bottom:6px}
.fb-progress-bar{height:100%;background:var(--red);width:0%;transition:width .25s var(--ease)}
.fb-progress-text{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.fb-pregunta{padding:24px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;margin-bottom:16px}
.fb-pregunta-text{font-size:16px;font-weight:500;color:var(--ink);line-height:1.55;margin-bottom:16px}
.fb-opciones{display:flex;flex-direction:column;gap:8px}
.fb-opcion{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:12px;cursor:pointer;font-family:inherit;text-align:left;
  transition:all var(--t-fast) var(--ease)}
.fb-opcion:hover:not(:disabled){border-color:var(--red)}
.fb-opcion-letra{width:24px;height:24px;background:var(--surface-2);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--ink-2);flex-shrink:0}
.fb-opcion.sel{border-color:var(--red);background:var(--red-soft)}
.fb-opcion.sel .fb-opcion-letra{background:var(--red);color:#fff}
.fb-opcion.correcta{border-color:#16A34A;background:rgba(22,163,74,.06)}
.fb-opcion.correcta .fb-opcion-letra{background:#16A34A;color:#fff}
.fb-opcion.incorrecta{border-color:var(--red);background:var(--red-soft)}
.fb-opcion.incorrecta .fb-opcion-letra{background:var(--red);color:#fff}
.fb-opcion-text{font-size:14px;color:var(--ink);line-height:1.4;flex:1}
.fb-opcion:disabled{cursor:default}
.fb-feedback{margin-top:14px;padding:14px;border-radius:10px;border-left:3px solid}
.fb-feedback.ok{background:rgba(22,163,74,.06);border-left-color:#16A34A}
.fb-feedback.err{background:var(--red-soft);border-left-color:var(--red)}
.fb-feedback-head{font-weight:800;font-size:13px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.fb-feedback.ok .fb-feedback-head{color:#16A34A}
.fb-feedback.err .fb-feedback-head{color:var(--red)}
.fb-explicacion{font-size:13px;color:var(--ink-2);line-height:1.55}
.fb-sesion-nav{display:flex;justify-content:space-between;gap:8px}

/* Resultado */
.fb-resultado-score{display:flex;align-items:center;gap:24px;padding:24px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:16px;margin-bottom:18px}
.fb-score-circ{width:120px;height:120px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.fb-score-circ.excelente{background:linear-gradient(135deg,#16A34A,#15803D)}
.fb-score-circ.aprobado{background:linear-gradient(135deg,#CA8A04,#EAB308)}
.fb-score-circ.reprobado{background:linear-gradient(135deg,var(--red),var(--red-deep))}
.fb-score-pct{font-size:32px;font-weight:900;line-height:1}
.fb-score-frac{font-size:12px;opacity:.85;margin-top:4px}
.fb-resultado-meta>div:first-child{font-size:18px;font-weight:800;color:var(--ink)}
.fb-duracion{font-size:12px;color:var(--muted);margin-top:4px}
.fb-resultado-temas,.fb-resultado-revisar,.fb-dash-all-temas,.fb-dash-historial{margin-top:18px}
.fb-resultado-temas h3,.fb-resultado-revisar h3,.fb-dash-h{font-size:13px;font-weight:800;
  color:var(--ink);text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
.fb-tema-row{display:grid;grid-template-columns:160px 1fr 60px;gap:10px;align-items:center;padding:6px 0;
  border-bottom:1px solid var(--line)}
.fb-tema-row:last-child{border-bottom:0}
.fb-tema-name{font-size:12px;color:var(--ink);font-weight:600}
.fb-tema-bar{height:6px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.fb-tema-bar-fill{height:100%;transition:width .35s}
.fb-tema-pct{font-size:11px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.fb-revisar-item{padding:10px 12px;background:var(--surface-2);border-radius:10px;border-left:3px solid var(--red);
  margin-bottom:6px;font-size:12px;color:var(--ink-2)}
.fb-revisar-item summary{cursor:pointer;font-weight:600;color:var(--ink)}
.fb-revisar-body{margin-top:8px;display:flex;flex-direction:column;gap:6px;line-height:1.55}
.fb-resultado-acciones{display:flex;gap:8px;justify-content:center;margin-top:18px;flex-wrap:wrap}

/* Dashboard */
.fb-dash-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:10px;margin-bottom:18px}
.fb-card{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px}
.fb-card-big{background:var(--ink);color:var(--surface);border:0}
.fb-card-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:6px}
.fb-card-big .fb-card-label{color:rgba(255,255,255,.6)}
.fb-card-value-xl{font-size:46px;font-weight:900;line-height:1}
.fb-card-value{font-size:24px;font-weight:800;color:var(--ink)}
.fb-card-value-xl.ok{color:#4ADE80}.fb-card-value-xl.mid{color:#FCD34D}.fb-card-value-xl.low{color:#F87171}
.fb-card-sub{font-size:11px;color:var(--muted);margin-top:4px}
.fb-card-big .fb-card-sub{color:rgba(255,255,255,.55)}
.fb-dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.fb-dash-col{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px}
.fb-dash-help{font-size:10px;color:var(--muted);margin:-6px 0 8px}
.fb-empty{text-align:center;padding:18px;color:var(--muted);font-size:12px;font-style:italic}
.fb-hist-item{display:flex;gap:10px;padding:6px 10px;background:var(--surface);border-radius:8px;
  border-left:3px solid;margin-bottom:4px}
.fb-hist-item.ok{border-left-color:#16A34A}
.fb-hist-item.err{border-left-color:var(--red)}
.fb-hist-id{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink)}
.fb-hist-meta{font-size:10px;color:var(--muted);margin-left:auto}

/* === FarmaSearch — buscador puro (sin grid de browse) === */
.fs-panel{display:none;max-width:780px;margin:32px auto 32px;padding:32px;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 4px 24px rgba(0,0,0,.04)}
.fs-panel.show{display:block}

/* Hero (encabezado del buscador) */
.fs-hero{text-align:center;margin-bottom:24px}
.fs-hero-ico{display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;background:var(--red-soft);border-radius:16px;margin-bottom:12px}
.fs-hero-ico svg{width:28px;height:28px;stroke:var(--red);stroke-width:2.2;fill:none}
.fs-hero-title{font-size:28px;font-weight:900;color:var(--ink);margin:0}
.fs-hero-sub{font-size:13px;color:var(--muted);margin:6px 0 0}

/* Searchbox grande */
.fs-searchbox{position:relative;margin-bottom:18px}
.fs-searchbox-ic{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;stroke:var(--muted);stroke-width:2.2;fill:none;pointer-events:none}
.fs-input{width:100%;padding:16px 48px 16px 50px!important;font-family:inherit;font-size:16px;
  background:var(--surface);border:1.5px solid var(--line);border-radius:14px;color:var(--ink);
  transition:border-color var(--t-fast) var(--ease);box-sizing:border-box}
.fs-input:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.fs-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:0;background:var(--surface-2);color:var(--muted);
  border-radius:50%;cursor:pointer;font-size:18px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0}
.fs-clear:hover{background:var(--red);color:#fff}

/* Dropdown de sugerencias — z-index alto y visible */
.fs-suggest{position:absolute!important;top:calc(100% + 6px);left:0;right:0;z-index:300;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 36px rgba(0,0,0,.18);max-height:420px;overflow-y:auto;padding:6px}
.fs-suggest[hidden]{display:none!important}
.fs-suggest-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:10px;
  cursor:pointer;font-family:inherit;font-size:14px;color:var(--ink);
  transition:background var(--t-fast) var(--ease)}
.fs-suggest-item:hover,.fs-suggest-item.active{background:var(--surface-2)}
.fs-sg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.fs-sg-name{font-weight:700;flex:1;color:var(--ink)}
.fs-sg-name mark{background:transparent;color:var(--red);font-weight:900}
.fs-sg-meta{font-size:11px;color:var(--muted);text-align:right;flex-shrink:0;line-height:1.4}
.fs-sg-meta b{color:var(--ink-2);font-weight:700}
.fs-suggest-empty{padding:24px;text-align:center;color:var(--muted);font-size:13px;font-style:italic}

/* Ficha inline */
.fs-ficha{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;
  padding:24px;margin-top:18px;animation:fb-fade .25s var(--ease)}
.fs-ficha-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.fs-ficha-tags{display:flex;gap:6px;flex-wrap:wrap}
.fs-ficha-close{width:34px;height:34px;border:1px solid var(--line);background:var(--surface);
  border-radius:50%;font-size:20px;color:var(--muted);cursor:pointer;line-height:1;flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.fs-ficha-close:hover{background:var(--red);color:#fff;border-color:var(--red)}
.fs-ficha-name{font-size:32px;font-weight:900;color:var(--ink);margin:0 0 4px;line-height:1.15}
.fs-ficha-source{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;margin-bottom:18px}
.fs-ficha-body{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;
  max-height:560px;overflow-y:auto}
.fs-ficha-body .acc{display:flex;flex-direction:column;gap:8px}
.fs-fallback-note{margin-bottom:14px;padding:14px;background:var(--red-soft);
  border-left:3px solid var(--red);border-radius:8px;font-size:13px;color:var(--ink-2)}

/* Empty state con cards de ejemplo */
.fs-empty-state{margin-top:8px}
.fs-empty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.fs-empty-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  cursor:pointer;text-align:left;font-family:inherit;
  transition:all var(--t-fast) var(--ease)}
.fs-empty-card:hover{border-color:var(--red);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.fs-empty-dot{width:8px;height:8px;border-radius:50%}
.fs-empty-name{font-size:14px;font-weight:800;color:var(--ink)}
.fs-empty-hint{font-size:11px;color:var(--muted);font-weight:600}
.fs-empty-tip{text-align:center;font-size:11px;color:var(--muted);font-weight:600;
  letter-spacing:.04em;margin:12px 0 0}

@media (max-width:760px){
  .fb-dash-grid{grid-template-columns:1fr 1fr}
  .fb-dash-cols{grid-template-columns:1fr}
  .fb-modo-grid{grid-template-columns:1fr}
  .fb-tema-row{grid-template-columns:1fr 1fr 50px;font-size:11px}
}





/* ===== Ocultar caja y elementos del stage cuando NO es modo caja ===== */
/* FarmaSearch: ocultar TODOS los elementos del stage excepto el panel fs */
body[data-fbx-mode="farmasearch"] #scene,
body[data-fbx-mode="farmasearch"] #hint,
body[data-fbx-mode="farmasearch"] #skin-picker,
body[data-fbx-mode="farmasearch"] #empty-state,
body[data-fbx-mode="farmasearch"] #flash,
body[data-fbx-mode="farmasearch"] #stats-panel,
body[data-fbx-mode="farmasearch"] #exam-card,
body[data-fbx-mode="farmasearch"] #fbx-timer,
body[data-fbx-mode="farmasearch"] #mode-banner,
body[data-fbx-mode="farmasearch"] #estudio-tabs,
body[data-fbx-mode="farmasearch"] #fb-panel { display: none !important; }
body[data-fbx-mode="farmasearch"] #fs-panel { display: block !important; }
body[data-fbx-mode="farmasearch"] .stage { min-height: auto !important; padding-bottom: 32px; }

/* Estudio + FarmaBank: ocultar caja también */
body[data-fbx-mode="estudio"][data-fbx-sub="bank"] #scene,
body[data-fbx-mode="estudio"][data-fbx-sub="bank"] #hint,
body[data-fbx-mode="estudio"][data-fbx-sub="bank"] #skin-picker,
body[data-fbx-mode="estudio"][data-fbx-sub="bank"] #empty-state,
body[data-fbx-mode="estudio"][data-fbx-sub="bank"] #flash,
body[data-fbx-mode="estudio"][data-fbx-sub="bank"] #fbx-timer { display: none !important; }
body[data-fbx-mode="estudio"][data-fbx-sub="bank"] #fb-panel { display: block !important; }

/* Estudio + caja: mostrar caja, esconder paneles fb/fs */
body[data-fbx-mode="estudio"][data-fbx-sub="caja"] #fb-panel,
body[data-fbx-mode="estudio"][data-fbx-sub="caja"] #fs-panel { display: none !important; }

/* FarmacoBox: caja visible, paneles ocultos */
body[data-fbx-mode="farmacobox"] #fb-panel,
body[data-fbx-mode="farmacobox"] #fs-panel,
body[data-fbx-mode="farmacobox"] #estudio-tabs { display: none !important; }



/* ===== DEFENSIVE: topbar y nav siempre visibles independiente del modo ===== */
header.topbar { display: flex !important; visibility: visible !important; opacity: 1 !important; }
.topbar__center, .topbar__right, .topbar__left { display: flex !important; }
nav.modes { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
nav.modes .modes__btn { display: inline-flex !important; }
.brand, .seg, .iconbtn, .btn-temas, .search-pill, .stat { display: flex !important; }
.brand__logo, .brand__title, .brand__sub, .brand__text { display: block !important; }
.brand { align-items: center; }
.brand__text { display: flex !important; flex-direction: column; }

/* === Botón Estudio (toggle de info clínica en overlay) === */
.btn-estudio-toggle{display:flex;align-items:center;gap:14px;width:100%;
  padding:18px 22px;margin:20px 0 0;
  background:linear-gradient(135deg,var(--red-soft),rgba(230,57,70,.04));
  border:1.5px solid var(--red);border-radius:14px;cursor:pointer;
  font-family:inherit;color:var(--ink);text-align:left;
  transition:all var(--t-fast) var(--ease);position:relative;overflow:hidden}
.btn-estudio-toggle:hover{background:var(--red);color:#fff;
  box-shadow:0 6px 18px rgba(230,57,70,.28);transform:translateY(-1px)}
.btn-estudio-toggle:hover .btn-estudio-hint{color:rgba(255,255,255,.85)}
.btn-estudio-toggle[aria-expanded="true"]{
  background:var(--surface-2);color:var(--ink);border-color:var(--line);margin-bottom:10px}
.btn-estudio-toggle[aria-expanded="true"] .btn-estudio-chev svg{transform:rotate(180deg)}
.btn-estudio-toggle[aria-expanded="true"] .btn-estudio-hint{color:var(--muted)}
.btn-estudio-ico{display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;background:var(--red);color:#fff;border-radius:10px;flex-shrink:0}
.btn-estudio-toggle:hover .btn-estudio-ico{background:rgba(255,255,255,.22)}
.btn-estudio-toggle[aria-expanded="true"] .btn-estudio-ico{background:var(--red);color:#fff}
.btn-estudio-ico svg{width:22px;height:22px}
.btn-estudio-txt{font-size:18px;font-weight:900;letter-spacing:.01em}
.btn-estudio-hint{font-size:12px;color:var(--muted);font-weight:600;margin-left:auto;margin-right:8px;
  transition:color var(--t-fast) var(--ease)}
.btn-estudio-chev svg{width:20px;height:20px;transition:transform .25s var(--ease)}

/* Cuando ficha-body se muestra tras click, animar fade */
.ficha__body:not([hidden]){animation:fb-fade .25s var(--ease)}
@media (max-width:600px){
  .btn-estudio-hint{display:none}
  .btn-estudio-txt{font-size:16px}
}

/* === Row con botones Estudio + Timer === */
.ficha-actions{display:flex;gap:10px;margin:20px 0 0;align-items:stretch;flex-wrap:wrap}
.btn-estudio-toggle{flex:1 1 auto;min-width:280px;margin:0!important}
.btn-estudio-content{display:flex;flex-direction:column;align-items:flex-start;flex:1;margin-right:8px}

/* === Botón Timer === */
.btn-timer-toggle{display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:14px;
  cursor:pointer;font-family:inherit;color:var(--ink);position:relative;
  transition:all var(--t-fast) var(--ease);flex:0 0 auto;min-width:200px}
.btn-timer-toggle[hidden]{display:none!important}
.btn-timer-toggle:hover{border-color:var(--red)}
.btn-timer-toggle.running{background:linear-gradient(135deg,#15803D,#16A34A);color:#fff;border-color:#16A34A}
.btn-timer-toggle.warning{background:linear-gradient(135deg,#CA8A04,#EAB308);color:#fff;border-color:#EAB308}
.btn-timer-toggle.expired{background:linear-gradient(135deg,var(--red),var(--red-deep));color:#fff;border-color:var(--red);animation:fbx-pulse 1s ease-in-out infinite}
.btn-timer-ico{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;background:var(--ink);color:var(--surface);border-radius:8px;flex-shrink:0}
.btn-timer-toggle.running .btn-timer-ico,
.btn-timer-toggle.warning .btn-timer-ico,
.btn-timer-toggle.expired .btn-timer-ico{background:rgba(255,255,255,.22);color:#fff}
.btn-timer-ico svg{width:18px;height:18px}
.btn-timer-content{display:flex;flex-direction:column;align-items:flex-start;flex:1}
.btn-timer-val{font-family:var(--mono);font-size:18px;font-weight:900;
  font-variant-numeric:tabular-nums;line-height:1}
.btn-timer-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  opacity:.75;margin-top:2px}
.btn-timer-config{display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;background:transparent;border:none;color:inherit;opacity:.65;
  cursor:pointer;border-radius:8px;padding:0;flex-shrink:0;transition:all var(--t-fast) var(--ease)}
.btn-timer-config:hover{opacity:1;background:rgba(0,0,0,.06)}
.btn-timer-toggle.running .btn-timer-config:hover,
.btn-timer-toggle.warning .btn-timer-config:hover,
.btn-timer-toggle.expired .btn-timer-config:hover{background:rgba(255,255,255,.18)}
.btn-timer-config svg{width:18px;height:18px}

/* === Popover de configuración === */
.timer-popover{position:absolute;top:calc(100% + 8px);right:0;z-index:200;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);padding:8px;min-width:200px;
  animation:fb-fade .18s var(--ease)}
.timer-popover[hidden]{display:none!important}
.timer-popover-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:6px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.timer-popover-opts{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.timer-opt{padding:10px 12px;background:transparent;border:1px solid transparent;border-radius:8px;
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;
  text-align:center;transition:all var(--t-fast) var(--ease)}
.timer-opt:hover{background:var(--surface-2);border-color:var(--line)}
.timer-opt.active{background:var(--red);color:#fff;border-color:var(--red)}

@media (max-width:600px){
  .ficha-actions{flex-direction:column}
  .btn-timer-toggle{width:100%}
  .btn-estudio-toggle{min-width:0}
  .timer-popover{left:0;right:0;min-width:0}
}


/* ============================================================
   ====== MATRIZ DE ANTIBIÓTICOS — estilos (FarmacoBox v4) ====
   Sólo variables CSS de la marca. Colores clínicos S/R/I/V/RI.
   ============================================================ */
/* Visibilidad del panel ATB según modo/sub */
#matb-panel{display:none}
body[data-fbx-mode="estudio"][data-fbx-sub="abx"] #scene,
body[data-fbx-mode="estudio"][data-fbx-sub="abx"] #hint,
body[data-fbx-mode="estudio"][data-fbx-sub="abx"] #skin-picker,
body[data-fbx-mode="estudio"][data-fbx-sub="abx"] #empty-state,
body[data-fbx-mode="estudio"][data-fbx-sub="abx"] #flash,
body[data-fbx-mode="estudio"][data-fbx-sub="abx"] #fbx-timer,
body[data-fbx-mode="estudio"][data-fbx-sub="abx"] #fb-panel,
body[data-fbx-mode="estudio"][data-fbx-sub="abx"] #fs-panel{display:none !important}
body[data-fbx-mode="estudio"][data-fbx-sub="abx"] #matb-panel{display:block !important}
body[data-fbx-mode="estudio"][data-fbx-sub="abx"] #stage{justify-content:flex-start;overflow-y:auto;overflow-x:hidden;padding-top:8px}
/* El banner flotante (absolute) tapaba el submenú Caja/FarmaBank/Antibióticos: se oculta en ATB */
body[data-fbx-mode="estudio"][data-fbx-sub="abx"] #mode-banner{display:none !important}
body[data-fbx-mode="estudio"][data-fbx-sub="abx"] #estudio-tabs{position:relative;z-index:9}

/* Badge "NEW" en la pestaña Antibióticos */
.estudio-tab{position:relative}
.tab-new{position:absolute;top:-6px;right:-4px;font-size:8px;font-weight:900;line-height:1;
  letter-spacing:.06em;padding:2px 5px;border-radius:999px;background:var(--red);color:#fff;
  box-shadow:0 2px 6px rgba(230,57,70,.45);vertical-align:super;
  animation:tab-new-pulse 1.6s var(--ease) infinite}
.estudio-tab.active .tab-new{background:#fff;color:var(--red);box-shadow:0 2px 6px rgba(0,0,0,.18)}
@keyframes tab-new-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){.tab-new{animation:none}}

/* Panel */
.matb-panel{width:100%;max-width:1180px;margin:18px auto 48px;padding:22px 22px 40px}
.matb-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0 18px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:8px;width:fit-content;margin-left:auto;margin-right:auto}
.matb-tab{padding:8px 16px;background:transparent;border:none;border-radius:10px;font-family:inherit;
  font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.matb-tab:hover{color:var(--ink)}
.matb-tab.active{background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(230,57,70,.25)}
.matb-view{animation:matb-fade .25s var(--ease)}
@keyframes matb-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.matb-empty{padding:28px 18px;text-align:center;color:var(--muted);font-size:13px;
  background:var(--surface-2);border:1px dashed var(--line-2);border-radius:14px}
.matb-sub-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:16px 0 7px}
.matb-mono{font-family:var(--mono)}
.matb-tags{display:flex;flex-wrap:wrap;gap:6px}
.matb-tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.matb-tag--bug{font-style:italic}

/* Toolbar / filtros */
.matb-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.matb-searchwrap{flex:1;min-width:220px}
.matb-input,.matb-select{width:100%;padding:10px 14px;border-radius:11px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:13px}
.matb-select{width:auto;min-width:180px;cursor:pointer}
.matb-input:focus,.matb-select:focus{outline:none;border-color:var(--red)}
.matb-chips{display:flex;flex-wrap:wrap;gap:6px}
.matb-chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink-2);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all var(--t-fast) var(--ease)}
.matb-chip:hover{border-color:var(--red)}
.matb-chip.on{background:var(--red);color:#fff;border-color:var(--red)}
.matb-btn-reset{padding:8px 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink-2);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.matb-btn-reset:hover{border-color:var(--red);color:var(--red)}

/* Leyenda S/R/I/V/RI */
.matb-legend{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;font-size:11px;color:var(--muted)}
.matb-leg{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.matb-leg-code{font-family:var(--mono);font-weight:800;font-size:10px;padding:2px 6px;border-radius:5px;color:#fff}
.matb-leg.abx-s .matb-leg-code{background:#16A34A}
.matb-leg.abx-r .matb-leg-code{background:var(--red)}
.matb-leg.abx-i .matb-leg-code{background:#CA8A04}
.matb-leg.abx-v .matb-leg-code{background:var(--muted)}
.matb-leg.abx-ri .matb-leg-code{background:var(--red);outline:1.5px dashed var(--red);outline-offset:1px}

/* Tabla de sensibilidad */
.matb-sens-scroll{overflow:auto;max-height:64vh;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.matb-sens-table{border-collapse:separate;border-spacing:0;font-size:11px}
.matb-sens-table th,.matb-sens-table td{border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.matb-sens-corner{position:sticky;left:0;top:0;z-index:6;background:var(--surface-2);padding:8px 10px;
  text-align:left;font-weight:800;color:var(--muted);min-width:200px;text-transform:uppercase;letter-spacing:.04em;font-size:10px}
.matb-sens-ch{position:sticky;top:0;z-index:4;background:var(--surface-2);height:128px;vertical-align:bottom;padding:6px 0;min-width:30px;max-width:30px}
.matb-sens-ch span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font-size:10px;font-weight:700;color:var(--ink-2);max-height:118px;overflow:hidden;text-overflow:ellipsis}
.matb-sens-rh{position:sticky;left:0;z-index:3;background:var(--surface);text-align:left;padding:6px 10px;
  font-weight:600;font-style:italic;color:var(--ink-2);min-width:200px;max-width:240px}
.matb-sens-grouprow td{position:sticky;left:0}
.matb-sens-group{background:var(--red-soft);color:var(--red);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:10px;padding:6px 10px;position:sticky;left:0;z-index:2}
.matb-sens-cell{text-align:center;font-family:var(--mono);font-weight:800;font-size:10px;color:#fff;width:30px;height:26px}
.matb-sens-cell span{display:block}
.matb-sens-cell.abx-s{background:#16A34A}
.matb-sens-cell.abx-r{background:var(--red)}
.matb-sens-cell.abx-i{background:#CA8A04}
.matb-sens-cell.abx-v{background:var(--muted)}
.matb-sens-cell.abx-ri{background:var(--red);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.matb-sens-cell.abx-na{background:var(--surface-2)}
.matb-sens-dash{color:var(--line-2)}

/* Aparatos */
.matb-body-layout{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:start}
.matb-body-figure{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:14px;text-align:center}
.matb-body-figure svg{width:100%;max-width:200px;height:auto}
.matb-body-figure .silhouette,.matb-body-figure .silhouette path,.matb-body-figure .silhouette ellipse{fill:var(--surface);stroke:var(--line-2);stroke-width:1}
.matb-body-figure .zone{fill:rgba(230,57,70,.18);stroke:var(--red);stroke-width:1;transition:all var(--t-fast) var(--ease)}
.matb-body-figure .zone:hover{fill:rgba(230,57,70,.4)}
.matb-body-figure .zone.active{fill:var(--red)}
.matb-body-figure.has-active .zone:not(.active){opacity:.3}
.matb-body-hint{font-size:11px;color:var(--muted);margin-top:8px}
.matb-body-detail{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;min-height:240px}
.matb-body-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:6px}
.matb-body-ico{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.matb-body-name{font-size:18px;font-weight:800;color:var(--ink);margin:0}
.matb-body-desc{font-size:12.5px;color:var(--muted);margin:2px 0 0}
.matb-empiric{background:var(--red-soft);border:1px solid var(--red);border-radius:12px;padding:12px 14px;
  font-size:13px;color:var(--ink);line-height:1.5}

/* Algoritmos */
.matb-algo-list{display:flex;flex-direction:column;gap:10px}
.matb-algo-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.matb-algo-card[open]{border-color:var(--red)}
.matb-algo-sum{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px}
.matb-algo-sum::-webkit-details-marker{display:none}
.matb-algo-title{font-weight:700;font-size:14px;color:var(--ink)}
.matb-algo-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.matb-sev{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px;color:#fff}
.matb-sev.leve{background:#16A34A}.matb-sev.mod{background:#CA8A04}.matb-sev.grave{background:var(--red)}
.matb-algo-sys{font-size:11px;color:var(--muted)}
.matb-algo-body{padding:0 16px 16px}
.matb-algo-pop{font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border-radius:10px;padding:8px 12px}
.matb-algo-lines{display:flex;flex-direction:column;gap:8px}
.matb-algo-line{border-left:3px solid var(--red);padding:6px 12px;background:var(--surface-2);border-radius:0 10px 10px 0}
.matb-algo-drug{font-weight:700;font-size:13.5px;color:var(--ink)}
.matb-algo-dose{font-size:12px;color:var(--ink-2);margin-top:1px}
.matb-algo-note{font-size:11.5px;color:var(--muted);margin-top:2px}
.matb-pearls{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.matb-avoid{margin-top:12px;font-size:12.5px;background:var(--red-soft);border-radius:10px;padding:8px 12px;color:var(--ink)}
.matb-avoid b{color:var(--red)}
.matb-refs{margin-top:10px;font-size:11px;color:var(--muted);font-style:italic}

/* Comparar */
.matb-cmp-pickers{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.matb-cmp-vs{font-weight:800;color:var(--red);font-size:14px}
.matb-cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.matb-cmp-card{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.matb-cmp-cls{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--red)}
.matb-cmp-drug{font-size:16px;font-weight:700;color:var(--ink);margin-top:2px}
.matb-cmp-diff{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.matb-cmp-col{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.matb-cmp-none{font-size:12px;color:var(--muted)}
.matb-cmp-counts{display:flex;gap:18px;justify-content:center;margin-top:14px;font-size:12px;color:var(--ink-2);font-family:var(--mono)}

/* Acerca */
.matb-acerca{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;max-width:680px;margin:0 auto}
.matb-acerca h3{font-size:18px;font-weight:800;color:var(--ink);margin:0 0 10px}
.matb-acerca p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-bottom:16px}
.matb-acerca-dl{display:grid;grid-template-columns:120px 1fr;gap:8px 16px;font-size:13px}
.matb-acerca-dl dt{font-weight:800;color:var(--muted)}
.matb-acerca-dl dd{color:var(--ink-2);margin:0}

/* ===== Componente Espectro de acción (overlay + FarmaSearch) ===== */
.abx-espectro{display:flex;flex-direction:column;gap:14px}
.abx-espectro-head{display:flex;flex-direction:column;gap:4px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.abx-espectro-cls{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--red)}
.abx-espectro-drug{font-size:16px;font-weight:700;color:var(--ink)}
.abx-espectro-group-name{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.abx-espectro-pills{display:flex;flex-wrap:wrap;gap:6px}
.abx-espectro-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;
  background:var(--surface);border:1px solid var(--line);font-family:inherit}
.abx-espectro-bact{color:var(--ink-2);font-style:italic}
.abx-espectro-code{font-family:var(--mono);font-weight:800;font-size:11px;padding:1px 6px;border-radius:4px;color:#fff}
.abx-espectro-pill.abx-s{background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.30)}
.abx-espectro-pill.abx-s .abx-espectro-code{background:#16A34A}
.abx-espectro-pill.abx-r{background:var(--red-soft);border-color:var(--red)}
.abx-espectro-pill.abx-r .abx-espectro-code{background:var(--red)}
.abx-espectro-pill.abx-i{background:rgba(202,138,4,.10);border-color:rgba(202,138,4,.30)}
.abx-espectro-pill.abx-i .abx-espectro-code{background:#CA8A04}
.abx-espectro-pill.abx-v{background:var(--surface-2);border-color:var(--line)}
.abx-espectro-pill.abx-v .abx-espectro-code{background:var(--muted)}
.abx-espectro-pill.abx-ri{background:var(--red-soft);border:1.5px dashed var(--red)}
.abx-espectro-pill.abx-ri .abx-espectro-code{background:var(--red)}
.abx-espectro-legend{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.abx-leg{font-family:var(--mono);font-weight:700}

/* Sin cabecera redundante: las pestañas son lo primero del panel */
.matb-panel .matb-tabs{margin-top:6px}

/* ===== Estudio·Caja: el cubo 3D se proyecta hacia el frente y tapaba el submenú.
   Se separa verticalmente para que las opciones queden visibles arriba. ===== */
body[data-fbx-mode="estudio"][data-fbx-sub="caja"] #estudio-tabs{position:relative;z-index:20;margin-bottom:64px}

/* ===== Overlay: botón "Estudio" pequeño y transparente bajo el nombre;
   el timer (solo en FarmacoBox) es el elemento grande con barra. ===== */
.ficha-actions{flex-direction:column;align-items:stretch}
/* Botón Estudio: compacto, transparente, alineado a la izquierda, bajo el nombre */
.ficha-actions .btn-estudio-toggle{order:0;flex:0 0 auto;min-width:0;width:auto;align-self:flex-start;
  margin:0!important;padding:7px 14px;gap:9px;
  background:transparent;border:1px solid var(--line-2);border-radius:10px;color:var(--ink-2)}
.ficha-actions .btn-estudio-toggle:hover{background:var(--surface-2);border-color:var(--red);color:var(--ink);
  box-shadow:none;transform:none}
.ficha-actions .btn-estudio-toggle[aria-expanded="true"]{background:var(--surface-2);border-color:var(--line-2)}
.ficha-actions .btn-estudio-hint{display:none}
.ficha-actions .btn-estudio-ico{width:24px;height:24px;border-radius:7px;background:var(--surface-2);color:var(--ink-2)}
.ficha-actions .btn-estudio-toggle:hover .btn-estudio-ico{background:var(--red);color:#fff}
.ficha-actions .btn-estudio-ico svg{width:14px;height:14px}
.ficha-actions .btn-estudio-txt{font-size:13px;font-weight:700}
.ficha-actions .btn-estudio-chev svg{width:16px;height:16px}
/* Timer: solo visible en FarmacoBox (se oculta con [hidden]); grande, con barra */
.ficha-actions .btn-timer-toggle{order:1;flex:0 0 auto;min-width:0;width:100%;
  padding:20px 22px 26px;overflow:hidden}
.ficha-actions .btn-timer-ico{width:42px;height:42px}
.ficha-actions .btn-timer-ico svg{width:23px;height:23px}
.ficha-actions .btn-timer-val{font-size:40px;line-height:1}
.ficha-actions .btn-timer-lbl{font-size:11px;margin-top:3px}
/* Línea que se vacía conforme corre el tiempo */
.btn-timer-bar{position:absolute;left:0;right:0;bottom:0;height:7px;background:rgba(0,0,0,.14)}
.btn-timer-bar-fill{display:block;height:100%;width:100%;background:var(--red);
  transition:width .25s linear}
.btn-timer-toggle.running .btn-timer-bar-fill,
.btn-timer-toggle.warning .btn-timer-bar-fill,
.btn-timer-toggle.expired .btn-timer-bar-fill{background:rgba(255,255,255,.92)}
[data-theme="dark"] .btn-timer-bar{background:rgba(255,255,255,.14)}

/* Responsive */
@media (max-width:760px){
  .matb-body-layout{grid-template-columns:1fr}
  .matb-notas-wrap,.matb-cmp-grid,.matb-cmp-diff{grid-template-columns:1fr}
  .matb-sens-corner,.matb-sens-rh{min-width:150px}
  .abx-espectro-pill{font-size:11px;padding:3px 8px}
  .matb-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start}
}

/* ============================================================
   ====== NUEVAS SKINS DE LA CAJA (FarmacoBox v4) =============
   Versiones de alto contraste que respetan el estilo regalo
   (caras + lazo cruzado + nudo). Variables de marca / clínicas.
   ============================================================ */

/* --- Noche: caja negra, lazo rojo (máximo contraste) --- */
.cube.skin-noche .face{background:linear-gradient(150deg,#1C1C1C 0%,#101010 55%,#000 130%);
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.08), inset 0 -34px 60px rgba(0,0,0,.55), inset 0 0 0 6px rgba(255,255,255,.04)}
.cube.skin-noche .face::before{background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px)}
.cube.skin-noche .face--seal{background:linear-gradient(150deg,#1C1C1C,#000)}
.cube.skin-noche .face__logo,.cube.skin-noche .face__q{filter:brightness(0) invert(1)}
.cube.skin-noche .face__q{opacity:.06}
.cube.skin-noche .seal__txt{color:#fff}
.cube.skin-noche .seal__sub{color:rgba(255,255,255,.6)}

/* --- Carmín: caja roja, lazo crema, nudo claro --- */
.cube.skin-carmin .face{background:linear-gradient(150deg,#F4536A 0%,var(--red) 50%,var(--red-deep) 130%);
  border-color:rgba(0,0,0,.12);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.28), inset 0 -34px 60px rgba(120,20,28,.4), inset 0 0 0 6px rgba(255,255,255,.10)}
.cube.skin-carmin .face::before{background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px)}
.cube.skin-carmin .face--seal{background:linear-gradient(150deg,var(--red),var(--red-deep))}
.cube.skin-carmin .face__logo,.cube.skin-carmin .face__q{filter:brightness(0) invert(1)}
.cube.skin-carmin .face__q{opacity:.12}
.cube.skin-carmin .ribbon{background:
  linear-gradient(90deg,transparent calc(50% - 26px), #FFF7EE calc(50% - 26px), #FFF7EE calc(50% - 8px), #ECDFCE calc(50% + 8px), #ECDFCE calc(50% + 26px), transparent calc(50% + 26px)),
  linear-gradient(0deg,transparent calc(50% - 26px), #FFF7EE calc(50% - 26px), #FFF7EE calc(50% - 8px), #ECDFCE calc(50% + 8px), #ECDFCE calc(50% + 26px), transparent calc(50% + 26px))}
.cube.skin-carmin .knot{background:radial-gradient(circle at 38% 32%, #fff, #F3E7D6 55%, #D9C9B2);
  box-shadow:0 8px 24px rgba(0,0,0,.32), inset 0 3px 8px rgba(255,255,255,.65), inset 0 -8px 14px rgba(120,90,60,.3);
  border:3px solid rgba(255,255,255,.75)}
.cube.skin-carmin .knot span{color:var(--red-deep);text-shadow:none}
.cube.skin-carmin .seal__mark{border-color:#fff;background:rgba(255,255,255,.2)}
.cube.skin-carmin .seal__txt{color:#fff}
.cube.skin-carmin .seal__sub{color:rgba(255,255,255,.7)}

/* --- Oro: caja carbón, lazo dorado (elegante, alto contraste) --- */
.cube.skin-oro .face{background:linear-gradient(150deg,#242424 0%,#151515 55%,#0A0A0A 130%);
  border-color:rgba(245,168,0,.18);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.06), inset 0 -34px 60px rgba(0,0,0,.55), inset 0 0 0 6px rgba(245,168,0,.06)}
.cube.skin-oro .face::before{background-image:radial-gradient(rgba(245,168,0,.06) 1px,transparent 1px)}
.cube.skin-oro .face--seal{background:linear-gradient(150deg,#242424,#0A0A0A)}
.cube.skin-oro .face__logo,.cube.skin-oro .face__q{filter:brightness(0) invert(1)}
.cube.skin-oro .face__q{opacity:.05}
.cube.skin-oro .ribbon{background:
  linear-gradient(90deg,transparent calc(50% - 26px), #F7CF5A calc(50% - 26px), #F7CF5A calc(50% - 8px), #C7941C calc(50% + 8px), #C7941C calc(50% + 26px), transparent calc(50% + 26px)),
  linear-gradient(0deg,transparent calc(50% - 26px), #F7CF5A calc(50% - 26px), #F7CF5A calc(50% - 8px), #C7941C calc(50% + 8px), #C7941C calc(50% + 26px), transparent calc(50% + 26px))}
.cube.skin-oro .knot{background:radial-gradient(circle at 38% 32%, #FFE7A0, #F5A800 55%, #C7941C);
  box-shadow:0 8px 24px rgba(245,168,0,.45), inset 0 3px 8px rgba(255,255,255,.5), inset 0 -8px 14px rgba(120,90,10,.5);
  border:3px solid rgba(255,255,255,.5)}
.cube.skin-oro .knot span{color:#fff;text-shadow:0 2px 4px rgba(120,90,10,.5)}
.cube.skin-oro .seal__mark{border-color:#F5A800;background:rgba(245,168,0,.18)}
.cube.skin-oro .seal__txt{color:#F7CF5A}
.cube.skin-oro .seal__sub{color:rgba(255,255,255,.55)}

/* Chips del selector para las nuevas skins */
.skin-chip[data-skin="noche"]{background:#111}
.skin-chip[data-skin="noche"]::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 41%,var(--red) 41%,var(--red) 59%,transparent 59%),linear-gradient(0deg,transparent 41%,var(--red) 41%,var(--red) 59%,transparent 59%)}
.skin-chip[data-skin="carmin"]{background:linear-gradient(135deg,#F4536A,var(--red-deep))}
.skin-chip[data-skin="carmin"]::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 41%,#FFF7EE 41%,#FFF7EE 59%,transparent 59%),linear-gradient(0deg,transparent 41%,#FFF7EE 41%,#FFF7EE 59%,transparent 59%)}
.skin-chip[data-skin="oro"]{background:#141414}
.skin-chip[data-skin="oro"]::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 41%,#F5A800 41%,#F5A800 59%,transparent 59%),linear-gradient(0deg,transparent 41%,#F5A800 41%,#F5A800 59%,transparent 59%)}

/* ============================================================
   ====== v4.1 — gear, comparar buscable, FS por sistema ======
   ============================================================ */
/* Banner flotante redundante en Estudio/FarmaSearch (línea superpuesta de FarmaBank) */
body[data-fbx-mode="estudio"] #mode-banner,
body[data-fbx-mode="farmasearch"] #mode-banner{display:none !important}
/* "Temas" sólo donde se usa la caja (FarmacoBox y Estudio·Caja) */
body[data-fbx-mode="estudio"] #btn-temas,
body[data-fbx-mode="farmasearch"] #btn-temas{display:none !important}
body[data-fbx-mode="estudio"][data-fbx-sub="caja"] #btn-temas{display:inline-flex !important}

/* Engranaje de configuración */
.cfg-wrap{position:relative;display:flex}
.cfg-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:200;width:264px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;
  box-shadow:0 12px 36px var(--shadow-color)}
.cfg-panel[hidden]{display:none !important}
.cfg-sec{margin-bottom:14px}.cfg-sec:last-child{margin-bottom:0}
.cfg-h{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
.cfg-row{display:flex;gap:6px}
.cfg-opt{flex:1;padding:8px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);
  color:var(--ink-2);font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;transition:all var(--t-fast) var(--ease)}
.cfg-opt:hover{border-color:var(--red)}
.cfg-opt.active{background:var(--red);color:#fff;border-color:var(--red)}
.cfg-skins{display:flex;flex-wrap:wrap;gap:9px}
.cfg-skins .skin-chip{width:34px;height:34px}

/* Comparar — buscador + agregar + chips */
.matb-cmp-add{display:flex;gap:10px;align-items:stretch;margin-bottom:12px}
.matb-cmp-search{position:relative;flex:1;min-width:220px}
.matb-cmp-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:var(--surface);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  box-shadow:0 12px 30px var(--shadow-color);max-height:280px;overflow-y:auto}
.matb-cmp-suggest[hidden]{display:none}
.matb-cmp-sugitem{padding:10px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);
  display:flex;justify-content:space-between;gap:10px}
.matb-cmp-sugitem span{color:var(--muted);font-weight:500;font-size:11px}
.matb-cmp-sugitem:hover{background:var(--surface-2)}
.matb-cmp-addbtn{flex:0 0 auto;width:46px;border-radius:11px;border:1px solid var(--red);
  background:var(--red);color:#fff;font-size:24px;font-weight:700;line-height:1;cursor:pointer;transition:all var(--t-fast) var(--ease)}
.matb-cmp-addbtn:hover{background:var(--red-deep)}
.matb-cmp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.matb-cmp-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line)}
.matb-cmp-chip-tx{display:flex;flex-direction:column;line-height:1.1}
.matb-cmp-chip-tx b{font-size:13px;color:var(--ink)}
.matb-cmp-chip-tx i{font-size:10px;font-style:normal;color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.matb-cmp-x{width:20px;height:20px;border-radius:50%;border:none;background:var(--line);color:var(--ink);
  cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center}
.matb-cmp-x:hover{background:var(--red);color:#fff}
.matb-cmp-cols{display:grid;gap:12px;margin-bottom:8px}
.matb-cmp-count2{font-size:11px;color:var(--ink-2);font-family:var(--mono);margin-top:6px;display:flex;align-items:center;gap:6px}
.matb-cmp-dot{width:9px;height:9px;border-radius:3px;display:inline-block}
.matb-cmp-dot.abx-s{background:#16A34A}
.matb-cmp-hint{font-size:12px;color:var(--muted);text-align:center;margin-top:8px}

/* FarmaSearch — explorar por sistema */
.fs-sistemas{margin:14px auto 0;max-width:560px;text-align:left}
.fs-sistemas-head{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
.fs-sistemas-sel{width:100%}
.fs-sistemas-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.fs-sistema-pill{padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink-2);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all var(--t-fast) var(--ease)}
.fs-sistema-pill:hover{border-color:var(--red);color:var(--red)}

/* ============================================================
   ====== v4.2 — engranaje ampliado, Acerca, redes ===========
   ============================================================ */
/* Tema se controla desde el engranaje: oculta el botón luna del topbar */
#btn-theme{display:none !important}

/* Utilidades dentro del engranaje (Quedan, sonido, historial, acerca) */
.cfg-util{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.cfg-util .stat--quedan{margin:0}
.cfg-util .hist-wrap{position:static}
/* El historial se abre como panel fijo arriba-derecha (no cabe dentro del engranaje) */
.cfg-util .hist-panel{position:fixed;top:64px;right:18px;left:auto;width:330px;z-index:240}

/* Acerca (modal) */
.about-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:var(--scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:20px}
.about-overlay[hidden]{display:none !important}
.about-card{position:relative;width:min(440px,94vw);background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:26px;box-shadow:0 30px 80px var(--shadow-color)}
.about-close{position:absolute;top:12px;right:14px;width:30px;height:30px;border:none;border-radius:50%;
  background:var(--surface-2);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.about-close:hover{background:var(--red);color:#fff}
.about-brand{font-size:26px;font-weight:900;color:var(--ink);letter-spacing:-.01em}
.about-brand b{color:var(--red)}
.about-lead{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:10px 0 16px}
.about-dl{display:grid;grid-template-columns:80px 1fr;gap:7px 14px;font-size:13px;margin-bottom:16px}
.about-dl dt{font-weight:800;color:var(--muted)}
.about-dl dd{margin:0;color:var(--ink-2)}
.about-socials{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.about-soc{font-size:12px;font-weight:700;color:var(--red);text-decoration:none;padding:6px 12px;
  border:1px solid var(--line-2);border-radius:999px}
.about-soc:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* Redes sociales — esquina inferior izquierda, siempre visible */
.fbx-social{position:fixed;left:14px;bottom:12px;z-index:50;display:flex;align-items:center;gap:7px;
  padding:6px 10px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:999px;box-shadow:0 8px 28px var(--shadow-color)}
.fbx-social-lbl{font-size:11px;font-weight:800;color:var(--ink-2);letter-spacing:.02em;padding-right:2px}
.fbx-social-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--ink-2);
  transition:all var(--t-fast) var(--ease)}
.fbx-social-ic:hover{background:var(--red);color:#fff}
.fbx-social-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){ .fbx-social-lbl{display:none} .fbx-social{left:10px;bottom:10px;padding:5px 7px} }

/* Espectro: meta de cobertura + nota */
.abx-espectro-meta{font-size:11px;font-weight:700;color:#16A34A;margin-top:2px}
.abx-espectro-note{font-size:10px;color:var(--muted);font-style:italic;font-family:inherit;font-weight:500}

/* ============================================================
   ====== v4.3 — filtro de clase desplegable, seg por modo ====
   ============================================================ */
/* Core/Extendido (nivel) sólo donde se usa la caja */
body[data-fbx-mode="estudio"] .seg,
body[data-fbx-mode="farmasearch"] .seg{display:none !important}
body[data-fbx-mode="estudio"][data-fbx-sub="caja"] .seg{display:flex !important}

/* Filtro por clase de antibiótico = desplegable (Espectro de acción) */
.matb-clsfilter{margin-bottom:14px}
.matb-clsfilter-toggle{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  border:1px solid var(--line-2);border-radius:11px;background:var(--surface);color:var(--ink);
  font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;transition:all var(--t-fast) var(--ease)}
.matb-clsfilter-toggle:hover{border-color:var(--red)}
.matb-clsfilter-toggle .matb-cls-count{display:inline-grid;place-items:center;min-width:20px;height:20px;
  padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:800}
.matb-cls-chev{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-fast) var(--ease)}
.matb-clsfilter-toggle.open .matb-cls-chev{transform:rotate(180deg)}
.matb-cls-chips{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.matb-cls-chips[hidden]{display:none}

/* ============================================================
   FIX raíz: 'perspective' fuera de <body>
   El body tenía perspective:1500px (para el cubo 3D). Un ancestro
   con perspective —igual que transform— convierte el body en el
   bloque contenedor de TODOS los position:fixed descendientes, así
   que el drawer de temas, la paleta de búsqueda, modales y gate se
   "descolgaban" y quedaban cortados al hacer scroll. Movemos la
   perspectiva a .scene (su sitio correcto, justo sobre el cubo).
   ============================================================ */
body{ perspective:none !important; }
.scene{ perspective:1500px; }

/* ============================================================
   Barra lateral de TEMAS (#drawer) — slide fluido
   Antes: transición 0.5s sin capa GPU + blur recalculado por
   frame → se entrecortaba y "se quedaba colgada" al final.
   ============================================================ */
.drawer{
  /* promover a capa de compositor: el slide va por GPU, sin repintar
     la sombra ni el contenido en cada frame */
  will-change:transform;
  transform:translateX(100%) translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  /* easing más ágil (entra rápido, frena suave) y un pelín más corto */
  transition:transform .36s cubic-bezier(.22,.61,.36,1) !important;
}
.drawer.open{ transform:translateX(0) translateZ(0) !important; }

.scrim{
  /* blur ligero y barato; opacidad acompasada al panel */
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transition:opacity .36s cubic-bezier(.22,.61,.36,1) !important;
}

/* scroll interno con inercia y sin "arrastrar" la página de fondo
   (lo que hacía sentir que se quedaba pegado/colgado al soltar) */
.drawer__body{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* mientras el drawer está abierto, congelar el scroll del fondo
   (:has para navegadores modernos · .drawer-open = fallback JS) */
body:has(.drawer.open){ overflow:hidden; }
body.drawer-open{ overflow:hidden; }

/* si el usuario prefiere menos movimiento, respetarlo */
@media (prefers-reduced-motion: reduce){
  .drawer, .scrim{ transition-duration:.01ms !important; }
}

/* ============================================================
   FarmaSearch — explorar por TEMA / SUBTEMA (autocompletado)
   ============================================================ */
.fs-explore-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fs-ac{ position:relative; }
.fs-ac-input{
  width:100%; padding:11px 14px; border-radius:11px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  font-family:inherit; font-size:13.5px; font-weight:600; outline:none;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.fs-ac-input::placeholder{ color:var(--muted); font-weight:500; }
.fs-ac-input:focus{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft); }
.fs-ac-list{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  background:var(--surface); border:1px solid var(--line-2); border-radius:12px;
  box-shadow:var(--shadow-pop, 0 18px 40px rgba(17,24,39,.14));
  max-height:280px; overflow-y:auto; padding:5px;
}
.fs-ac-opt{
  display:flex; flex-direction:column; gap:1px; width:100%; text-align:left;
  padding:9px 11px; border:none; background:transparent; border-radius:9px;
  cursor:pointer; transition:background .14s var(--ease);
}
.fs-ac-opt:hover{ background:var(--surface-2); }
.fs-ac-opt-name{ font-size:13px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.fs-ac-opt-sub{ font-size:10.5px; color:var(--muted); font-weight:600; }
.fs-sistemas-meta{ margin-top:13px; font-size:12px; color:var(--muted); font-weight:600; }
.fs-sistemas-meta b{ color:var(--ink); }
@media (max-width:560px){ .fs-explore-grid{ grid-template-columns:1fr; } }

/* ============================================================
   Popup de ficha en MÓVIL: pantalla completa y scrolleable
   ============================================================ */
@media (max-width:600px){
  /* Overlay (FarmacoBox / Estudio·Caja) */
  .overlay{ padding:0 !important; }
  .overlay .ficha{
    width:100% !important; max-width:100% !important;
    height:100% !important; max-height:100% !important;
    border-radius:0 !important;
  }
  .ficha__body{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

  /* FarmaSearch: la ficha inline pasa a popup a pantalla completa y se desliza */
  .fs-ficha{
    position:fixed !important; inset:0 !important; z-index:90 !important;
    margin:0 !important; border-radius:0 !important; border:none !important;
    padding:14px 14px 30px !important; background:var(--surface) !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  .fs-ficha-head{
    position:sticky; top:0; z-index:2; background:var(--surface);
    padding:6px 0 8px; margin:-2px 0 4px;
  }
  .fs-ficha-body{ max-height:none !important; }
  /* congelar el fondo mientras el popup está abierto */
  body:has(.fs-ficha:not([hidden])){ overflow:hidden; }
}

/* ============================================================
   Color de acento (paleta Apple) — chips del engranaje
   ============================================================ */
.cfg-accents{ display:flex; flex-wrap:wrap; gap:9px; }
.accent-chip{
  width:28px; height:28px; border-radius:50%; padding:0; cursor:pointer;
  border:2px solid var(--surface);
  box-shadow:0 0 0 1px var(--line-2);
  transition:transform .2s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .2s var(--ease);
}
.accent-chip:hover{ transform:scale(1.14); }
.accent-chip.active{
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px currentColor;
}

/* ============================================================
   FIX: solape nombre/categoría en sugerencias del buscador principal
   (con grupos/temas largos la meta aplastaba el nombre). Ahora cada
   parte es un flex-item con min-width:0 y no se superponen.
   ============================================================ */
.fs-suggest-item{ display:flex !important; align-items:center; gap:12px; }
.fs-sg-dot{ flex:0 0 auto; }
.fs-sg-name{
  flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fs-sg-meta{
  flex:0 1 56%; min-width:0; text-align:right;
  white-space:normal; word-break:break-word; line-height:1.35;
}
.fs-sg-meta br{ display:block; }

/* ============================================================
   Explorar por tema/subtema — menús desplegables en cascada
   ============================================================ */
.fs-explore-sel{ width:100%; cursor:pointer; }
.fs-explore-sel:disabled{ opacity:.5; cursor:not-allowed; background:var(--surface-2); }

/* ============================================================
   FarmaSearch — modo ficha: la ficha ocupa el panel y oculta el
   buscador + el explorador (se vuelve con ESC o el botón ×)
   ============================================================ */
#fs-panel.fs-focus-ficha .fs-hero,
#fs-panel.fs-focus-ficha .fs-searchbox,
#fs-panel.fs-focus-ficha .fs-sistemas,
#fs-panel.fs-focus-ficha .fs-empty-state{ display:none !important; }

/* ============================================================
   FarmaSearch — layout de ESCRITORIO amplio ("todo abierto")
   En computadora: 2 columnas (Buscar | Explorar) usando todo el
   ancho disponible, con las sugerencias y el explorador siempre
   visibles a la vez. En móvil/tablet se mantiene vertical (apilado).
   ============================================================ */
@media (min-width:861px){
  /* misma especificidad que la regla base body[...] #fs-panel para ganar */
  body[data-fbx-mode="farmasearch"] #fs-panel{
    max-width:min(1180px, 94vw) !important; padding:34px 42px 40px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr;
    column-gap:38px; row-gap:26px;
    align-items:start;
  }
  #fs-panel .fs-hero{ grid-column:1 / -1; margin-bottom:4px; }
  #fs-panel .fs-searchbox{ grid-column:1; grid-row:2; margin-bottom:0; }
  #fs-panel .fs-empty-state{ grid-column:1; grid-row:3; }
  /* Explorador: columna derecha, separado por una línea sutil */
  #fs-panel .fs-sistemas{
    grid-column:2; grid-row:2 / span 2;
    margin:0 !important; max-width:none !important;
    border-left:1px solid var(--line); padding-left:38px;
  }
  /* La ficha ocupa todo el ancho; en modo ficha el panel vuelve a bloque */
  #fs-panel .fs-ficha{ grid-column:1 / -1; }
  body[data-fbx-mode="farmasearch"] #fs-panel.fs-focus-ficha{ display:block !important; }
  /* Más sugerencias visibles a la vez */
  .fs-suggest{ max-height:min(62vh, 560px) !important; }
  /* Tarjetas "populares" en 2 columnas dentro de su columna */
  .fs-empty-grid{ grid-template-columns:repeat(2,1fr) !important; }
}

/* Pantallas grandes: aún más aire */
@media (min-width:1280px){
  .fs-panel{ max-width:1240px !important; }
}

/* ============================================================
   FIX FarmaBank — el grid de estadísticas tenía 5 columnas con
   solo 3 tarjetas (quedaban 2 huecos a la derecha y todo se veía
   apretado a la izquierda). Lo alineamos a 3 columnas reales.
   ============================================================ */
.fb-dash-grid{ grid-template-columns:1.6fr 1fr 1fr !important; }
@media (max-width:600px){
  .fb-dash-grid{ grid-template-columns:1fr 1fr !important; }
  .fb-card-big{ grid-column:1 / -1; }
}

/* ============================================================
   Barra social @farmacotips — centrada (en la mitad), no a un lado
   ============================================================ */
.fbx-social{
  left:50% !important; right:auto !important;
  transform:translateX(-50%);
}
@media (max-width:600px){
  .fbx-social{ left:50% !important; transform:translateX(-50%); }
}

/* En FarmacoBox la barra social centrada no debe tapar el hint:
   subimos el hint para que la barra quepa debajo, centrada. */
body[data-fbx-mode="farmacobox"] #hint{ bottom:60px; }

/* "% Acierto global" sin datos: el guión usa el color neutro de la
   tarjeta (no el rojo de bajo rendimiento) y atenuado. Se adapta al
   tema porque hereda el color de .fb-card-big. */
.fb-card-value-xl.nodata{ opacity:.4; }

/* ============================================================
   FICHAS — aprovechar todo el ancho, menos anidamiento, más densas
   (quita la "caja dentro de caja" y la sangría grande del texto)
   ============================================================ */
/* FarmaSearch: la tarjeta interna se vuelve transparente (sin doble caja) */
.fs-ficha-body{ background:transparent !important; border:0 !important; padding:0 !important;
  max-height:none !important; overflow:visible !important; }
.fs-ficha{ padding:18px 16px 26px !important; }
.fs-ficha .acc, .ficha__body .acc{ gap:10px; }

/* Acordeón: cuerpo a casi todo el ancho (sin sangría de 65px) y más denso */
.acc-inner{ padding:6px 22px 18px 22px !important; font-size:14px !important; line-height:1.6 !important; }
.acc-trigger{ padding:14px 18px !important; }
.acc-item.open .acc-content{ max-height:6000px !important; }   /* no recortar fichas largas */
.acc-inner ul{ padding-left:20px; }

/* Overlay (FarmacoBox / Estudio): menos relleno lateral */
.ficha__body{ padding:16px 22px 22px !important; }
.ficha{ width:min(1180px,100%) !important; }

/* Móvil / ficha a pantalla completa: usar casi todo el ancho */
@media (max-width:820px){
  .fs-ficha{ padding:12px 10px 32px !important; }
  .acc-inner{ padding:6px 15px 16px 15px !important; }
  .acc-trigger{ padding:13px 14px !important; gap:11px; }
  .acc-icon{ width:30px !important; height:30px !important; }
  .ficha__body{ padding:12px 13px 20px !important; }
}


/* ============================================================
   ===========  REDISEÑO 'APPLE' — FarmacoTips  ===============
   Tipografía SF/-apple-system, color minimalista pero vivo,
   sombras en capas, animaciones con muelle y fin del
   desplazamiento lateral. Se respeta toda la estructura previa;
   esto solo refina tokens y microinteracciones.
   ============================================================ */

/* ---------- 1 · Tipografía tipo Apple ---------- */
:root{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  /* curvas de animación tipo iOS */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* rebote sutil */
  --ease-ios:    cubic-bezier(.32, .72, 0, 1);       /* deslizamiento iOS */
  /* sombras más limpias y frías */
  --shadow-color: rgba(17, 24, 39, .10);
  --shadow-soft:  0 1px 2px rgba(17,24,39,.06), 0 6px 18px rgba(17,24,39,.07);
  --shadow-pop:   0 2px 6px rgba(17,24,39,.08), 0 18px 40px rgba(17,24,39,.12);
  --ring: 0 0 0 3px rgba(230,57,70,.18);
}
:root.theme-dark, html.theme-dark{
  --shadow-color: rgba(0,0,0,.5);
  --shadow-soft:  0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.45);
  --shadow-pop:   0 2px 6px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.55);
}

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;            /* tracking Apple en cuerpo */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Titulares con el tracking negativo característico de SF Pro Display */
.brand__title,
.fs-hero-title,
.drawer__title,
.ficha-title, .ficha h1, .ficha-nombre,
.matb-acerca h2, .matb-acerca h3,
h1, h2{
  letter-spacing: -0.028em;
  font-weight: 800;
}
.fs-hero-title{ letter-spacing: -0.035em; }

/* Etiquetas y micro-texto: un poco más de aire, sin gritar */
.stat__lbl, .seg__btn, .estudio-tab, .matb-tab,
.fs-empty-hint, .tab-new{
  letter-spacing: 0.01em;
}

/* ---------- 2 · Fin del desplazamiento lateral ---------- */
html, body{ overflow-x: hidden; max-width: 100%; }
/* contenedores con scroll vertical: nunca empujar en horizontal */
.stage, .main, main, .estudio-body, .matb-body,
.drawer__body, .farmabank-body, .content, .scroll{
  overflow-x: hidden;
  overscroll-behavior-x: contain;
}
/* el panel de FarmaSearch NO debe recortar el dropdown de sugerencias */
#fs-panel{ overflow: visible !important; }
*{ min-width: 0; }   /* evita que flex-items con texto largo desborden la fila */

/* ---------- 3 · Microinteracciones con muelle ---------- */
/* Botones e íconos: elevación sutil al pasar, hundimiento al pulsar */
.btn, .iconbtn, .mini-btn, .search-pill, .gate-btn,
.fs-empty-card, .fs-sistema-pill, .matb-tab, .estudio-tab,
.modes__btn, .seg__btn, .drawer__tab, .ig-ad-btn{
  transition: transform .22s var(--ease-spring),
              box-shadow .22s var(--ease-ios),
              background-color .2s var(--ease-ios),
              color .2s var(--ease-ios),
              border-color .2s var(--ease-ios) !important;
  will-change: transform;
}
.btn:hover, .iconbtn:hover, .search-pill:hover,
.fs-empty-card:hover, .fs-sistema-pill:hover, .mini-btn:hover{
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-soft);
}
.btn:active, .iconbtn:active, .search-pill:active, .mini-btn:active,
.fs-empty-card:active, .fs-sistema-pill:active, .modes__btn:active,
.seg__btn:active, .matb-tab:active, .estudio-tab:active{
  transform: scale(.965);
}

/* Tarjetas (fichas, temas, comparar): elevación limpia al pasar */
.card, .tema-card, .fs-card, .matb-card, .cmp-card, .stat{
  transition: transform .28s var(--ease-ios),
              box-shadow .28s var(--ease-ios),
              border-color .2s var(--ease-ios);
}
.tema-card:hover, .fs-empty-card:hover{
  border-color: var(--line-2);
  box-shadow: var(--shadow-soft);
}

/* Pastillas de dosis: refinado tipográfico */
.dosis-pill{
  letter-spacing: -0.01em;
  border-radius: 8px;
}

/* Foco accesible y bonito (anillo rojo translúcido) */
.btn:focus-visible, .iconbtn:focus-visible, .search-pill:focus-visible,
.fs-input:focus-visible, .modes__btn:focus-visible, .seg__btn:focus-visible,
.estudio-tab:focus-visible, .matb-tab:focus-visible, .drawer__tab:focus-visible,
input:focus-visible, button:focus-visible{
  outline: none !important;
  box-shadow: var(--ring) !important;
}

/* ---------- 4 · Entrada suave de paneles y fichas ---------- */
@keyframes fbxRise{
  from{ opacity:0; transform: translateY(10px) scale(.985); }
  to  { opacity:1; transform: none; }
}
.fs-card, .matb-ficha, .ficha-card, .estudio-card, .cmp-result{
  animation: fbxRise .42s var(--ease-ios) both;
}

/* ---------- 5 · Acentos minimalistas pero vivos ---------- */
/* La marca: la 'Tips' en rojo con un toque de peso */
.brand__title b{ color: var(--red); font-weight: 800; }

/* Segmento de modos: el activo en tinta sólida (estilo iOS control) */
.seg__btn{ border-radius: 9px; }
.seg__btn.active{
  box-shadow: 0 1px 3px rgba(17,24,39,.16), 0 1px 1px rgba(17,24,39,.10);
}

/* Pill de búsqueda y stats: bordes más suaves y aire */
.search-pill{ border-radius: 12px; }
.stat{ border-radius: 12px; }

/* Scrollbars finos y discretos (estilo macOS) */
*::-webkit-scrollbar{ width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb{
  background: var(--line-2);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background: var(--muted); background-clip: padding-box; }
*::-webkit-scrollbar-track{ background: transparent; }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ============================================================
   REPASO (Anki / SRS) — estilos
   ============================================================ */
/* Visibilidad del panel según modo/sub */
#srs-panel{display:none}
body[data-fbx-mode="estudio"][data-fbx-sub="srs"] #scene,
body[data-fbx-mode="estudio"][data-fbx-sub="srs"] #hint,
body[data-fbx-mode="estudio"][data-fbx-sub="srs"] #skin-picker,
body[data-fbx-mode="estudio"][data-fbx-sub="srs"] #empty-state,
body[data-fbx-mode="estudio"][data-fbx-sub="srs"] #flash,
body[data-fbx-mode="estudio"][data-fbx-sub="srs"] #fbx-timer,
body[data-fbx-mode="estudio"][data-fbx-sub="srs"] #fb-panel,
body[data-fbx-mode="estudio"][data-fbx-sub="srs"] #matb-panel,
body[data-fbx-mode="estudio"][data-fbx-sub="srs"] #fs-panel{display:none !important}
body[data-fbx-mode="estudio"][data-fbx-sub="srs"] #srs-panel{display:block !important}
body[data-fbx-mode="estudio"][data-fbx-sub="srs"] #mode-banner{display:none !important}
body[data-fbx-mode="estudio"][data-fbx-sub="srs"] #stage{justify-content:flex-start;overflow-y:auto;overflow-x:hidden;padding-top:8px}
body[data-fbx-mode="estudio"][data-fbx-sub="srs"] #estudio-tabs{position:relative;z-index:9}

.srs-panel{width:100%;max-width:760px;margin:14px auto 56px;padding:0 16px}

/* Stats */
.srs-stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.srs-stat{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.srs-stat-n{font-size:26px;font-weight:900;color:var(--red);line-height:1;letter-spacing:-.02em}
.srs-stat-l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:5px}

/* Estudio recomendado */
.srs-reco{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,var(--red-soft),transparent);
  border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:22px}
.srs-reco-ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--red);color:#fff;
  display:grid;place-items:center;font-size:20px;box-shadow:0 4px 14px rgba(230,57,70,.35)}
.srs-reco-h{font-weight:800;font-size:15px;letter-spacing:-.01em;margin-bottom:4px}
.srs-reco-p{font-size:13px;color:var(--ink-2);line-height:1.5;margin:0 0 12px}
.srs-reco-btn{font-size:13px}

.srs-section-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 2px 10px}

/* Lista de mazos */
.srs-deck-list{display:flex;flex-direction:column;gap:9px}
.srs-deck{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 15px;
  transition:transform .2s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.srs-deck:hover{transform:translateY(-1.5px);box-shadow:var(--shadow-soft,0 6px 18px rgba(17,24,39,.07));border-color:var(--line-2)}
.srs-deck--feat{background:var(--surface-2);border-color:var(--line-2)}
.srs-deck-chip{flex:0 0 auto;width:12px;height:12px;border-radius:50%}
.srs-deck-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.srs-deck-name{font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srs-deck-sub{font-size:11px;color:var(--muted);font-weight:600}
.srs-deck-bar{height:5px;border-radius:5px;background:var(--surface-2);overflow:hidden;margin-top:4px}
.srs-deck--feat .srs-deck-bar{background:var(--surface)}
.srs-deck-bar span{display:block;height:100%;border-radius:5px;transition:width .5s var(--ease-out)}
.srs-deck-cta{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--red);padding:5px 11px;
  border:1px solid var(--line-2);border-radius:999px;background:var(--surface)}

/* Vista de repaso */
.srs-review{max-width:680px;margin:0 auto}
.srs-rev-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.srs-rev-back{border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-family:inherit;
  font-weight:700;font-size:12.5px;padding:7px 13px;border-radius:999px;cursor:pointer}
.srs-rev-back:hover{border-color:var(--red);color:var(--red)}
.srs-rev-deck{flex:1;font-weight:800;font-size:14px;color:var(--ink);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srs-rev-prog{font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}

.srs-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:26px 24px;box-shadow:var(--shadow-soft,0 6px 22px rgba(17,24,39,.07));min-height:160px}
.srs-flag{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:all .2s var(--ease)}
.srs-flag svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.srs-flag:hover{border-color:#F59E0B;color:#F59E0B}
.srs-flag.on{background:#F59E0B;border-color:#F59E0B;color:#fff}
.srs-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.srs-tag{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff;padding:4px 10px;border-radius:999px}
.srs-tag--g{background:var(--surface-2)!important;color:var(--ink-2)}
.srs-card-front{font-size:30px;font-weight:900;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.srs-card-hint{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:14px}
.srs-card-back{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}

.srs-actions{margin-top:18px}
.srs-show{width:100%;padding:15px;font-size:15px}
.srs-grades{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.srs-grade{display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 4px;border:none;border-radius:13px;
  cursor:pointer;font-family:inherit;color:#fff;transition:transform .18s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)),filter .18s var(--ease)}
.srs-grade:hover{transform:translateY(-2px);filter:brightness(1.06)}
.srs-grade:active{transform:scale(.95)}
.srs-grade-ivl{font-size:11px;font-weight:700;opacity:.95;font-variant-numeric:tabular-nums}
.srs-grade-l{font-size:12px;font-weight:800;letter-spacing:-.01em}
.srs-grade--again{background:#EF4444}
.srs-grade--hard {background:#F59E0B}
.srs-grade--good {background:#16A34A}
.srs-grade--easy {background:#0EA5E9}
.srs-grade--veasy{background:#7C3AED}

/* Fin de sesión */
.srs-done{max-width:520px;margin:40px auto 0;text-align:center;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:34px 26px;box-shadow:var(--shadow-soft,0 6px 22px rgba(17,24,39,.07))}
.srs-done-ic{width:54px;height:54px;border-radius:16px;background:#16A34A;color:#fff;font-size:28px;
  display:grid;place-items:center;margin:0 auto 16px;box-shadow:0 6px 18px rgba(22,163,74,.35)}
.srs-done-h{font-size:20px;font-weight:900;letter-spacing:-.02em;margin-bottom:8px}
.srs-done-p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 20px}

@media (max-width:560px){
  .srs-grades{grid-template-columns:repeat(5,1fr);gap:5px}
  .srs-grade{padding:10px 2px}
  .srs-grade-l{font-size:10.5px}
  .srs-grade-ivl{font-size:9.5px}
  .srs-card-front{font-size:25px}
}

/* El atributo [hidden] debe ganar aunque la clase fije display (.btn, grid) */
#srs-panel [hidden]{ display:none !important; }


/* ============================================================
   CAJA minimalista (SVG plano) — estilos, skins y animaciones
   ============================================================ */
/* ocultar el cubo 3D */
#scene .cube, #scene .box-shadow{ display:none !important; }
#scene{ transform-style:flat !important; perspective:none !important; }

.fa-giftbox-wrap{ width:100%; height:100%; display:grid; place-items:center; }
#fa-giftbox{ width:100%; max-width:320px; height:auto; overflow:visible; }
.gb-shadow{ fill:var(--gb-shadow); }

/* paleta de la caja por skin (hereda el acento --red por defecto) */
#scene{
  --gb-acc-1:var(--red); --gb-acc-2:var(--red-deep);
  --gb-box-1:#FFFFFF; --gb-box-2:#ECF0FA;
  --gb-edge:rgba(24,33,77,.10); --gb-shadow:rgba(47,128,255,.16);
}
:root[data-theme="dark"] #scene{ --gb-box-1:#222634; --gb-box-2:#171A22; --gb-edge:rgba(255,255,255,.10); --gb-shadow:rgba(0,0,0,.4); }
#scene[data-skin="noche"]{ --gb-box-1:#2B2E39; --gb-box-2:#15171E; --gb-edge:rgba(255,255,255,.10); }
#scene[data-skin="carmin"]{ --gb-acc-1:#F4536A; --gb-acc-2:#C42B38; --gb-box-1:#FFF7EE; --gb-box-2:#FBE9E2; --gb-shadow:rgba(230,57,70,.16); }
#scene[data-skin="oro"]{ --gb-acc-1:#F5A800; --gb-acc-2:#C77A1F; --gb-box-1:#242424; --gb-box-2:#141414; --gb-edge:rgba(255,255,255,.12); --gb-shadow:rgba(245,168,0,.18); }
#scene[data-skin="marca"], #scene[data-skin="clasica"], #scene[data-skin="regalo"]{ /* acento por defecto */ }

/* flotación suave del moño/caja (sustituye el idleFloat 3D) */
.gb-bob{ transform-box:fill-box; transform-origin:50% 100%; animation:gbFloat 5.5s var(--ease,ease) infinite; }
@keyframes gbFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
#scene:hover #fa-giftbox{ transform:scale(1.03); transition:transform .3s var(--ease-out,ease); cursor:pointer; }

/* animación al sacudir y al "girar" (pop minimalista, sin 3D) */
.scene.shaking #fa-giftbox{ animation:gbShake 1.1s var(--ease,ease) both; }
@keyframes gbShake{ 0%,100%{transform:rotate(0)} 12%{transform:rotate(-7deg)} 28%{transform:rotate(6deg)} 44%{transform:rotate(-5deg)} 60%{transform:rotate(4deg)} 76%{transform:rotate(-2deg)} }
.scene.spinning #fa-giftbox{ animation:gbPop 2.2s var(--ease-box,ease) both; }
@keyframes gbPop{
  0%{transform:scale(1) rotate(0)}
  18%{transform:scale(1.14) rotate(-9deg)}
  38%{transform:scale(.95) rotate(7deg)}
  56%{transform:scale(1.09) rotate(-5deg)}
  74%{transform:scale(.99) rotate(3deg)}
  100%{transform:scale(1) rotate(0)}
}
/* el resplandor de fondo del giro se conserva en .scene.spinning (spinGlow) */
@media(prefers-reduced-motion:reduce){ .gb-bob, .scene.shaking #fa-giftbox, .scene.spinning #fa-giftbox{ animation:none !important; } }


/* ============================================================
   Recuadro "Casa comercial: La Santé" en la ficha
   Colores de marca: azul marino #232C66 + naranja #F7941E.
   Solo aparece en los fármacos que fabrica La Santé.
   ============================================================ */
.ls-pick{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:stretch; gap:9px;
  margin:12px 0 4px;
  background:linear-gradient(120deg,#232C66 0%,#2E3A86 100%);
  color:#fff; border-radius:14px; padding:13px 16px;
  box-shadow:0 8px 22px -8px rgba(35,44,102,.55);
}
.ls-pick::before{
  content:""; position:absolute; right:-26px; top:-26px; width:104px; height:104px;
  border-radius:50%; background:radial-gradient(circle,#F7941E,transparent 70%);
  opacity:.38; pointer-events:none;
}
.ls-pick-row{ position:relative; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ls-pick-ic{
  position:relative; flex:0 0 auto; font-weight:800; font-size:11.5px; letter-spacing:.02em;
  background:#F7941E; color:#232C66; padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.ls-pick-brand{
  position:relative; flex:1; text-align:right; font-weight:800; font-size:18px; letter-spacing:-.01em; color:#fff;
}
.ls-pick-brand i{ color:#F7941E; font-style:normal; }
.ls-pick-desc{ position:relative; margin:0; font-size:12.5px; font-weight:500; line-height:1.45; color:rgba(255,255,255,.9); }
.ls-pick-desc b{ font-weight:800; color:#fff; }

@media (max-width:520px){
  .ls-pick{ padding:11px 13px; }
  .ls-pick-brand{ font-size:15px; }
  .ls-pick-desc{ font-size:12px; }
}

/* ---- Presentación comercial dentro del recuadro (chips) ---- */
.ls-pres{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  padding-top:9px; border-top:1px solid rgba(255,255,255,.16); }
.ls-pres-h{ flex:0 0 100%; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#F7941E; margin-bottom:1px; }
.ls-pres-item{ font-size:11.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18); border-radius:8px; padding:4px 9px; line-height:1.2; }

/* ============================================================
   Estrella de FAVORITOS (todas las fichas)
   ============================================================ */
.fav-star{ display:inline-grid; place-items:center; vertical-align:middle; width:34px; height:34px;
  margin-left:10px; padding:0; cursor:pointer; border-radius:10px;
  background:var(--surface); border:1px solid var(--line-2);
  transition:transform .18s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)),border-color .18s,background .18s; }
.fav-star svg{ width:19px; height:19px; fill:none; stroke:var(--muted); stroke-width:1.7; transition:fill .18s,stroke .18s; }
.fav-star:hover{ transform:scale(1.08); border-color:#F5A800; }
.fav-star.on{ background:rgba(245,168,0,.14); border-color:#F5A800; }
.fav-star.on svg{ fill:#F5A800; stroke:#F5A800; }
.fav-star.on{ animation:favPop .4s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)); }
@keyframes favPop{ 0%{transform:scale(.7)} 55%{transform:scale(1.25)} 100%{transform:scale(1)} }

/* ============================================================
   FarmacoPicks — tarjeta de fármaco aleatorio (La Santé 7/10)
   No revela la marca; al abrir la ficha sale "Casa comercial".
   ============================================================ */
.fp-space{ margin:16px auto 0; max-width:760px; }
#fs-panel.fs-focus-ficha .fp-space{ display:none !important; }   /* ocultar al abrir una ficha */
@media(min-width:861px){ body[data-fbx-mode="farmasearch"] #fs-panel .fp-space{ grid-column:1 / -1; } }

.fp-card{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line-2); border-radius:18px; padding:14px 16px 16px;
  box-shadow:0 10px 28px -16px rgba(20,28,60,.30);
}
.fp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.fp-badge{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
  background:linear-gradient(120deg,rgba(247,148,30,.14),rgba(35,44,102,.10));
  border:1px solid var(--line-2); border-radius:999px; padding:5px 12px; }
.fp-spark{ color:#F7941E; }
.fp-refresh{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
  background:var(--surface-2,rgba(127,127,127,.08)); border:1px solid var(--line-2); border-radius:10px;
  transition:transform .3s var(--ease,ease),border-color .18s; }
.fp-refresh svg{ width:17px; height:17px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fp-refresh:hover{ border-color:#F7941E; transform:rotate(90deg); }
.fp-refresh:hover svg{ stroke:#F7941E; }

.fp-pickbtn{ position:relative; overflow:hidden; width:100%; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:3px;
  background:linear-gradient(120deg,#232C66 0%,#2E3A86 100%); color:#fff;
  border:none; border-radius:14px; padding:16px 18px;
  box-shadow:0 8px 22px -10px rgba(35,44,102,.5);
  transition:transform .2s var(--ease-out,ease),box-shadow .2s; }
.fp-pickbtn::before{ content:""; position:absolute; right:-28px; top:-28px; width:120px; height:120px;
  border-radius:50%; background:radial-gradient(circle,#F7941E,transparent 70%); opacity:.4; pointer-events:none; }
.fp-pickbtn:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -12px rgba(35,44,102,.6); }
.fp-pick-eyebrow{ position:relative; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.fp-pick-name{ position:relative; font-size:22px; font-weight:900; letter-spacing:-.02em; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .2s ease; }
.fp-pick-cta{ position:relative; font-size:12px; font-weight:700; color:#F7941E; margin-top:2px; }
@media(max-width:560px){ .fp-pick-name{ font-size:19px; } }

/* FarmacoPick como última opción del desplegable de búsqueda */
.fs-suggest-pick{ border-top:1px solid var(--line-2); margin-top:4px; }
.fs-suggest-pick .fs-sg-name{ font-weight:800; }
.fs-pick-tag b{ color:#F7941E !important; }


/* ============================================================
   VERSIÓN DEFINITIVA — disuasores de copia (CSS)
   Texto no seleccionable salvo en campos de entrada. Imágenes no
   arrastrables.
   ============================================================ */
*{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* iOS: sin menú al mantener pulsado */
}
input, textarea, [contenteditable]{
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
img{
  -webkit-user-drag: none;
  user-drag: none;
}


/* ============================================================
   ===== ESTILO FarmacoAcademy (Apple Glass) — reskin =========
   Degradado azul→morado como firma, vidrio esmerilado, tipografía
   Inter/SF, tema claro/oscuro. Remapea los tokens del app para que
   toda la UI herede el nuevo look. + panel lateral + footer logo.
   ============================================================ */

/* ---------- 1 · Tipografía ---------- */
:root{
  --font:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',system-ui,sans-serif;
}

/* ---------- 2 · Tokens (claro) remapeados a FarmacoAcademy ---------- */
:root{
  --blue:#2F80FF; --purple:#8A5CF6;
  --grad:linear-gradient(120deg,#2F80FF 0%,#8A5CF6 100%);
  --grad-soft:linear-gradient(135deg,rgba(47,128,255,.13),rgba(138,92,246,.13));

  /* el acento de marca pasa de rojo a azul (rojo queda solo clínico) */
  --red:#2F80FF;
  --red-deep:#2566D6;
  --red-soft:rgba(47,128,255,.13);

  /* fondo gris frío + superficies de vidrio */
  --stage-1:#F4F5FA;
  --stage-2:#ECEEF5;
  --surface:rgba(255,255,255,.74);
  --surface-2:rgba(255,255,255,.55);
  --surface-paper:#FFFFFF;

  --ink:#1D1D1F; --ink-2:#3A3A3C; --muted:#6E6E73;
  --line:rgba(24,33,77,.10); --line-2:rgba(24,33,77,.16);
  --box-edge:#E7E9F2;
  --shadow-color:rgba(26,38,95,.16);
  --scrim:rgba(8,9,14,.42);
}
:root[data-theme="dark"]{
  --stage-1:#0C0E15; --stage-2:#070A0E;
  --surface:rgba(26,28,38,.66);
  --surface-2:rgba(26,28,38,.48);
  --surface-paper:#13151D;
  --ink:#F4F5F7; --ink-2:#C7C9CE; --muted:#9396A0;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.17);
  --red-soft:rgba(47,128,255,.18);
  --shadow-color:rgba(0,0,0,.55);
}

/* ---------- 3 · Fondo: blobs azul/morado en vez de mesh rojo ---------- */
body{
  background:
    radial-gradient(60% 50% at 12% 6%, rgba(47,128,255,.12), transparent 60%),
    radial-gradient(55% 55% at 90% 96%, rgba(138,92,246,.12), transparent 60%),
    radial-gradient(120% 95% at 50% 30%, var(--stage-1) 0%, var(--stage-2) 100%) !important;
}
.bg-mesh__blob.b1{background:radial-gradient(circle,var(--blue),transparent 65%) !important}
.bg-mesh__blob.b2{background:radial-gradient(circle,var(--purple),transparent 65%) !important}
.bg-mesh__blob{opacity:.30 !important}
.spotlight{background:radial-gradient(circle, rgba(47,128,255,.16), transparent 62%) !important}

/* ---------- 4 · Superficies de vidrio ---------- */
.topbar{
  background:var(--surface) !important;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.fs-panel, .fb-panel, .matb-panel, .srs-panel, .drawer, .cfg-panel,
.cmdk, .ficha, .about-card, .gate-card, .ig-ad-card, .hist-panel{
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

/* ---------- 5 · Marca con degradado (firma) ---------- */
.brand__title{font-weight:800;letter-spacing:-.03em}
.brand__title b{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* Estados activos con degradado azul→morado */
.modes__btn.active,
.seg__btn.active{
  background:var(--grad) !important; color:#fff !important;
  box-shadow:0 4px 14px -2px rgba(47,128,255,.45) !important;
}
.fa-nav-item.active{ background:var(--grad); color:#fff; }
.btn--primary, .srs-show, .fb-num.active, .matb-tab.active, .estudio-tab.active{
  background:var(--grad) !important; color:#fff !important; border:none !important;
}
.tab-new{ background:var(--grad) !important; }
.stat__num, .srs-stat-n, .fs-hero-title{ color:var(--blue); }
.fs-hero-ico{ background:var(--grad-soft) !important; }
.fs-hero-ico svg{ stroke:var(--blue) !important; }

/* hairlines suaves + radios glass */
.card, .fs-card, .tema-card, .matb-card, .srs-deck, .stat{ border-color:var(--line); }

/* ============================================================
   6 · PANEL LATERAL (navegación) — construido por fa_inject.js
   ============================================================ */
#fa-side{
  position:fixed; top:0; left:0; bottom:0; width:236px; z-index:60;
  background:var(--surface); backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-right:1px solid var(--line); display:flex; flex-direction:column;
  padding:16px 12px; gap:4px; overflow-y:auto;
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.fa-side-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.fa-side-brand img{width:34px;height:34px;border-radius:9px;flex:0 0 auto}
.fa-side-brand .t{font-weight:800;font-size:15px;letter-spacing:-.02em;line-height:1.05}
.fa-side-brand .t b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fa-side-brand .s{font-size:10px;color:var(--muted);font-weight:600}
.fa-nav-h{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink3,var(--muted));padding:12px 10px 5px}
.fa-nav-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:none;border-radius:12px;padding:11px 12px;font-family:inherit;
  font-weight:600;font-size:13.5px;color:var(--ink-2);transition:background .18s ease,color .18s ease}
.fa-nav-item:hover{background:var(--surface-2);color:var(--ink)}
.fa-nav-item svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;flex:0 0 auto}
.fa-nav-item.active svg{stroke:#fff}
.fa-nav-sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 2px 12px;padding-left:10px;border-left:1px solid var(--line)}
.fa-nav-sub .fa-nav-item{font-size:12.5px;padding:8px 11px}
.fa-side-spacer{flex:1}
.fa-side-foot{padding:12px 8px 4px;border-top:1px solid var(--line);margin-top:8px}
.fa-side-foot img{width:118px;height:auto;display:block;opacity:.8}
.fa-side-foot .pb{font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
:root[data-theme="dark"] .fa-side-foot img{filter:invert(1) brightness(1.6)}

/* botón hamburguesa (móvil) */
.fa-burger{display:none;width:38px;height:38px;border-radius:11px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.fa-burger svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none}
.fa-side-scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(3px);z-index:59;opacity:0;pointer-events:none;transition:opacity .3s ease}

/* Empujar el contenido a la derecha del panel en escritorio */
@media(min-width:900px){
  body{ padding-left:236px; }
  .fa-burger{ display:none !important; }
  /* la barra de modos del topbar es redundante con el panel lateral */
  .topbar__center{ display:none !important; }
  #fbx-social{ left:calc(236px + 14px) !important; }
}
@media(max-width:899px){
  #fa-side{ transform:translateX(-100%); box-shadow:0 0 60px rgba(0,0,0,.2); }
  body.fa-side-open #fa-side{ transform:translateX(0); }
  body.fa-side-open .fa-side-scrim{ opacity:1; pointer-events:auto; }
  .fa-burger{ display:flex !important; }
}

/* ---------- 7 · Footer "Powered by farmacotips" ---------- */
.fa-footer{padding:26px 16px 18px;text-align:center}
.fa-footer .pb{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.fa-footer img{width:140px;height:auto;opacity:.82;display:inline-block}
:root[data-theme="dark"] .fa-footer img{filter:invert(1) brightness(1.6)}

/* ---------- 8 · Pop-up "seguir a farmacotips" ---------- */
.welcome-overlay{position:fixed;inset:0;background:rgba(8,9,14,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;animation:welcome-fade .3s ease}
.welcome-overlay[hidden]{display:none}
.welcome-card{position:relative;background:var(--surface-paper);color:var(--ink);max-width:420px;width:100%;border-radius:24px;padding:38px 28px 28px;text-align:center;box-shadow:0 24px 60px -12px rgba(0,0,0,.45),0 0 0 1px var(--line);animation:welcome-pop .45s cubic-bezier(.2,.8,.2,1)}
.welcome-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface-paper);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:not-allowed;transition:all .2s ease;font-weight:700;font-size:14px;padding:0}
.welcome-close:not([disabled]){cursor:pointer;color:var(--ink)}
.welcome-close:not([disabled]):hover{background:rgba(47,128,255,.12);color:var(--blue);border-color:var(--blue);transform:scale(1.05)}
.welcome-close[disabled] .welcome-x{display:none}
.welcome-close:not([disabled]) .welcome-countdown{display:none}
.welcome-close .welcome-countdown{font-variant-numeric:tabular-nums;color:var(--blue);font-weight:800}
.welcome-logo{background:#fff;border-radius:20px;padding:14px 16px;margin:0 auto 16px;max-width:230px;box-shadow:0 12px 30px -10px rgba(26,38,95,.35);animation:welcome-logo-pop .55s cubic-bezier(.2,.8,.2,1) .15s backwards}
.welcome-logo img{width:100%;height:auto;display:block}
.welcome-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px}
.welcome-title{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px;line-height:1.2}
.welcome-sub{font-size:14px;color:var(--muted);margin:0 0 22px;line-height:1.5}
.welcome-sub strong{color:var(--ink);font-weight:700}
.welcome-cta-wrap{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.welcome-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:12px;background:linear-gradient(135deg,#833AB4 0%,#FD1D1D 50%,#FCB045 100%);color:#fff;font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 4px 14px -2px rgba(253,29,29,.45);transition:transform .18s ease,box-shadow .18s ease}
.welcome-cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px -4px rgba(253,29,29,.55)}
.welcome-socials-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.welcome-mini{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;border-radius:10px;color:#fff;font-size:12px;font-weight:600;text-decoration:none;transition:transform .18s ease,filter .18s ease}
.welcome-mini:hover{transform:translateY(-1px);filter:brightness(1.08)}
.welcome-mini-tt{background:#000} .welcome-mini-x{background:#000} .welcome-mini-yt{background:#FF0000}
.welcome-hint{font-size:11.5px;color:var(--muted);font-style:italic;margin-top:16px;transition:opacity .25s ease}
.welcome-hint.ready{color:#2E9E5B;font-weight:600;font-style:normal}
@keyframes welcome-fade{from{opacity:0}to{opacity:1}}
@keyframes welcome-pop{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes welcome-logo-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
body.welcome-on{overflow:hidden}
@media(max-width:480px){.welcome-card{padding:30px 22px 22px;border-radius:20px}.welcome-title{font-size:19px}}


/* ============================================================
   FarmaSearch · NUEVO estilo (compartido a TODAS las versiones)
   Una sola columna centrada, buscador grande, botón "Elegir tema"
   → biblioteca lateral, ficha a todo el ancho. Solo afecta la vista
   FarmaSearch (todo cuelga de #fs-panel / modo farmasearch).
   ============================================================ */

/* panel: una sola columna centrada, sin tarjeta */
#fs-panel{
  background:transparent !important; border:none !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
@media (min-width:861px){
  body[data-fbx-mode="farmasearch"] #fs-panel{
    display:block !important;
    max-width:880px !important;
    padding:40px 28px 60px !important;
    margin:14px auto 48px !important;
    column-gap:0 !important; row-gap:0 !important;
  }
}
#fs-panel .fs-searchbox,
#fs-panel .fs-ficha,
#fs-panel .fs-empty-state{
  max-width:none !important; width:100% !important;
  margin-left:0 !important; margin-right:0 !important;
}

/* título + subtítulo grandes y centrados */
.fs-hero{ margin-bottom:24px !important; text-align:center !important; }
.fs-hero-ico{ display:none !important; }
.fs-hero-title{
  font-size:clamp(40px,6.5vw,58px) !important; font-weight:900 !important;
  letter-spacing:-.03em !important; line-height:1.02 !important;
  background:linear-gradient(120deg,#2F80FF,#8A5CF6) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
.fs-hero-sub{ font-size:15.5px !important; margin-top:12px !important; }

/* buscador grande (la escencia) */
.fs-searchbox{ margin-bottom:6px !important; }
.fs-input{
  height:66px !important; padding:0 58px 0 60px !important;
  font-size:18px !important; border-radius:18px !important; border-width:2px !important;
  box-shadow:0 8px 26px -14px rgba(20,28,60,.28) !important;
}
.fs-searchbox-ic{ width:23px !important; height:23px !important; left:22px !important; top:50% !important; }
.fs-clear{ right:16px !important; width:32px !important; height:32px !important; }
.fs-suggest{ top:calc(100% + 8px) !important; border-radius:16px !important; }
.fs-suggest-item{ font-size:15px !important; padding:14px 16px !important; }

/* ocultar populares y la tarjeta FarmacoPicks (el pick va solo en el desplegable) */
body[data-fbx-mode="farmasearch"] .fs-empty-grid,
body[data-fbx-mode="farmasearch"] .fs-empty-tip,
.fp-space{ display:none !important; }

/* OPCIONES "Elegir tema/subtema" — ARRIBA (inline), centradas y al ancho.
   Se AUTO-OCULTAN mientras buscas (.fs-opt-hidden lo pone el JS). */
.fs-sistemas{
  margin:18px auto 0 !important; text-align:center !important; max-width:none !important;
  transition:opacity .2s var(--ease,ease), max-height .25s var(--ease,ease), margin .2s, transform .2s; }
@media (min-width:861px){
  #fs-panel .fs-sistemas{ grid-column:auto !important; grid-row:auto !important;
    border-left:none !important; padding-left:0 !important; }
}
.fs-sistemas.fs-opt-hidden{
  opacity:0 !important; max-height:0 !important; margin-top:0 !important;
  transform:translateY(-6px); overflow:hidden; pointer-events:none; }
.fs-sistemas-head{ text-align:center !important; font-size:12px !important; margin-bottom:12px !important; }
.fs-explore-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; }
.fs-explore-sel, .fs-sistemas-sel{ height:52px !important; font-size:15px !important; }
.fs-sistemas-list{ justify-content:center !important; margin-top:14px !important; }
@media (max-width:560px){ .fs-explore-grid{ grid-template-columns:1fr !important; } }

/* FICHA abierta: aprovechar TODO el ancho de la pantalla */
@media (min-width:861px){
  body[data-fbx-mode="farmasearch"] #fs-panel.fs-focus-ficha{
    display:block !important;
    max-width:min(1280px, 95vw) !important;
    padding:28px 32px 56px !important;
  }
  .fs-focus-ficha .fs-ficha{ padding:26px 28px !important; }
  .fs-focus-ficha .fs-ficha-body{ max-height:none !important; overflow:visible !important; padding:24px !important; }
  .fs-focus-ficha .fs-ficha-body .acc{
    display:grid !important; grid-template-columns:1fr 1fr !important;
    gap:14px !important; align-items:start !important;
  }
  .fs-focus-ficha .fs-ficha-body .acc .acc-item.open{ grid-column:1 / -1 !important; }
}

/* móvil */
@media (max-width:560px){
  body[data-fbx-mode="farmasearch"] #fs-panel{ padding:26px 14px 40px !important; }
  .fs-input{ height:58px !important; font-size:16px !important; }
}


/* ============================================================
   Quitar el PANEL LATERAL glass y restaurar el MENÚ CENTRAL de
   arriba (pestañas FarmacoBox / Estudio / FarmaSearch) — el estilo
   anterior. Se carga después de fa_skin.css para dominar.
   Mantiene el resto del estilo glass + pop-up + logo + footer.
   ============================================================ */
#fa-side, .fa-side-scrim, .fa-burger{ display:none !important; }

@media (min-width:900px){
  body{ padding-left:0 !important; }
  .topbar__center{ display:flex !important; }   /* menú central visible */
  #fbx-social{ left:14px !important; }
}
@media (max-width:899px){
  body{ padding-left:0 !important; }
  .topbar__center{ display:flex !important; }
  #fbx-social{ left:14px !important; }
}