/* =========================================================
   HUB NEURO APRENDIZAJE INFANTIL
   RECURSOS PÚBLICOS
   FRONTEND CSS

   UBICACIÓN:
   frontend/src/pages/recursos-publicos/
   recursos-publicos.css

   PARTE 1 DE 2

   OBJETIVO:
   - Diseño limpio y premium.
   - Responsive.
   - Sin glow.
   - Sin scroll horizontal.
   - Compatible con modo claro / oscuro.
   - Tarjetas compactas.
   - Tipografía legible.
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

#recursosPublicosPage {

  --rp-bg:
    #f6f7fb;

  --rp-surface:
    #ffffff;

  --rp-surface-soft:
    #f9fafc;

  --rp-surface-strong:
    #f1f3f7;

  --rp-border:
    #dfe3ea;

  --rp-border-strong:
    #cfd5df;

  --rp-text:
    #111318;

  --rp-text-soft:
    #525866;

  --rp-text-muted:
    #747b88;

  --rp-primary:
    #6c4df6;

  --rp-primary-hover:
    #5b3fe0;

  --rp-primary-soft:
    #f0edff;

  --rp-danger:
    #c63b47;

  --rp-danger-soft:
    #fff0f2;

  --rp-success:
    #2f7d56;

  --rp-success-soft:
    #edf9f2;

  --rp-info:
    #315da8;

  --rp-info-soft:
    #eef4ff;

  --rp-shadow:
    0 18px 48px rgba(
      20,
      24,
      35,
      .08
    );

  --rp-shadow-soft:
    0 8px 24px rgba(
      20,
      24,
      35,
      .06
    );

  min-height:
    100vh;

  width:
    100%;

  max-width:
    100%;

  overflow-x:
    hidden;

  background:
    var(
      --rp-bg
    );

  color:
    var(
      --rp-text
    );

  font-family:
    "Plus Jakarta Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

}


/* =========================================================
   DARK
   ========================================================= */

html.dark
#recursosPublicosPage,

body.dark
#recursosPublicosPage,

[data-theme="dark"]
#recursosPublicosPage {

  --rp-bg:
    #050505;

  --rp-surface:
    #0b0b0c;

  --rp-surface-soft:
    #101012;

  --rp-surface-strong:
    #151518;

  --rp-border:
    #242429;

  --rp-border-strong:
    #313138;

  --rp-text:
    #ffffff;

  --rp-text-soft:
    #d8d8de;

  --rp-text-muted:
    #a3a3ad;

  --rp-primary-soft:
    #171323;

  --rp-danger-soft:
    #1b0f12;

  --rp-success-soft:
    #0d1712;

  --rp-info-soft:
    #0d131e;

  --rp-shadow:
    0 20px 52px rgba(
      0,
      0,
      0,
      .34
    );

  --rp-shadow-soft:
    0 10px 24px rgba(
      0,
      0,
      0,
      .28
    );

}


/* =========================================================
   GLOBAL
   ========================================================= */

#recursosPublicosPage,
#recursosPublicosPage *,
#recursosPublicosPage *::before,
#recursosPublicosPage *::after {

  box-sizing:
    border-box;

}


#recursosPublicosPage button,
#recursosPublicosPage input,
#recursosPublicosPage select,
#recursosPublicosPage textarea {

  font:
    inherit;

}


#recursosPublicosPage button {

  -webkit-tap-highlight-color:
    transparent;

}


#recursosPublicosPage img {

  display:
    block;

  max-width:
    100%;

}


