/* CSS para Arjona - Basado en diseño completo de Bicentenario */

/* Guide lines removed: visual debugging helpers have been deleted */

/* Reset para evitar conflictos con estilos globales */
.arjona-container,
.arjona-container * {
    font-family: 'Switzer', sans-serif !important;
}

/* Hero Section */
.arjona-hero {
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    margin-top: 0;
  /* removed decorative triangular border to allow full-bleed background image */
}
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../Imagenes de alta resolucion/arjona-portada.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Ensure hero uses full width regardless of body side margins */
.arjona-hero { box-sizing: border-box !important; }

.hero-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 2;
}


.arjona-page-title {
    font-family: 'Switzer', sans-serif !important;
    font-size: 96px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1.1 !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Sección de descripción */
.arjona-description {
  padding: 272px 0 272px; /* aumentar padding-top para bajar el texto descriptivo */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 388px;
    margin: 0 auto;
}

.arjona-description .container {
    max-width: none !important;
    width: 100% !important;
}

.arjona-description .container .row .col-lg-10 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.description-text {
    font-family: 'Switzer', sans-serif !important;
    font-size: 56px !important;
    line-height: 61.6px !important;
    letter-spacing: -2px !important;
    color: #142139 !important;
    text-align: center !important;
    max-width: 1440px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    overflow: visible;
    font-weight: 600 !important;
}

/* Sección de contenido con imágenes */
.arjona-content {
    padding: 256px 0;
}

.arjona-content .container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;

}

.arjona-content .row {
    margin-bottom: 296px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex;
    align-items: center;
    width: 100%;
    height: 504px;
}

/* Primera imagen: toca el borde izquierdo */
.arjona-content .row:first-child {
    justify-content: flex-start;
}

.arjona-content .row:first-child .col-lg-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 850px;
    max-width: 850px;
}

.arjona-content .row:first-child .col-lg-8 {
    padding-left: 98px !important;
    padding-right: 0 !important;
    flex: 0 0 732px;
    max-width: 732px;
}

/* Segunda imagen: toca el borde derecho */
.arjona-content .row:last-child {
    justify-content: flex-end;
}

.arjona-content .row:last-child .col-lg-8 {
    padding-left: 0 !important;
    padding-right: 98px !important;
    flex: 0 0 732px;
    max-width: 732px;
    order: 1;
}

.arjona-content .row:last-child .col-lg-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 850px;
    max-width: 850px;
    order: 2;
}

.content-image-card {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    width: 850px;
    height: 505px;
}

.content-image-card:hover {
    transform: translateY(-5px);
}

.content-image {
    width: 850px;
    height: 505px;
    object-fit: cover;
}

.content-text {
    font-family: 'Switzer', sans-serif !important;
    font-size: 32px !important;
    line-height: 1.8 !important;
    color: #2D3139 !important;
    text-align: justify !important;
}

/* === GRID 4 ZONAS PARA ARJONA (1/2 top, 3/4 bottom) === */
.arjona-grid-container {
  margin-left: 128px !important;
  margin-right: 240px !important;
  box-sizing: border-box !important;
  width: 1678px !important;
}

.arjona-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  grid-template-areas: "zone1 zone2" "zone3 zone4" !important;
  column-gap: 0px !important; /* más compacto */
  row-gap: 296px !important; /* separar 200px entre filas según petición */
  align-items: center !important; /* asegurar que el contenido se ubique arriba y no estire */
}

.arjona-grid .zone1 { grid-area: zone1; }
.arjona-grid .zone2 { grid-area: zone2; }
.arjona-grid .zone3 { grid-area: zone3; }
.arjona-grid .zone4 { grid-area: zone4; }

.arjona-grid .zone { display: flex; align-items: center; justify-content: center; }

/* Dar más espacio a las zonas con imágenes (1 y 4) para que quepan las tarjetas/imagenes */
.arjona-grid .zone1 .content-image-card {
  width: 842px !important;
  max-width: 856px !important;
  max-height: 512px !important; /* restaurar altura de imagen para mejor visual */
  height: 512px !important;
  border: 4px solid #092C44 !important;
  box-shadow: 8px 8px 0 #092C44 !important; /* sombra sólida hacia abajo-derecha */
  background: #092C44 !important;
}

