/* ===================================
           DEV ALERT MODAL
        =================================== */
   .dev-alert-overlay {
       position: fixed;
       inset: 0;
       z-index: 1000;
       background: rgba(17, 24, 39, 0.55);
       backdrop-filter: blur(4px);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 24px;
       opacity: 0;
       animation: devAlertFadeIn 0.35s ease forwards;
   }

   .dev-alert-overlay.hiding {
       animation: devAlertFadeOut 0.25s ease forwards;
   }

   @keyframes devAlertFadeIn {
       from { opacity: 0; transform: scale(0.97); }
       to   { opacity: 1; transform: scale(1); }
   }

   @keyframes devAlertFadeOut {
       from { opacity: 1; transform: scale(1); }
       to   { opacity: 0; transform: scale(0.97); }
   }

   .dev-alert-card {
       background: #fff;
       border-radius: 16px;
       box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
       max-width: 480px;
       width: 100%;
       display: flex;
       gap: 20px;
       padding: 32px;
       border-top: 4px solid #f59e0b;
       animation: devCardSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
   }

   @keyframes devCardSlideUp {
       from { transform: translateY(20px); opacity: 0; }
       to   { transform: translateY(0);    opacity: 1; }
   }

   .dev-alert-icon-wrap {
       flex-shrink: 0;
       width: 48px;
       height: 48px;
       background: #fef3c7;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .dev-alert-icon {
       width: 26px;
       height: 26px;
       color: #d97706;
   }

   .dev-alert-body {
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .dev-alert-title {
       font-size: 17px;
       font-weight: 700;
       color: #111827;
       letter-spacing: -0.02em;
       line-height: 1.3;
   }

   .dev-alert-desc {
       font-size: 14px;
       color: #4b5563;
       line-height: 1.65;
   }

   .dev-alert-footer {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-top: 8px;
       flex-wrap: wrap;
       gap: 12px;
   }

   .dev-alert-badge {
       font-family: 'DM Mono', monospace;
       font-size: 12px;
       font-weight: 500;
       color: #92400e;
       background: #fef3c7;
       border: 1px solid #fde68a;
       border-radius: 9999px;
       padding: 4px 12px;
   }

   .dev-alert-btn {
       background: #111827;
       color: #fff;
       border: none;
       border-radius: 8px;
       padding: 10px 20px;
       font-family: 'DM Sans', sans-serif;
       font-size: 14px;
       font-weight: 600;
       cursor: pointer;
       transition: background 0.15s, transform 0.1s;
   }

   .dev-alert-btn:hover {
       background: #1f2937;
   }

   .dev-alert-btn:active {
       transform: scale(0.97);
   }

   :root {
       --white: #ffffff;
       --gray-50: #fafafa;
       --gray-100: #f4f4f5;
       --gray-200: #e4e4e7;
       --gray-300: #d1d5db;
       --gray-400: #9ca3af;
       --gray-500: #6b7280;
       --gray-600: #4b5563;
       --gray-700: #374151;
       --gray-800: #1f2937;
       --gray-900: #111827;

       --accent-blue: #3b82f6;
       --accent-green: #10b981;
       --accent-yellow: #f59e0b;
       --accent-red: #ef4444;

       --navbar-height: 64px;
       --radius-sm: 6px;
       --radius-md: 10px;
       --radius-lg: 14px;
       --radius-full: 9999px;

       --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
       --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
       --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
   }

   /* ===================================
           RESET
        =================================== */
   *,
   *::before,
   *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: 'DM Sans', -apple-system, sans-serif;
       font-size: 14px;
       line-height: 1.6;
       color: var(--gray-800);
       background: var(--gray-50);
       -webkit-font-smoothing: antialiased;
       display: flex;
       flex-direction: column;
       min-height: 100vh;
   }

   /* ===================================
           NAVBAR
        =================================== */
   .navbar {
       height: var(--navbar-height);
       background: var(--white);
       border-bottom: 1px solid var(--gray-200);
       position: sticky;
       top: 0;
       z-index: 100;
       display: flex;
       align-items: center;
       padding: 0 24px;
       justify-content: space-between;
       backdrop-filter: blur(10px);
       background-color: rgba(255, 255, 255, 0.96);
   }

   .nav-left {
       display: flex;
       align-items: center;
       gap: 16px;
   }

   .logo-main {
       height: 85px;
       width: auto;
   }

   .logo-secondary {
       height: 28px;
       width: auto;
       opacity: 0.85;
   }


   .nav-divider {
       width: 1px;
       height: 28px;
       background: var(--gray-200);
   }

   .nav-title {
       font-size: 14px;
       font-weight: 600;
       color: var(--gray-700);
       letter-spacing: -0.01em;
   }

   .nav-right {
       display: flex;
       align-items: center;
       gap: 8px;
   }

   /* ===================================
           APP LAYOUT
        =================================== */
   .app-layout {
       display: flex;
       justify-content: center;
       /* Center the content */
       flex: 1;
       padding-top: 20px;
       /* Height removed to allow scrolling of body */
   }

   /* ===================================
           MAIN PANEL
        =================================== */
   .main-panel {
       width: 100%;
       max-width: 1200px;
       /* Constrain width for better reading on large screens */
       padding: 0 24px 40px 24px;
       display: flex;
       flex-direction: column;
       gap: 32px;
   }

   /* ===================================
           STATS ROW
        =================================== */
   .stats-row {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 20px;
   }

   .stat-card {
       background: var(--white);
       border: 1px solid var(--gray-200);
       border-radius: var(--radius-md);
       padding: 24px;
       display: flex;
       align-items: center;
       gap: 16px;
       transition: box-shadow 0.2s;
       box-shadow: var(--shadow-sm);
   }

   .stat-card:hover {
       box-shadow: var(--shadow-md);
   }

   .stat-icon {
       width: 48px;
       height: 48px;
       border-radius: var(--radius-sm);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       font-size: 20px;
   }

   .stat-icon.blue {
       background: #dbeafe;
   }

   .stat-icon.green {
       background: #d1fae5;
   }

   .stat-icon.amber {
       background: #fef3c7;
   }

   .stat-value {
       font-size: 28px;
       font-weight: 700;
       color: var(--gray-900);
       letter-spacing: -0.02em;
       line-height: 1.1;
   }

   .stat-label {
       font-size: 13px;
       color: var(--gray-500);
       font-weight: 500;
       margin-top: 2px;
   }

   /* ===================================
           SECTION HEADER & SEARCH
        =================================== */
   .section-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 12px;
       flex-wrap: wrap;
       gap: 16px;
   }

   .header-left {
       display: flex;
       align-items: baseline;
       gap: 12px;
   }

   .section-title {
       font-size: 18px;
       font-weight: 700;
       color: var(--gray-900);
       letter-spacing: -0.01em;
   }

   .section-count {
       font-size: 13px;
       color: var(--gray-400);
       font-family: 'DM Mono', monospace;
   }

   .search-box {
       position: relative;
       width: 320px;
   }

   .search-box input {
       width: 100%;
       padding: 10px 12px 10px 36px;
       border: 1px solid var(--gray-200);
       border-radius: var(--radius-sm);
       font-size: 14px;
       font-family: inherit;
       color: var(--gray-700);
       background: var(--white);
       outline: none;
       transition: all 0.2s;
       box-shadow: var(--shadow-sm);
   }

   .search-box input:focus {
       border-color: var(--accent-blue);
       box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
   }

   .search-box input::placeholder {
       color: var(--gray-400);
   }

   .search-icon {
       position: absolute;
       left: 12px;
       top: 50%;
       transform: translateY(-50%);
       color: var(--gray-400);
       pointer-events: none;
   }

   /* ===================================
           POT LIST (HORIZONTAL PROGRESS)
        =================================== */
   .pot-list-container {
       background: var(--white);
       border: 1px solid var(--gray-200);
       border-radius: var(--radius-lg);
       overflow: hidden;
       box-shadow: var(--shadow-sm);
   }

   .pot-row {
       display: grid;
       grid-template-columns: 240px 1fr 90px;
       align-items: center;
       gap: 24px;
       padding: 18px 24px;
       border-bottom: 1px solid var(--gray-100);
       transition: background 0.15s;
   }

   .pot-row:last-child {
       border-bottom: none;
   }

   .pot-row:hover {
       background: var(--gray-50);
   }

   .pot-row-name {
       display: flex;
       flex-direction: column;
       gap: 4px;
   }

   .pot-municipio {
       font-size: 15px;
       font-weight: 600;
       color: var(--gray-900);
   }

   .pot-etapa {
       font-size: 12px;
       color: var(--gray-500);
       line-height: 1.4;
   }

   .pot-progress-wrap {
       display: flex;
       flex-direction: column;
       gap: 6px;
   }

   .pot-bar-track {
       height: 8px;
       background: var(--gray-100);
       border-radius: var(--radius-full);
       overflow: hidden;
   }

   .pot-bar-fill {
       height: 100%;
       border-radius: var(--radius-full);
       transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
   }

   .pot-bar-fill::after {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
       animation: shimmer 2.5s infinite;
   }

   @keyframes shimmer {
       0% {
           transform: translateX(-100%);
       }

       100% {
           transform: translateX(100%);
       }
   }

   .pot-bar-fill.low {
       background: var(--accent-red);
   }

   .pot-bar-fill.medium {
       background: var(--accent-yellow);
   }

   .pot-bar-fill.high {
       background: var(--accent-blue);
   }

   .pot-bar-fill.complete {
       background: var(--accent-green);
   }

   .pot-bar-labels {
       display: flex;
       justify-content: space-between;
       font-size: 11px;
       color: var(--gray-400);
       font-weight: 500;
   }

   .pot-badge {
       text-align: right;
   }

   .badge-pill {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 50px;
       padding: 6px;
       border-radius: var(--radius-md);
       font-size: 13px;
       font-weight: 700;
       font-family: 'DM Mono', monospace;
   }

   .badge-pill.low {
       background: #fee2e2;
       color: #991b1b;
   }

   .badge-pill.medium {
       background: #fef3c7;
       color: #92400e;
   }

   .badge-pill.high {
       background: #dbeafe;
       color: #1e40af;
   }

   .badge-pill.complete {
       background: #d1fae5;
       color: #065f46;
   }

   /* ===================================
           EMPTY / LOADING STATE
        =================================== */
   .empty-state {
       text-align: center;
       padding: 60px 24px;
       color: var(--gray-400);
   }

   .empty-state p {
       font-size: 15px;
   }

   /* ===================================
           FOOTER
        =================================== */
   .footer {
       background: var(--white);
       color: var(--gray-500);
       padding: 20px 24px;
       text-align: center;
       font-size: 13px;
       border-top: 1px solid var(--gray-200);
       margin-top: auto;
   }

   /* ===================================
           RESPONSIVE
        =================================== */
   @media (max-width: 768px) {
       .app-layout {
           padding: 0;
       }

       .main-panel {
           padding: 20px 16px;
       }

       .stats-row {
           grid-template-columns: 1fr;
       }

       .pot-row {
           grid-template-columns: 1fr;
           gap: 12px;
       }

       .section-header {
           flex-direction: column;
           align-items: stretch;
           gap: 12px;
       }

       .search-box {
           width: 100%;
       }
   }