/* ─────────────────────────────────────────────────────────────
   Piel de Tsukuyomi para Homepage
   Mismos colores, fuentes y cristal que la portada tsukuyomi.es
   ───────────────────────────────────────────────────────────── */
@font-face { font-family: 'Outfit'; src: url(/images/fonts/outfit-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(/images/fonts/outfit-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(/images/fonts/outfit-latin-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Zen Maru Gothic'; src: url(/images/fonts/zen-maru-gothic-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --tk-ink: #f6f3ff; --tk-muted: #b8b2da;
  --tk-pink: #ff8fc8; --tk-lilac: #b9a4ff; --tk-cyan: #7ee8fa; --tk-peach: #ffc6a5;
  --tk-iri: linear-gradient(110deg, #7ee8fa, #b9a4ff 30%, #ff8fc8 55%, #ffc6a5 75%, #7ee8fa);
}
@keyframes tk-iri { to { background-position: -220% 0; } }

body, #__next { font-family: 'Outfit', 'Zen Maru Gothic', system-ui, sans-serif !important; color: var(--tk-ink); }

/* Fondo: la misma imagen con el velo morado de la portada */
#background { filter: saturate(1.1); }
#background::after { content: ''; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 20% 30%, rgba(18,10,42,.55), rgba(18,10,42,.2) 60%), linear-gradient(rgba(18,10,42,.2), rgba(18,10,42,.65)); }

/* Saludo y fecha */
.information-widget-greeting span { font-weight: 800; font-size: clamp(22px, 3vw, 34px) !important; letter-spacing: -.01em;
  background: var(--tk-iri); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: tk-iri 10s linear infinite; }
.information-widget-datetime span { color: var(--tk-muted) !important; }

/* Títulos de grupo */
.service-group-name { font-weight: 600 !important; font-size: 13px !important; letter-spacing: .2em; text-transform: uppercase; color: var(--tk-cyan) !important; }

/* Tarjetas de cristal con borde iridiscente */
.service-card {
  position: relative; border-radius: 18px !important; padding: 6px !important; margin-bottom: 12px !important;
  background: rgba(24, 20, 60, .5) !important; backdrop-filter: blur(14px) saturate(1.3) !important;
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.7) !important; transition: transform .25s, box-shadow .25s !important;
}
.service-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(126,232,250,.7), rgba(185,164,255,.25) 35%, rgba(255,143,200,.6) 65%, rgba(255,198,165,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -20px rgba(255,143,200,.55) !important; background: rgba(36, 28, 80, .6) !important; }
.service-card img { filter: drop-shadow(0 4px 12px rgba(185,164,255,.35)); }
.service-name { font-weight: 600; font-size: 15px !important; color: var(--tk-ink) !important; }
.service-description { color: var(--tk-muted) !important; font-size: 12.5px !important; }

/* Buscador y pie */
#footer { opacity: .6; }
dialog input { border-radius: 14px !important; }

/* Dentro del panel de la portada: sin fondo propio (ya se ve el vídeo detrás) */
html.tk-panel #background { display: none; }
html.tk-panel, html.tk-panel body, html.tk-panel #__next { background: transparent !important; }
html.tk-panel #information-widgets { margin-top: 18px; }

/* ── Que todo quepa en una pantalla, sin scroll ─────────────────
   Los 5 grupos van siempre en una fila (desde 1024 px de ancho) y,
   si la pantalla es baja, todo se compacta un poco. */
@media (min-width: 1024px) {
  #layout-groups { flex-wrap: nowrap !important; gap: 10px; margin: 12px 28px 0 !important; }
  #layout-groups .services-group { flex: 1 1 0 !important; min-width: 0; max-width: none !important; padding: 0 !important; }
  #information-widgets { margin: 22px 32px 0 !important; }
  .services-list { margin-top: 8px !important; }
  .service-card { margin-bottom: 8px !important; }
  .service-block { padding: 2px !important; margin: 2px !important; }
  .service-block-label { font-size: 9px !important; letter-spacing: .02em; }
  .service-block-value { font-size: 12px !important; }
  .service-name { padding-right: 22px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #footer { display: none; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .information-widget-greeting span { font-size: 24px !important; }
  #information-widgets { margin-top: 14px !important; }
  .service-card { padding: 3px !important; margin-bottom: 6px !important; border-radius: 14px !important; }
  .service-card img { width: 26px !important; height: 26px !important; }
  .service-name { font-size: 14px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
  .service-description { font-size: 11.5px !important; }
}
@media (min-width: 1024px) and (max-height: 640px) {
  .service-description { display: none; }
  .information-widget-resources, .information-widget-openmeteo { transform: scale(.9); transform-origin: right top; }
}

/* ── Barra de noticias de Tsukuyomi (abajo) ─────────────────── */
#tk-news { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 30; width: min(1100px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 5px; border-radius: 999px; font-size: 13px;
  background: rgba(24, 20, 60, .55); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 14px 40px -16px rgba(0,0,0,.7); }
.tk-news__live { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255,143,200,.18); color: var(--tk-pink); font-weight: 600; font-size: 11px; letter-spacing: .08em; }
.tk-news__live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tk-pink); box-shadow: 0 0 10px var(--tk-pink); animation: tk-pulse 1.6s ease-in-out infinite; }
@keyframes tk-pulse { 50% { opacity: .3; } }
.tk-news__name { flex: none; font-weight: 600; font-size: 12px; letter-spacing: .06em; color: #ffe08a; }
.tk-news__track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.tk-news__text { display: inline-block; white-space: nowrap; padding-left: 100%; color: var(--tk-ink); animation: tk-ticker 30s linear infinite; }
@keyframes tk-ticker { to { transform: translateX(-100%); } }
/* (sin relleno: el contenido ya deja hueco para la barra) */
html.tk-panel #tk-news { display: none; }          /* en el panel ya está la de la portada */

@media (prefers-reduced-motion: reduce) { .tk-news__text { animation: none; padding-left: 0; } }

/* ── Marcadores: dos grupos en fila, cada uno como fila de "píldoras" de cristal ── */
#bookmarks { margin: 4px 28px 0 !important; gap: 10px; }
.bookmark-group-name { font-weight: 600 !important; font-size: 13px !important; letter-spacing: .2em; text-transform: uppercase; color: var(--tk-pink) !important; }
.bookmark-list { flex-direction: row !important; flex-wrap: wrap; gap: 8px; margin-top: 8px !important; }
.bookmark { flex: 1 1 180px; min-width: 0; }
.bookmark > a, .bookmark a { border-radius: 14px !important; overflow: hidden; background: rgba(24, 20, 60, .5) !important; backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 12px 30px -18px rgba(0,0,0,.7) !important; transition: transform .25s, box-shadow .25s; }
.bookmark a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255,143,200,.5), 0 16px 40px -16px rgba(255,143,200,.5) !important; }
.bookmark-icon { background: rgba(255,255,255,.06) !important; color: var(--tk-ink) !important; }
.bookmark-icon img { width: 20px !important; height: 20px !important; }
.bookmark-name { color: var(--tk-ink) !important; font-weight: 600; font-size: 13px !important; }
.bookmark-description { color: var(--tk-muted) !important; }
@media (min-width: 1024px) {
  #bookmarks { flex-wrap: nowrap !important; }
  #bookmarks .bookmark-group { flex: 1 1 0 !important; max-width: none !important; padding: 0 !important; }
}

