/* ==========================================================
   CERCA FEATURE — MI RED · ESTILOS COMPARTIDOS
   Contactos + Directorio
   Fuente: src/features/mi-red/mi-red.css
   ========================================================== */

#view-contactos-emergencia .cerca-red-v2,
#view-directorio-emergencia .cerca-dir-v2{
  --mr-bg:#020711;
  --mr-panel:#07111f;
  --mr-panel2:#0b1727;
  --mr-line:rgba(145,196,220,.10);
  --mr-text:#f5fbff;
  --mr-soft:#b6c8d2;
  --mr-muted:#718895;
  --mr-cyan:#4de4ff;
  --mr-blue:#59a9ff;
  --mr-violet:#927cff;
  --mr-green:#42e99a;
  --mr-red:#ff617c;
  --mr-amber:#ffc861;

  min-height:100%;
  padding:
    12px
    16px
    calc(150px + env(safe-area-inset-bottom,0px));

  color:var(--mr-text);

  background:
    radial-gradient(
      circle at 92% 3%,
      rgba(77,228,255,.07),
      transparent 24%
    ),
    radial-gradient(
      circle at 5% 25%,
      rgba(146,124,255,.045),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #040b16,
      #020711
    );
}

#view-contactos-emergencia .cerca-red-v2 *,
#view-directorio-emergencia .cerca-dir-v2 *{
  box-sizing:border-box;
}

#view-contactos-emergencia .mr2-hero,
#view-directorio-emergencia .mr2-hero{
  margin-top:12px;
  padding:17px;

  border-radius:25px;
  border:1px solid rgba(77,228,255,.11);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(77,228,255,.13),
      transparent 34%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(146,124,255,.075),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(10,24,39,.97),
      rgba(4,11,20,.99)
    );

  box-shadow:0 22px 52px rgba(0,0,0,.20);
}

#view-contactos-emergencia .mr2-kicker,
#view-directorio-emergencia .mr2-kicker{
  color:#70deed;
  font-size:9px;
  font-weight:950;
  letter-spacing:.12em;
}

#view-contactos-emergencia .mr2-hero h1,
#view-directorio-emergencia .mr2-hero h1{
  margin:5px 0 0;

  color:#f5fbff;
  font-size:24px;
  line-height:1.05;
  font-weight:940;
  letter-spacing:-.04em;
}

#view-contactos-emergencia .mr2-hero p,
#view-directorio-emergencia .mr2-hero p{
  margin:8px 0 0;

  color:#8197a5;
  font-size:11px;
  line-height:1.42;
}

@media (max-width:360px){
#view-contactos-emergencia .cerca-red-v2,
  #view-directorio-emergencia .cerca-dir-v2{
    padding-inline:13px;
  }
#view-contactos-emergencia .mr2-hero h1,
  #view-directorio-emergencia .mr2-hero h1{
    font-size:21px;
  }
}

#view-contactos-emergencia,
#view-directorio-emergencia{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
}

#view-contactos-emergencia > #cercaContactosV2Page,
#view-directorio-emergencia > #cercaDirectorioV2Page{
  width:100%!important;
  max-width:100%!important;

  height:100%!important;
  min-height:0!important;
  max-height:100%!important;

  overflow-y:auto!important;
  overflow-x:hidden!important;

  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;

  padding:
    14px
    16px
    calc(
      210px +
      env(safe-area-inset-bottom,0px)
    )!important;

  scroll-padding-bottom:
    calc(
      210px +
      env(safe-area-inset-bottom,0px)
    )!important;

  scrollbar-gutter:auto!important;
}

#view-contactos-emergencia .mr2-hero,
#view-directorio-emergencia .mr2-hero{
  margin-top:2px!important;
}

#view-contactos-emergencia .cerca-red-v2,
#view-directorio-emergencia .cerca-dir-v2{
  position:relative!important;
  z-index:1!important;
}

@media (max-width:420px){
#view-contactos-emergencia > #cercaContactosV2Page,
  #view-directorio-emergencia > #cercaDirectorioV2Page{
    padding:
      12px
      12px
      calc(
        220px +
        env(safe-area-inset-bottom,0px)
      )!important;

    scroll-padding-bottom:
      calc(
        220px +
        env(safe-area-inset-bottom,0px)
      )!important;
  }
}