/* =========================================================
   HEADER
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__header {

  position:
    sticky;

  top:
    0;

  z-index:
    30;

  width:
    100%;

  min-height:
    76px;

  padding:
    14px clamp(
      18px,
      3vw,
      42px
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  background:
    color-mix(
      in srgb,
      var(
        --rp-surface
      )
      94%,
      transparent
    );

  border-bottom:
    1px solid
    var(
      --rp-border
    );

  backdrop-filter:
    blur(
      14px
    );

}


/* =========================================================
   BRAND
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__brand {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

}


#recursosPublicosPage
.recursos-publicos__brand-mark {

  width:
    42px;

  height:
    42px;

  flex:
    0 0
    42px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --rp-border-strong
    );

  border-radius:
    12px;

  background:
    var(
      --rp-surface-strong
    );

  color:
    var(
      --rp-text
    );

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    .08em;

}


#recursosPublicosPage
.recursos-publicos__brand-copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

}


#recursosPublicosPage
.recursos-publicos__brand-copy
strong {

  color:
    var(
      --rp-text
    );

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.2;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

}


#recursosPublicosPage
.recursos-publicos__brand-copy
span {

  color:
    var(
      --rp-text-soft
    );

  font-size:
    12px;

  font-weight:
    650;

}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__header-actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    10px;

  min-width:
    0;

}


/* =========================================================
   CLIENT
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__client {

  min-width:
    0;

  max-width:
    280px;

  padding:
    8px 12px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  border:
    1px solid
    var(
      --rp-border
    );

  border-radius:
    12px;

  background:
    var(
      --rp-surface-soft
    );

}


#recursosPublicosPage
.recursos-publicos__client-icon {

  width:
    30px;

  height:
    30px;

  flex:
    0 0
    30px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    9px;

  background:
    var(
      --rp-surface-strong
    );

  color:
    var(
      --rp-text
    );

}


#recursosPublicosPage
.recursos-publicos__client-icon
svg {

  width:
    16px;

  height:
    16px;

  stroke-width:
    2;

}


#recursosPublicosPage
.recursos-publicos__client
div:last-child {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;

}


#recursosPublicosPage
.recursos-publicos__client
span {

  color:
    var(
      --rp-text-muted
    );

  font-size:
    10px;

  font-weight:
    650;

  text-transform:
    uppercase;

  letter-spacing:
    .06em;

}


#recursosPublicosPage
.recursos-publicos__client
strong {

  color:
    var(
      --rp-text
    );

  font-size:
    12px;

  font-weight:
    800;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

}


/* =========================================================
   EXPIRATION
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__expiration {

  padding:
    8px 12px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  border:
    1px solid
    var(
      --rp-border
    );

  border-radius:
    12px;

  background:
    var(
      --rp-surface-soft
    );

}


#recursosPublicosPage
.recursos-publicos__expiration
> svg {

  width:
    17px;

  height:
    17px;

  color:
    var(
      --rp-primary
    );

  stroke-width:
    2;

}


#recursosPublicosPage
.recursos-publicos__expiration
div {

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;

}


#recursosPublicosPage
.recursos-publicos__expiration
span {

  color:
    var(
      --rp-text-muted
    );

  font-size:
    9px;

  font-weight:
    650;

  text-transform:
    uppercase;

  letter-spacing:
    .05em;

}


#recursosPublicosPage
.recursos-publicos__expiration
strong {

  color:
    var(
      --rp-text
    );

  font-size:
    11px;

  font-weight:
    800;

}


#recursosPublicosPage
.recursos-publicos__expiration--unlimited
> svg {

  color:
    var(
      --rp-success
    );

}


/* =========================================================
   LOGOUT
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__logout-btn {

  width:
    40px;

  height:
    40px;

  flex:
    0 0
    40px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --rp-border
    );

  border-radius:
    11px;

  background:
    var(
      --rp-surface
    );

  color:
    var(
      --rp-text
    );

  cursor:
    pointer;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    transform .18s ease;

}


#recursosPublicosPage
.recursos-publicos__logout-btn:hover {

  background:
    var(
      --rp-surface-strong
    );

  border-color:
    var(
      --rp-border-strong
    );

}


#recursosPublicosPage
.recursos-publicos__logout-btn:active {

  transform:
    scale(
      .96
    );

}


#recursosPublicosPage
.recursos-publicos__logout-btn
svg {

  width:
    17px;

  height:
    17px;

}


/* =========================================================
   MAIN
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__main {

  width:
    min(
      1480px,
      100%
    );

  margin:
    0 auto;

  padding:
    clamp(
      22px,
      3vw,
      44px
    );

}


/* =========================================================
   HERO
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__hero {

  width:
    100%;

  padding:
    clamp(
      22px,
      3vw,
      34px
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    28px;

  border:
    1px solid
    var(
      --rp-border
    );

  border-radius:
    20px;

  background:
    var(
      --rp-surface
    );

  box-shadow:
    var(
      --rp-shadow-soft
    );

}


/* =========================================================
   HERO COPY
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__hero-copy {

  min-width:
    0;

  max-width:
    760px;

}


#recursosPublicosPage
.recursos-publicos__eyebrow,
#recursosPublicosPage
.recursos-publicos__section-eyebrow,
#recursosPublicosPage
.recursos-publicos__resources-eyebrow {

  display:
    inline-flex;

  align-items:
    center;

  color:
    var(
      --rp-primary
    );

  font-size:
    11px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .09em;

}


#recursosPublicosPage
.recursos-publicos__hero-copy
h1 {

  margin:
    7px 0 0;

  color:
    var(
      --rp-text
    );

  font-size:
    clamp(
      25px,
      3vw,
      38px
    );

  line-height:
    1.08;

  font-weight:
    800;

  letter-spacing:
    -.035em;

}


#recursosPublicosPage
.recursos-publicos__hero-copy
p {

  margin:
    12px 0 0;

  color:
    var(
      --rp-text-soft
    );

  font-size:
    14px;

  line-height:
    1.7;

  font-weight:
    600;

}


/* =========================================================
   HERO STATS
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__hero-stats {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        120px,
        1fr
      )
    );

  gap:
    10px;

  flex:
    0 0
    auto;

}


#recursosPublicosPage
.recursos-publicos__stat {

  min-width:
    120px;

  padding:
    15px 18px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  border:
    1px solid
    var(
      --rp-border
    );

  border-radius:
    14px;

  background:
    var(
      --rp-surface-soft
    );

}


#recursosPublicosPage
.recursos-publicos__stat
span {

  color:
    var(
      --rp-text-muted
    );

  font-size:
    10px;

  font-weight:
    750;

  text-transform:
    uppercase;

  letter-spacing:
    .07em;

}


#recursosPublicosPage
.recursos-publicos__stat
strong {

  color:
    var(
      --rp-text
    );

  font-size:
    25px;

  line-height:
    1;

  font-weight:
    800;

}


/* =========================================================
   LIBRARY
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__library {

  margin-top:
    30px;

}


/* =========================================================
   SECTION HEADING
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__section-heading {

  margin-bottom:
    14px;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    16px;

}


#recursosPublicosPage
.recursos-publicos__section-heading
h2 {

  margin:
    3px 0 0;

  color:
    var(
      --rp-text
    );

  font-size:
    21px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    -.02em;

}


#recursosPublicosPage
.recursos-publicos__section-count {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    30px;

  padding:
    0 11px;

  border:
    1px solid
    var(
      --rp-border
    );

  border-radius:
    999px;

  background:
    var(
      --rp-surface
    );

  color:
    var(
      --rp-text-soft
    );

  font-size:
    11px;

  font-weight:
    750;

}


/* =========================================================
   BOOKS
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__books {

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    );

  gap:
    14px;

}


/* =========================================================
   BOOK
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__book {

  width:
    100%;

  min-width:
    0;

  border:
    1px solid
    var(
      --rp-border
    );

  border-radius:
    18px;

  background:
    var(
      --rp-surface
    );

  box-shadow:
    var(
      --rp-shadow-soft
    );

  overflow:
    hidden;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;

}


#recursosPublicosPage
.recursos-publicos__book:hover {

  border-color:
    var(
      --rp-border-strong
    );

}


#recursosPublicosPage
.recursos-publicos__book.is-expanded {

  border-color:
    color-mix(
      in srgb,
      var(
        --rp-primary
      )
      30%,
      var(
        --rp-border
      )
    );

}


/* =========================================================
   BOOK MAIN
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__book-main {

  display:
    grid;

  grid-template-columns:
    110px
    minmax(
      0,
      1fr
    );

  gap:
    18px;

  padding:
    18px;

}


/* =========================================================
   BOOK COVER
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__book-cover,
#recursosPublicosPage
.recursos-publicos__book-placeholder {

  width:
    110px;

  height:
    150px;

  border:
    1px solid
    var(
      --rp-border
    );

  border-radius:
    12px;

  overflow:
    hidden;

  background:
    var(
      --rp-surface-strong
    );

}


#recursosPublicosPage
.recursos-publicos__book-cover
img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

}


#recursosPublicosPage
.recursos-publicos__book-placeholder {

  display:
    grid;

  place-items:
    center;

  color:
    var(
      --rp-text-muted
    );

}


#recursosPublicosPage
.recursos-publicos__book-placeholder
svg {

  width:
    32px;

  height:
    32px;

  stroke-width:
    1.7;

}


/* =========================================================
   BOOK INFO
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__book-info {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

}


#recursosPublicosPage
.recursos-publicos__book-title-area {

  min-width:
    0;

}


#recursosPublicosPage
.recursos-publicos__book-label {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    23px;

  padding:
    0 8px;

  border-radius:
    999px;

  background:
    var(
      --rp-primary-soft
    );

  color:
    var(
      --rp-primary
    );

  font-size:
    9px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;

}


#recursosPublicosPage
.recursos-publicos__book-title {

  margin:
    8px 0 0;

  color:
    var(
      --rp-text
    );

  font-size:
    18px;

  line-height:
    1.25;

  font-weight:
    800;

  letter-spacing:
    -.02em;

}


#recursosPublicosPage
.recursos-publicos__book-subtitle-text {

  margin:
    4px 0 0;

  color:
    var(
      --rp-text-soft
    );

  font-size:
    12px;

  line-height:
    1.5;

  font-weight:
    650;

}


#recursosPublicosPage
.recursos-publicos__book-meta {

  margin:
    10px 0 0;

  color:
    var(
      --rp-text-muted
    );

  font-size:
    11px;

  line-height:
    1.5;

  font-weight:
    650;

}


#recursosPublicosPage
.recursos-publicos__book-description {

  margin:
    10px 0 0;

  max-width:
    900px;

  color:
    var(
      --rp-text-soft
    );

  font-size:
    12px;

  line-height:
    1.65;

  font-weight:
    550;

}


/* =========================================================
   BOOK FOOTER
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__book-footer {

  margin-top:
    auto;

  padding-top:
    14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

}


#recursosPublicosPage
.recursos-publicos__resource-count {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(
      --rp-text-soft
    );

  font-size:
    11px;

  font-weight:
    700;

}


#recursosPublicosPage
.recursos-publicos__resource-count
svg {

  width:
    15px;

  height:
    15px;

  stroke-width:
    2;

}


/* =========================================================
   EXPAND BUTTON
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__expand-btn {

  min-height:
    36px;

  padding:
    0 13px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border:
    1px solid
    var(
      --rp-border
    );

  border-radius:
    10px;

  background:
    var(
      --rp-surface-soft
    );

  color:
    var(
      --rp-text
    );

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    transform .18s ease;

}


#recursosPublicosPage
.recursos-publicos__expand-btn:hover {

  border-color:
    var(
      --rp-border-strong
    );

  background:
    var(
      --rp-surface-strong
    );

}


#recursosPublicosPage
.recursos-publicos__expand-btn:active {

  transform:
    scale(
      .98
    );

}


#recursosPublicosPage
.recursos-publicos__expand-btn
svg {

  width:
    15px;

  height:
    15px;

}/* =========================================================
   BOOK RESOURCES
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__book-resources {

  padding:
    18px;

  border-top:
    1px solid
    var(
      --rp-border
    );

  background:
    var(
      --rp-surface-soft
    );

}


#recursosPublicosPage
.recursos-publicos__book-resources[hidden] {

  display:
    none !important;

}


/* =========================================================
   RESOURCES HEADING
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__resources-heading {

  margin-bottom:
    12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

}


#recursosPublicosPage
.recursos-publicos__resources-heading
h3 {

  margin:
    3px 0 0;

  color:
    var(
      --rp-text
    );

  font-size:
    15px;

  line-height:
    1.25;

  font-weight:
    800;

}


/* =========================================================
   FILES LIST
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__files-list {

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    );

  gap:
    10px;

}


/* =========================================================
   FILE ITEM
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__file {

  min-width:
    0;

  padding:
    12px;

  display:
    grid;

  grid-template-columns:
    40px
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    12px;

  border:
    1px solid
    var(
      --rp-border
    );

  border-radius:
    12px;

  background:
    var(
      --rp-surface
    );

  transition:
    border-color .18s ease,
    background-color .18s ease;

}


#recursosPublicosPage
.recursos-publicos__file:hover {

  border-color:
    var(
      --rp-border-strong
    );

}


/* =========================================================
   FILE ICON
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__file-icon {

  width:
    40px;

  height:
    40px;

  flex:
    0 0
    40px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --rp-border
    );

  border-radius:
    11px;

  background:
    var(
      --rp-surface-strong
    );

  color:
    var(
      --rp-primary
    );

}


#recursosPublicosPage
.recursos-publicos__file-icon
svg {

  width:
    19px;

  height:
    19px;

  stroke-width:
    2;

}


/* =========================================================
   FILE CONTENT
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__file-content {

  min-width:
    0;

}


#recursosPublicosPage
.recursos-publicos__file-heading {

  min-width:
    0;

  display:
    flex;

  align-items:
    baseline;

  flex-wrap:
    wrap;

  gap:
    7px;

}


#recursosPublicosPage
.recursos-publicos__file-name {

  min-width:
    0;

  color:
    var(
      --rp-text
    );

  font-size:
    12px;

  line-height:
    1.4;

  font-weight:
    800;

  overflow-wrap:
    anywhere;

}


#recursosPublicosPage
.recursos-publicos__file-meta {

  color:
    var(
      --rp-text-muted
    );

  font-size:
    10px;

  font-weight:
    700;

  white-space:
    nowrap;

}


#recursosPublicosPage
.recursos-publicos__file-description {

  margin:
    4px 0 0;

  color:
    var(
      --rp-text-soft
    );

  font-size:
    11px;

  line-height:
    1.5;

  font-weight:
    550;

}


#recursosPublicosPage
.recursos-publicos__file-limit {

  margin-top:
    5px;

  display:
    inline-block;

  color:
    var(
      --rp-text-muted
    );

  font-size:
    10px;

  font-weight:
    650;

}


/* =========================================================
   FILE ACTIONS
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__file-actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

}


/* =========================================================
   DOWNLOAD BUTTON
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__download-btn {

  min-height:
    36px;

  padding:
    0 13px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border:
    1px solid
    transparent;

  border-radius:
    10px;

  background:
    var(
      --rp-primary
    );

  color:
    #ffffff;

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    background-color .18s ease,
    transform .18s ease,
    opacity .18s ease;

}


#recursosPublicosPage
.recursos-publicos__download-btn:hover:not(:disabled) {

  background:
    var(
      --rp-primary-hover
    );

}


#recursosPublicosPage
.recursos-publicos__download-btn:active:not(:disabled) {

  transform:
    scale(
      .98
    );

}


#recursosPublicosPage
.recursos-publicos__download-btn:disabled {

  cursor:
    wait;

  opacity:
    .72;

}


#recursosPublicosPage
.recursos-publicos__download-btn
svg {

  width:
    15px;

  height:
    15px;

  stroke-width:
    2.2;

}


/* =========================================================
   EMPTY FILES
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__empty-files {

  min-height:
    90px;

  padding:
    16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  border:
    1px dashed
    var(
      --rp-border-strong
    );

  border-radius:
    12px;

  background:
    var(
      --rp-surface
    );

  color:
    var(
      --rp-text-soft
    );

}


#recursosPublicosPage
.recursos-publicos__empty-files
> svg {

  width:
    24px;

  height:
    24px;

  flex:
    0 0
    24px;

  color:
    var(
      --rp-text-muted
    );

}


#recursosPublicosPage
.recursos-publicos__empty-files
div {

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

}


#recursosPublicosPage
.recursos-publicos__empty-files
strong {

  color:
    var(
      --rp-text
    );

  font-size:
    12px;

  font-weight:
    800;

}


#recursosPublicosPage
.recursos-publicos__empty-files
span {

  color:
    var(
      --rp-text-muted
    );

  font-size:
    11px;

  line-height:
    1.5;

  font-weight:
    550;

}


/* =========================================================
   LOADING
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__loading {

  min-height:
    420px;

  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  gap:
    8px;

}


#recursosPublicosPage
.recursos-publicos__loading-spinner {

  width:
    34px;

  height:
    34px;

  margin-bottom:
    8px;

  border:
    3px solid
    var(
      --rp-border
    );

  border-top-color:
    var(
      --rp-primary
    );

  border-radius:
    50%;

  animation:
    recursosPublicosSpin
    .75s linear
    infinite;

}


#recursosPublicosPage
.recursos-publicos__loading
strong {

  color:
    var(
      --rp-text
    );

  font-size:
    14px;

  font-weight:
    800;

}


#recursosPublicosPage
.recursos-publicos__loading
span {

  color:
    var(
      --rp-text-muted
    );

  font-size:
    12px;

  font-weight:
    550;

}


/* =========================================================
   STATE CARD
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__state-card {

  width:
    min(
      560px,
      100%
    );

  margin:
    70px auto;

  padding:
    30px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  text-align:
    center;

  border:
    1px solid
    var(
      --rp-border
    );

  border-radius:
    18px;

  background:
    var(
      --rp-surface
    );

  box-shadow:
    var(
      --rp-shadow-soft
    );

}


#recursosPublicosPage
.recursos-publicos__state-icon {

  width:
    52px;

  height:
    52px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    15px;

  background:
    var(
      --rp-primary-soft
    );

  color:
    var(
      --rp-primary
    );

}


#recursosPublicosPage
.recursos-publicos__state-icon--error {

  background:
    var(
      --rp-danger-soft
    );

  color:
    var(
      --rp-danger
    );

}


#recursosPublicosPage
.recursos-publicos__state-icon
svg {

  width:
    25px;

  height:
    25px;

}


#recursosPublicosPage
.recursos-publicos__state-card
h2 {

  margin:
    16px 0 0;

  color:
    var(
      --rp-text
    );

  font-size:
    19px;

  line-height:
    1.25;

  font-weight:
    800;

}


#recursosPublicosPage
.recursos-publicos__state-card
p {

  max-width:
    420px;

  margin:
    9px 0 0;

  color:
    var(
      --rp-text-soft
    );

  font-size:
    12px;

  line-height:
    1.65;

  font-weight:
    550;

}


/* =========================================================
   STATE ACTIONS
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__state-actions {

  margin-top:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    9px;

}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__secondary-btn,
#recursosPublicosPage
.recursos-publicos__ghost-btn {

  min-height:
    38px;

  padding:
    0 14px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border-radius:
    10px;

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    border-color .18s ease,
    background-color .18s ease,
    transform .18s ease;

}


#recursosPublicosPage
.recursos-publicos__secondary-btn {

  border:
    1px solid
    var(
      --rp-border
    );

  background:
    var(
      --rp-surface-strong
    );

  color:
    var(
      --rp-text
    );

}


#recursosPublicosPage
.recursos-publicos__secondary-btn:hover {

  border-color:
    var(
      --rp-border-strong
    );

}


#recursosPublicosPage
.recursos-publicos__ghost-btn {

  border:
    1px solid
    transparent;

  background:
    transparent;

  color:
    var(
      --rp-text-soft
    );

}


#recursosPublicosPage
.recursos-publicos__ghost-btn:hover {

  background:
    var(
      --rp-surface-strong
    );

  color:
    var(
      --rp-text
    );

}


#recursosPublicosPage
.recursos-publicos__secondary-btn:active,
#recursosPublicosPage
.recursos-publicos__ghost-btn:active {

  transform:
    scale(
      .98
    );

}


#recursosPublicosPage
.recursos-publicos__secondary-btn
svg {

  width:
    15px;

  height:
    15px;

}


/* =========================================================
   FOOTER
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__footer {

  min-height:
    64px;

  padding:
    18px 24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

  color:
    var(
      --rp-text-muted
    );

  font-size:
    10px;

  font-weight:
    650;

  border-top:
    1px solid
    var(
      --rp-border
    );

}


/* =========================================================
   TOAST CONTAINER
   ========================================================= */

