:root {
      --ink: #3B0A20;
      --ink-2: #5E2238;
      --muted: #6B5560;
      --bg: #ffffff;
      --bg-2: #9b9b9b;
      --surface: #d8d8d8;
      --surface-2: #dadada;
      --line: #3A3140;
      --vino: #691B3C;
      --vino-2: #9D2449;
      --vino-glow: rgba(157, 36, 73, 0.4);
      --oro: #A87C36;
      --oro-soft: #F4ECDB;
      --verde: #1F7A52;
      --verde-soft: #E2F1EA;
      --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }

body {
      font-family: 'Inter', system-ui, sans-serif;
      color: #E8E0E4;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      overflow-x: hidden;
      background-image: url('./../utils/background.jpeg');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }
/* ── Main Content ── */
    main {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 24px 80px;
    }

    /* ── Map Container ── */
    .map-container {
      position: relative;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.5) 100%);
      border: 1px solid #000;
      border-radius: 15px;
      padding: 30px;
      box-shadow: 0 0px 20px rgba(90, 18, 18, 0.4), 0 0 20px rgba(107, 23, 48, 0.05);
      overflow: hidden;
    }

    .map-container::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 20px;
      background: radial-gradient(ellipse 100% 80% at 50% 100%, rgba(157, 36, 73, 0.06) 0%, transparent 60%);
      pointer-events: none;
    }

    .map-title-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid #000;
    }

    .map-title-bar h3 {
      font-family: 'Archivo', sans-serif;
      font-weight: 700;
      font-size: 15px;
      color: #000;
      margin-right: 10px;
    }

    .map-legend {
      display: flex;
      gap: 18px;
      font-size: 13px;
      color: var(--muted);
    }

    .map-legend span {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .legend-dot {
      width: 15px;
      height: 15px;
      border-radius: 4px;
    }

    .legend-dot.active {
      background: var(--vino-2);
    }

    .legend-dot.vacio {
      background: #B05672;
    }

    .legend-dot.inactive {
      background: #DDC9A3;
    }

    /* ── SVG Map ── */
    #mexico-map {
      width: 100%;
      height: auto;
      display: block;
    }

    #mexico-map path {
      fill: #DDC9A3;
      stroke: #000;
      stroke-width: 0.6;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: default;
    }

    #mexico-map path.state-active {
      fill: var(--vino-2);
      stroke: #C0A97F;
      stroke-width: 1.8;
      cursor: pointer;
      filter: drop-shadow(0 0 8px var(--vino-glow));
    }

    /* Estado registrado pero sin obras todavía: mismo vino, más claro */
    #mexico-map path.state-vacio {
      fill: #B05672;
      stroke: #C0A97F;
      stroke-width: 1.8;
      cursor: pointer;
    }

    #mexico-map path.state-vacio:hover {
      fill: #9E4363;
      stroke: #E9C98B;
      stroke-width: 2.2;
    }

    #mexico-map path.state-active:hover {
      fill: #B42A55;
      stroke: #E9C98B;
      stroke-width: 2.2;
      filter: drop-shadow(0 0 16px var(--vino-glow));
      transform-origin: center;
    }

    /* ── Tooltip ── */
    .map-tooltip {
      position: fixed;
      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(12px);
      border: 1px solid #000;
      border-radius: 12px;
      padding: 12px 16px;
      pointer-events: none;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.2s, transform 0.2s;
      z-index: 100;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
      min-width: 180px;
    }

    .map-tooltip.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .map-tooltip .tt-name {
      font-family: 'Archivo', sans-serif;
      font-weight: 700;
      font-size: 14px;
      color: #000000;
      margin-bottom: 4px;
    }

    .map-tooltip .tt-desc {
      font-size: 12px;
      color: #000;
      line-height: 1.4;
    }

    .map-tooltip .tt-action {
      margin-top: 8px;
      font-size: 11px;
      color: var(--vino-2);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .map-tooltip.inactive-tt .tt-action {
      color: #505050;
    }

    /* ── Active States Cards ── */
    .active-states {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 32px;
    }

    .state-card {
      background: #fffcf6ea;
      border: 1px solid #000;
      border-radius: 16px;
      padding: 20px 22px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      display: block;
    }

    .state-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--vino-2);
      transition: width 0.3s;
    }

    .state-card:hover {
      border-color: rgba(157, 36, 73, 0.4);
      background: #fffaf1;
      ;
      transform: translateY(-3px);
      box-shadow: 0 12px 36px rgba(157, 36, 73, 0.15);
    }

    .state-card:hover::before {
      width: 6px;
    }

    .state-card .sc-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px;
    }

    .state-card .sc-name {
      font-family: 'Archivo', sans-serif;
      font-weight: 700;
      font-size: 17px;
      color: #000000;
    }

    .state-card .sc-badge {
      background: rgb(170, 2, 2);
      color: #ffffff;
      font-size: 10.5px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .state-card .sc-desc {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
      margin-bottom: 14px;
    }

    .state-card .sc-stats {
      display: flex;
      gap: 20px;
    }

    .state-card .sc-stat {
      display: flex;
      flex-direction: column;
    }

    .state-card .sc-stat-label {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 600;
    }

    .state-card .sc-stat-val {
      font-family: 'Archivo', sans-serif;
      font-weight: 800;
      font-size: 20px;
      color: var(--oro);
      margin-top: 2px;
    }

    .state-card .sc-arrow {
      position: absolute;
      right: 18px;
      bottom: 18px;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgb(170, 2, 2);
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 16px;
      transition: all 0.3s;
    }

@media (max-width: 640px) {
      .active-states {
        grid-template-columns: 1fr;
      }

      .map-container {
        padding: 18px;
      }

      main {
        padding: 24px 16px 60px;
      }

      .header-right-logo img {
        height: 25px;
      }

      .map-container {
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 35%, rgba(255, 255, 255, 0.5) 100%);
      }

      .map-title-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .map-title-bar h3 {
      font-family: 'Archivo', sans-serif;
      font-weight: 700;
      font-size: 11.5px;
      color: #000;
      }
    }

