/* ============================================================
   EL REMANSO — Portal de cliente · portal.css
   Componentes específicos del portal, construidos SOBRE
   remanso-base.css (que debe cargarse antes que este archivo).
   Enfoque mobile-first: los @media usan min-width para escalar
   hacia arriba. No se redefinen tokens ni componentes de marca;
   solo se añade lo que el portal necesita y overrides puntuales.
   ============================================================ */

/* ── VARIABLES LOCALES DEL PORTAL ─────────────────────────── */
:root {
  --nav-h: 80px;    /* alto efectivo de la navbar (logo 55px + padding) */
  --index-h: 52px;  /* alto de la barra de índice sticky */
  --footer-h: 60px; /* alto del zócalo fijo (una fila, desktop) */
}

/* Offset de anclas: al saltar a #sXX no queda tapado por
   la navbar fija + la barra de índice sticky. */
html {
  scroll-padding-top: calc(var(--nav-h) + var(--index-h) + 12px);
}

/* El zócalo suma una línea con el aviso "ver en laptop" en
   tablet/mobile (900px) y además se apila en columna en mobile
   chico (600px) — en ambos casos queda más alto. Los valores
   consideran el ícono del aviso a escala 3x (ver footer-mobile-note). */
@media (max-width: 900px) {
  :root { --footer-h: 140px; }
}
@media (max-width: 600px) {
  :root { --footer-h: 190px; }
}


/* ── ENCABEZADO DE SECCIÓN ────────────────────────────────── */
/* Bloque de intro reutilizable: label dorado + título + body. */
.sec-head {
  max-width: 780px;
  margin-bottom: var(--space-8);
}
.sec-head .label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.sec-head .body-text { margin-top: 1.2rem; }


/* ── ÍNDICE SCROLLSPY (signature de navegación del portal) ── */
/* Barra horizontal sticky bajo la navbar. Resalta la sección
   activa según el scroll y auto-centra el ítem activo. */
.doc-index {
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-subtle);
  height: var(--index-h);
}
.doc-index-track {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  height: 100%;
  padding: 0 var(--space-side);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.doc-index-track::-webkit-scrollbar { display: none; }
.doc-index a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.9rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.doc-index a .idx-num {
  font-size: var(--text-xxs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-widest);
  color: var(--color-gold);
  opacity: 0.55;
  transition: opacity 0.25s;
}
.doc-index a:hover { color: var(--color-gold); }
.doc-index a.active {
  color: var(--color-dark);
  border-bottom-color: var(--color-gold);
}
.doc-index a.active .idx-num { opacity: 1; }

/* Barra de progreso de lectura, en el borde superior del índice (pegada a la navbar) */
.read-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--color-gold);
  z-index: 91;
}


/* ── PLACEHOLDER DE MEDIOS (imagen / video / doc / esquema) ── */
/* Bloque provisional para reemplazar por <img>, <video> o
   enlace. La descripción indica qué contenido va en cada uno. */
.media-ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  background: var(--color-bg-warm);
  border: 1.5px dashed var(--color-gold-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  min-height: 200px;
}
.media-ph.ph-tall { min-height: 300px; }
.media-ph .ph-icon { font-size: 1.6rem; line-height: 1; opacity: 0.85; }
.media-ph .ph-kind {
  font-size: var(--text-xxs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}
.media-ph .ph-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  max-width: 420px;
  font-style: italic;
}
/* Variante sobre secciones oscuras */
.media-ph.on-dark-ph {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
}
.media-ph.on-dark-ph .ph-desc { color: rgba(255, 255, 255, 0.5); }


/* ── NAVBAR: MARCA EN TEXTO ───────────────────────────────── */
/* Reemplaza el logo-imagen del base por una marca tipográfica
   mientras no exista el asset. Sustituir por <img class="nav-logo-img">. */