.recursos-publicos__toast-container {

  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    99999;

  width:
    min(
      380px,
      calc(
        100vw -
        36px
      )
    );

  display:
    flex;

  flex-direction:
    column;

  align-items:
    stretch;

  gap:
    8px;

  pointer-events:
    none;

}


/* =========================================================
   TOAST
   ========================================================= */

.recursos-publicos__toast {

  width:
    100%;

  min-height:
    54px;

  padding:
    11px;

  display:
    grid;

  grid-template-columns:
    32px
    minmax(
      0,
      1fr
    )
    28px;

  align-items:
    center;

  gap:
    9px;

  border:
    1px solid
    #dedfe5;

  border-radius:
    12px;

  background:
    #ffffff;

  color:
    #111318;

  box-shadow:
    0 14px 34px rgba(
      0,
      0,
      0,
      .14
    );

  font-family:
    "Plus Jakarta Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  pointer-events:
    auto;

  animation:
    recursosPublicosToastIn
    .2s ease;

}


html.dark
.recursos-publicos__toast,

body.dark
.recursos-publicos__toast,

[data-theme="dark"]
.recursos-publicos__toast {

  border-color:
    #2b2b30;

  background:
    #0b0b0c;

  color:
    #ffffff;

  box-shadow:
    0 16px 40px rgba(
      0,
      0,
      0,
      .38
    );

}


