/* ====== DESKTOP / DEFAULT ====== */
.my-domain-view{
  height: calc(100vh - 60px);
  width: 100%;
  display: grid;
  grid-template-columns: 320px 1fr;
  background: #0f172a;
}

.my-domain-left{
  border-right: 1px solid rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.my-domain-right{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-back{
  display: none; /* solo mobile */
    color: #fff;  
}

/* ====== MOBILE: carrusel ====== */
@media (max-width: 767px){
  .my-domain-view{
    display: flex;            /* dejamos flex para slider */
    flex-wrap: nowrap;
    overflow: hidden;
    /* ancho de todo el viewport */
  }

  .my-domain-left,
  .my-domain-right{
    min-width: 100vw;         /* cada panel ocupa toda la pantalla */
    max-width: 100vw;
    height: calc(100vh - 110px); /* navbar + footer aprox */
    overflow-y: auto;
  }

  /* estado: ver izquierda */
  .my-domain-view[data-view="left"]{
    transform: translateX(0);
    transition: transform .25s ease-out;
  }

  /* estado: ver derecha */
  .my-domain-view[data-view="right"]{
    transform: translateX(-100vw);
    transition: transform .25s ease-out;
  }

  /* mostrar botón de volver dentro del panel derecho */
  .mobile-back{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(15,23,42,.35);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 999px;
    font-size: .75rem;
    cursor: pointer;
      color: #fff;  
  }

  /* el botón "← Volver" de escritorio no se ve en mobile */
  .desktop-only{
    display: none !important;
  }

  /* footer se queda arriba del contenido */
  .amb-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}


/* === MODO COMPACTO para el buscador incluido dentro de My Domain === */
.my-domain-left .panel-header{
  /* anulamos lo que traía el include */
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  min-height: 0;
}

.my-domain-left .search-tabs{
  display: inline-flex;
  gap: 6px;
  margin-top: 4px;
}

.my-domain-left .search-tabs .tab{
  background: rgba(15,23,42,.25);
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 999px;
  padding: 3px 12px 4px;
  font-size: .68rem;
  line-height: 1;
  color: #e2e8f0;
  cursor: pointer;
}

.my-domain-left .search-tabs .tab.active{
  background: #0f172a;
  border-color: #38bdf8;
  color: #fff;
}

/* escondemos cualquier label o contenedor raro que traiga el include */
.my-domain-left .panel-header > h4,
.my-domain-left .panel-header > label{
  display: none !important;
}


/* ===== PULIDO MY DOMAIN ===== */

/* que el panel izquierdo no tenga ese borde blanco del accordion */
.my-domain-left .amb-accordion,
.my-domain-left .amb-item {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* cada item separado con una línea muy sutil */
.my-domain-left .amb-item {
  border-bottom: 1px solid rgba(148,163,184,.03);
  margin-bottom: 2px;
}

/* el summary con la misma altura que el de tu panel central */
.my-domain-left .amb-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(148,163,184,.03);
  border-radius: 10px;
  background: rgba(15,23,42,.15);
  cursor: pointer;
}

/* cuando está abierto */
.my-domain-left details[open] > .amb-summary {
  border-color: rgba(56,189,248,.4);
  background: rgba(15,23,42,.25);
}

/* badge de estado más chico */
.my-domain-left .amb-badge {
  margin-left: auto;
  font-size: .62rem;
  padding: 2px 9px 3px;
  border-radius: 999px;
  background: rgba(15,118,110,.12);
  border: 1px solid rgba(15,118,110,.25);
}

/* el bloque "Categorías donde yo publico" más pegado */
.my-domain-left .md-head + .md-filters {
  margin-top: 2px;
}

/* tabs de User / Domain bien chicos */
.my-domain-left .search-tabs .tab {
  background: rgba(15,23,42,.15);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .67rem;
  padding: 3px 12px 4px;
}
.my-domain-left .search-tabs .tab.active {
  background: #0f172a;
  border-color: rgba(56,189,248,.7);
  color: #fff;
}

/* el buscador que está abajo quede enrasado con el acordeón */
.my-domain-left .md-search {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* que la lista no tenga padding lateral tan grande */
.my-domain-left .md-list {
  padding-left: 6px;
  padding-right: 6px;
}



/* ===== HEADERS ALINEADOS MY DOMAIN ===== */

/* contenedor de los 2 paneles */
.my-domain-view {
  /* ya lo tenés, pero lo recuerdo: */
  /* display: grid; grid-template-columns: 320px 1fr; */
}

/* PANEL IZQUIERDO */
.my-domain-left {
  padding: 0;                 /* quitamos padding global */
}

/* título "Mis ámbitos" */
.my-domain-left .md-head {
  padding: 10px 14px 2px;     /* top, lados, bottom chico */
  border-bottom: 1px solid rgba(255,255,255,.02);
}

/* "Categorías donde yo publico" */
.my-domain-left .md-head + p,
.my-domain-left .md-head + .md-filters {
  margin-top: 0;
}

/* bloque tabs (User / Domain) */
.my-domain-left .md-filters {
  padding: 4px 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,.015);
}

/* lista de ámbitos: que arranque al mismo nivel que el derecho */
.my-domain-left .md-list {
  padding: 6px 10px 10px;
}

/* PANEL DERECHO */
.my-domain-right {
  padding: 0;
}

/* header derecho */
.my-domain-right .md-head.right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 2px;     /* mismo padding que el izq */
  border-bottom: 1px solid rgba(255,255,255,.02);
}

/* botón volver más chico y alineado */
.my-domain-right .md-head.right #btnBackToMain {
  margin: 0;
}

