/* Modern App-like Theming inspired by React components */
:root{
  /* Modern dark palette similar to React app */
  --bg: #111827; /* gray-900 */
  --bg-soft: #1f2937; /* gray-800 */
  --bg-card: #374151; /* gray-700 */
  --text: #f9fafb; /* gray-50 */
  --text-muted: #9ca3af; /* gray-400 */
  --border: #374151; /* gray-700 */
  --primary: #8b5cf6; /* violet-500 */
  --accent: #ec4899; /* pink-500 */
  --accent-hover: #f472b6; /* pink-400 */

  /* Modern shadows and effects */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Modern border radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Z-Indexes */
  --z-dropdown: 10;
  --z-modal: 50;
  --z-overlay: 40;
  --z-header: 30;
  --z-toast: 60;
  --z-menu: 50;
}

/* Modern light theme support */
.theme-light{
  --bg: #ffffff;
  --bg-soft: #f9fafb;
  --bg-card: #f3f4f6;
  --text: #111827;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --primary: #7c3aed;
  --accent: #be185d;
  --accent-hover: #f472b6;
}

/* Contenedor */
.ig-container{max-width:1200px;margin:0 auto;padding:16px}
body{background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}

/* Modern Grid inspired by React ImageCard */
.ig-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 24px 0;
}