@media (max-width: 480px) {
      .brand h1 {
        font-size: 12px;
      }

      .brand p {
        font-size: 8px;
      }

      .header-right-logo img {
        height: 21px;
      }

      .map-container {
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 35%, rgba(255, 255, 255, 0.5) 100%);
      }

      .map-container h3 {
        display: none;
      }

      .map-title-bar {
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }

      #mexico-map path.state-active,
      #mexico-map path.state-vacio {
        cursor: default;
      }

    }

/* ===== Panel de estados (escala a 32): búsqueda, filtros y tarjetas compactas ===== */
.estados-panel {
  position: relative; width: 100%; max-width: 1400px; margin: 22px auto 0; padding: 26px 28px 30px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.88) 100%);
  border: 1px solid #000; border-radius: 15px; box-shadow: 0 0 20px rgba(90, 18, 18, .4);
}
.ep-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #000; }
.ep-resumen h3 { margin: 0 0 8px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 20px; color: #3B0A20; }
.ep-cifras { display: flex; flex-wrap: wrap; gap: 8px; }
.ep-cifras span { padding: 4px 11px; border-radius: 999px; background: #F4E4EA; color: #5E2238; font-size: 12.5px; }
.ep-cifras b { color: #691B3C; font-size: 14px; }
.ep-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
#epBuscar {
  width: 230px; max-width: 100%; box-sizing: border-box; padding: 9px 13px; font-size: 14px; color: #3B0A20; background: #fff;
  border: 1px solid #C9B9C1; border-radius: 10px; transition: border-color .15s, box-shadow .15s;
}
#epBuscar:focus { outline: none; border-color: #691B3C; box-shadow: 0 0 0 3px #F4E4EA; }
.ep-filtros { display: inline-flex; border: 1px solid #C9B9C1; border-radius: 10px; overflow: hidden; background: #fff; }
.ep-filtros button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: none; background: #fff; font-family: inherit; font-size: 13px; font-weight: 700; color: #5E2238; cursor: pointer; transition: background .15s; }
.ep-filtros button + button { border-left: 1px solid #C9B9C1; }
.ep-filtros button span { padding: 1px 7px; border-radius: 999px; background: #F4E4EA; color: #691B3C; font-size: 11.5px; }
.ep-filtros button:hover { background: #F9F0F3; }
.ep-filtros button.activo { background: #691B3C; color: #fff; }
.ep-filtros button.activo span { background: rgba(255,255,255,.22); color: #fff; }

.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.ep-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 13px; box-sizing: border-box; min-height: 138px;
  text-decoration: none; color: #3B0A20; background: #fff; border: 1px solid #E2D8DD; border-left: 5px solid #691B3C; border-radius: 13px;
  box-shadow: 0 2px 8px rgba(59, 10, 32, .08); transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
}
.ep-card.ep-prep { border-left-color: #B05672; }
.ep-card:hover, .ep-card.ep-resaltada { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(105, 27, 60, .25); border-color: #691B3C; background: #FFFBFC; }
.ep-card[hidden] { display: none; }
.ep-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ep-clave { padding: 2px 8px; border-radius: 6px; background: #691B3C; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.ep-prep .ep-clave { background: #B05672; }
.ep-estatus { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #691B3C; }
.ep-prep .ep-estatus { color: #9E4363; }
.ep-nombre { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; line-height: 1.2; color: #3B0A20; }
.ep-desc { margin: 0; font-size: 12px; line-height: 1.35; color: #6B5560; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-pie { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 6px; border-top: 1px dashed #E2D8DD; }
.ep-obras { font-size: 12.5px; color: #5E2238; }
.ep-obras b { font-family: 'Archivo', sans-serif; font-size: 20px; color: #691B3C; margin-right: 3px; }
.ep-inv { font-size: 11.5px; color: #6B5560; }
.ep-flecha { margin-left: auto; font-size: 18px; color: #691B3C; opacity: 0; transform: translateX(-4px); transition: all .15s; }
.ep-card:hover .ep-flecha { opacity: 1; transform: none; }
.ep-agregar { align-items: center; justify-content: center; border: 2px dashed #B9A5AF; border-left: 2px dashed #B9A5AF; background: rgba(255,255,255,.6); color: #691B3C; font-weight: 700; cursor: pointer; text-align: center; }
.ep-agregar img { width: 34px; height: 34px; }
.ep-agregar:hover { border-color: #691B3C; }
.ep-vacio { margin: 18px 0 0; text-align: center; font-size: 14px; color: #6B5560; }
.ep-vacio[hidden] { display: none; }

/* Resalte cruzado mapa ↔ tarjeta */
#mexico-map path.state-resalta { stroke: #E9C98B; stroke-width: 2.6; filter: brightness(1.18) drop-shadow(0 0 10px rgba(233, 201, 139, .8)); }

@media (max-width: 720px) {
  .estados-panel { padding: 18px 14px 22px; }
  .ep-controles { width: 100%; }
  #epBuscar { width: 100%; }
  .ep-filtros { width: 100%; }
  .ep-filtros button { flex: 1; justify-content: center; padding: 9px 6px; font-size: 12px; }
  .ep-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .ep-card { min-height: 128px; padding: 12px; }
}

/* Ajuste: panel con solo los filtros y tarjetas más espaciadas */
.estados-panel { padding: 24px 30px 32px; }
.ep-head { justify-content: flex-start; margin-bottom: 26px; padding-bottom: 0; border-bottom: none; }
.ep-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; }
.ep-card { min-height: 160px; padding: 18px 20px 16px; gap: 9px; }
.ep-desc { margin-bottom: 4px; }
.ep-pie { padding-top: 10px; }
@media (max-width: 720px) {
  .estados-panel { padding: 18px 14px 22px; }
  .ep-grid { grid-template-columns: 1fr; gap: 16px; }
  .ep-card { min-height: 0; }
}

/* Panel de estados: vidrio esmerilado (menos blanco, más blur) */
.estados-panel {
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 8px 32px rgba(40, 8, 20, .35);
}