/* contenido derecho pegado al header */
.my-domain-right .md-content {
  padding: 8px 14px 10px;
}

/* línea divisoria más sutil */
.my-domain-view {
  column-gap: 0;
}
.my-domain-left {
  border-right: 1px solid rgba(255,255,255,.015);
}






/* Evitá que el contenedor tape el footer en desktop */
.my-domain-view{
  height: calc(100vh - 60px - 48px); /* 60 header + 48 footer */
}

/* Footer por arriba de todo */
.amb-footer{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: #0b1225; /* visible sobre #0f172a */
  border-top: 1px solid rgba(255,255,255,.06);
  min-height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px;
}

/* Dale aire abajo al contenido para que no lo tape el footer */
.my-domain-left,
.my-domain-right{
  padding-bottom: 56px; /* > alto footer */
}

/* OJO: este selector escondía contenido del include */
.my-domain-left .panel-header > h4,
.my-domain-left .panel-header > label{
  /* Si tu include trae .panel-header y necesitás ver algo, no lo tapes */
  /* quitalo o comenta esta regla si oculta el buscador */
  /* display: none !important; */
}

/* Mobile: ya tenías altura; ajustá al alto real del footer */
@media (max-width: 767px){
  .my-domain-left,
  .my-domain-right{
    height: calc(100vh - 110px); /* navbar + footer */
  }
}


/* ===== MyDomain (columna izquierda) ===== */
:root{
  --md-tabs-h: 36px;      /* alto de las tabs */
  --md-filters-h: 32px;   /* alto de la fila de filtros (aprox) */
  --md-sticky-gap: 8px;   /* respiración extra */
}
/* ===== Columna izquierda fija arriba, scroll sólo en la lista ===== */
.my-domain-left{
  display: flex;
  flex-direction: column;
  height: 100%;        /* o la altura disponible del panel */
  overflow: hidden;    /* clave: el scroll no es aquí */
}

/* todo lo de arriba NO scrollea */
.md-head,
.panel-header,
.md-filters,
.search-tabs{
  position: static;
  z-index: auto;
  flex: 0 0 auto;
  margin: 0 0 .6rem;
}

/* si querés un poquito de aire: */
.search-tabs{ margin-top: .25rem; }
.md-filters{ margin-bottom: .6rem; }

