:root {
     --aw-primary: #0b5fff;
     --aw-primary-2: #15bffd;
     --aw-cyan: #5ef2ff;
     --aw-deep: #072b61;
     --aw-ocean: #0a3d91;
     --aw-aqua-soft: #e9fbff;
     --aw-mint: #dffcf7;
     --aw-ice: #f7fdff;
     --aw-sky: #eef7ff;
     --aw-success: #14b86e;
     --aw-warning: #ffb648;
     --aw-danger: #e74c5b;
     --aw-text: #18324a;
     --aw-text-soft: #5f7285;
     --aw-white: #ffffff;
     --aw-border: rgba(11, 95, 255, 0.12);
     --aw-border-strong: rgba(11, 95, 255, 0.22);

     --aw-gradient-main: linear-gradient(135deg, #072b61 0%, #0b5fff 35%, #15bffd 75%, #5ef2ff 100%);
     --aw-gradient-soft: linear-gradient(180deg, #f9fdff 0%, #eef9ff 100%);
     --aw-gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 250, 255, 0.96) 100%);
     --aw-gradient-glow: radial-gradient(circle at top right, rgba(94, 242, 255, 0.35), transparent 45%);

     --aw-shadow-xs: 0 6px 18px rgba(7, 43, 97, 0.06);
     --aw-shadow-sm: 0 10px 30px rgba(7, 43, 97, 0.10);
     --aw-shadow-md: 0 18px 48px rgba(7, 43, 97, 0.14);
     --aw-shadow-lg: 0 30px 70px rgba(7, 43, 97, 0.18);

     --aw-radius-sm: 14px;
     --aw-radius-md: 18px;
     --aw-radius-lg: 24px;
     --aw-radius-xl: 32px;

     --aw-transition-fast: 0.22s ease;
     --aw-transition: 0.32s cubic-bezier(0.22, 1, 0.36, 1);
     --aw-transition-slow: 0.55s cubic-bezier(0.22, 1, 0.36, 1);
 }

 /* =========================
   2. BASE / GLOBAL PATCH
   ========================= */
 html {
     scroll-behavior: smooth;
 }

 body {
     color: var(--aw-text);
     background:
         radial-gradient(circle at top left, rgba(94, 242, 255, 0.08), transparent 22%),
         radial-gradient(circle at right center, rgba(11, 95, 255, 0.05), transparent 28%),
         #ffffff;
 }

 img {
     max-width: 100%;
     height: auto;
 }

 .text-primary {
     color: var(--aw-primary) !important;
 }

 .text-muted {
     color: var(--aw-text-soft) !important;
 }

 .rounded-xl {
     border-radius: var(--aw-radius-lg) !important;
 }

 .shadow-xl {
     box-shadow: var(--aw-shadow-lg) !important;
 }

 .border {
     border-color: var(--aw-border) !important;
 }

 .bg-light {
     background: var(--aw-gradient-soft) !important;
 }

 /* Accesibilidad suave */
 .btn:focus,
 .form-control:focus,
 .custom-select:focus,
 a:focus {
     outline: none !important;
     box-shadow: 0 0 0 0.2rem rgba(21, 191, 253, 0.24) !important;
 }

 /* =========================
   3. HERO / INFORMACIÓN
   ========================= */
 #informacion {
     position: relative;
     overflow: hidden;
     background:
         linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 253, 255, 0.98) 42%, rgba(238, 247, 255, 0.88) 100%);
 }

 #informacion::before {
     content: "";
     position: absolute;
     inset: auto auto -120px -120px;
     width: 320px;
     height: 320px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(94, 242, 255, 0.22) 0%, rgba(94, 242, 255, 0) 72%);
     pointer-events: none;
 }

 #informacion::after {
     content: "";
     position: absolute;
     top: -100px;
     right: -80px;
     width: 340px;
     height: 340px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(11, 95, 255, 0.14) 0%, rgba(11, 95, 255, 0) 72%);
     pointer-events: none;
 }

 #informacion h1.display-3,
 #informacion .display-3 {
     font-weight: 800;
     line-height: 1.02;
     letter-spacing: -0.03em;
     color: var(--aw-deep);
     margin-bottom: 1rem;
 }

 #informacion .lead {
     font-size: 1.1rem;
     line-height: 1.75;
     color: var(--aw-text-soft);
     max-width: 640px;
 }

 #informacion .badge.badge-primary {
     background: linear-gradient(135deg, var(--aw-primary), var(--aw-primary-2));
     color: var(--aw-white);
     border: 0;
     box-shadow: 0 10px 25px rgba(11, 95, 255, 0.20);
     font-size: 0.76rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
 }

 #informacion .btn {
     min-height: 54px;
     font-weight: 700;
     transition: transform var(--aw-transition), box-shadow var(--aw-transition), background var(--aw-transition);
 }

 #informacion .btn-primary {
     background: var(--aw-gradient-main);
     border: none;
     box-shadow: 0 18px 36px rgba(11, 95, 255, 0.22);
 }

 #informacion .btn-primary:hover,
 #informacion .btn-primary:focus {
     transform: translateY(-2px);
     box-shadow: 0 22px 44px rgba(11, 95, 255, 0.28);
 }

 #informacion .btn-outline-dark {
     border: 1px solid rgba(7, 43, 97, 0.18);
     color: var(--aw-deep);
     background: rgba(255, 255, 255, 0.72);
     backdrop-filter: blur(10px);
 }

 #informacion .btn-outline-dark:hover,
 #informacion .btn-outline-dark:focus {
     background: var(--aw-white);
     color: var(--aw-primary);
     border-color: rgba(11, 95, 255, 0.25);
     transform: translateY(-2px);
 }

 #informacion .controls-hover,
 #informacion .carousel-cell {
     min-height: 100%;
 }

 #informacion .carousel-cell img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: saturate(1.08) contrast(1.03);
     transform: scale(1.01);
 }

 #informacion .flickity-page-dots {
     bottom: 18px;
 }

 #informacion .flickity-page-dots .dot {
     width: 10px;
     height: 10px;
     opacity: 1;
     background: rgba(255, 255, 255, 0.42);
     border: 1px solid rgba(255, 255, 255, 0.45);
     transition: all var(--aw-transition-fast);
 }

 #informacion .flickity-page-dots .dot.is-selected {
     width: 26px;
     border-radius: 999px;
     background: linear-gradient(90deg, #ffffff 0%, #5ef2ff 100%);
     box-shadow: 0 0 18px rgba(94, 242, 255, 0.45);
 }

 /* =========================
   4. SEARCH SECTION
   ========================= */
 #buscarSection {
     position: relative;
     background:
         linear-gradient(180deg, #f7fdff 0%, #f4fbff 25%, #eef8ff 100%);
 }

 #buscarSection::before {
     content: "";
     position: absolute;
     top: 0;
     left: -10%;
     width: 120%;
     height: 1px;
     background: linear-gradient(90deg, transparent 0%, rgba(21, 191, 253, 0.35) 50%, transparent 100%);
 }

 #buscarSection h2,
 #buscarSection h3.display-4,
 #buscarSection .h1 {
     color: var(--aw-deep);
     font-weight: 800;
     letter-spacing: -0.03em;
 }

 #buscarSection .lead {
     color: var(--aw-text-soft);
     line-height: 1.75;
 }

 #buscarSection .badge.badge-light {
     background: rgba(255, 255, 255, 0.76);
     border: 1px solid rgba(11, 95, 255, 0.14) !important;
     color: var(--aw-primary) !important;
     backdrop-filter: blur(8px);
 }

 /* =========================
   5. STATS / MÉTRICAS
   ========================= */
 #buscarSection .border.rounded-lg.bg-white,
 #buscarSection .stats-box,
 .stats-box {
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(11, 95, 255, 0.10) !important;
     border-radius: var(--aw-radius-md) !important;
     background:
         linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(243, 251, 255, 0.96) 100%) !important;
     box-shadow: var(--aw-shadow-xs);
     transition: transform var(--aw-transition), box-shadow var(--aw-transition), border-color var(--aw-transition);
 }

 #buscarSection .border.rounded-lg.bg-white::before,
 #buscarSection .stats-box::before,
 .stats-box::before {
     content: "";
     position: absolute;
     inset: 0 auto 0 0;
     width: 4px;
     background: var(--aw-gradient-main);
     opacity: 0.9;
 }

 #buscarSection .border.rounded-lg.bg-white:hover,
 #buscarSection .stats-box:hover,
 .stats-box:hover {
     transform: translateY(-4px);
     box-shadow: var(--aw-shadow-sm);
     border-color: rgba(11, 95, 255, 0.18) !important;
 }

 #buscarSection .h3,
 #buscarSection .h2,
 .stats-box .h2 {
     color: var(--aw-primary);
     font-weight: 800;
     letter-spacing: -0.03em;
 }

 /* =========================
   6. MAIN CARD / CONSULTA
   ========================= */
 #buscarSection .card {
     border: 1px solid rgba(11, 95, 255, 0.08);
     border-radius: var(--aw-radius-lg);
     overflow: hidden;
     background:
         var(--aw-gradient-glow),
         var(--aw-gradient-card);
     box-shadow: var(--aw-shadow-md);
     transition: transform var(--aw-transition), box-shadow var(--aw-transition), border-color var(--aw-transition);
 }

 #buscarSection .card:hover {
     transform: translateY(-6px);
     box-shadow: var(--aw-shadow-lg);
     border-color: rgba(11, 95, 255, 0.16);
 }

 #buscarSection .card-img-top {
     max-height: 260px;
     object-fit: cover;
     filter: saturate(1.08) contrast(1.02);
 }

 #buscarSection .card-body {
     position: relative;
 }

 #buscarSection .card-body h5,
 #buscarSection .card-body h6 {
     color: var(--aw-deep);
     font-weight: 800;
 }

 .glass-card {
     background: rgba(255, 255, 255, 0.82) !important;
     border: 1px solid rgba(255, 255, 255, 0.45) !important;
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
 }

 /* =========================
   7. FORM / SELECT / BUTTON
   ========================= */
 .formPaisBuscarRios .form-control,
 .formPaisBuscarRios .custom-select,
 #pais_buscar {
     min-height: 56px;
     border-radius: 999px !important;
     border: 1px solid rgba(11, 95, 255, 0.14);
     background: rgba(255, 255, 255, 0.96);
     color: var(--aw-text);
     padding-left: 1.15rem;
     padding-right: 2.6rem;
     box-shadow: none;
     transition: border-color var(--aw-transition-fast), box-shadow var(--aw-transition-fast), transform var(--aw-transition-fast);
 }

 .formPaisBuscarRios .form-control:hover,
 .formPaisBuscarRios .custom-select:hover,
 #pais_buscar:hover {
     border-color: rgba(11, 95, 255, 0.24);
 }

 .formPaisBuscarRios .form-control:focus,
 .formPaisBuscarRios .custom-select:focus,
 #pais_buscar:focus {
     border-color: rgba(21, 191, 253, 0.5);
     background: #fff;
     transform: translateY(-1px);
     box-shadow: 0 0 0 0.22rem rgba(94, 242, 255, 0.18) !important;
 }

 #buscarRiosPais,
 .btn.btn-primary.btn-block,
 .btn.btn-primary.btn-lg {
     position: relative;
     min-height: 56px;
     border-radius: 999px !important;
     border: none;
     font-weight: 800;
     letter-spacing: 0.01em;
     background: var(--aw-gradient-main);
     box-shadow: 0 18px 34px rgba(11, 95, 255, 0.22);
     overflow: hidden;
     transition: transform var(--aw-transition), box-shadow var(--aw-transition), filter var(--aw-transition);
 }

 #buscarRiosPais::before,
 .btn.btn-primary.btn-block::before,
 .btn.btn-primary.btn-lg::before {
     content: "";
     position: absolute;
     top: 0;
     left: -120%;
     width: 50%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
     transform: skewX(-20deg);
     transition: left 0.8s ease;
 }

 #buscarRiosPais:hover::before,
 .btn.btn-primary.btn-block:hover::before,
 .btn.btn-primary.btn-lg:hover::before {
     left: 140%;
 }

 #buscarRiosPais:hover,
 #buscarRiosPais:focus,
 .btn.btn-primary.btn-block:hover,
 .btn.btn-primary.btn-block:focus,
 .btn.btn-primary.btn-lg:hover,
 .btn.btn-primary.btn-lg:focus {
     transform: translateY(-2px);
     box-shadow: 0 22px 44px rgba(11, 95, 255, 0.28);
     filter: saturate(1.04);
 }

 #buscarRiosPais[disabled] {
     opacity: 0.88;
     cursor: not-allowed;
     transform: none !important;
 }

 /* =========================
   8. MENSAJES / FEEDBACK
   ========================= */
 #msgBuscar {
     min-height: 24px;
     font-weight: 600;
 }

 #msgBuscar .text-success,
 #msgBuscar .text-warning,
 #msgBuscar .text-danger,
 #msgBuscar .text-info {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.35rem;
     padding: 0.75rem 1rem;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.92);
     box-shadow: var(--aw-shadow-xs);
 }

 #msgBuscar .text-success {
     color: var(--aw-success) !important;
 }

 #msgBuscar .text-warning {
     color: #c67b00 !important;
 }

 #msgBuscar .text-danger {
     color: var(--aw-danger) !important;
 }

 #msgBuscar .text-info {
     color: var(--aw-primary) !important;
 }

 /* =========================
   9. RESULTADOS / LISTA RÍOS
   ========================= */
 #contenidoListaRios {
     position: relative;
 }

 #contenidoListaRios h3,
 #contenidoListaRios h4,
 #contenidoListaRios h5 {
     color: var(--aw-deep);
 }

 #contenidoListaRios .badge.badge-light {
     background: rgba(255, 255, 255, 0.8);
     border: 1px solid rgba(11, 95, 255, 0.14) !important;
 }

 #datosTablaRios .card,
 .card-rio {
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(11, 95, 255, 0.10) !important;
     border-left: 5px solid var(--aw-primary) !important;
     border-radius: var(--aw-radius-md) !important;
     background:
         radial-gradient(circle at top right, rgba(94, 242, 255, 0.14), transparent 30%),
         linear-gradient(180deg, #ffffff 0%, #f4fbff 100%);
     box-shadow: var(--aw-shadow-sm);
     transition: transform var(--aw-transition), box-shadow var(--aw-transition), border-color var(--aw-transition);
 }

 #datosTablaRios .card::after,
 .card-rio::after {
     content: "";
     position: absolute;
     inset: auto -20px -20px auto;
     width: 120px;
     height: 120px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(11, 95, 255, 0.08), rgba(11, 95, 255, 0) 70%);
     pointer-events: none;
 }

 #datosTablaRios .card:hover,
 .card-rio:hover {
     transform: translateY(-6px) scale(1.003);
     box-shadow: var(--aw-shadow-lg) !important;
     border-color: rgba(11, 95, 255, 0.18) !important;
 }

 #datosTablaRios .card-body,
 .card-rio .card-body {
     padding: 1.4rem 1.35rem;
 }

 #datosTablaRios h4,
 #datosTablaRios h5,
 .card-rio h4,
 .card-rio h5 {
     font-weight: 800;
     letter-spacing: -0.02em;
     color: var(--aw-primary);
 }

 #datosTablaRios .small strong,
 .card-rio .small strong {
     color: var(--aw-deep);
 }

 #datosTablaRios .bg-light,
 .card-rio .bg-light {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(239, 249, 255, 0.95) 100%) !important;
     border: 1px solid rgba(11, 95, 255, 0.08);
     border-radius: var(--aw-radius-sm);
 }

 /* =========================
   10. BADGES / MINERALES / ESTADO
   ========================= */
 .badge {
     font-weight: 700;
     letter-spacing: 0.02em;
 }

 .badge-pill,
 .badge-mineral {
     border-radius: 999px !important;
 }

 .badge-mineral {
     font-size: 0.7rem;
     text-transform: uppercase;
     padding: 0.48rem 0.68rem;
     box-shadow: 0 8px 18px rgba(7, 43, 97, 0.08);
 }

 .badge-warning {
     background: linear-gradient(135deg, #ffcc4d, #ffb000) !important;
     color: #4e3700 !important;
 }

 .badge-success {
     background: linear-gradient(135deg, #18c47d, #7ef3b9) !important;
     color: #0f4f33 !important;
 }

 .badge-info {
     background: linear-gradient(135deg, #42d8ff, #a4f5ff) !important;
     color: #09455c !important;
 }

 .badge-secondary {
     background: linear-gradient(135deg, #8b92b6, #c9d1ef) !important;
     color: #323957 !important;
 }

 .badge-primary {
     background: linear-gradient(135deg, var(--aw-primary), var(--aw-primary-2)) !important;
 }

 .badge-light.border {
     background: rgba(255, 255, 255, 0.85) !important;
     color: var(--aw-text) !important;
     border-color: rgba(11, 95, 255, 0.12) !important;
 }

 /* =========================
   11. BLOQUE PREMIUM / LOCKED
   ========================= */
 .alert.shadow-lg.rounded-xl,
 .alert.alert-warning {
     border: 1px solid rgba(255, 182, 72, 0.26) !important;
     border-radius: var(--aw-radius-lg) !important;
     background:
         radial-gradient(circle at top right, rgba(255, 182, 72, 0.12), transparent 32%),
         linear-gradient(180deg, #fffef9 0%, #fff8ea 100%) !important;
     box-shadow: var(--aw-shadow-md) !important;
 }

 .alert.alert-warning h3,
 .alert.alert-warning .alert-heading {
     color: #8a5800;
     font-weight: 800;
 }

 .alert.alert-warning .btn-primary {
     background: var(--aw-gradient-main);
     border: none;
 }

 .alert.alert-warning .btn-success,
 .btn-outline-success {
     border-radius: 999px;
     font-weight: 700;
     transition: all var(--aw-transition);
 }

 .btn-outline-success {
     border: 1px solid rgba(20, 184, 110, 0.28);
     color: #0b8250;
     background: rgba(255, 255, 255, 0.75);
 }

 .btn-outline-success:hover,
 .btn-outline-success:focus {
     background: #e9fff5;
     color: #086a41;
     transform: translateY(-2px);
 }

 /* =========================
   12. PUBLIAQUA / CONTENIDO
   ========================= */
 section .card.h-100,
 section .card.shadow-sm {
     border-radius: var(--aw-radius-md);
     overflow: hidden;
     border: 1px solid rgba(11, 95, 255, 0.08);
     transition: transform var(--aw-transition), box-shadow var(--aw-transition), border-color var(--aw-transition);
 }

 section .card.h-100:hover,
 section .card.shadow-sm:hover {
     transform: translateY(-5px);
     box-shadow: var(--aw-shadow-md);
     border-color: rgba(11, 95, 255, 0.16);
 }

 section .card h4 {
     color: var(--aw-deep);
     font-weight: 800;
 }

 section .card p {
     color: var(--aw-text-soft);
     line-height: 1.7;
 }

 /* =========================
   13. LOADERS / MICROINTERACCIONES
   ========================= */
 .spinner-border,
 .loader-inline {
     color: var(--aw-cyan);
 }

 .loader-inline {
     width: 1.5rem;
     height: 1.5rem;
     border-width: 0.2em;
 }

 .loaderpage {
     backdrop-filter: blur(2px);
 }

 /* Ripple visual opcional sobre cards */
 #datosTablaRios .card,
 #buscarSection .card,
 .stats-box,
 .border.rounded-lg.bg-white {
     will-change: transform, box-shadow;
 }

 /* =========================
   14. ANIMACIONES SUAVES
   ========================= */
 @keyframes awFloat {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-6px);
     }
 }

 @keyframes awPulseGlow {

     0%,
     100% {
         box-shadow: 0 0 0 rgba(94, 242, 255, 0);
     }

     50% {
         box-shadow: 0 0 28px rgba(94, 242, 255, 0.20);
     }
 }

 @keyframes awShimmer {
     0% {
         background-position: 200% 0;
     }

     100% {
         background-position: -200% 0;
     }
 }

 #informacion .badge.badge-primary,
 #buscarSection .badge.badge-primary {
     animation: awPulseGlow 3.8s ease-in-out infinite;
 }

 #buscarSection .card:hover .badge.badge-primary,
 #datosTablaRios .card:hover .badge.badge-primary {
     animation-duration: 2.6s;
 }

 /* =========================
   15. RESPONSIVE REAL
   ========================= */
 @media (min-width: 1400px) {

     #informacion h1.display-3,
     #informacion .display-3 {
         font-size: 4.1rem;
     }

     #buscarSection h2.display-4,
     #buscarSection .display-4 {
         font-size: 3rem;
     }

     #datosTablaRios .card-body {
         padding: 1.6rem 1.6rem;
     }
 }

 @media (max-width: 1199.98px) {

     #informacion h1.display-3,
     #informacion .display-3 {
         font-size: 3.15rem;
     }

     #buscarSection .card-img-top {
         max-height: 220px;
     }
 }

 @media (max-width: 991.98px) {
     #informacion {
         background: linear-gradient(180deg, #ffffff 0%, #f5fcff 100%);
     }

     #informacion .container,
     #buscarSection .container {
         padding-left: 1.2rem;
         padding-right: 1.2rem;
     }

     #informacion h1.display-3,
     #informacion .display-3 {
         font-size: 2.6rem;
         line-height: 1.05;
     }

     #informacion .lead,
     #buscarSection .lead {
         font-size: 1.02rem;
     }

     #buscarSection .row.no-gutters>[class*="col-"] {
         margin-bottom: 1rem;
     }

     #buscarSection .card {
         border-radius: 22px;
     }

     #datosTablaRios .card-body,
     .card-rio .card-body {
         padding: 1.15rem;
     }

     #datosTablaRios .border-left,
     #datosTablaRios .border-right,
     .card-rio .border-left,
     .card-rio .border-right {
         border-left: 0 !important;
         border-right: 0 !important;
     }
 }

 @media (max-width: 767.98px) {
     #informacion {
         border-bottom: 0 !important;
     }

     #informacion .container {
         padding-top: 2.2rem;
         padding-bottom: 2.2rem;
     }

     #informacion h1.display-3,
     #informacion .display-3 {
         font-size: 2.15rem;
         letter-spacing: -0.04em;
     }

     #informacion .lead {
         font-size: 0.98rem;
         line-height: 1.7;
     }

     #informacion .btn,
     #buscarRiosPais,
     .btn.btn-primary.btn-block,
     .btn.btn-primary.btn-lg,
     .formPaisBuscarRios .form-control,
     .formPaisBuscarRios .custom-select,
     #pais_buscar {
         min-height: 52px;
     }

     #buscarSection {
         padding-top: 2.2rem !important;
         padding-bottom: 2.2rem !important;
     }

     #buscarSection .display-4,
     #buscarSection h2,
     #buscarSection .h1 {
         font-size: 2rem;
         line-height: 1.08;
     }

     #buscarSection .card-body {
         padding: 1.1rem;
     }

     #buscarSection .card-img-top {
         max-height: 200px;
     }

     #datosTablaRios .card,
     .card-rio {
         border-left-width: 4px !important;
     }

     #datosTablaRios .card-body,
     .card-rio .card-body {
         padding: 1rem;
     }

     #datosTablaRios h4,
     #datosTablaRios h5,
     .card-rio h4,
     .card-rio h5 {
         font-size: 1.16rem;
     }

     .badge-mineral {
         font-size: 0.66rem;
         padding: 0.42rem 0.58rem;
     }

     .alert.alert-warning,
     .alert.shadow-lg.rounded-xl {
         padding: 1.4rem !important;
     }
 }

 @media (max-width: 575.98px) {

     #informacion .container,
     #buscarSection .container,
     #contenidoListaRios .container,
     section .container {
         padding-left: 1rem;
         padding-right: 1rem;
     }

     #informacion h1.display-3,
     #informacion .display-3 {
         font-size: 1.88rem;
     }

     #buscarSection .display-4,
     #buscarSection h2,
     #buscarSection .h1 {
         font-size: 1.72rem;
     }

     #buscarSection .lead,
     #informacion .lead {
         font-size: 0.95rem;
     }

     #msgBuscar .text-success,
     #msgBuscar .text-warning,
     #msgBuscar .text-danger,
     #msgBuscar .text-info {
         width: 100%;
         border-radius: 18px;
         padding: 0.8rem 0.9rem;
     }

     #datosTablaRios .small,
     .card-rio .small {
         font-size: 0.83rem;
     }

     #datosTablaRios .h6,
     .card-rio .h6 {
         font-size: 0.95rem;
     }
 }

 /* =========================
   16. MOTION REDUCTION
   ========================= */
 @media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {
         animation-duration: 0.001ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.001ms !important;
         scroll-behavior: auto !important;
     }
 }

 /* =========================================================
   PATCH EXTRA — FILTRO DE RESULTADOS + PAISES EN MAYÚSCULA
   ========================================================= */

 /* Select de países en mayúsculas */
 #pais_buscar,
 #pais_buscar option {
     text-transform: uppercase;
     letter-spacing: 0.04em;
     font-weight: 700;
 }

 /* Contenedor del buscador de resultados */
 .aw-results-search-wrap {
     position: relative;
     display: flex;
     align-items: center;
 }

 .aw-results-search-wrap #filtroRios {
     min-height: 58px;
     padding-left: 3.15rem;
     padding-right: 3.35rem;
     border-radius: 999px !important;
     border: 1px solid rgba(11, 95, 255, 0.14);
     background:
         linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 250, 255, 0.98) 100%);
     box-shadow: 0 12px 28px rgba(7, 43, 97, 0.08);
     color: var(--aw-text);
     transition:
         border-color var(--aw-transition-fast),
         box-shadow var(--aw-transition-fast),
         transform var(--aw-transition-fast);
 }

 .aw-results-search-wrap #filtroRios:hover {
     border-color: rgba(11, 95, 255, 0.24);
 }

 .aw-results-search-wrap #filtroRios:focus {
     border-color: rgba(21, 191, 253, 0.45);
     box-shadow: 0 0 0 0.24rem rgba(94, 242, 255, 0.18), 0 12px 28px rgba(7, 43, 97, 0.10);
     transform: translateY(-1px);
 }

 .aw-results-search-wrap #filtroRios::placeholder {
     color: #7b8ea2;
     font-weight: 500;
 }

 .aw-results-search-icon {
     position: absolute;
     left: 1.1rem;
     top: 50%;
     transform: translateY(-50%);
     z-index: 3;
     color: var(--aw-primary);
     font-size: 1rem;
     pointer-events: none;
 }

 .aw-results-clear {
     position: absolute;
     right: 0.65rem;
     top: 50%;
     transform: translateY(-50%);
     width: 40px;
     height: 40px;
     border: 0;
     border-radius: 50%;
     background: linear-gradient(135deg, rgba(11, 95, 255, 0.10), rgba(21, 191, 253, 0.14));
     color: var(--aw-primary);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition:
         transform var(--aw-transition-fast),
         background var(--aw-transition-fast),
         box-shadow var(--aw-transition-fast);
 }

 .aw-results-clear:hover,
 .aw-results-clear:focus {
     transform: translateY(-50%) scale(1.06);
     background: linear-gradient(135deg, rgba(11, 95, 255, 0.16), rgba(21, 191, 253, 0.22));
     box-shadow: 0 10px 22px rgba(11, 95, 255, 0.14);
     outline: none;
 }

 /* Contador del filtro */
 #contadorFiltroRios {
     min-height: 22px;
     font-weight: 500;
     line-height: 1.5;
 }

 #contadorFiltroRios strong {
     color: var(--aw-deep);
 }

 /* Estado vacío cuando no hay coincidencias */
 .aw-empty-filter-state {
     border: 1px dashed rgba(11, 95, 255, 0.20);
     border-radius: 24px;
     background:
         radial-gradient(circle at top center, rgba(94, 242, 255, 0.14), transparent 38%),
         linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 251, 255, 0.96) 100%);
     box-shadow: 0 16px 36px rgba(7, 43, 97, 0.08);
     margin-bottom: 1.5rem;
 }

 .aw-empty-filter-icon {
     width: 74px;
     height: 74px;
     border-radius: 50%;
     margin: 0 auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, rgba(11, 95, 255, 0.14), rgba(94, 242, 255, 0.22));
     color: var(--aw-primary);
     font-size: 1.45rem;
     box-shadow: 0 10px 24px rgba(11, 95, 255, 0.12);
 }

 /* Mejoras visuales en resultados al filtrar */
 .aw-rio-item .card {
     transition:
         transform var(--aw-transition),
         box-shadow var(--aw-transition),
         opacity var(--aw-transition);
 }

 /* Resumen de resultados */
 #resumenResultados strong {
     color: var(--aw-deep);
 }

 /* Responsive */
 @media (max-width: 991.98px) {
     .aw-results-search-wrap #filtroRios {
         min-height: 54px;
     }
 }

 @media (max-width: 767.98px) {
     .aw-results-search-wrap #filtroRios {
         min-height: 52px;
         font-size: 0.96rem;
         padding-left: 2.95rem;
         padding-right: 3rem;
     }

     .aw-results-search-icon {
         left: 1rem;
         font-size: 0.95rem;
     }

     .aw-results-clear {
         width: 36px;
         height: 36px;
         right: 0.55rem;
     }

     .aw-empty-filter-state {
         padding-left: 1rem !important;
         padding-right: 1rem !important;
         border-radius: 20px;
     }
 }

 @media (max-width: 575.98px) {
     #contadorFiltroRios {
         font-size: 0.85rem;
     }

     .aw-empty-filter-icon {
         width: 64px;
         height: 64px;
         font-size: 1.2rem;
     }
 }