.arjona-grid .zone4 .content-image-card {
  width: 100% !important;
  max-width: 856px !important;
  max-height: 512px !important;
  height: 512px !important;
  border: 4px solid #092C44 !important;
  box-shadow: -8px 8px 0 #092C44 !important; /* sombra sólida hacia abajo-izquierda */
  background: #092C44 !important;
}

.arjona-grid .zone1 .content-image,
.arjona-grid .zone4 .content-image {
  width: 100% !important;
  max-height: 512px !important;
  height: 512px !important;
  object-fit: cover !important;
  display: block !important;
}

.arjona-grid .zone2 .content-text,
.arjona-grid .zone3 .content-text {
  padding: 0 12px !important; /* menos padding para ganar espacio */
}

@media (max-width: 992px) {
  .arjona-grid-container { margin-left: 48px !important; margin-right: 48px !important; width: calc(100% - 96px) !important; }
  .arjona-grid { grid-template-columns: 1fr !important; grid-template-areas: "zone1" "zone2" "zone3" "zone4"; }
  .arjona-grid .zone { padding: 12px 0 !important; }
  .arjona-grid .zone1 .content-image-card, .arjona-grid .zone4 .content-image-card { max-width: 100% !important; }
}

/* Centrar el bloque en la zona, mantener texto alineado a la izquierda */
.arjona-grid .zone2{
  justify-content: center !important; /* centrar el bloque horizontalmente */
  align-items: center !important;    /* centrar verticalmente */
  padding: 0 12px !important;
  width: 610px !important;
  margin-left: 90px !important;
}


.arjona-grid .zone3 {
  justify-content: center !important; /* centrar el bloque horizontalmente */
  align-items: center !important;    /* centrar verticalmente */
  padding: 0 12px !important;
  width: 610px !important;
  margin-left: 90px !important;

}

.arjona-grid .zone2 .content-text,
.arjona-grid .zone3 .content-text {
  text-align: left !important;               /* texto alineado a la izquierda */
  max-width: 610px !important;               /* ancho del bloque */
  margin: 0 auto !important;                 /* centrar el bloque dentro de la zona */
  max-height: 512px !important;              /* alinear con altura de imagen */
  overflow: hidden !important;               /* evitar desbordes verticales */
  font-family: 'Switzer', sans-serif !important;
  font-weight: 400 !important;
  font-size: 32px !important;                 /* tamaño aumentado */
  letter-spacing: 0 !important;
  line-height: 44.8px !important;               /* line-height mejorado */
}

/* Si quieres un interlineado y lectura más cómoda */
/* line-height compact setting intentionally kept at 10px per user request */