/* la lista es la ÚNICA que scrollea */
#mdList{
  flex: 1 1 auto;
  min-height: 0;       /* evita que empuje al contenedor */
  overflow: auto;      /* scroll acá */
  padding-top: .2rem;
}
#mdList .amb-item{ margin-bottom: .5rem; }


/* ========== Cascada (sin cambios) ========== */
.cascada { margin:.6rem 0 1rem }
.cascada .btn{ background:#1e40af;color:#fff;border:0;border-radius:10px;padding:8px 12px;cursor:pointer }
.cascada-box{ margin-top:.6rem;padding:.6rem;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#0b1225 }
.cascada .fila{ display:flex;gap:.6rem;align-items:center;margin:.45rem 0 }
.cascada label{ width:110px;color:#a8b3c9 }
.cascada select.dd{ flex:1;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#0f172a;color:#e6eefc;padding:0 .6rem }

/* ========== Grid de tarjetas (una sola definición) ========== */
.grid-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 360px));
  gap:16px;
  justify-content:start;
  align-content:start;
}
@media (max-width: 600px){
  .grid-cards{
    display:flex;
    overflow-x:auto;
    gap:12px;
    scroll-snap-type:x mandatory;
    padding-bottom: 8px;
  }
  .grid-cards .tarjeta,
  .grid-cards .md-card{
    flex:0 0 85%;
    max-width:420px;
    scroll-snap-align:start;
  }
}
@media (min-width: 601px){
  .grid-cards{ display:grid; }
}

/* ========== Alias de estilos: .tarjeta aplicado a .md-card ========== */
/* Base card */
.tarjeta,
.md-card{
  background:#111; color:#eee;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:.5rem;
}

/* Header / título */
.tarjeta h4,
.md-card .md-card-title{
  margin:.9rem 0 .4rem;
  color:#6ec8ff;
  text-decoration:underline;
  text-underline-offset:2px;
  font-size:1.05rem;
}

/* Meta / chips */
.tarjeta .muted,
.md-card .md-meta,
.md-card .md-chip{
  opacity:.8; font-size:.9rem;
}
.md-card .md-chip{
  background:#243b53; color:#cfe8ff;
  padding:.1rem .5rem; border-radius:10px;
  margin-left:.5rem; font-weight:600;
}

/* Imagen */
.tarjeta .imgbox,
.md-card .md-card-img{
  width:100%;
  aspect-ratio:16/9;
  background:#222;
  border-radius:12px;
  overflow:hidden;
  display:block;
  padding:0; /* por si heredaba padding */
}
.tarjeta .imgbox img,
.md-card .md-card-img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Excerpt / descripción */
.tarjeta .excerpt,
.md-card .md-card-desc{
  margin:.35rem 0 .75rem;
  line-height:1.35;
}

/* CTA y botón flotante (si usás wpp) */
.tarjeta .cta,
.md-card .btn{
  display:inline-flex;
  background:#ffd400; color:#111;
  font-weight:700; padding:.55rem 1rem;
  border-radius:10px; border:0; cursor:pointer;
  width:auto; align-self:flex-start;
}
.tarjeta .wpp{
  position:absolute; right:14px; bottom:14px;
  width:52px; height:52px; border-radius:50%;
  background:#22c35e; display:grid; place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.tarjeta .wpp svg{ width:26px; height:26px; fill:#fff }

/* Contenedor con scroll vertical del panel derecho */
#mdContent{
  flex:1 1 auto; overflow-y:auto;
  padding:12px; min-height:0;
}

/* Panel derecho como overlay en mobile (tu fix anterior) */
@media (max-width: 767px){
  #myDomainRight{
    position: fixed;
    inset: 0 0 0 0;
    transform: translateX(100%);
    transition: transform .25s ease;
    background:#0b1225; /* coherente con tema oscuro */
    z-index: 50;
    overflow: auto;
  }
  #myDomainRight[data-view="right"]{ transform: translateX(0); }
  .mobile-back{ display:inline-block;
    color: #fff;  
  }
}