.recursos-publicos__toast.is-leaving {

  opacity:
    0;

  transform:
    translateY(
      6px
    );

  transition:
    opacity .2s ease,
    transform .2s ease;

}


.recursos-publicos__toast-icon {

  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    9px;

  background:
    #f1f2f5;

}


.recursos-publicos__toast-icon
svg {

  width:
    17px;

  height:
    17px;

}


.recursos-publicos__toast--success
.recursos-publicos__toast-icon {

  background:
    #edf9f2;

  color:
    #2f7d56;

}


.recursos-publicos__toast--error
.recursos-publicos__toast-icon {

  background:
    #fff0f2;

  color:
    #c63b47;

}


.recursos-publicos__toast--info
.recursos-publicos__toast-icon {

  background:
    #eef4ff;

  color:
    #315da8;

}


html.dark
.recursos-publicos__toast-icon,

body.dark
.recursos-publicos__toast-icon,

[data-theme="dark"]
.recursos-publicos__toast-icon {

  background:
    #151518;

}


html.dark
.recursos-publicos__toast--success
.recursos-publicos__toast-icon,

body.dark
.recursos-publicos__toast--success
.recursos-publicos__toast-icon,

[data-theme="dark"]
.recursos-publicos__toast--success
.recursos-publicos__toast-icon {

  background:
    #0d1712;

}


