/* =========================================================
   TAR.mx – Theme base
   - Colores
   - Tipografía
   - Layout
   - Componentes comunes (cards, grids, top-pics)
   ========================================================= */

/* ---------- Colores base ---------- */

:root {
   --bg: #ffffff;
   --fg: #111111;
   --muted: #555555;
   --bd: #e9e9e9;
   --chip: #f7f7f7;

   --accent: #00733C;
   /* para detalles, botones, etc. */
   --accent-soft: #e5f5f1;
   --danger: #d23b3b;

   /* Skeleton (modo claro) */
   --sk1: #e8e8e8;
   --sk2: #f0f0f0;
   --sk3: #e8e8e8;
}

@media (prefers-color-scheme: dark) {
   :root {
      --bg: #050607;
      --fg: #f2f2f2;
      --muted: #c0c0c0;
      --bd: #26292d;
      --chip: #141619;

      --accent: #29c89a;
      --accent-soft: #102923;

      /* Skeleton (modo oscuro) */
      --sk1: #1c1c1c;
      --sk2: #2a2a2a;
      --sk3: #1c1c1c;
   }
}

/* ---------- Reset suave ---------- */

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

html,
body {
   margin: 0;
   padding: 0;
}

/* ---------- Tipografía y body ---------- */

body {
   background: var(--bg);
   color: var(--fg);
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Ubuntu, Cantarell, "Noto Sans", sans-serif;
   font-size: 16px;
   line-height: 1.4;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
}

/* Títulos globales: puedes reutilizar en otras páginas */

h1,
h2,
h3,
h4 {
   color: var(--fg);
   font-weight: 650;
   letter-spacing: 0.01em;
}

h1 {
   font-size: 1.8rem;
   margin: 0 0 0.5rem;
}

h2 {
   font-size: 1.35rem;
   margin: 0 0 0.75rem;
}

h3 {
   font-size: 1.1rem;
   margin: 0 0 0.25rem;
}

p {
   margin: 0 0 0.75rem;
}

/* ---------- Links ---------- */

a {
   color: inherit;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

/* Dentro de tarjetas (timeline, etc.) los links no van subrayados por defecto */
#feed {
   min-height: 600px;
}

.card a {
   text-decoration: none;
}

.card a:hover {
   text-decoration: underline;
   text-decoration-thickness: 2px;
}

/* ---------- Contenedores / layout ---------- */

.page-wrap {
   max-width: 1200px;
   margin: 0 auto;
   padding: 12px 12px 32px;
}

/* Topbar tipo app / discover */

.topbar {
   position: sticky;
   top: 0;
   z-index: 20;
   background: rgba(var(--bg-rgb, 255, 255, 255));
   background: var(--bg);
   border-bottom: 1px solid var(--bd);
   backdrop-filter: saturate(1.2) blur(8px);
   height: 49px;
}

.topbar-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0.55rem 0.9rem;
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.brand {
   display: flex;
   align-items: center;
   gap: 6px;
   font-weight: 750;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   font-size: 0.98rem;
   text-decoration: none;
   color: var(--fg);
}

.brand-logo {
   width: auto;
   height: auto;
   display: block;
}

@media (min-width: 768px) {
   .brand-logo {
      height: 30px;
   }
}

/* Nav de filtros tipo chips */

/* Nav superior tipo chips, ahora con links <a> */

.chip-nav {
   display: flex;
   gap: 0.5rem;
   margin-left: auto;
   overflow-x: auto;
   padding-bottom: 2px;
   -webkit-overflow-scrolling: touch;
   /* inercia suave en iOS */
   scrollbar-width: none;
   /* Firefox: oculta scroll */
}

/* Ocultar scrollbar en WebKit (Chrome, Safari, iOS) */
.chip-nav::-webkit-scrollbar {
   display: none;
}

.chip-nav .nav-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 999px;
   border: 1px solid var(--bd);
   padding: 0.25rem 0.8rem;
   font-size: 0.8rem;
   background: var(--chip);
   color: var(--fg);
   white-space: nowrap;
   text-decoration: none;
}

.chip-nav .nav-link:hover {
   background: var(--fg);
   color: var(--bg);
   border-color: var(--fg);
   text-decoration: none;
}

.chip-nav .nav-active {
   background: var(--fg);
   color: var(--bg);
   border-color: var(--fg);
}

/* ---------- Grid principal del feed ---------- */

.feed {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
}