/* ========== Cascada (sin cambios) ========== */
.cascada { margin:.6rem 0 1rem }
.cascada .btn{ background:#1e40af;color:#fff;border:0;border-radius:10px;padding:8px 12px;cursor:pointer }
.cascada-box{ margin-top:.6rem;padding:.6rem;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#0b1225 }
.cascada .fila{ display:flex;gap:.6rem;align-items:center;margin:.45rem 0 }
.cascada label{ width:110px;color:#a8b3c9 }
.cascada select.dd{ flex:1;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#0f172a;color:#e6eefc;padding:0 .6rem }

/* ========== Grid de tarjetas (una sola definición) ========== */
.grid-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 360px));
  gap:16px;
  justify-content:start;
  align-content:start;
}
@media (max-width: 600px){
  .grid-cards{
    display:flex;
    overflow-x:auto;
    gap:12px;
    scroll-snap-type:x mandatory;
    padding-bottom: 8px;
  }
  .grid-cards .tarjeta,
  .grid-cards .md-card{
    flex:0 0 85%;
    max-width:420px;
    scroll-snap-align:start;
  }
}
@media (min-width: 601px){
  .grid-cards{ display:grid; }
}

/* ========== Alias de estilos: .tarjeta aplicado a .md-card ========== */
/* Base card */
.tarjeta,
.md-card{
  background:#111; color:#eee;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:.5rem;
}

/* Header / título */
.tarjeta h4,
.md-card .md-card-title{
  margin:.9rem 0 .4rem;
  color:#6ec8ff;
  text-decoration:underline;
  text-underline-offset:2px;
  font-size:1.05rem;
}

/* Meta / chips */
.tarjeta .muted,
.md-card .md-meta,
.md-card .md-chip{
  opacity:.8; font-size:.9rem;
}
.md-card .md-chip{
  background:#243b53; color:#cfe8ff;
  padding:.1rem .5rem; border-radius:10px;
  margin-left:.5rem; font-weight:600;
}

/* Imagen */
.tarjeta .imgbox,
.md-card .md-card-img{
  width:100%;
  aspect-ratio:16/9;
  background:#222;
  border-radius:12px;
  overflow:hidden;
  display:block;
  padding:0; /* por si heredaba padding */
}
.tarjeta .imgbox img,
.md-card .md-card-img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Excerpt / descripción */
.tarjeta .excerpt,
.md-card .md-card-desc{
  margin:.35rem 0 .75rem;
  line-height:1.35;
}

/* CTA y botón flotante (si usás wpp) */
.tarjeta .cta,
.md-card .btn{
  display:inline-flex;
  background:#ffd400; color:#111;
  font-weight:700; padding:.55rem 1rem;
  border-radius:10px; border:0; cursor:pointer;
  width:auto; align-self:flex-start;
}
.tarjeta .wpp{
  position:absolute; right:14px; bottom:14px;
  width:52px; height:52px; border-radius:50%;
  background:#22c35e; display:grid; place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.tarjeta .wpp svg{ width:26px; height:26px; fill:#fff }

/* Contenedor con scroll vertical del panel derecho */
#mdContent{
  flex:1 1 auto; overflow-y:auto;
  padding:12px; min-height:0;
}

/* Panel derecho como overlay en mobile (tu fix anterior) */
@media (max-width: 767px){
  #myDomainRight{
    position: fixed;
    inset: 0 0 0 0;
    transform: translateX(100%);
    transition: transform .25s ease;
    background:#0b1225; /* coherente con tema oscuro */
    z-index: 50;
    overflow: auto;
  }
  #myDomainRight[data-view="right"]{ transform: translateX(0); }
  .mobile-back{ display:inline-block;
     color: #fff;            /* ← AQUÍ: texto blanco en mobile */
  }
}