html.dark
.recursos-publicos__toast--error
.recursos-publicos__toast-icon,

body.dark
.recursos-publicos__toast--error
.recursos-publicos__toast-icon,

[data-theme="dark"]
.recursos-publicos__toast--error
.recursos-publicos__toast-icon {

  background:
    #1b0f12;

}


html.dark
.recursos-publicos__toast--info
.recursos-publicos__toast-icon,

body.dark
.recursos-publicos__toast--info
.recursos-publicos__toast-icon,

[data-theme="dark"]
.recursos-publicos__toast--info
.recursos-publicos__toast-icon {

  background:
    #0d131e;

}


.recursos-publicos__toast
> span {

  min-width:
    0;

  color:
    inherit;

  font-size:
    11px;

  line-height:
    1.5;

  font-weight:
    700;

}


.recursos-publicos__toast-close {

  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  color:
    inherit;

  cursor:
    pointer;

  opacity:
    .68;

}


.recursos-publicos__toast-close:hover {

  opacity:
    1;

  background:
    rgba(
      127,
      127,
      127,
      .10
    );

}


.recursos-publicos__toast-close
svg {

  width:
    14px;

  height:
    14px;

}


/* =========================================================
   SPINNER
   ========================================================= */

#recursosPublicosPage
.recursos-publicos__spinner {

  width:
    14px;

  height:
    14px;

  flex:
    0 0
    14px;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      .38
    );

  border-top-color:
    #ffffff;

  border-radius:
    50%;

  animation:
    recursosPublicosSpin
    .7s linear
    infinite;

}