@media (max-width: 992px) {
  .descriptor-section .descriptor-row {
    display: block !important;
  }
  .descriptor-section .col-left,
  .descriptor-section .col-right {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .descriptor-section .descriptor-title { text-align: center !important; }
}

/* Estilos para la interfaz interactiva */
.interactive-image-container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

.cartography-name {
  position: absolute;
  top: 20px;
  left: 20px;
  background: linear-gradient(135deg, rgba(248, 175, 64, 0.9) 0%, rgba(230, 158, 54, 0.9) 100%);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  font-family: 'Switzer', sans-serif;
  font-size: 18px;
  font-weight: 600;
  z-index: 10;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.6s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cartography-name.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Panel de puntos y marcadores */
.points-panel {
  margin-top: 18px;
}
.points-header { display:flex; justify-content:flex-end; margin-bottom:8px; }
.toggle-edit-btn {
  background: transparent;
  border: 2px solid rgba(7,42,64,0.08);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.toggle-edit-btn { color: #072A40; }
.points-list { display:flex; flex-direction:column; gap:8px; max-height:320px; overflow:auto; }
.point-btn {
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.point-btn { color: #072A40; }
.point-btn:hover { background:#f7f7f7; }

/* marcador absoluto dentro de image-viewer */
.point-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e64900;
  border: 2px solid white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transform: translate(-50%, -50%);
  z-index: 30;
  cursor: pointer;
}
.point-marker-label {
  position: absolute;
  left: 20px;
  top: -6px;
  background: rgba(255,255,255,0.95);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: #072A40;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  display: none;
}
.point-marker:hover .point-marker-label { display:block; }

.point-marker:active { cursor: pointer; }

.export-btn { margin-left: 8px; background: #072A40; color: #fff; border: none; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.export-btn:hover { filter: brightness(1.05); }

/* symbol icons inside marker */
.marker-symbols { position: absolute; right: -6px; top: -6px; display:flex; gap:4px; }
.marker-symbols span { width:10px; height:10px; display:inline-block; border-radius:2px; border:1px solid rgba(0,0,0,0.08); }
.marker-symbols .sym-circle { width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid #072A40; }
.marker-symbols .sym-star { width:0; height:0; box-shadow: 0 0 0 6px transparent; background: radial-gradient(circle at 30% 30%, #FFD700 40%, transparent 41%); border-radius:2px; }
.marker-symbols .sym-square { background:#072A40; }
.marker-symbols .sym-triangle { width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:12px solid #E4D22A; background:transparent; }
.marker-symbols .sym-pin { width:8px; height:12px; background:#e64900; border-radius:3px; }

/* descriptor badges and styles shown in right panel */
.point-descriptors { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.descriptor-item { display:flex; gap:10px; align-items:flex-start; }
.tejido-badge { width:12px; height:12px; border-radius:3px; display:inline-block; margin-right:6px; }


/* tejido color classes */
.tejido-social { background:#2E4DA9; }
.tejido-economico { background:#E4D22A; }
.tejido-ambiental { background:#2EA942; }
.tejido-cultural { background:#A9362E; }
.tejido-estructural { background:#8A602C; }

/* Small descriptor symbol used in lists and info */
.descriptor-symbol { width:14px; height:14px; display:inline-block; margin-right:8px; vertical-align:middle; color: transparent; }
.descriptor-symbol.sym-circle { border-radius:50%; background:currentColor; border:2px solid transparent; }
.descriptor-symbol.sym-square { background:currentColor; border:2px solid transparent; }
.descriptor-symbol.sym-triangle { width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:14px solid currentColor; display:inline-block; transform:translateY(-2px); }
.descriptor-symbol.sym-star { width:14px; height:14px; background:currentColor; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.descriptor-symbol.sym-pin { width:8px; height:12px; background:currentColor; border-radius:3px; border:2px solid transparent; transform:translateY(1px); }

/* When applying tejido color, color the symbol appropriately via currentColor */
.descriptor-symbol.tejido-social { color:#2E4DA9; }
.descriptor-symbol.tejido-economico { color:#E4D22A; }
.descriptor-symbol.tejido-ambiental { color:#2EA942; }
.descriptor-symbol.tejido-cultural { color:#A9362E; }
.descriptor-symbol.tejido-estructural { color:#8A602C; }

/* Modal descriptors and symbols layout */
.symbols-container { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.symbols-container label { font-size:0.9rem; color:#072A40; }
.descriptors-container { display:flex; flex-direction:column; }
.descriptor-row input, .descriptor-row select { padding:6px 8px; border:1px solid #e5e7eb; border-radius:6px; }
.descriptor-row button { align-self:center; }

/* Ensure the point info descriptors don't show list bullets and symbols are visible */
.point-descriptors { list-style: none; padding-left: 0; margin: 8px 0 0 0; }
.point-descriptors .descriptor-item { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.point-descriptors .descriptor-symbol { width:14px; height:14px; display:inline-block; vertical-align:middle; }
.point-descriptors .descriptor-symbol.sym-star { width:16px; height:16px; }
.point-descriptors .descriptor-info { margin:0; }

/* Floating controls */
.floating-controls { position: fixed; right: 20px; bottom: 20px; display:flex; flex-direction:column; gap:8px; z-index:60; }
.float-btn { background:#072A40; color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.float-btn:hover { filter:brightness(1.05); }

/* Modal styles */
.modal { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.45); z-index:70; }
.modal.hidden { display:none; }
.modal-content { background: #fff; padding: 18px; border-radius: 12px; width: 520px; max-width: 95%; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }

/* Ensure buttons and inputs inside the modal are readable on white background */
.modal-content button,
.modal-content input,
.modal-content textarea {
  color: #072A40;
}

/* small tweaks for cartography description */
.cartography-description textarea { border-radius:8px; padding:8px; border:1px solid #e5e7eb; }
.cartography-description .save-btn { color: #072A40; }

/* Utility classes (moved inline styles here) */
.align-right { text-align: right; }
.mt-8 { margin-top: 8px; }

/* Modal & form readability: ensure labels and placeholders are visible on white */
.modal-content label,
.cartography-description label {
  color: #333333;
  font-weight: 600;
}

.modal-content input,
.modal-content textarea,
.modal-content input.modal-field,
.modal-content textarea.modal-field,
.cartography-description textarea {
  color: #072A40 !important;
  background: #ffffff !important;
}

.modal-content input::placeholder,
.modal-content textarea::placeholder,
.cartography-description textarea::placeholder {
  color: #6b6b6b !important;
}

.modal-actions { text-align: right; margin-top: 8px; }

/* Ensure modal buttons have strong contrast and are readable */
.modal-content .toggle-edit-btn {
  background: #f3f4f6 !important; /* light gray */
  color: #072A40 !important; /* dark text */
  border: 1px solid #d1d5db !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
}
.modal-content .toggle-edit-btn:hover {
  background: #e6e9ec !important;
}
.modal-content .export-btn {
  background: #072A40 !important; /* dark button */
  color: #ffffff !important; /* white text */
  border: none !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
}
.modal-content .export-btn:hover {
  filter: brightness(1.05) !important;
}

.image-viewer {
  position: relative;
  width: 100%;
  height: 450px;
  max-width: 700px;
  margin: 0 auto;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.image-viewer.transitioning {
  transform: scale(0.98);
  transition: transform 0.3s ease;
}

/* Botones de navegación entre cartografías */
.nav-btn {
  position: absolute;
  top: 50%;
  background: rgba(248, 175, 64, 0.9);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 1;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.prev-btn {
  left: 15px;
}

.next-btn {
  right: 15px;
}

/* Ensure nav buttons are always visible for accessibility */
.image-viewer .nav-btn { opacity: 1; }

.nav-btn:hover {
  background: rgba(230, 158, 54, 1);
  transform: translateY(-50%) scale(1.1);
}

.image-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.interactive-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

.image-toggle-container {
  margin-top: 25px;
  text-align: center;
}

.toggle-btn {
  background: linear-gradient(135deg, #F8AF40 0%, #e69e36 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-family: 'Switzer', sans-serif;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.toggle-btn:hover {
  background: linear-gradient(135deg, #e69e36 0%, #F8AF40 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.toggle-icon {
  transition: transform 0.3s ease;
}

.toggle-btn:hover .toggle-icon {
  transform: rotate(180deg);
}

/* Indicadores de cartografías */
.image-indicators {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(7, 42, 64, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #F8AF40;
  transform: scale(1.2);
}

.indicator:hover {
  background: rgba(248, 175, 64, 0.7);
}

/* Estilos para el dashboard de estadísticas - Idéntico a Maria la Baja */
.stats-section {
  padding: 100px 0;
  background-color: #f8f9fa;
  text-align: center;
}

.stats-title {
  font-family: 'Switzer', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #0F4C75;
  margin-bottom: 50px;
}

.stats-dashboard {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 24px;
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  animation: cardPop 400ms ease;
}

.stats-left {
  display: grid;
  grid-template-rows: 240px auto;
  gap: 16px;
}


/* State colors: circle, triangle and rect */
.state-yellow .shape-inner-circle,
.state-yellow .shape-inner-triangle,
.state-yellow .shape-inner-rect { background: transparent !important; border-bottom-color: transparent !important; }
.state-blue .shape-inner-circle,
.state-blue .shape-inner-triangle,
.state-blue .shape-inner-rect { background: transparent !important; border-bottom-color: transparent !important; }
.state-green .shape-inner-circle,
.state-green .shape-inner-triangle,
.state-green .shape-inner-rect { background: transparent !important; border-bottom-color: transparent !important; }
.state-red .shape-inner-circle,
.state-red .shape-inner-triangle,
.state-red .shape-inner-rect { background: transparent !important; border-bottom-color: transparent !important; }
.state-brown .shape-inner-circle,
.state-brown .shape-inner-triangle,
.state-brown .shape-inner-rect { background: transparent !important; border-bottom-color: transparent !important; }

.shape-triangle::before {
  /* triangle pseudo-element disabled for Arjona page to avoid duplicates */
  content: '';
  display: none !important;
}

.shape-rect::before {
  /* legacy pseudo-element (kept for compatibility) */
  content: '';
  width: 120px;
  height: 60px;
  border-radius: 14px;
  background: #D4C525;
  display: block;
  transition: transform 300ms ease;
}

.shape:hover::before { transform: scale(1.05); }

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

.stats-card {
  background: #ddd;
  border-radius: 12px;
  padding: 16px;
  text-align: left;
  animation: cardPop 400ms ease;
}

.stats-card-title {
  font-family: 'Switzer', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
  text-align: left;
}

.stats-card-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-item {
  background: #e6e6e6;
  border-radius: 12px;
  padding: 16px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.stat-number {
  font-family: 'Switzer', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #1f2937;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stat-label {
  font-family: 'Switzer', sans-serif;
  font-size: 1rem;
  color: #1f2937;
}

.stats-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.summary-box {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: inset 0 0 0 2px #e5e7eb;
  transition: transform 200ms ease;
}

.summary-number {
  font-family: 'Switzer', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: #1f2937;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.summary-label {
  font-family: 'Switzer', sans-serif;
  font-size: 0.95rem;
  color: #1f2937;
}

.stats-right {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 12px;
}

.color-btn {
  width: 100%;
  border: 2px solid #142139;
  border-radius: 12px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #142139;
  height: 64px;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 200ms ease;
}

.color-btn:focus { outline: 2px solid #F8AF40; }
.color-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

.color-yellow { background: #2E4DA9; }
.color-blue { background: #E4D22A; }
.color-green { background: #2EA942; }
.color-red { background: #A9362E; color: #fff; }
.color-brown { background: #8A602C; color: #fff; }

/* State-based shape colors */
.state-yellow .shape-circle::before,
.state-yellow .shape-rect::before { background: #E4D22A !important; border-bottom-color: #E4D22A !important; }

.state-blue .shape-circle::before,
.state-blue .shape-rect::before { background: #2E4DA9 !important; border-bottom-color: #2E4DA9 !important; }

.state-green .shape-circle::before,
.state-green .shape-rect::before { background: #2EA942 !important; border-bottom-color: #2EA942 !important; }

.state-red .shape-circle::before,
.state-red .shape-rect::before { background: #A9362E !important; border-bottom-color: #A9362E !important; }

.state-brown .shape-circle::before,
.state-brown .shape-rect::before { background: #8A602C !important; border-bottom-color: #8A602C !important; }

/* Hover effects */
.stat-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.summary-box:hover { transform: translateY(-2px); }

/* Animaciones mejoradas */
@keyframes cardPop {
  0% { transform: translateY(6px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes shapeRise {
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Animación de conteo suave */
@keyframes numberCountUp {
  0% { 
    opacity: 0.8;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.stat-number.counting,
.summary-number.counting {
  animation: numberCountUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Clase para ocultar capas */
.hidden-layer {
  display: none;
}



@media (max-width: 576px) {
    .image-viewer {
        height: 320px;
        max-width: 500px;
    }
}

/* ===== Disable animations/transitions inside stats section ===== */
.stats-section,
.stats-section * {
  animation: none !important;
  transition: none !important;
}

.stats-dashboard,
.stats-shapes,
.shape,
.stats-card,
.stat-number,
.summary-number,
.stat-item,
.summary-box {
  transform: none !important;
  opacity: 1 !important;
}

.shape:hover::before,
.stat-item:hover,
.summary-box:hover,
.indicator:hover,
.nav-btn:hover,
.toggle-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Ensure counting animations are disabled */
.stat-number.counting,
.summary-number.counting {
  animation: none !important;
}

/* Force shapes to be visible and static (prevent JS from hiding them) */
.stats-shapes .shape {
  visibility: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 120px !important;
  background: transparent !important;
  border-radius: 0 !important; /* remove rounded boxed background */
}

.stats-shapes .shape::before {
  display: block !important;
  opacity: 1 !important;
}

/* Disable legacy triangle references; only circle and rect remain */
/* Disable legacy pseudo-elements to avoid duplicate/ghost shapes */
.shape-circle::before,
.shape-rect::before { display: none !important; }

/* Explicit DOM-based shape spans (deterministic) */
.shape-inner-circle {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  display: block !important;
}
.shape-inner-rect {
  width: 90px !important;
  height: 54px !important;
  border-radius: 10px !important;
  display: block !important;
}

/* State-based colors target the DOM spans (circle and rect only) */
.state-yellow .shape-inner-circle,
.state-yellow .shape-inner-rect { background: #E4D22A !important; border-bottom-color: #E4D22A !important; }
.state-blue .shape-inner-circle,
.state-blue .shape-inner-rect { background: #2E4DA9 !important; border-bottom-color: #2E4DA9 !important; }
.state-green .shape-inner-circle,
.state-green .shape-inner-rect { background: #2EA942 !important; border-bottom-color: #2EA942 !important; }
.state-red .shape-inner-circle,
.state-red .shape-inner-rect { background: #A9362E !important; border-bottom-color: #A9362E !important; }
.state-brown .shape-inner-circle,
.state-brown .shape-inner-rect { background: #8A602C !important; border-bottom-color: #8A602C !important; }

/* Remove box background from individual .shape containers so only pseudo elements show */
.stats-shapes .shape { background: transparent !important; }
.stats-shapes .shape::before { display: block !important; }

/* ===== New styles to match provided statistics design ===== */
.stats-section {
  padding: 60px 0 80px !important;
  background-color: transparent !important;
}

.stats-dashboard {
  display: grid !important;
  grid-template-columns: 1fr 120px !important;
  gap: 24px !important;
  align-items: start !important;
}

.stats-left {
  display: grid !important;
  grid-template-rows: auto auto auto !important; /* shapes, main, summary */
  gap: 20px !important;
}

.stats-shapes {
  background: #e6e6e6 !important;
  border-radius: 8px !important;
  padding: 26px 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* center shapes and use gap for spacing */
  gap: 48px !important;
  border: 2px solid #142139 !important;
}

.shape {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 120px !important;
  background: transparent !important;
  flex: 0 0 auto !important; /* avoid flex growth that reorders layout visually */
  width: auto !important;
}

/* Force explicit visual order to avoid layout shifts from other rules/scripts */
.shape-circle { order: 1 !important; }
.shape-triangle { order: 2 !important; }
.shape-rect { order: 3 !important; }

/* Make the rectangular shape invisible while keeping DOM/order intact */
.shape-rect {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.shape-rect::before { display: none !important; }

.shape-circle::before { width: 90px !important; height: 90px !important; }
.shape-triangle::before { display: none !important; }
.shape-rect::before { width: 90px !important; height: 54px !important; border-radius: 10px !important; }

/* FINAL OVERRIDES: ensure legacy pseudo-elements stay disabled and DOM spans are authoritative */
.stats-shapes .shape::before,
.shape-circle::before,
.shape-rect::before { display: none !important; }

.shape-inner-circle,
.shape-inner-triangle,
.shape-inner-rect { display: block !important; }

/* DOM triangle styling (border-based triangle) */
.shape-inner-triangle {
  width: 0 !important;
  height: 0 !important;
  border-left: 36px solid transparent !important;
  border-right: 36px solid transparent !important;
  border-bottom: 66px solid #D4C525 !important; /* default color */
  display: block !important;
}

.stats-main {
  background: #e6e6e6 !important;
  border-radius: 8px !important;
  padding: 26px 28px !important;
  border: 2px solid #142139 !important;
}

/* ===== Final, highly-specific fixes for Arjona stats triangle rendering ===== */
/* Ensure no legacy pseudo-elements render inside the Arjona stats container */
#statsShapes .shape::before,
#statsShapes .shape-circle::before,
#statsShapes .shape-triangle::before,
#statsShapes .shape-rect::before { display: none !important; }

/* Triangle span must be border-based (width:0) and not receive rectangular sizing/background */
#statsShapes .shape-inner-triangle {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border-left: 36px solid transparent !important;
  border-right: 36px solid transparent !important;
  border-bottom: 66px solid #D4C525 !important; /* default color */
  display: block !important;
  line-height: 0 !important;
}

/* State color rules: use border-bottom-color for triangle specifically */
#statsShapes.state-yellow .shape-inner-triangle { border-bottom-color: #E4D22A !important; }
#statsShapes.state-blue .shape-inner-triangle { border-bottom-color: #2E4DA9 !important; }
#statsShapes.state-green .shape-inner-triangle { border-bottom-color: #2EA942 !important; }
#statsShapes.state-red .shape-inner-triangle { border-bottom-color: #A9362E !important; }
#statsShapes.state-brown .shape-inner-triangle { border-bottom-color: #8A602C !important; }

/* Also ensure circle/rect state rules remain specific to container */
#statsShapes.state-yellow .shape-inner-circle,
#statsShapes.state-yellow .shape-inner-rect { background: #E4D22A !important; }
#statsShapes.state-blue .shape-inner-circle,
#statsShapes.state-blue .shape-inner-rect { background: #2E4DA9 !important; }
#statsShapes.state-green .shape-inner-circle,
#statsShapes.state-green .shape-inner-rect { background: #2EA942 !important; }
#statsShapes.state-red .shape-inner-circle,
#statsShapes.state-red .shape-inner-rect { background: #A9362E !important; }
#statsShapes.state-brown .shape-inner-circle,
#statsShapes.state-brown .shape-inner-rect { background: #8A602C !important; }

.stats-card-title { font-size: 16px !important; color: #000 !important; margin-bottom: 12px !important; }

.stats-main-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.stats-main-item { text-align: center; width: 33%; }
.stats-main-item .stat-number { font-size: 64px !important; font-weight: 700 !important; color: #1f2937 !important; }
.stats-main-item .stat-label { font-size: 16px !important; color: #1f2937 !important; margin-top: 8px; }

.stats-summary-cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

.summary-card {
  background: #e6e6e6 !important;
  border-radius: 8px !important;
  padding: 18px !important;
  border: 2px solid #142139 !important;
  text-align: left !important;
  position: relative !important;
  min-height: 120px !important;
}

.summary-card .mini-shape { position: absolute !important; top: 12px !important; left: 12px !important; }
.mini-circle::before { width: 28px !important; height: 28px !important; border-radius: 50% !important; }
.mini-triangle::before { border-left: 14px solid transparent !important; border-right: 14px solid transparent !important; border-bottom: 26px solid #D4C525 !important; width:0;height:0 }
.mini-rect::before { width: 28px !important; height: 18px !important; border-radius: 6px !important; }

.summary-card .summary-number { font-size: 44px !important; font-weight: 700 !important; margin-top: 22px !important; color: #1f2937 !important; }
.summary-card .summary-label { font-size: 14px !important; margin-top: 6px !important; color: #1f2937 !important; }

.total-card { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; text-align:right; }
.total-card .summary-number { font-size: 48px !important; }

.stats-right { display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.stats-right .color-btn { height: 72px; border-radius: 8px; border: 2px solid #142139;}

/* Ensure state colors apply to shapes' pseudo elements (already defined earlier), keep shapes visible */
.stats-shapes .shape::before { opacity: 1 !important; }

@media (max-width: 992px) {
  .stats-dashboard { grid-template-columns: 1fr !important; }
  .stats-right { flex-direction:row; justify-content:center; }
  .stats-summary-cards { grid-template-columns: repeat(2,1fr) !important; }
}
/* DOM triangle styling removed — shapes controlled via .shape-inner-* and .shape-rect */

/* Hide floating edit/export controls added in HTML for Arjona page (avoid inline styles) */
.floating-controls {
  display: none !important;
}

/* Force-hide editor UI elements for Arjona (read-only page) to avoid showing empty descriptor rows */
.cartography-description,
#pointsPanel,
#pointsList,
#pointModal {
  display: none !important;
}

/* Ensure the descriptor display (read-only) remains visible */
.descriptor-text { display: block !important; }