@import url(https://fonts.googleapis.com/css?family=Open+Sans);

html,
body,
.main-container {
  height: 100%;
  font-family: 'Open Sans', sans-serif;
}

body {
  /*background: radial-gradient(#716EA3, #72A3D0);*/
  background: #241F1B;
}

.main {
  width: 20%;
}

/*
** FORM
*/
#form_fichaje #user,
#form_fichaje #pass {
  height: 70px;
  width: 90%;
  margin: auto;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 2.2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

#form_fichaje #user:focus,
#form_fichaje #pass:focus {
  background: rgb(0, 0, 0);
  border-color: rgb(233, 233, 233);

}

#user_submit {
  width: 80%;
  margin-left: 10%;
  height: 60px;
  line-height: 40px;
  font-size: 2.7rem;
  text-transform: uppercase;
  font-weight: 400;
  border-radius: 15px;
  border-color: #000;
  /*background: linear-gradient(#AE9D63, #716EA3);*/
  background: #FFF;
  color: #241F1B;
}

.hoverCSSClass:hover {
  background: linear-gradient(#777, #aaa);
}

::-webkit-input-placeholder {
  text-align: center;
  color: white;
}

:-moz-placeholder {
  /* Firefox 18- */
  text-align: center;
  color: white;
}

::-moz-placeholder {
  /* Firefox 19+ */
  text-align: center;
  color: white;
}

:-ms-input-placeholder {
  text-align: center;
  color: white;
}

@media (max-width: 1200px) {
  .main {
    width: 30%;
  }
}

@media (max-width: 992px) {
  .main {
    width: 50%;
  }
  #user,
  #user_submit {
    width: 80%;
    margin-left: 10%;
  }
}

@media (max-width: 768px) {
  .main {
    width: 80%;
  }
}

/*
/********************************************************************* ADMIN STYLES
*/
.main-cont {
  background-color: white;
  margin-top: 8rem;
  padding: 3rem;
  border-radius: 15px;
}

.error-mod {
  color: hsla(0, 100%, 50%, 1);
  border-color: hsla(0, 100%, 50%, 1);
}

.success-mod {
  color: hsla(120, 100%, 25%, 1);
  border-color: hsla(120, 100%, 25%, 1);
}

.btn:not([disabled]) {
  cursor: pointer;
}

.btn-anadir {
  color: #FFF;
  background-color: #241F1B;
}


.btn-excel {
  color: white;
  background-color: green;
}

/* Alto del navbar gestionado por variable, más flexible que fijar 'nav {height:...}' */
.navbar.navbar-light {
  --nav-h: 56px; /* alto por defecto */
}

@media (max-width: 767.98px) {
  .navbar.navbar-light { --nav-h: 48px; } /* un poco más compacto en móvil */
}

/* Aseguramos el alto mínimo del bloque navbar real (el que usas en cabecera) */
.navbar.navbar-light.fixed-top.bg-light {
  min-height: var(--nav-h);
}

.navbar-light .navbar-nav .nav-link,
#navbarCollapse ul.navbar-nav.mr-auto li  a {
  /*color: hsla(0, 7%, 24%, 0.8);*/
  color: #241F1B;
  text-transform: uppercase;
  font-size: 1.2em;
  font-weight: 500;
}

#navbarCollapse ul.navbar-nav.mr-auto li.dropdown.show ul li {
  padding: 10px;
}

.navbar-dark .navbar-nav .nav-link:hover,
ul.dropdown-menu.show li a:hover {
  text-decoration: underline;
}



/*
** BOTONES INFORME
*/

.button-container {
  padding-top: 28px;
}

input[type="checkbox"] {
  /* Double-sized Checkboxes */
  -ms-transform: scale(3); /* IE */
  -moz-transform: scale(3); /* FF */
  -webkit-transform: scale(3); /* Safari and Chrome */
  -o-transform: scale(3); /* Opera */
  transform: scale(3);
  margin-top: 15px;
}

/* Caja del select */
.select select {
  -webkit-appearance: none;  /* Safari/Chrome */
  -moz-appearance: none;     /* Firefox */
  appearance: none;

  width: 100%;
  height: 44px;
  padding: 0 44px 0 12px;    /* espacio para la flecha */
  border: 1px solid #aaaaaa; /* <-- borde */
  border-radius: .25rem;
  background-color: #ebebeb5c;    /* <-- fondo */
  color: #241F1B;
  font: inherit;
  line-height: 44px;         /* ayuda verticalmente */
  background-clip: padding-box; /* Firefox evita “bleed” */
  outline: none;
}

