/* Estilo del menú adaptado a los componentes Ionic de la aplicación. */
ion-segment.main-nav-v213 {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end;
  width:100%; height:102px; background:#fff; border-bottom:1px solid #d9dede;
  box-shadow:0 8px 16px rgba(28,55,55,.12); position:relative; overflow:visible;
}
.main-nav-v213 ion-segment-button {
  position:relative; height:102px; min-height:0; min-width:0; max-width:none; margin:0;
  color:#414848; background:transparent; border:0; cursor:pointer;
  --padding-start:0; --padding-end:0; --padding-top:0; --padding-bottom:24px;
  --background:transparent; --background-checked:transparent; --background-hover:transparent; --background-focused:transparent; border-radius:0; box-shadow:none; --indicator-color:transparent;
  --color:#414848; --color-checked:#00766e;
}
.main-nav-v213 ion-segment-button::part(native) {
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:5px; overflow:visible; box-sizing:border-box;
}
.main-nav-v213 ion-segment-button::part(indicator) { display:none; }
.main-nav-v213 .nav-icon-v213 {
  display:block; width:52.5px; height:48px; flex:0 0 48px; margin:0; object-fit:contain;
  box-sizing:border-box; padding:1px 4.5px;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.14)) drop-shadow(0 8px 9px rgba(0,90,82,.14));
  transition:transform 180ms ease,filter 180ms ease;
}
.main-nav-v213 [value="formulario"] img { padding:2px 5.5px; }
.main-nav-v213 [value="assigned"] img { padding:1px 1.25px; }
.main-nav-v213 [value="reports"] img { padding:0; }
.main-nav-v213 [value="notes"] img { padding:.5px 4px; }
.main-nav-v213 ion-label {
  margin:0!important; font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  font-size:12px!important; font-weight:600; line-height:1!important;
  letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; text-shadow:none; transition:color 180ms ease;
}
@media(hover:hover) {
  .main-nav-v213 ion-segment-button:hover img { transform:translateY(-3px) scale(1.035); filter:drop-shadow(0 4px 2px rgba(0,0,0,.14)) drop-shadow(0 12px 11px rgba(0,105,96,.2)); }
  .main-nav-v213 ion-segment-button:hover ion-label { color:#00766e; }
}
.main-nav-v213 .segment-button-checked ion-label { color:#00766e; font-weight:650; }
.main-nav-v213 .segment-button-checked::after {
  content:""; position:absolute; left:12%; right:12%; bottom:0; height:3px;
  background:linear-gradient(90deg,#008c82,#00a091,#008c82); box-shadow:0 2px 5px rgba(0,143,132,.20);
}
.main-nav-v213 .segment-button-checked img { transform:translateY(-2px); filter:drop-shadow(0 3px 2px rgba(0,0,0,.16)) drop-shadow(0 10px 12px rgba(0,118,107,.22)); }
.main-nav-v213 ion-segment-button:active img { transform:translateY(1px) scale(.98); }
.main-nav-v213 .segment-unread-badge {
  position:absolute; top:calc(100% + 3px); bottom:auto; left:50%; transform:translateX(-50%); margin:0!important;
  min-width:23px; height:16px; padding:0 5px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; --background:transparent; background:linear-gradient(180deg,#f5362d,#d91812 65%,#ba100c);
  color:white; font:700 10px "Segoe UI",Arial,sans-serif; border:1px solid rgba(160,0,0,.25);
  box-shadow:inset 0 1px 1px #ffffff73,0 2px 0 #a80d08,0 4px 6px rgba(0,0,0,.18);
}
@media(max-width:900px) {
  ion-segment.main-nav-v213,.main-nav-v213 ion-segment-button { height:132px; }
  .main-nav-v213 ion-segment-button { --padding-bottom:24px; }
  .main-nav-v213 .nav-icon-v213 { width:70px; height:65px; flex-basis:65px; padding:2px 4.5px; }
  .main-nav-v213 ion-label { font-size:11px!important; }
  .main-nav-v213 .segment-unread-badge { min-width:23px; height:16px; font-size:10px; border-radius:6px; }
}
@media(max-width:480px) {
  ion-segment.main-nav-v213,.main-nav-v213 ion-segment-button { height:108px; }
  .main-nav-v213 ion-segment-button { --padding-bottom:24px; }
  .main-nav-v213 ion-segment-button::part(native) { gap:4px; }
  .main-nav-v213 .nav-icon-v213 { width:56px; height:52px; flex-basis:52px; padding:2px 3px; }
  .main-nav-v213 ion-label { font-size:11px!important; letter-spacing:.1px; }
  .main-nav-v213 .segment-unread-badge { bottom:auto; min-width:23px; height:16px; font-size:10px; border-radius:6px; padding:0 5px; }
}
@media(prefers-reduced-motion:reduce) { .main-nav-v213 img,.main-nav-v213 ion-label { transition:none!important; } }
/* Ajuste exclusivo de PC: iconos +15% y opciones agrupadas al centro. */
@media (min-width:901px) {
  ion-segment.main-nav-v213 {
    grid-template-columns:repeat(4,200px);
    justify-content:center;
  }
  .main-nav-v213 .nav-icon-v213 {
    width:60.375px; height:55.2px; flex-basis:55.2px;
    padding:1.15px 5.175px;
  }
  .main-nav-v213 [value="formulario"] img { padding:2.3px 6.325px; }
  .main-nav-v213 [value="assigned"] img { padding:1.15px 1.4375px; }
  .main-nav-v213 [value="reports"] img { padding:0; }
  .main-nav-v213 [value="notes"] img { padding:.575px 4.6px; }
}
/* Reducir únicamente los cuatro iconos de navegación un 10%, conservando su espacio y alineación. */
.main-nav-v213 .nav-icon-v213 { scale:0.9; transform-origin:center; }

@media (min-width:901px) { .main-nav-v213 .nav-icon-v213 { scale:0.75; } }

/* PC: tamaño visible +10% frente a v228 y menos espacio real en la cabecera. */
@media (min-width:901px) {
  ion-header:has(.main-nav-v213) > ion-toolbar:first-child {
    --min-height:44px;
    --padding-top:0;
    --padding-bottom:0;
  }
  ion-header > ion-toolbar:has(.main-nav-v213) {
    --min-height:84px;
    --padding-top:0;
    --padding-bottom:0;
    --background:#fff;
  }
  ion-segment.main-nav-v213,
  .main-nav-v213 ion-segment-button { height:84px; }
  .main-nav-v213 ion-segment-button { --padding-top:0; --padding-bottom:22px; }
  .main-nav-v213 ion-segment-button::part(native) { gap:3px; }
  .main-nav-v213 .nav-icon-v213 {
    scale:1;
    width:49.809375px;
    height:45.54px;
    flex-basis:45.54px;
    padding:.94875px 4.269375px;
  }
  .main-nav-v213 [value="formulario"] img { padding:1.8975px 5.218125px; }
  .main-nav-v213 [value="assigned"] img { padding:.94875px 1.1859375px; }
  .main-nav-v213 [value="reports"] img { padding:0; }
  .main-nav-v213 [value="notes"] img { padding:.474375px 3.795px; }
}