/* ==========================================================
   Harinas Guadalupe - Tema visual (SOLO UI)
   - Este archivo no cambia funcionalidad, solo estilos.
   - Se carga DESPUÉS de Site.css para sobrescribir colores.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

:root{
  --hg-blue:#008fc0;
  --hg-teal:#31c4c0;
  --hg-ink:#0f172a;
  --hg-muted:#64748b;
  --hg-card:rgba(255,255,255,.92);
  --hg-border:rgba(15,23,42,.12);
}

/* Tipografía y fondo general */
html,body{height:100%;}
body{
  font-family:Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--hg-ink);
  background: radial-gradient(1200px 800px at 15% 10%, rgba(49,196,192,.18), transparent 55%),
              radial-gradient(900px 700px at 85% 0%, rgba(0,143,192,.20), transparent 60%),
              #f6fbff;,
               #f6fbff;
}

/* Contenedor principal (RenderBody) */
.container{
  background:var(--hg-card);
  border:1px solid var(--hg-border);
  border-radius:18px;
  box-shadow:0 18px 55px rgba(2,8,23,.12);
  padding:22px;
  margin-top:22px;   /* respeta el padding-top del body */
  margin-bottom:70px;/* deja espacio para footer fijo */
}

/* Navbar (Bootstrap 2) */
.navbar.navbar-inverse .navbar-inner,
.navbar .navbar-inner{
  background: linear-gradient(90deg, var(--hg-blue), var(--hg-teal)) !important;
  border-color: rgba(0,0,0,.15) !important;
  box-shadow:0 10px 25px rgba(2,8,23,.18);
}
.navbar.navbar-inverse .brand,
.navbar .brand{
  color:#fff !important;
  font-weight:700;
  letter-spacing:.2px;
}
.navbar.navbar-inverse .nav > li > a,
.navbar .nav > li > a{
  color:rgba(255,255,255,.92) !important;
  text-shadow:none !important;
  font-weight:600;
}
.navbar .nav > li > a:hover,
.navbar .nav > li.active > a{
  color:#fff !important;
  background:rgba(255,255,255,.14) !important;
  border-radius:10px;
}

/* Botones */
.btn{
  border-radius:12px;
}
.btn-primary{
  background: linear-gradient(90deg, var(--hg-blue), var(--hg-teal)) !important;
  border-color: rgba(0,0,0,.12) !important;
  text-shadow:none !important;
  box-shadow:0 10px 20px rgba(0,143,192,.18);
}
.btn-primary:hover{
  filter: brightness(1.03);
}
.btn-success{
  border-radius:12px;
}
.btn:focus{ outline: none; }

/* Formularios */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
select, textarea{
  border-radius:12px !important;
  border-color: rgba(15,23,42,.18) !important;
  box-shadow:none !important;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(0,143,192,.55) !important;
  box-shadow:0 0 0 3px rgba(0,143,192,.18) !important;
}

/* Tablas */
.table, table{
  border-radius:14px;
  overflow:hidden;
}
.table thead th{
  background: rgba(0,143,192,.08);
  color:var(--hg-ink);
  border-bottom:1px solid rgba(15,23,42,.12) !important;
}
.table tbody tr:hover{
  background: rgba(49,196,192,.08);
}

/* Footer fijo */
#pie-pagina{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  border-top:1px solid var(--hg-border);
}
#pie-pagina p{
  margin:10px 0 14px;
  color:var(--hg-muted);
  text-align:center;
}

/* Links */
a{ color:var(--hg-blue); }
a:hover{ color:var(--hg-teal); }

/* Ajustes responsive básicos */
@media (max-width: 767px){
  .container{ border-radius:14px; padding:16px; margin-top:16px; }
  .navbar .nav > li > a{ padding:10px 12px; }
}



/* ==========================
   LOGIN (centrado y compacto)
   ========================== */
body.hg-auth{
  padding-top: 70px; /* navbar fixed-top */
}

body.hg-auth .container{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 90px; /* espacio para footer fijo */
}

.hg-auth-shell{
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.hg-auth-card{
  width: min(560px, 92vw);
  background: var(--hg-card);
  border: 1px solid var(--hg-border);
  border-radius: 20px;
  box-shadow: 0 22px 70px rgba(2,8,23,.14);
  padding: 30px 34px 26px;
}

.hg-auth-header{
  text-align: center;
  margin-bottom: 18px;
}

.hg-auth-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%),
              linear-gradient(135deg, var(--hg-blue), var(--hg-teal));
  box-shadow: 0 12px 26px rgba(0,143,192,.22);
}


.hg-auth-logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  display:block;
}

.hg-auth-title{
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .2px;
}

.hg-auth-subtitle{
  margin: 6px 0 0;
  color: var(--hg-muted);
  font-weight: 600;
}

/* Empuja el contenido del form un poco “hacia adentro” */
.hg-login-form{
  margin: 0;
  padding: 0 10px;
}

.hg-login-form .form-group{
  margin-bottom: 14px;
}


.hg-login-form.form-horizontal{ margin-left:0 !important; margin-right:0 !important; }
.hg-login-form .form-group{ margin-left:0 !important; margin-right:0 !important; }


/* Compatibilidad con las clases que trae tu vista (col-md-*) */
.hg-login-form .col-md-2,
.hg-login-form .col-md-10{
  float: none !important;
  width: 100% !important;
  margin-left: 0 !important;
}

.hg-login-form .control-label{
  display: block;
  width: 100% !important;
  text-align: left !important;
  margin: 0 0 6px !important;
  font-weight: 700;
  color: var(--hg-ink);
}

/* Inputs full-width */
.hg-login-form input[type="text"],
.hg-login-form input[type="email"],
.hg-login-form input[type="password"],
.hg-login-form .form-control{
  width: 100% !important;
  max-width: 100% !important;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

/* Botón centrado y más agradable */
.hg-login-form input[type="submit"].btn{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
}



/* Centrar reCAPTCHA y botón en Login */
.hg-center{ text-align:center; }
.hg-center .g-recaptcha{ display:inline-block; }
.hg-center input.btn{ display:inline-block; }

/* ====== Ajustes solicitados (Login) ====== */
/* Quitar franja/linea del footer fijo */
#pie-pagina{
  background: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
#pie-pagina hr{ display:none !important; margin:0 !important; border:0 !important; }

/* Centrado del reCAPTCHA y botón (por si bootstrap mete offsets) */
.hg-login-form .g-recaptcha{ display:inline-block; }
.hg-login-form .recaptcha-center,
.hg-login-form .btn-center{ text-align:center; }

/* Botón Entrar en azul HG */
.hg-login-form input[type="submit"].btn.btn-success{
  background: var(--hg-blue) !important;
  border-color: var(--hg-blue) !important;
}
.hg-login-form input[type="submit"].btn.btn-success:hover,
.hg-login-form input[type="submit"].btn.btn-success:focus{
  background: var(--hg-teal) !important;
  border-color: var(--hg-teal) !important;
}