/* Apps arriba del todo y marcadores abajo del todo (justo encima de la barra de noticias) */
@media (min-width: 1024px) {
  #inner_wrapper > .container { box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; }
  #bookmarks { margin-top: auto !important; padding-top: 18px; margin-bottom: 68px !important; }   /* 68 px: sitio para la barra de noticias */
  html.tk-panel #bookmarks { margin-bottom: 14px !important; }
}
/* En ventanas muy bajas la barra de noticias se oculta para no tapar los marcadores */
@media (max-height: 640px) { #tk-news { display: none; } }
/* Marcadores anchos: cada grupo en una sola fila y todas las píldoras del mismo ancho */
.bookmark-list { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px !important; }
.bookmark { flex: none; }
@media (min-width: 1024px) {
  #bookmarks { gap: 16px; }
  #bookmarks .bookmark-group:nth-child(1) { flex: 4 1 0 !important; }   /* Yo: 4 marcadores */
  #bookmarks .bookmark-group:nth-child(2) { flex: 3 1 0 !important; }   /* Red y dominio: 3 */
}
.bookmark a { min-height: 52px; border-radius: 16px !important; }
.bookmark-icon { width: 52px !important; }
.bookmark-icon img { width: 24px !important; height: 24px !important; }
.bookmark-name { font-size: 14px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
.bookmark-description { font-size: 12px !important; }
@media (max-width: 1599px) { .bookmark-description { display: none; } }
.bookmark-name { white-space: nowrap; }

/* Que las píldoras no se corten por abajo/derecha (Homepage pone overflow:hidden a cada grupo) */
#bookmarks .bookmark-group, #bookmarks .bookmark-list { overflow: visible !important; }
#bookmarks .bookmark-list { padding: 2px 2px 6px; }

/* Cuadro del icono de los marcadores: el mismo diseño, pero ocupando todo el alto de la píldora
   y con la esquina izquierda igual de redondeada, para que no parezca recortado */
.bookmark a > .flex { min-height: 52px; align-items: stretch; }
.bookmark-icon { align-self: stretch; border-radius: 16px 0 0 16px !important; }

/* ── Pantalla de inicio de sesión (Homepage 2.x): piel de Tsukuyomi y textos en español ──
   Solo custom.css se carga antes de entrar, así que la traducción se hace con CSS. */
body:has(input[name="password"]) main > div {
  background: rgba(24, 20, 60, .55) !important; border: 0 !important; border-radius: 28px !important;
  backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.14) !important;
}
body:has(input[name="password"]) main h1 {
  font-weight: 800 !important; font-size: 56px !important; line-height: 1 !important; letter-spacing: -.02em;
  background: var(--tk-iri); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: tk-iri 10s linear infinite;
}
body:has(input[name="password"]) main section:first-child > div > div:first-child,
body:has(input[name="password"]) main section:first-child p,
body:has(input[name="password"]) main h2,
body:has(input[name="password"]) main form label,
body:has(input[name="password"]) main form button span { font-size: 0 !important; }
body:has(input[name="password"]) main section:first-child > div > div:first-child::after { content: 'Acceso privado'; font-size: 12px; letter-spacing: .2em; color: var(--tk-pink); }
body:has(input[name="password"]) main section:first-child > div > div:first-child { border-color: rgba(255,143,200,.35) !important; background: rgba(255,143,200,.12) !important; }
body:has(input[name="password"]) main section:first-child p::after { content: 'ヤオヨロー！ Introduce la contraseña para entrar en el portal.'; font-size: 15px; color: var(--tk-muted); }
body:has(input[name="password"]) main h2::after { content: 'Entrar'; font-size: 20px; font-weight: 600; color: var(--tk-ink); }
body:has(input[name="password"]) main form label::after { content: 'Contraseña'; font-size: 14px; color: var(--tk-muted); }
body:has(input[name="password"]) main form button span::after { content: 'Entrar →'; font-size: 15px; }
body:has(input[name="password"]) main section:last-child > div { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; border-radius: 20px !important; }
body:has(input[name="password"]) main form input { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; color: var(--tk-ink) !important; border-radius: 14px !important; }
body:has(input[name="password"]) main form input:focus { border-color: var(--tk-pink) !important; box-shadow: 0 0 0 3px rgba(255,143,200,.25) !important; }
body:has(input[name="password"]) main form button { background: linear-gradient(90deg, #7ee8fa, #b9a4ff 25%, #ff8fc8 50%, #ffc6a5 75%, #7ee8fa) !important; background-size: 200% 100% !important;
  animation: tk-loop 6s linear infinite; color: #1a1030 !important; border-radius: 14px !important; box-shadow: 0 12px 30px -10px rgba(255,143,200,.6) !important; }
@keyframes tk-loop { to { background-position: -200% 0; } }