.nav-brand { display: flex; flex-direction: column; line-height: 1.15; }
.nav-brand strong {
  font-size: 0.95rem;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: #fff;
  transition: color var(--duration-fast);
}
.nav-brand small {
  font-size: var(--text-xxs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}
nav.scrolled .nav-brand strong { color: var(--color-dark); }
/* Alto determinista para que el índice sticky calce bajo la nav */
nav { min-height: var(--nav-h); }


/* ── HERO: ajustes del portal ─────────────────────────────── */
.hero { padding: 0 var(--space-side); }          /* respeta el padding lateral */
.hero-content { padding-top: calc(var(--nav-h) + 1rem); padding-bottom: 2.5rem; }
.hero-scroll { background: none; border: none; }  /* es <button> */


/* ── TABLA DE DATOS (fichas, presupuesto, calendario) ─────── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .data-table { min-width: 560px; }  /* fuerza scroll en móvil */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.data-table th,
.data-table td {
  padding: 0.85rem 1.2rem 0.85rem 0;
  text-align: left;
  border-bottom: var(--border-thin);
  vertical-align: top;
  line-height: 1.55;
}
.data-table thead th {
  font-size: var(--text-xxs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
  border-bottom: var(--border-subtle);
}
.data-table td { color: var(--color-text-mid); }
.data-table td:first-child {
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.data-table tr.row-total td {
  font-weight: var(--weight-black);
  color: var(--text-primary);
  border-top: 2px solid var(--color-gold);
  border-bottom: none;
}


/* ── FICHA DE ESPECIE (lista clave-valor) ─────────────────── */
/* Mobile-first: apilado; en ≥700px pasa a dos columnas. */
.ficha { border-top: var(--border-subtle); }
.ficha-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 2rem;
  padding: 0.9rem 0;
  border-bottom: var(--border-thin);
}
.ficha-row dt {
  font-size: var(--text-xxs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
  padding-top: 0.15rem;
}
.ficha-row dd {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-text-mid);
}
@media (min-width: 700px) {
  .ficha-row { grid-template-columns: 180px 1fr; }
}


/* ── PANEL DE ESPECIE (dentro de tabs) ────────────────────── */
.species-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 900px) {
  .species-panel { grid-template-columns: 1.4fr 1fr; }
}
.species-title {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.species-title h3 {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-h3);
}
.species-title em {
  font-size: var(--text-sm);
  color: var(--color-gold);
  font-style: italic;
  font-weight: var(--weight-normal);
}

/* Animación de entrada al cambiar de tab */
.tab-panel.active { animation: portalFadeUp 0.4s var(--ease-signature); }
@keyframes portalFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Ocultar scrollbar de las tabs (mantiene el scroll horizontal) */
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }


/* ── ACCORDION: contenido de texto (override del base) ────── */
/* El base define .accordion-body-inner como grid 2col con imagen.
   En el portal los protocolos son listas de texto: usamos un
   contenedor propio de una sola columna. */
.accordion .acc-inner { padding-bottom: 2.5rem; }
.accordion-trigger { gap: 1rem; }
/* En móvil reducimos el padding vertical del trigger del base */
@media (max-width: 600px) {
  .accordion-trigger { padding: 1.5rem 0; }
  .accordion-trigger-left { gap: 1rem; }
  .accordion-title { font-size: var(--text-md); }
}


/* ── LISTAS CON VIÑETA DE MARCA ───────────────────────────── */
.check-list,
.dot-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.check-list li,
.dot-list li {
  display: flex;
  gap: 0.75rem;
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-text-mid);
}
.check-list li::before {
  content: '✓';
  color: var(--color-gold);
  font-weight: var(--weight-black);
  flex-shrink: 0;
}
.dot-list li::before {
  content: '—';
  color: var(--color-gold);
  font-weight: var(--weight-black);
  flex-shrink: 0;
}
.check-list li strong,
.dot-list li strong { color: var(--text-primary); }


