/**
 * Picasso Tabs — CSS
 * Picasso Digital · picassodigital-seo.com
 *
 * ENCAPSULACIÓN: Todo bajo .picasso-tabs o .pt-* — sin CSS globales.
 */

/* ══════════════════════════════════════════════════════════════
   WRAPPER PRINCIPAL
   ══════════════════════════════════════════════════════════════ */
.picasso-tabs {
  --pt-tab-color: #555;
  --pt-tab-active-color: #0d73a9;
  --pt-tab-border: #e0e0e0;
  --pt-tab-bg-active: #f8f8f8;
  --pt-cta-color: #0d73a9;
  --pt-radius: 4px;

  font-family: inherit;
  box-sizing: border-box;
}

.picasso-tabs *,
.picasso-tabs *::before,
.picasso-tabs *::after {
  box-sizing: inherit;
}

/* ══════════════════════════════════════════════════════════════
   MODO VERTICAL — tabs a la izquierda, panel a la derecha
   ══════════════════════════════════════════════════════════════ */
.picasso-tabs--vertical {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

/* Lista de tabs (columna izquierda) */
.picasso-tabs--vertical .pt-tabs-nav {
  display: flex;
  flex-direction: column;
  min-width: 160px;
  max-width: 320px;
  border-right: 2px solid var(--pt-tab-border);
  flex-shrink: 0;
  background: #f3f3f3;
}

.picasso-tabs--vertical .pt-tab {
  text-align: left;
  padding: 14px 20px 14px 16px;
  border-left: 3px solid transparent;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--pt-tab-border);
}

.picasso-tabs--vertical .pt-tab.is-active {
  border-left-color: var(--pt-tab-active-color);
  background: var(--pt-tab-bg-active);
  color: var(--pt-tab-active-color);
  font-weight: 600;
}

/* Paneles (columna derecha) */
.picasso-tabs--vertical .pt-panels {
  flex: 1;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   MODO HORIZONTAL — tabs arriba, panel abajo
   ══════════════════════════════════════════════════════════════ */
.picasso-tabs--horizontal {
  display: block;
}

.picasso-tabs--horizontal .pt-tabs-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--pt-tab-border);
  gap: 0;
}

.picasso-tabs--horizontal .pt-tab {
  padding: 12px 22px;
  border-bottom: 3px solid transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  margin-bottom: -2px;
}

.picasso-tabs--horizontal .pt-tab.is-active {
  border-bottom-color: var(--pt-tab-active-color);
  color: var(--pt-tab-active-color);
  font-weight: 600;
  background: none;
}

/* ══════════════════════════════════════════════════════════════
   TABS — estilos comunes
   ══════════════════════════════════════════════════════════════ */
.picasso-tabs .pt-tabs-nav {
  list-style: none;
  margin: 0;
  padding: 20px 0;
}

.picasso-tabs .pt-tab {
  background: none;
  cursor: pointer;
  color: var(--pt-tab-color);
  font-size: 0.95rem;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  outline: none;
}

.picasso-tabs .pt-tab:hover {
  color: var(--pt-tab-active-color);
}

.picasso-tabs .pt-tab:focus-visible {
  outline: 2px solid var(--pt-tab-active-color);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   PANELES
   ══════════════════════════════════════════════════════════════ */
.picasso-tabs .pt-panel {
  display: none;
}

.picasso-tabs .pt-panel.is-active {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 20px 24px;
}

  /* 📝 Columna texto 📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝 */
  .picasso-tabs .pt-panel__text {
    flex: 0 0 30%;
    min-width: 0;
  }

.picasso-tabs .pt-panel__body {
  color: #444;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* ── Botón CTA ──────────────────────────────────────────────── */
.picasso-tabs .pt-panel__cta-wrap {
  margin-top: 20px;
}

.picasso-tabs .pt-panel__cta {
  display: inline-block;
  border: 1px solid var(--pt-cta-color);
  color: var(--pt-cta-color);
  padding: 10px 28px;
  text-decoration: none;
  border-radius: var(--pt-radius);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}

.picasso-tabs .pt-panel__cta:hover {
  background: var(--pt-cta-color);
  color: #fff;
}

  /* 🖼️ Columna galería 🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️🖼️ */
  .picasso-tabs .pt-panel__gallery {
    flex: 1;
    min-width: 0;
  }

/* El .pgt-slider dentro de la galería hereda sus estilos del módulo PGT */
.picasso-tabs .pt-panel__gallery .pgt-slider {
  border-radius: var(--pt-radius);
  overflow: hidden;
}



/* ══════════════════════════════════════════════════════════════
   MODO ACORDEÓN RESPONSIVO (MÓVILES Y TABLETS <= 900px)
   Reemplaza el diseño de pestañas por acordeones de forma nativa
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* En móviles forzamos el contenedor principal a bloque normal */
  .picasso-tabs { display: block; }
  
  /* Ocultamos la navegación de pestañas de escritorio (columna o fila superior) */
  .picasso-tabs.picasso-tabs--horizontal .pt-tabs-nav,
  .picasso-tabs.picasso-tabs--vertical .pt-tabs-nav { 
    display: none !important; 
  }
  
  /* Contenedor de paneles expandido */
  .picasso-tabs .pt-panels { display: block; }
  
  /* Cada panel funge como un bloque independiente del acordeón */
  .picasso-tabs .pt-panel { display: block; border-bottom: 1px solid var(--pt-tab-border); }
  
  /* Ocultamos el contenido del panel por defecto para que los headers del acordeón controlen la vista */
  .picasso-tabs .pt-panel .pt-panel__text,
  .picasso-tabs .pt-panel .pt-panel__gallery { display: none; padding: 0 16px 16px; }
  
  /* Panel activo revierte a su visibilidad normal (en bloque para ocupar el 100%) */
  .picasso-tabs .pt-panel.is-active { display: block; padding: 0; }
  .picasso-tabs .pt-panel.is-active .pt-panel__text,
  .picasso-tabs .pt-panel.is-active .pt-panel__gallery { display: block; }

  /* ── Header del acordeón (clicables inyectados por JS) ── */
  .picasso-tabs .pt-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--pt-tab-color);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
  }

  .picasso-tabs .pt-accordion-header:hover {
    color: var(--pt-tab-active-color);
    background: var(--pt-tab-bg-active);
  }

  /* Indicador de estado abierto/cerrado (+) */
  .picasso-tabs .pt-accordion-header::after {
    content: '+';
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--pt-tab-color);
    transition: transform 0.25s ease, color 0.2s ease;
    flex-shrink: 0;
  }

  /* Estado abierto (-) */
  .picasso-tabs .pt-accordion-header[aria-expanded="true"] {
    color: var(--pt-tab-active-color);
    border-left: 3px solid var(--pt-tab-active-color);
    padding-left: 13px;
    background: var(--pt-tab-bg-active);
  }

  .picasso-tabs .pt-accordion-header[aria-expanded="true"]::after {
    content: '−';
    color: var(--pt-tab-active-color);
  }

  /* ── Layout de contenido en acordeón ── */
  .picasso-tabs .pt-panel__text { width: 100%; }
  .picasso-tabs .pt-panel__gallery { width: 100%; margin-top: 16px; }
}

/* En escritorio (> 900px), los headers inyectados por JS para el acordeón se mantienen ocultos */
@media (min-width: 901px) {
  .picasso-tabs .pt-accordion-header {
    display: none;
  }
}

.pgt-slider.pgt-mode--multi {
    height: 450px !important;
}