/* =========================================================
   FOCUS
   ========================================================= */

#recursosPublicosPage
button:focus-visible {

  outline:
    2px solid
    var(
      --rp-primary
    );

  outline-offset:
    2px;

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes recursosPublicosSpin {

  from {

    transform:
      rotate(
        0deg
      );

  }

  to {

    transform:
      rotate(
        360deg
      );

  }

}


@keyframes recursosPublicosToastIn {

  from {

    opacity:
      0;

    transform:
      translateY(
        8px
      );

  }

  to {

    opacity:
      1;

    transform:
      translateY(
        0
      );

  }

}


/* =========================================================
   RESPONSIVE
   1000
   ========================================================= */

@media (
  max-width:
    1000px
) {

  #recursosPublicosPage
  .recursos-publicos__header {

    align-items:
      flex-start;

  }


  #recursosPublicosPage
  .recursos-publicos__header-actions {

    flex-wrap:
      wrap;

  }


  #recursosPublicosPage
  .recursos-publicos__client {

    max-width:
      220px;

  }


  #recursosPublicosPage
  .recursos-publicos__hero {

    align-items:
      stretch;

    flex-direction:
      column;

  }


  #recursosPublicosPage
  .recursos-publicos__hero-stats {

    width:
      100%;

  }


  #recursosPublicosPage
  .recursos-publicos__stat {

    width:
      100%;

  }

}


/* =========================================================
   RESPONSIVE
   760
   ========================================================= */

@media (
  max-width:
    760px
) {

  #recursosPublicosPage
  .recursos-publicos__header {

    position:
      relative;

    min-height:
      0;

    padding:
      14px 16px;

    align-items:
      center;

  }


  #recursosPublicosPage
  .recursos-publicos__brand-copy
  span {

    display:
      none;

  }


  #recursosPublicosPage
  .recursos-publicos__client,
  #recursosPublicosPage
  .recursos-publicos__expiration {

    display:
      none;

  }


  #recursosPublicosPage
  .recursos-publicos__main {

    padding:
      18px 14px;

  }


  #recursosPublicosPage
  .recursos-publicos__hero {

    padding:
      20px;

    border-radius:
      16px;

  }


  #recursosPublicosPage
  .recursos-publicos__hero-copy
  h1 {

    font-size:
      27px;

  }


  #recursosPublicosPage
  .recursos-publicos__library {

    margin-top:
      24px;

  }


  #recursosPublicosPage
  .recursos-publicos__book-main {

    grid-template-columns:
      90px
      minmax(
        0,
        1fr
      );

    gap:
      14px;

    padding:
      14px;

  }


  #recursosPublicosPage
  .recursos-publicos__book-cover,
  #recursosPublicosPage
  .recursos-publicos__book-placeholder {

    width:
      90px;

    height:
      124px;

  }


  #recursosPublicosPage
  .recursos-publicos__book-title {

    font-size:
      16px;

  }


  #recursosPublicosPage
  .recursos-publicos__book-description {

    display:
      -webkit-box;

    -webkit-line-clamp:
      3;

    -webkit-box-orient:
      vertical;

    overflow:
      hidden;

  }


  #recursosPublicosPage
  .recursos-publicos__book-footer {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  #recursosPublicosPage
  .recursos-publicos__expand-btn {

    width:
      100%;

  }


  #recursosPublicosPage
  .recursos-publicos__file {

    grid-template-columns:
      38px
      minmax(
        0,
        1fr
      );

  }


  #recursosPublicosPage
  .recursos-publicos__file-actions {

    grid-column:
      1 /
      -1;

  }


  #recursosPublicosPage
  .recursos-publicos__download-btn {

    width:
      100%;

  }

}


/* =========================================================
   RESPONSIVE
   520
   ========================================================= */

@media (
  max-width:
    520px
) {

  #recursosPublicosPage
  .recursos-publicos__brand-mark {

    width:
      38px;

    height:
      38px;

    flex-basis:
      38px;

    border-radius:
      10px;

  }


  #recursosPublicosPage
  .recursos-publicos__brand-copy
  strong {

    font-size:
      12px;

  }


  #recursosPublicosPage
  .recursos-publicos__logout-btn {

    width:
      38px;

    height:
      38px;

    flex-basis:
      38px;

  }


  #recursosPublicosPage
  .recursos-publicos__hero {

    padding:
      18px;

  }


  #recursosPublicosPage
  .recursos-publicos__hero-copy
  h1 {

    font-size:
      24px;

  }


  #recursosPublicosPage
  .recursos-publicos__hero-copy
  p {

    font-size:
      12px;

  }


  #recursosPublicosPage
  .recursos-publicos__hero-stats {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

  }


  #recursosPublicosPage
  .recursos-publicos__stat {

    min-width:
      0;

    padding:
      13px;

  }


  #recursosPublicosPage
  .recursos-publicos__stat
  strong {

    font-size:
      22px;

  }


  #recursosPublicosPage
  .recursos-publicos__section-heading {

    align-items:
      flex-start;

  }


  #recursosPublicosPage
  .recursos-publicos__book {

    border-radius:
      15px;

  }


  #recursosPublicosPage
  .recursos-publicos__book-main {

    grid-template-columns:
      72px
      minmax(
        0,
        1fr
      );

    gap:
      12px;

    padding:
      12px;

  }


  #recursosPublicosPage
  .recursos-publicos__book-cover,
  #recursosPublicosPage
  .recursos-publicos__book-placeholder {

    width:
      72px;

    height:
      100px;

    border-radius:
      10px;

  }


  #recursosPublicosPage
  .recursos-publicos__book-label {

    min-height:
      20px;

    padding:
      0 7px;

    font-size:
      8px;

  }


  #recursosPublicosPage
  .recursos-publicos__book-title {

    margin-top:
      6px;

    font-size:
      14px;

  }


  #recursosPublicosPage
  .recursos-publicos__book-subtitle-text,
  #recursosPublicosPage
  .recursos-publicos__book-meta {

    font-size:
      10px;

  }


  #recursosPublicosPage
  .recursos-publicos__book-description {

    display:
      none;

  }


  #recursosPublicosPage
  .recursos-publicos__book-footer {

    padding-top:
      10px;

  }


  #recursosPublicosPage
  .recursos-publicos__resource-count {

    font-size:
      10px;

  }


  #recursosPublicosPage
  .recursos-publicos__book-resources {

    padding:
      12px;

  }


  #recursosPublicosPage
  .recursos-publicos__file {

    padding:
      10px;

    gap:
      9px;

  }


  #recursosPublicosPage
  .recursos-publicos__file-icon {

    width:
      36px;

    height:
      36px;

  }


  #recursosPublicosPage
  .recursos-publicos__file-name {

    font-size:
      11px;

  }


  #recursosPublicosPage
  .recursos-publicos__file-description {

    font-size:
      10px;

  }


  #recursosPublicosPage
  .recursos-publicos__state-card {

    margin:
      38px auto;

    padding:
      22px 18px;

  }


  #recursosPublicosPage
  .recursos-publicos__footer {

    padding:
      16px;

    font-size:
      9px;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {

  #recursosPublicosPage *,
  #recursosPublicosPage *::before,
  #recursosPublicosPage *::after,
  .recursos-publicos__toast {

    scroll-behavior:
      auto !important;

    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;

  }

}