/* ── TIMELINE (cronograma) ────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1.5px;
  background: var(--color-gold-soft);
}
.timeline-item { position: relative; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.6rem;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-gold);
  border: 2.5px solid var(--bg-primary);
  box-shadow: 0 0 0 1.5px var(--color-gold);
}
.timeline-item .tag { margin-bottom: 0.5rem; }
.timeline-item h4 { margin-bottom: 0.4rem; }
.timeline-item p { font-size: var(--text-sm); }


/* ── DIAGRAMA DE GANTT INTERACTIVO (sección 11 · Cronograma) ──
   Frappe Gantt (frappe.io/gantt) montado sobre #gantt-target,
   inicializado en portal.js con las fechas exactas de cada etapa.
   Colores de marca: dorado para el Año 1, vino para Años 2–3
   (asignados por tarea vía task.color, ver portal.js). Las
   variables --g-* re-temáticas retoman la paleta de El Remanso
   sobre el look & feel por defecto de la librería.

   El SVG interno de Frappe Gantt es más ancho que la pantalla (son
   36 meses a columna fija): sin este contenedor, en mobile se
   desbordaba hacia la derecha "comiéndose" el padding de la
   sección. .gantt-wrap fuerza el recorte al ancho disponible y deja
   que el propio .gantt-container (que ya trae overflow-x:auto)
   maneje el scroll horizontal puertas adentro. */
.gantt-wrap {
  max-width: 100%;
  overflow: hidden;
}
#gantt-target {
  max-width: 100%;
}
.gantt-wrap .gantt-container {
  max-width: 100%;
}
.gantt-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.2rem;
}
.gantt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.gantt-legend-hint {
  font-weight: var(--weight-normal);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  font-style: italic;
  opacity: 0.8;
}
.gantt-legend-hint i { font-size: 3rem; color: var(--color-gold); }
.gantt-swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.gantt-swatch-y1  { background: var(--color-gold); }
.gantt-swatch-y23 { background: var(--color-wine); }

.gantt-wrap .gantt-container {
  --g-bar-color: var(--color-gold);
  --g-bar-border: var(--color-gold);
  --g-arrow-color: var(--color-text-subtle);
  --g-tick-color-thick: var(--color-border-strong);
  --g-tick-color: var(--color-border);
  --g-actions-background: var(--color-bg-warm);
  --g-border-color: var(--color-border);
  --g-text-muted: var(--color-text-muted);
  --g-text-light: #fff;
  --g-text-dark: var(--color-dark);
  --g-progress-color: var(--color-gold-soft);
  --g-handle-color: var(--color-dark);
  --g-weekend-label-color: var(--color-gold-light);
  --g-header-background: var(--color-bg);
  --g-row-color: var(--color-bg-warm);
  --g-row-border-color: var(--color-border);
  --g-today-highlight: var(--color-gold);
  --g-popup-actions: var(--color-gold-light);
  --g-weekend-highlight-color: var(--color-bg-warm);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
}
.gantt-wrap .bar-label { font-family: var(--font-sans); font-weight: var(--weight-bold); fill: var(--color-dark); }
/* Texto sobre la barra (entra dentro, no ".big"): blanco y en negrita,
   sin importar el color de la barra (dorado o vino). El label ".big"
   —cuando el texto no entra y se dibuja afuera, sobre el fondo claro
   del gráfico— se mantiene oscuro para seguir siendo legible ahí. */
.gantt-wrap .bar-label:not(.big) { fill: #fff; font-weight: var(--weight-black); }
.gantt-wrap .popup-wrapper .title { font-family: var(--font-sans); }
.gantt-wrap .today-button {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xxs) !important;
}


/* ── MAPA DE CULTIVO CON HOTSPOTS (solo desktop) ──────────────
   Imagen full-bleed entre "El sistema" y "Monte frutal". Cada
   punto revela, en hover/focus, una tarjeta con imagen (placeholder
   .media-ph hasta tener fotos reales), título y descripción de la
   unidad de paisaje. Sin versión mobile: en pantallas táctiles no
   hay hover, así que la sección se oculta directamente. */