@media (max-width: 768px) {
  .ig-grid{
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .ig-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Modern Card Design */
.ig-card{
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.ig-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.ig-card__link{
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.ig-card__img,
.ig-card__placeholder{
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ig-card__img{
  background: var(--bg-card);
}

.ig-card__img.loading{
  opacity: 0;
  transform: scale(0.95);
}

.ig-card__img.loaded{
  opacity: 1;
  transform: scale(1);
}

.ig-card__link:hover .ig-card__img{
  transform: scale(1.05);
}

/* Modern overlay effect on hover */
.ig-card__link::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ig-card__link:hover::after{
  opacity: 1;
}

/* Marca Instagram sutil */
.ig-igmark{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;text-decoration:none;backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0,0,0,.2);opacity:.85;transition:transform .2s ease, opacity .2s ease}
.ig-igmark:hover{opacity:1;transform:scale(1.05)}
.ig-igmark--card{z-index:2}
.ig-igmark--modal{z-index:10001;right:14px;top:14px;bottom:auto}
.ig-modal__close{position:absolute;z-index:10002}

/* Asegurar posición relativa en contenedores */
.ig-card{position:relative}
.ig-modal{position:relative}

/* Modern Header inspired by React component */
.ig-site-header{
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}

.ig-header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.ig-site-title{
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #f97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
}

.ig-site-title a{
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ig-site-title::before{
  content: '';
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  border-radius: 8px;
  display: block;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.ig-site-description{
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.ig-header-actions{
  display: flex;
  align-items: center;
  gap: 12px;
}

.ig-theme-toggle{
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
}

.ig-theme-toggle:hover{
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
/* ===== MOBILE MENU TOGGLE ===== */
.ig-mobile-menu-toggle {
  background: transparent;
  border: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hamburger-line {
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: all 0.3s ease;
  position: relative;
  display: block;
}

.hamburger-line:before,
.hamburger-line:after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: all 0.3s ease;
}

.hamburger-line:before {
  top: -6px;
}

.hamburger-line:after {
  top: 6px;
}

.ig-mobile-menu-toggle:hover .hamburger-line,
.ig-mobile-menu-toggle:hover .hamburger-line:before,
.ig-mobile-menu-toggle:hover .hamburger-line:after {
  background: var(--accent);
}

.ig-mobile-menu-toggle[aria-expanded="true"] .hamburger-line {
  background: transparent;
}

.ig-mobile-menu-toggle[aria-expanded="true"] .hamburger-line:before {
  transform: rotate(45deg) translate(5px, 5px);
}

.ig-mobile-menu-toggle[aria-expanded="true"] .hamburger-line:after {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Drawer full-screen */
.ig-nav-drawer{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.5);transition:opacity 0.3s ease, backdrop-filter 0.3s ease}
.ig-nav-drawer[hidden]{display:none}
.ig-nav-drawer[aria-hidden="true"]{display:none}
.ig-nav-drawer--opening{opacity:0;backdrop-filter:blur(0px)}
.ig-nav-drawer--open{opacity:1;backdrop-filter:blur(8px)}
.ig-nav-drawer--closing{opacity:0;backdrop-filter:blur(0px)}
.ig-nav-drawer__backdrop{position:absolute;inset:0}
.ig-nav-drawer__inner{position:absolute;inset:0;background:var(--bg-soft);color:var(--text);display:flex;flex-direction:column;padding:10px;transition:transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease}
.ig-nav-drawer__inner--opening{transform:translateX(100%);opacity:0}
.ig-nav-drawer__inner--open{transform:translateX(0);opacity:1}
.ig-nav-drawer__inner--closing{transform:translateX(100%);opacity:0}
.ig-nav-drawer__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ig-nav-close{background:transparent;border:0;color:#e5e7eb;font-size:28px;cursor:pointer}
.ig-nav-search{display:flex;gap:6px;margin:6px 0}
.ig-nav-search input[type="search"]{flex:1;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);padding:9px 10px;font-size:16px}
/* Evitar zoom en iOS al enfocar */
@supports (-webkit-touch-callout: none) {
  .ig-nav-search input[type="search"]{font-size:16px}
}

/* ===== MOBILE MENU OVERLAY ===== */
.ig-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.ig-mobile-menu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.ig-mobile-menu__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
}

.ig-mobile-menu__content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
  z-index: 10051;
}

.ig-mobile-menu[aria-hidden="false"] .ig-mobile-menu__content {
  transform: translateX(0);
}

/* ===== MOBILE MENU HEADER ===== */
.ig-mobile-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.ig-mobile-menu__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.ig-mobile-menu__close {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.ig-mobile-menu__close:hover {
  background: var(--border);
  color: var(--accent);
}

/* ===== MOBILE MENU BODY ===== */
.ig-mobile-menu__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ===== MOBILE SEARCH ===== */
.ig-mobile-search {
  margin-bottom: 0;
  position: relative;
}

.ig-search-field {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  transition: all 0.2s ease;
  background: var(--bg-soft); /* Added background */
}

.ig-search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.ig-search-field input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  color: var(--text);
  font-size: 16px; /* Evita zoom en iOS */
  padding: 0;
}

.ig-search-field input::placeholder {
  color: var(--text-muted);
}

.ig-search-field button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-search-field button:hover {
  color: var(--accent);
  background: var(--border);
}

.ig-search-results {
  margin-top: 12px;
  max-height: 250px;
  overflow-y: auto;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  position: absolute;
  width: 100%;
  top: 100%;
  z-index: 10;
}

.ig-search-results:empty {
  display: none;
}

.ig-search-results__list {
  list-style: none;
  margin: 0;
  padding: 4px;
}
.ig-search-results__item a {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.ig-search-results__item a:hover {
  background: var(--border);
  color: var(--primary);
}

.ig-search-results__empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
}

.ig-search-results .ig-loader {
  display: block;
  margin: 20px auto;
}

/* ===== MOBILE NAVIGATION ===== */
.ig-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ig-mobile-nav__list li {
  margin-bottom: 8px;
}

.ig-mobile-nav__link {
  display: block;
  padding: 16px 20px;
  color: var(--text);
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 1.1rem;
  border: 1px solid transparent;
}

.ig-mobile-nav__link:hover {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--border);
  transform: translateX(4px);
}

/* ===== MOBILE CATEGORIES ===== */
.ig-mobile-categories__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.ig-mobile-categories__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.ig-mobile-categories__link {
  display: block;
  padding: 12px 16px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  border-radius: 20px;
  font-size: 0.9rem;
  text-align: center;
  transition: all 0.2s ease;
  border: 1px solid var(--border);
}

.ig-mobile-categories__link:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

/* ===== REACTBITS EFFECTS ===== */
.ig-loader {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 50%;
  border-top-color: var(--accent);
  animation: spin 1s ease-in-out infinite;
}

.ig-loader--pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

.ig-loader--bounce {
  animation: bounce 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
  40%, 43% { transform: translate3d(0,-8px,0); }
  70% { transform: translate3d(0,-4px,0); }
  90% { transform: translate3d(0,-2px,0); }
}

.ig-animated-content {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ig-animated-content--visible {
  opacity: 1;
  transform: translateY(0);
}

.ig-button--animated {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ig-button--animated::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ig-button--animated:active::before {
  width: 300px;
  height: 300px;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ===== MOBILE MODAL FIXES ===== */
@media (max-width: 768px) {
  .ig-modal {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10000 !important;
  }
  
  .ig-modal__inner {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
  }
  
  .ig-modal__media {
    height: 50vh !important;
    height: 50dvh !important;
    max-height: 50vh !important;
    max-height: 50dvh !important;
  }
  
  .ig-modal__img {
    height: 100% !important;
    object-fit: cover !important;
  }
  
  .ig-modal__side {
    height: 50vh !important;
    height: 50dvh !important;
    max-height: 50vh !important;
    max-height: 50dvh !important;
    overflow-y: auto !important;
  }
}

/* ===== RESPONSIVE ===== */
@media (min-width: 768px) {
  .ig-mobile-menu__content {
    max-width: 450px;
  }
  
  .ig-mobile-menu__body {
    padding: 24px;
  }
}

@media (max-width: 480px) {
  .ig-mobile-menu__content {
    max-width: 100%;
  }
  
  .ig-mobile-categories__list {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}
.ig-nav-sections{flex:1 1 auto;overflow:auto}
.ig-search-results{list-style:none;margin:8px 0;padding:0}
.ig-search-results li{border:1px solid var(--border);border-radius:10px;margin-bottom:6px}
.ig-search-results a{display:block;padding:8px 10px;color:var(--text)}

/* Single contenedor */
.ig-single{padding:24px 16px;min-height:100vh;background:var(--bg);display:flex;justify-content:center}
.ig-page__title{margin:0 0 12px;font-size:1.5rem}
.ig-page__content{line-height:1.7}
.ig-page__comments{margin-top:24px}

/* Overlay y modal */
#ig-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity 0.3s ease, backdrop-filter 0.3s ease}
#ig-overlay--opening{opacity:0;backdrop-filter:blur(0px)}
#ig-overlay--open{opacity:1;backdrop-filter:blur(8px)}
#ig-overlay--closing{opacity:0;backdrop-filter:blur(0px)}
.ig-loading #ig-overlay:before{content:"";position:absolute;width:40px;height:40px;border-radius:50%;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ig-no-scroll{overflow:hidden}
.ig-modal{position:relative;background:var(--bg);color:var(--text);max-width:1100px;width:96vw;max-height:96vh;max-height:96dvh;display:flex;flex-direction:row;gap:0;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:opacity 0.3s ease, transform 0.3s ease}
.ig-modal--opening{opacity:0;transform:scale(0.9)}
.ig-modal--open{opacity:1;transform:scale(1)}
.ig-modal--closing{opacity:0;transform:scale(0.9)}
.ig-modal--page{width:100%;max-width:1100px;height:auto;max-height:none;position:static;background:var(--bg);color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.25);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.ig-modal--page .ig-modal__inner{min-height:100vh}
.ig-modal--page .ig-modal__media{min-height:50vh}
.ig-modal--page .ig-modal__img{max-height:70vh}
.ig-modal__inner{display:flex;flex:1;min-height:0}
.ig-modal__media{flex:1 1 62%;background:var(--bg);margin:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ig-btn--fav{background:#ef4444}
.ig-modal__img{width:100%;height:auto;max-height:96vh;object-fit:contain}
.ig-modal__media{aspect-ratio:1/1}
.ig-modal__img{height:100%;width:100%;object-fit:contain}
.ig-like-burst{position:absolute;top:50%;left:50%;width:80px;height:80px;transform:translate(-50%,-50%) scale(0);pointer-events:none;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') center/contain no-repeat;opacity:0}
.ig-like-burst.show{animation:like-burst .4s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
@keyframes like-burst{0%{transform:translate(-50%,-50%) scale(0);opacity:0}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.9}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.ig-modal--page .ig-modal__media{aspect-ratio:auto}
.ig-modal--page .ig-modal__img{height:auto;max-height:70vh;object-fit:contain}
.ig-modal__side{flex:1 1 38%;background:var(--bg-soft);padding:16px;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding-bottom:calc(env(safe-area-inset-bottom) + 16px)}
.ig-modal__header{display:flex;align-items:baseline;gap:12px;justify-content:space-between;flex:0 0 auto}
.ig-modal__title{font-size:1rem;margin:0}
.ig-modal__date{font-size:.875rem;color:var(--muted)}
.ig-modal__content{margin-top:12px;flex:0 0 auto}
.ig-modal__prompt{white-space:pre-wrap;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:12px;max-height:28vh;overflow:auto;-webkit-overflow-scrolling:touch}
.ig-modal__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px;flex:0 0 auto}
/* Modern Button Design inspired by React components */
.ig-btn{
  appearance: none;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 12px 20px;
  background: var(--accent);
  color: white;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.ig-btn:hover{
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.ig-btn:active{
  transform: translateY(0);
  box-shadow: var(--shadow-md);
}

.ig-btn:disabled{
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.ig-btn--loading{
  pointer-events: none;
  opacity: 0.7;
}

.ig-btn--loading::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: button-spin 1s linear infinite;
}

@keyframes button-spin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

/* Button variants */
.ig-btn--fav{
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.ig-btn--fav:hover{
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}

.ig-btn--tutorial{
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.ig-btn--customize{
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.ig-btn--copy{
  background: var(--primary);
}

.ig-btn--copy:hover{
  background: #a855f7;
}
.ig-copy__feedback{font-size:.875rem;color:var(--accent)}
.ig-charcount{margin-left:auto;font-size:.75rem;color:#9ca3af}
.ig-modal__comments{margin-top:auto;padding-top:16px;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--border)}
.ig-comments-area{display:flex;flex-direction:column;height:100%}
.comment-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex-grow:1}
#commentform{margin-top:auto;padding-top:16px;border-top:1px solid var(--border)}
.comments-title, .comment-reply-title{font-size:1.1rem;margin:0 0 10px}
.ig-accordion{background:#0b1220;border:1px solid #1f2937;border-radius:8px}
.ig-accordion__summary{cursor:pointer;display:block;padding:12px 14px;list-style:none}
.ig-accordion__summary::-webkit-details-marker{display:none}
.ig-accordion__panel{padding:8px 14px;border-top:1px solid #1f2937}
/* Inputs de comentarios */
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{width:100%;max-width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:12px 14px;font-size:16px}
.comment-form textarea{min-height:120px}
.comment-form input[type="submit"], .form-submit input[type="submit"]{background:#22c55e;color:#0b1220;border:0;border-radius:12px;padding:12px 16px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.comment-form input[type="submit"]:hover{filter:brightness(1.05)}
.comment-form label{display:block;margin:10px 0 6px;color:var(--muted)}

/* Navegación */
.ig-modal__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);border:0;color:#fff;width:44px;height:44px;border-radius:999px;cursor:pointer}
.ig-modal__nav--prev{left:8px}
.ig-modal__nav--next{right:8px}

/* Cerrar */
.ig-modal__close{position:absolute;top:calc(env(safe-area-inset-top) + 8px);right:calc(env(safe-area-inset-right) + 8px);background:rgba(0,0,0,.6);border:0;color:#fff;width:40px;height:40px;border-radius:999px;cursor:pointer;font-size:24px;line-height:1;z-index:5}

/* Mobile full-screen stacked */
@media (max-width:900px){
  .ig-site-header{position:sticky;top:0;z-index:100;backdrop-filter:blur(6px);background:rgba(10,10,10,.6);padding:8px 0}
  .ig-site-title{font-size:1.05rem}
  .ig-nav-toggle{width:36px;height:36px}
  .ig-header-actions{gap:6px}
  .ig-modal{flex-direction:column;width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .ig-modal__inner{flex-direction:column}
  .ig-modal__media{flex:0 0 auto}
  .ig-modal__img{max-height:55vh}
  .ig-modal__side{flex:1 1 auto; padding: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch;}
  .ig-modal__prompt{max-height: 25vh; padding: 10px; font-size: 0.85rem;}
  .ig-modal__actions{gap: 8px; margin-top: 8px;}
  .ig-modal .ig-btn{padding: 8px 12px; font-size: 0.9rem; border-radius: 10px;}
  .ig-modal__title{font-size: 0.95rem;}
  .ig-modal__comments-title{font-size: 1rem;}
  .ig-modal__close{top:calc(env(safe-area-inset-top) + 10px);right:calc(env(safe-area-inset-right) + 10px)}
  .ig-modal--page{width:100vw;height:auto;min-height:100vh}
  .ig-modal--page .ig-modal__inner{min-height:100vh}
  .ig-modal--page .ig-modal__media{min-height:40vh}
  .ig-modal--page .ig-modal__img{max-height:50vh}
}

/* Focus visible */
:where(a,button,[role="button"],input,textarea,select):focus-visible{outline:2px solid #f59e0b;outline-offset:2px}

/* Reduced motion */
@media (prefers-reduced-motion:no-preference){
  #ig-overlay{animation:fadeIn .15s ease-out}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Comentarios HTML5 básicos */
.comment-list{list-style:none;margin:0;padding:0}
.comment-list li{padding:12px 0;border-bottom:1px solid #1f2937}
.comment-meta a{color:#9ca3af}

/* Utilidades */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Enlaces principales del menú */
.ig-nav-links{list-style:none;margin:0 0 12px;padding:0}
.ig-nav-link{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:10px;text-decoration:none;transition:background-color .2s, transform .35s cubic-bezier(0.22, 1, 0.36, 1), opacity .35s ease;opacity:0;transform:translateY(8px)}
.ig-nav-link--in{opacity:1;transform:translateY(0)}
.ig-nav-link:hover{background:var(--bg-soft);box-shadow:0 8px 24px rgba(0,0,0,.15)}

/* Ripple */
.ig-ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ig-ripple .6s ease-out;pointer-events:none;background:rgba(255,255,255,.35)}
@keyframes ig-ripple{to{transform:scale(4);opacity:0}}

/* Categorías genéricas (reutilizadas en drawer) */
.ig-cat-list{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ig-cat-list a{display:block;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px;border-radius:10px;text-decoration:none}

/* Header de favoritos */
.ig-saved-header{margin-bottom:16px;text-align:center}
.ig-saved-header h2{margin:0;color:var(--text)}

/* ===== SKELETON LOADERS ===== */
.ig-skeleton {
    background: linear-gradient(90deg, var(--skeleton-bg) 25%, var(--skeleton-shine) 50%, var(--skeleton-bg) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
}

.ig-skeleton--card {
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
}

.ig-skeleton--text {
    height: 1em;
    margin: 0.5em 0;
}

.ig-skeleton--text:first-child {
    height: 1.5em;
    width: 80%;
}

.ig-skeleton--text:last-child {
    width: 60%;
}

.ig-skeleton--button {
    height: 2.5em;
    width: 6em;
    border-radius: 20px;
}

.ig-skeleton--avatar {
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
}

@keyframes skeleton-loading {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Skeleton specific to modal */
.ig-modal--skeleton .ig-modal__side {
  padding: 16px; /* Match real padding */
}
.ig-modal--skeleton .ig-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ig-modal--skeleton .ig-modal__content {
  margin-top: 12px;
}
.ig-modal--skeleton .ig-modal__actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.ig-modal--skeleton .ig-modal__comments {
  margin-top: 16px;
}
.ig-modal--skeleton .ig-skeleton--text {
  margin-bottom: 0.5em;
}
.ig-modal--skeleton .ig-skeleton--button {
  height: 38px; /* Match .ig-btn padding */
  border-radius: 12px; /* Match .ig-btn */
}

/* ===== ANIMACIONES DE ENTRADA ===== */
.ig-fade-in {
    animation: fadeIn 0.5s ease-out;
}

.ig-slide-up {
    animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ig-scale-in {
    animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from { 
        opacity: 0;
        transform: scale(0.9);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

.ig-modal-enter {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}
.ig-modal-enter-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ig-modal-exit {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ig-modal-exit-active {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Toast Notification */
.ig-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  background-color: var(--accent);
  color: var(--bg);
  padding: 12px 24px;
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  font-weight: 500;
  z-index: 10010;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ig-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* V2 App-like Header */
.ig-site-header{
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--border);
}

/* V2 Modal Enhancements */
#ig-overlay{ z-index: var(--z-modal); }

.ig-modal{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Modern Modal Layout inspired by React design */
.ig-modal{
  max-width: 1200px;
  margin: 0 auto;
  background: var(--bg);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ig-modal__inner{
  display: grid;
  grid-template-columns: 70% 30%;
  min-height: 80vh;
}

@media (max-width: 1024px) {
  .ig-modal__inner{
    grid-template-columns: 65% 35%;
  }
}

@media (max-width: 768px) {
  .ig-modal{
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
  }
  .ig-modal__inner{
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .ig-modal__media{
    height: 60vh;
    height: 60dvh;
  }
  .ig-modal__side{
    height: 40vh;
    height: 40dvh;
    overflow-y: auto;
  }
}

.ig-modal__media{
  position: relative;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-modal__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 80vh;
}

@media (max-width: 768px) {
  .ig-modal__img{
    max-height: 60vh;
    max-height: 60dvh;
  }
}

/* Portrait mode adjustments */
.ig-modal--portrait .ig-modal__inner{
  grid-template-columns: 60% 40%;
}

@media (max-width: 768px) {
  .ig-modal--portrait .ig-modal__media{
    height: 70vh;
    height: 70dvh;
  }
  .ig-modal--portrait .ig-modal__side{
    height: 30vh;
    height: 30dvh;
  }
}

.ig-modal__side{
  background: var(--bg-soft);
}

.ig-modal__prompt{
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9rem;
}

/* V2 Comment Form Enhancements */
/* Modern Comment Form inspired by React design */
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  font-size: 1rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  padding: 12px 16px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.comment-form textarea{
  min-height: 100px;
  resize: vertical;
}

.comment-form .logged-in-as {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.comment-form .logged-in-as a {
  color: var(--primary);
  text-decoration: none;
}

.comment-form .logged-in-as a:hover {
  color: var(--accent);
}

.comment-form .form-submit input[type="submit"] {
  width: 100%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px 24px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.comment-form .form-submit input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.comment-form .form-submit input[type="submit"]:active {
  transform: translateY(0);
}

/* V2 Toast Z-index fix */
.ig-toast {
  z-index: var(--z-toast);
  color: #fff;
  background-color: color-mix(in srgb, var(--text) 85%, transparent);
  backdrop-filter: blur(5px);
}
.theme-light .ig-toast{
  color: var(--bg);
  background-color: color-mix(in srgb, var(--text) 85%, transparent);
}

/* ===== PREFERS REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .ig-skeleton,
    .ig-card__img, .ig-modal, #ig-overlay, .ig-nav-drawer__inner,
    .ig-fade-in, .ig-slide-up, .ig-scale-in,
    .ig-btn--loading::after, .ig-loading #ig-overlay:before {
        animation: none !important;
        transition: none !important;
    }
}