@media (min-width: 768px) {
   .feed {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (min-width: 1100px) {
   .feed {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* Tarjeta a ancho completo dentro del feed (para bloques especiales) */

.feed-full {
   grid-column: 1 / -1;
}

/* ---------- Cards ---------- */

.card {
   border-radius: 16px;
   border: 1px solid var(--bd);
   background: var(--bg);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

.card .body {
   padding: 14px 14px 16px;
}

.card.no-thumb .body {
   padding: 18px 16px 20px;
}

/* Eyebrow: línea superior mini (tipo Discover) */

.eyebrow {
   font-size: 0.8rem;
   color: var(--muted);
   letter-spacing: 0.02em;
   text-transform: none;
   margin-bottom: 0.3rem;
}

.eyebrow time {
   opacity: 1;
   font-weight: 500;
}

/* Título dentro de card */

.card .title {
   font-size: 1.06rem;
   line-height: 1.25;
   margin: 0;
}

.card.no-thumb .title {
   font-size: 2rem;
}

/* Extracto de post */

.excerpt {
   margin-top: 0.5rem;
   color: var(--muted);
   font-size: 0.95rem;
   line-height: 1.35;
}

/* Imagen principal de una card */

.thumb {
   display: block;
   width: 100%;
   aspect-ratio: 3 / 2;
   object-fit: cover;
   object-position: 50% 10%;
   background: #f3f3f3;
}

/* Para videos podemos sobrescribir aspect-ratio a 16:9 */

.card[data-type="youtube"] .thumb {
   aspect-ratio: 16 / 9;
}

/* ---------- Grid de fotos pequeñas (auto_grid, fotos sueltas) ---------- */

.grid-pics {
   display: grid;
   gap: 3px;
   margin-top: 0.6rem;
}

.grid-2 {
   grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
   grid-template-columns: repeat(3, 1fr);
}

.grid-pics img {
   width: 100%;
   aspect-ratio: 2 / 3;
   object-fit: cover;
   object-position: 50% 10%;
   border-radius: 6px;
   background: #f3f3f3;
}

/* ---------- Bloque: Fotos más vistas ---------- */

.top-pics-block {
   margin-top: 24px;
   border: 1px solid var(--bd);
   border-radius: 16px;
   padding: 12px 12px 14px;
   background: var(--bg);
   min-height: 260px;
}

.top-pics-header {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 8px;
}

.top-pics-header h2 {
   font-size: 1rem;
   margin: 0;
}

.top-pics-tabs {
   display: flex;
   gap: 4px;
   margin-left: auto;
   overflow-x: auto;
}

.top-pics-tabs button {
   border: 1px solid var(--bd);
   border-radius: 999px;
   padding: 0.2rem 0.65rem;
   font-size: 0.78rem;
   background: var(--chip);
   cursor: pointer;
   white-space: nowrap;
   color: var(--fg);
}

.top-pics-tabs button.on {
   background: var(--fg);
   color: var(--bg);
   border-color: var(--fg);
}

.top-pics-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 6px;
   min-height: 160px;
}

@media (min-width: 768px) {
   .top-pics-grid {
      grid-template-columns: repeat(4, 1fr);
   }
}

.top-pic-card {
   position: relative;
   border-radius: 10px;
   overflow: hidden;
   background: #f3f3f3;
   display: block;
}

.top-pic-card img {
   width: 100%;
   aspect-ratio: 3 / 2;
   object-fit: cover;
   object-position: 50% 10%;
   display: block;
}

.top-pic-meta {
   position: absolute;
   left: 6px;
   bottom: 6px;
   padding: 2px 6px;
   border-radius: 999px;
   background: rgba(0, 0, 0, 0.65);
   color: #fff;
   font-size: 0.7rem;
}

.top-pic-meta span {
   opacity: 0.8;
}

/* ---------- Skeleton loader ---------- */

.skeleton {
   border: 1px solid var(--bd);
   border-radius: 16px;
   height: 328px;
   background: linear-gradient(90deg,
         var(--sk1),
         var(--sk2),
         var(--sk3));
   background-size: 200% 100%;
   animation: sh 1.2s infinite;
}

@keyframes sh {
   0% {
      background-position: 200% 0;
   }

   100% {
      background-position: -200% 0;
   }
}

/* ---------- Footer note ---------- */

.footer-note {
   color: var(--muted);
   text-align: center;
   padding: 24px 0;
   font-size: 0.85rem;
}

/* ---------- Utilidades ---------- */

.text-muted {
   color: var(--muted);
}

.chip {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 0.15rem 0.6rem;
   border-radius: 999px;
   border: 1px solid var(--bd);
   background: var(--chip);
   font-size: 0.8rem;
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 0.4rem 0.9rem;
   border-radius: 999px;
   border: 1px solid var(--accent);
   background: var(--accent);
   color: #fff;
   font-size: 0.9rem;
   cursor: pointer;
}

.btn.outline {
   background: transparent;
   color: var(--accent);
}

.btn:hover {
   filter: brightness(0.95);
}

/* Buscador principal */

.search-bar {
   margin: 12px 0 18px;
   display: flex;
   align-items: center;
   gap: 8px;
}
@media (min-width:768px) {
   .search-bar {
      width:50%;
      margin:0 auto 1rem auto;
   }
}

.search-bar input[type="search"] {
   flex: 1;
   border-radius: 999px;
   border: 1px solid var(--bd);
   padding: 0.45rem 0.9rem;
   font-size: 0.9rem;
   background: var(--chip);
   color: var(--fg);
}

.search-bar input::placeholder {
   color: var(--muted);
}

.search-bar button {
   border-radius: 999px;
   border: 1px solid var(--accent);
   background: var(--accent);
   color: #fff;
   padding: 0.4rem 0.9rem;
   font-size: 0.9rem;
   cursor: pointer;
   white-space: nowrap;
}

.search-bar button:hover {
   filter: brightness(0.95);
}

/* Móvil muy chico: botón opcional (Enter basta) */
@media (max-width: 480px) {
   .search-bar {
      gap: 6px;
   }
}

/* Accesibilidad: clase de texto solo para lectores de pantalla */
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
}

.visually-hidden {
   position: absolute !important;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   border: 0;
   clip: rect(0 0 0 0);
   overflow: hidden;
   white-space: nowrap;
}