/* mobile/app/apoderado/css/main.css */

/* ===== Fondo general app apoderado ===== */
body {
  /* color de respaldo por si la imagen no carga */
  background-color: #f5f7fb;

  /* imagen de fondo */
  background-image: url('/mobile/img/bg-mobile.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;   /* opcional: efecto “quieto” */
  background-size: cover;         /* que cubra toda la pantalla */
}

/* Chips / pills para alumnos */
.chip-alumno {
  border-radius: 999px;
  border: 1px solid #dee2e6;
  padding: 0.3rem 0.75rem;
  font-size: .85rem;
  margin-right: .4rem;
  margin-bottom: .4rem;
  background-color: #fff;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.chip-alumno span {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-alumno.activo {
  border-color: #0d6efd;
  background-color: rgba(13,110,253,0.07);
  color: #0d6efd;
}

/* Badge/acento naranjo (lo puedes usar en más cards) */
.badge-accent {
  background-color: #f7b32b;
  color: #212529;
}
.border-accent {
  border-left: 4px solid #f7b32b;
}

/* ===== Topbar común ===== */
.topbar {
  background-color: #0d6efd;   /* azul primary */
  border-bottom: none;
}
.topbar .navbar-brand {
  color: #ffffff;
  font-weight: 600;
}
.topbar .navbar-brand:focus,
.topbar .navbar-brand:hover {
  color: #ffffff;
}

/* Icono perfil en topbar */
.topbar-profile-icon {
  width: 42px;
  height: 42px;
}

/* Círculo de fondo: naranja más claro */
.topbar-profile-bg {
  fill: #f7b32b;   /* naranjo clarito */
}

/* Silueta de usuario: naranja principal */
.topbar-profile-user {
  fill: #f8e4c0;   /* naranjo fuerte */
}

/* Efecto tap en icono perfil */
#btnPerfil:active .topbar-profile-icon {
  transform: scale(0.96);
  transition: transform 0.08s ease-out;
}

/* ===== Menú inferior (bottom-nav) ===== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 1px solid #dee2e6;
  z-index: 1000;
}

/* Botones del menú: un poco más altos y cómodos de tocar */
.bottom-nav .nav-item-btn {
  flex: 1 1 0;
  border: none;
  background: transparent;
  padding-top: 0.4rem;
  padding-bottom: 0.35rem;
  font-family: inherit;
  font-size: .7rem;
  color: #6c757d;
}

/* Íconos: un poco más grandes */
.bottom-nav .nav-item-btn svg {
  display: block;
  margin: 0 auto 2px;
  width: 24px;
  height: 24px;
}

/* Color de los íconos (gris medio oscuro) */
.bottom-nav .nav-item-btn svg path {
  fill: #6c757d; /* plomo medio oscuro */
}

/* Ícono cuando la pestaña está activa (azul como el texto activo) */
.bottom-nav .nav-item-btn.active {
  color: #0d6efd;
}
.bottom-nav .nav-item-btn.active svg path {
  fill: #0d6efd;
}

/* Texto debajo del ícono */
.bottom-nav .nav-item-btn div {
  font-size: 0.8rem;
  margin-top: 0.1rem;
}

.topbar-logo {
  width: 42px; 
  height: 42px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.nav-item-btn {
  color: #6c757d;          /* gris normal */
}

.nav-item-btn[data-nav="asistencia"] svg {
  width: 26px;   /* prueba 22, 24, 26… */
  height: 26px;
}

.nav-item-btn svg {
  width: 22px;
  height: 22px;
}

/* Wrapper del ícono de mensajes para poder posicionar el badge */
.nav-icon-wrapper {
  position: relative;
  display: inline-block;
}

/* Badge global de mensajes no leídos en el menú inferior */
.mj-nav-badge {
  position: absolute;
  top: -4px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;

  background-color: #f7b32b;   /* mismo naranjo que badge-accent */
  color: #212529;              /* letra oscura */

  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px #ffffff; /* aro blanco alrededor */
  pointer-events: none;          /* el click sigue siendo del botón */
}



/* ====== Bottom nav: alineación y tamaños ====== */
.bottom-nav {
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
}

.bottom-nav .d-flex {
  height: 56px;              /* alto fijo de la barra */
}

.bottom-nav .nav-item-btn {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 6px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* iconos: mismo tamaño para todos */
.bottom-nav .nav-item-btn svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* wrapper del icono de Mensajes (para el badge) */
.bottom-nav .nav-item-btn .nav-icon-wrapper {
  position: relative;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* badge de mensajes, se mantiene arriba a la derecha */
.bottom-nav .nav-item-btn .mj-nav-badge {
  position: absolute;
  top: -3px;
  right: -6px;
}

/* texto bajo el icono: misma altura y tamaño */
.bottom-nav .nav-item-btn > div:last-child {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1;
}

/* colores por defecto / activo */
.bottom-nav .nav-item-btn svg,
.bottom-nav .nav-item-btn > div:last-child {
  color: #6b7280; /* gris */
}

.bottom-nav .nav-item-btn.active svg,
.bottom-nav .nav-item-btn.active > div:last-child {
  color: #0d6efd; /* azul activo */
}