.select select:focus {
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(0,0,0,.1);
}

/* Flecha personalizada (SVG inline) */
.select::after {
  content: "";
  pointer-events: none;        /* no tapa el click */
  position: absolute;
  right: 20px;
  top: 60%;
  width: 35px;
  height: 35px;
  transform: translateY(-50%);
  background: no-repeat center / 14px 14px
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='black'><path d='M7 10l5 5 5-5z'/></svg>");
}

/* Quitar flecha de IE/Edge antiguos si aún te afectan */
select::-ms-expand {
  display: none;
}

input[type=text], input[type=password], input[type=email], select, input[type=time] {
  border-color: #aaaaaa;
  background-color: #ebebeb5c;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, select:focus, input[type=time]:focus {
  border-color: #000;
}


.error {
  padding: 0.25em;
  color: rgb(202, 19, 19);
  text-align: center;
  font-weight: 600;
  font-size: 18px;
}

/* === ALTURA GLOBAL DEL NAV (ajústala a tu gusto) === */
.navbar.navbar-expand-md.navbar-light.fixed-top.bg-light{
  --nav-h: 64px;        /* cámbialo si quieres 80px exactos */
  height: var(--nav-h); /* altura estricta, no min-height */
  padding: 0;           /* elimina padding vertical del navbar */
  display: flex;
  align-items: stretch; /* hijos se estiran al 100% de la altura */
}

/* Contenedor interno del nav (si lo hubiera), sin padding vertical extra */
.navbar.navbar-light .container,
.navbar.navbar-light .container-fluid {
  padding-top: 0;
  padding-bottom: 0;
}

/* === LOGO: sin padding ni line-height que añadan aire === */
.navbar.navbar-light .navbar-brand{
  padding: 0;
  margin: 0 1rem 0 0;   /* solo separación lateral */
  line-height: 0;       /* evita huecos por línea */
  height: 100%;
  display: flex;
  align-items: stretch; /* el img se estira a tope */
}

.navbar.navbar-light .navbar-brand img{
  display: block;       /* quita baseline gap inline */
  height: 100% !important;  /* ocupa EXACTO el alto del nav */
  width: auto !important;
  margin: 0;
  object-fit: contain;  /* por si el svg/png no es proporcional */
}

/* === MENÚ: enlaces y dropdown centrados sin desajustes === */
.navbar.navbar-light .navbar-nav{
  align-items: stretch;           /* cada <li> ocupa toda la altura */
}

.navbar.navbar-light .navbar-nav .nav-link,
.navbar.navbar-light .navbar-nav .dropdown > a,
.navbar.navbar-light .navbar-nav .dropdown-toggle{
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;            /* texto/iconos centrados verticalmente */
  line-height: 1;                 /* sin extra */
}

/* Ajuste sutil del caret del dropdown para quedar óptico */
.navbar.navbar-light .navbar-nav .dropdown-toggle::after{
  margin-left: .35rem;
  transform: translateY(1px);
}

/* === BOTÓN ROJO “Salir” (sin icono) === */
.navbar.navbar-light .navbar-nav .nav-link[href$="logout.php"]{
  background: #dc3545;
  color: #fff !important;
  height: 40px;                  /* botón más compacto */
  align-self: center;            /* centrado dentro del nav de 64/80px */
  padding: 0 .75rem;
  border-radius: .5rem;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-right: 1rem;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .2s, opacity .2s, transform .02s;
  text-transform: none;
}
.navbar.navbar-light .navbar-nav .nav-link[href$="logout.php"]:hover,
.navbar.navbar-light .navbar-nav .nav-link[href$="logout.php"]:focus{
  text-decoration: none;
  opacity: .95;
  box-shadow: 0 6px 14px rgba(220,53,69,.35);
}
.navbar.navbar-light .navbar-nav .nav-link[href$="logout.php"]:active{
  transform: translateY(1px);
}

.navbar.navbar-light .navbar-nav .nav-link[href$="logout.php"] i{
 margin-right: 15px;
}

/* === RESPONSIVE: si quieres barra algo más baja en móvil === */
@media (max-width: 767.98px){
  .navbar.navbar-expand-md.navbar-light.fixed-top.bg-light{
    --nav-h: 56px;
  }
}