/* Pantalla "Estadísticas" (botón de la barra inferior de CuaderNOTE). Tema oscuro como la
   biblioteca del boceto; el verde es el original #00FF66. */
body dialog.st-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: radial-gradient(120% 50% at 50% 0%, #0d2a1d 0%, #121b42 55%, #0f173c 100%);
  color: #eef6f2;
  color-scheme: dark;
  font-family: var(--ian-ui-font), Manrope, system-ui, sans-serif;
  box-shadow: none;
}
body dialog.st-dialog:not([open]) { display: none; }
body dialog.st-dialog::backdrop { background: #0f173c; }
body dialog.st-dialog *, body dialog.st-dialog *::before, body dialog.st-dialog *::after { box-sizing: border-box; }
body dialog.st-dialog :is(h2, h3, p, ul) { margin: 0; padding: 0; }
body dialog.st-dialog ul { list-style: none; }

body dialog.st-dialog .st-shell {
  display: grid;
  align-content: start;
  gap: 14px;
  width: 100%;
  max-width: 760px;
  height: 100%;
  margin: 0 auto;
  padding: 14px 16px 48px;
  overflow-y: auto;
}
body dialog.st-dialog .st-head { display: flex; align-items: center; gap: 12px; }
body dialog.st-dialog .st-head h2 { font-size: 22px; font-weight: 800; letter-spacing: .01em; }
body dialog.st-dialog .st-head p { color: #9fb2a9; font-size: 13px; }
body dialog.st-dialog button.st-close {
  all: unset;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 102, .35);
  background: rgba(0, 255, 102, .08);
  color: #7dffb0;
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body dialog.st-dialog button:focus-visible { outline: 2px solid #7dffb0; outline-offset: 2px; }

body dialog.st-dialog .st-empty {
  padding: 14px 16px;
  border: 1px dashed rgba(0, 255, 102, .4);
  border-radius: 16px;
  color: #c9dbd2;
  font-size: 14px;
  line-height: 1.45;
}

body dialog.st-dialog .st-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body dialog.st-dialog .st-tile {
  display: grid;
  gap: 2px;
  padding: 14px;
  border: 1px solid rgba(0, 255, 102, .2);
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
}
body dialog.st-dialog .st-tile strong { color: #00FF66; font-size: 30px; font-weight: 800; line-height: 1.05; }
body dialog.st-dialog .st-tile span { font-size: 14px; font-weight: 700; }
body dialog.st-dialog .st-tile small { color: #9fb2a9; font-size: 12px; }

body dialog.st-dialog .st-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: rgba(255, 255, 255, .035);
}
body dialog.st-dialog .st-card h3 { display: grid; gap: 2px; font-size: 16px; font-weight: 800; }
body dialog.st-dialog .st-card h3 small { color: #9fb2a9; font-size: 12px; font-weight: 500; }

body dialog.st-dialog .st-types { display: grid; gap: 6px; }
body dialog.st-dialog button.st-type {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 22px minmax(84px, 112px) 1fr 32px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body dialog.st-dialog button.st-type:active { background: rgba(255, 255, 255, .07); }
body dialog.st-dialog .st-type i { color: var(--st-c); font-style: normal; font-size: 17px; text-align: center; }
body dialog.st-dialog .st-type span { font-size: 14px; font-weight: 700; }
body dialog.st-dialog .st-type em { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .09); overflow: hidden; }
body dialog.st-dialog .st-type em b { display: block; height: 100%; min-width: 3px; border-radius: 99px; background: var(--st-c); }
body dialog.st-dialog .st-type strong { font-size: 15px; font-weight: 800; text-align: right; }

body dialog.st-dialog .st-week { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 8px; height: 150px; }
body dialog.st-dialog .st-day { display: grid; grid-template-rows: 18px 1fr 18px; justify-items: center; align-items: end; height: 100%; }
body dialog.st-dialog .st-day strong { font-size: 12px; font-weight: 700; color: #c9dbd2; }
body dialog.st-dialog .st-day b { display: block; width: 100%; max-width: 30px; border-radius: 8px 8px 3px 3px; background: rgba(0, 255, 102, .45); }
body dialog.st-dialog .st-day.is-today b { background: #00FF66; }
body dialog.st-dialog .st-day span { align-self: end; padding-top: 4px; color: #9fb2a9; font-size: 11px; text-transform: capitalize; }
body dialog.st-dialog .st-day.is-today span { color: #7dffb0; font-weight: 800; }

body dialog.st-dialog .st-rem { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; text-align: center; }
body dialog.st-dialog .st-rem div { display: grid; gap: 2px; padding: 10px 2px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
body dialog.st-dialog .st-rem strong { font-size: 22px; font-weight: 800; }
body dialog.st-dialog .st-rem span { color: #9fb2a9; font-size: 10.5px; line-height: 1.15; }
body dialog.st-dialog .st-rem .is-warn strong { color: #ff7b7b; }

body dialog.st-dialog .st-bar { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
body dialog.st-dialog .st-bar b { display: block; height: 100%; border-radius: 99px; background: #00FF66; }
body dialog.st-dialog .st-bar.is-warn b { background: #ff9b3d; }
body dialog.st-dialog .st-space { font-size: 14px; color: #c9dbd2; }
body dialog.st-dialog .st-space strong { color: #fff; }
body dialog.st-dialog .st-note { padding: 10px 12px; border-radius: 12px; background: rgba(255, 155, 61, .12); color: #ffc48a; font-size: 13px; }

body dialog.st-dialog .st-list { display: grid; gap: 2px; }
body dialog.st-dialog .st-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 14px; }
body dialog.st-dialog .st-list li:first-child { border-top: 0; }
body dialog.st-dialog .st-list li span { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body dialog.st-dialog .st-list li i { font-style: normal; }
body dialog.st-dialog .st-list li b { flex: none; color: #9fb2a9; font-size: 13px; font-weight: 600; }

body dialog.st-dialog button.st-action {
  all: unset;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 255, 102, .5);
  background: rgba(0, 255, 102, .1);
  color: #7dffb0;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body dialog.st-dialog button.st-action:active { background: rgba(0, 255, 102, .2); }

@media (min-width: 820px) {
  body dialog.st-dialog .st-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}