.crop-map-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: visible;
}
.crop-map { 
  position: relative; 
  width: 100%; 
}
.crop-map-img {
  width: 100%;
  aspect-ratio: 1440 / 650;
  object-fit: contain;
}
.crop-map-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 25, 22, 0.4) 0%, rgba(26, 25, 22, 0.05) 20%, rgba(26, 25, 22, 0.05) 80%, rgba(26, 25, 22, 0.5) 100%);
  pointer-events: none;
}
.crop-map-caption {
  position: absolute;
  z-index: 2;
  top: 2rem;
  left: var(--space-side);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: #fff;
}
.crop-map-caption::before { content: ''; width: 32px; height: 1px; background: var(--color-gold); }

.crop-hotspot {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0.6rem;
  margin: -0.6rem;
  cursor: pointer;

}
.crop-hotspot-dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-gold);
  border: 2px solid #fff;
  animation: cropHotspotPulse 2.2s ease-in-out infinite;
}
@keyframes cropHotspotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(173, 128, 32, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(173, 128, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(173, 128, 32, 0); }
}

.crop-hotspot-card {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  width: 240px;
  padding: 0.9rem;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity var(--duration-fast) var(--ease-signature), transform var(--duration-fast) var(--ease-signature);
}
.crop-hotspot:hover .crop-hotspot-card,
.crop-hotspot:focus .crop-hotspot-card,
.crop-hotspot:focus-visible .crop-hotspot-card {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.crop-hotspot--flip .crop-hotspot-card {
  bottom: auto;
  top: calc(100% + 14px);
  transform: translate(-50%, -8px);
}
.crop-hotspot--flip:hover .crop-hotspot-card,
.crop-hotspot--flip:focus .crop-hotspot-card,
.crop-hotspot--flip:focus-visible .crop-hotspot-card {
  transform: translate(-50%, 0);
}

.crop-hotspot-media {
  min-height: 100px;
  margin-bottom: 0.7rem;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}
.crop-hotspot-media i { font-size: 1.8rem; }
.crop-hotspot-title {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}
.crop-hotspot-desc {
  display: block;
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: var(--color-text-mid);
}

/* Solo desktop: sin hover en touch, la interacción no funciona igual */
@media (max-width: 900px) {
  .crop-map-section { display: none; }
}


/* ── CALLOUT / AVISO ──────────────────────────────────────── */
.callout {
  display: flex;
  gap: 1rem;
  background: var(--color-gold-light);
  border-left: 3px solid var(--color-gold);
  padding: 1.2rem 1.4rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.callout p { font-size: var(--text-sm); color: var(--color-dark); }
.callout.callout-wine {
  background: var(--color-wine-light);
  border-left-color: var(--color-wine);
}


/* ── TAG VARIANTE VINO ────────────────────────────────────── */
.tag-wine {
  background: var(--color-wine-light);
  border-color: rgba(112, 33, 80, .35);
  color: var(--color-wine);
}


/* ── OVERRIDES PUNTUALES DEL GRID-3 EN SECCIÓN OSCURA ─────── */
/* El grid-3 del base usa fondo claro entre celdas; en secciones
   oscuras conviene una línea clara. Se aplica con .grid-3-dark. */
.grid-3.grid-3-dark { background: rgba(255, 255, 255, 0.08); }


/* ── BOTÓN CON ÍCONO (ej. planilla de presupuesto, sección 12) ── */
.btn i { font-size: 3.3rem; }

/* Variante fantasma: fondo transparente + borde + texto blanco;
   en hover pierde el borde y se llena de ocre (dorado), texto blanco. */
.btn-ghost-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.btn-ghost-outline:hover {
  background: var(--color-gold);
  border-color: transparent;
  color: #fff;
}


/* ── UTILIDADES DE MARGEN DEL PORTAL ──────────────────────── */
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }