html, body {
font-family: 'Inter', sans-serif;
background-color: #f4f6f8;
min-height: 100%;
margin: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.layout-wrapper {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.main-content {
  flex: 1;
  padding-top: 72px; /* espacio para navbar fixed */
  background-color: #f4f6f8;
}

.main-content__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 18px 24px;
}

.app-footer {
  margin-top: auto;
  padding: 0.75rem 1.5rem;
  background: #062f55;
  color: #ffffff;
  font-size: 0.82rem;
  text-align: right;
}

.app-footer .content {
  margin: 0;
}

.app-footer em {
  color: #ffffff;
}

.navbar {
min-height: 80px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
background-color: #00264d;
}

iframe {
border: none;
width: 100%;
height: 100%;
}

.navbar-item {
color: rgb(241, 2, 2); /* color normal */
transition: background-color 0.3s ease, color 0.3s ease;
}
.navbar-item:focus,
.navbar-item:hover {
color: #07f02e;
}

.navbar-start {
display: flex;
align-items: center; /* centra verticalmente */
}

.app-info {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 10px; /* separación del logo */
line-height: 1.2;
}

.app-info__name {
color: #ffffff;
font-weight: bold;
font-size: 1.1rem;
}

.app-info__clock {
color: #ffffff;
font-size: 0.8rem;
}

.user-pill {
display: flex;
align-items: center;
background: rgba(255,255,255,0.1);
border-radius: 999px;
padding: 5px 12px;
transition: 0.2s;
}

.user-pill:hover {
background: rgba(255,255,255,0.2);
}

.user-avatar {
width: 32px;
height: 32px;
background: #1d4ed8;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}

.user-name-text {
  color: #ffffff;
  font-size: large;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}

.user-name-text:hover,
.user-name-text:focus,
.user-name-text:active {
  color: #1d4ed8;
}

.navbar-dropdown {
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.logo-sisc {
max-height: 75px; /* evita que crezca demasiado */
min-height: 65px;
}

.footer {
background-color: #00264d;
color: white;
padding: 1rem 2rem;
font-size: 0.85rem;
}

/* Transiciones suaves */
.fade-in {
animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
from {
    opacity: 0;
    transform: translateY(10px);
}

to {
    opacity: 1;
    transform: translateY(0);
}
}


.navbar-burger span,
.navbar-burger:hover span,
.navbar-burger.is-active span {
background-color: #ffffff;   /* white burger lines */
}


/* Mobile only (Bulma's breakpoint: < 1024px) */
@media (max-width: 1023px) {
/* The slide-down panel */
.navbar-menu {
    background-color: #00264d !important; /* dark blue panel instead of white */
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* Links inside the panel */
.navbar-menu .navbar-item,
.navbar-menu .navbar-link {
    color: #ffffff !important;           /* readable on dark bg */
}

.navbar-menu .navbar-item:hover,
.navbar-menu .navbar-link:hover,
.navbar-menu .navbar-item:focus {
    color: #ffffff !important;           /* your accent on hover */
    background-color: rgba(255,255,255,0.06);
}

/* If you ever use dropdowns */
.navbar-dropdown {
    background-color: #00264d !important;
    border-top-color: rgba(255,255,255,0.15);
}
.navbar-dropdown .navbar-item {
    color: #ffffff !important;
}

/* Caret color for .navbar-link that has dropdown */
.navbar-link::after {
    border-color: #ffffff !important;
}
}

/* Desktop: keep items white, accent on hover (already in your CSS) */
.navbar-item { color: #000000; }
.navbar-item:hover, .navbar-item:focus { color: #ffffff; }