/* ================== THEME TOKENS (colores) ================== */
:root{
  --bg-app:        #0b1225;            /* fondo general */
  --bg-panel:      #0f172a;            /* paneles izq/der */
  --bg-surface:    #0e162b;            /* tarjetas/surfaces */
  --bg-surface-2:  #0a1224;            /* overlays / img bg */
  --text:          #e6eefc;
  --text-muted:    #a8b3c9;
  --border:        rgba(148,163,184,.12);
  --border-soft:   rgba(148,163,184,.06);
  --chip-bg:       #12243a;
  --chip-text:     #cfe8ff;
  --accent:        #38bdf8;            /* cian */
  --accent-weak:   rgba(56,189,248,.25);
  --cta:           #ffd400;
  --cta-text:      #111;
}

/* ================== FONDOS / PANELES ================== */
.my-domain-view{ background: var(--bg-app); }
.my-domain-left,
.my-domain-right{ color: var(--text); background: var(--bg-panel); }

/* headers, separadores */
.my-domain-right .md-head.right,
.my-domain-left  .md-head{
  border-bottom: 1px solid var(--border-soft);
}

/* botón mobile “volver” */
@media (max-width:767px){
  .mobile-back{
    background: rgba(15,23,42,.35);
    border: 1px solid var(--border-soft);
    color:    #fff;  
  }
  #myDomainRight{
    background: var(--bg-panel);
  }
}

/* ================== TARJETAS (md-card / tarjeta) ================== */
.tarjeta,
.md-card{
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
}

/* título */
.tarjeta h4,
.md-card .md-card-title{
  color: var(--accent);
}

/* meta / chips */
.md-card .md-chip{
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--border-soft);
}
.md-card .md-meta,
.tarjeta .muted,
.md-card .md-card-desc{ color: var(--text-muted); }

/* imagen / media box */
.tarjeta .imgbox,
.md-card .md-card-img{
  background: var(--bg-surface-2);
}

/* CTA / botones en card */
.tarjeta .cta,
.md-card .btn{
  background: var(--cta);
  color: var(--cta-text);
}
.tarjeta .cta:hover,
.md-card .btn:hover{
  filter: brightness(0.95);
}

/* hover sutil de tarjeta */
.tarjeta:hover,
.md-card:hover{
  border-color: var(--accent-weak);
  box-shadow: 0 10px 28px rgba(0,0,0,.36), 0 0 0 1px var(--accent-weak) inset;
}

/* ================== LISTAS / ACORDEÓN (izquierda) ================== */
.my-domain-left .amb-item{ border-bottom: 1px solid var(--border-soft); }
.my-domain-left .amb-summary{
  background: rgba(15,23,42,.15);
  border: 1px solid var(--border-soft);
}
.my-domain-left details[open] > .amb-summary{
  border-color: var(--accent-weak);
  background: rgba(15,23,42,.25);
}
.my-domain-left .amb-badge{
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.25);
  color: #c7f9cf;
}

/* ================== GRID DE CARDS ================== */
.grid-cards{
  /* sin cambios de layout; solo color si hiciera falta */
}

/* ================== BUSCADOR / CONTROLES ================== */
.cascada select.dd{
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
}
.cascada-box{
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.cascada label{ color: var(--text-muted); }

/* ================== FOOTER ================== */
.amb-footer{
  background: var(--bg-app);
  border-top: 1px solid var(--border);
  color: var(--text);
}




/* ============================
   Categorías (pastillas) MyDomain
   ============================ */

/* Lista sin viñetas, alineada en fila */
body.theme-light .md-cat-list{
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Botón pastilla */
body.theme-light .md-cat{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  min-height: 26px;

  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;       /* gris suave */
  color: #111827;            /* texto oscuro legible */

  font-size: .80rem;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* Hover: un poquito de celeste */
body.theme-light .md-cat:hover{
  background: #e5f0ff;
  border-color: #bfdbfe;
  box-shadow: 0 0 0 1px rgba(191,219,254,.7);
}

/* Estado “seleccionada” si después le querés sumar una clase .is-active */
body.theme-light .md-cat.is-active{
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(37,99,235,.8);
}