/* ===============  Tema base Costasur Seguridad  =============== */
:root{
  --cs-dark:#2B2B2B;
  --cs-light:#FFFFFF;
  --cs-muted:#f5f5f5;
  --cs-muted-2:#f9f9f9;
  --cs-radius-lg:30px;
  --cs-transition:all .3s ease;
}

/* Reset mínimo de paneles (Bootstrap 3) */
.panel { border-radius: 8px; border:1px solid var(--cs-dark); }
.panel.height { min-height: 380px; }
.panel-heading{
  background-color:var(--cs-dark)!important;
  color:var(--cs-light)!important;
  font-weight:700;
  border-color:var(--cs-dark);
}
.panel-title{ font-size:16px; display:flex; align-items:center; gap:.5rem }

/* Área de políticas */
.panel-body.politicas{
  border-left:5px solid var(--cs-dark);
  background-color:var(--cs-muted-2);
  padding:20px;
}

/* Tipografías utilitarias */
.sansserif, .sansserifa{ font-family: Verdana, Helvetica, sans-serif; }
.sansserif{ text-align: justify; }
.texto{ font-size:20px; }
h1,h2,h3{ text-align:center }

/* Botón temático */
.btn-custom{
  background-color:var(--cs-dark);
  color:var(--cs-light);
  border-radius:var(--cs-radius-lg)!important;
  border:1px solid var(--cs-dark);
  transition:var(--cs-transition);
  padding:10px 25px!important;
  font-weight:700;
  display:inline-block;
  text-align:center;
}
.btn-custom:hover,
.btn-custom:focus{
  background-color:var(--cs-light);
  color:var(--cs-dark);
  border:1px solid var(--cs-dark);
  text-decoration:none;
}

/* Navbar */
.navbar-custom{
  background-color: rgba(43,43,43,.9)!important;
  border:none!important;
  box-shadow:none!important;
  padding:10px 0;
  margin-bottom:30px;
}
.navbar-custom .navbar-header{ display:flex; align-items:center; }
.logo-header-home img{ height:50px; margin-left:10px }

/* Inputs: alto y estética consistente */
.input-group .form-control{
  height:42px;
  box-shadow:none;
  border-radius:4px;
}

/* Utilitario: forzar mayúsculas en inputs de texto */
.input-uppercase{ text-transform: uppercase; }

/* Ajuste específico para formularios del módulo de seguridad */
.panel-body {
  padding-bottom: 10px !important;
}

#loginbox .form-group {
  margin-bottom: 0 !important;
}

#loginbox .col-sm-12.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* =========================================================
   Ajustes visuales suaves para formularios de seguridad
   ========================================================= */

/* Panel general */
.panel {
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.panel:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* Encabezado */
.panel-heading {
  background-color: #2B2B2B !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 16px;
  border-radius: 12px 12px 0 0 !important;
  padding: 12px 18px;
}

/* Panel body más compacto */
.panel-body {
  padding: 25px 25px 15px 25px !important;
}

/* Inputs */
.input-group .form-control {
  height: 42px;
  border-radius: 8px !important;
  border: 1px solid #ccc;
  box-shadow: none !important;
  font-size: 15px;
  transition: all 0.2s ease;
}
.input-group .form-control:focus {
  border-color: #2B2B2B;
  box-shadow: 0 0 4px rgba(43, 43, 43, 0.3);
}

/* Botones suaves */
.btn-custom {
  background-color: #2B2B2B;
  color: #fff;
  border-radius: 50px !important;
  padding: 10px 30px;
  font-weight: 500;
  font-size: 15px;
  border: none;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: all 0.25s ease;
}
.btn-custom:hover {
  background-color: #fff;
  color: #2B2B2B;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}
.btn-custom:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Alineación de los botones */
#loginbox .col-sm-12.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* Transición de entrada del cuadro (animación suave) */
#loginbox {
  animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ====== Header logueado (suave y consistente) ====== */
.cs-navbar {
  background-color: rgba(43,43,43,.95) !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  padding: 8px 0;
  margin-bottom: 20px;
}
.cs-navbar .logo-header-home img { height: 48px; }
.cs-navbar .navbar-header { display:flex; align-items:center; }
.cs-navbar .cs-navbar-right {
  display:flex; align-items:center; gap:14px; justify-content:flex-end; width:100%;
}
.session-pill{
  background:#f5f5f5; color:#333; border-radius:20px;
  padding:6px 12px; font-size:13px; white-space:nowrap;
}
.cs-welcome{ color:#fff; font-weight:600; white-space:nowrap; }
.cs-account.btn{ border-radius:20px; padding:6px 14px; }
.dropdown-menu{ border-radius:10px; overflow:hidden; }
.dropdown-menu>li>a{ padding:8px 14px; }
.dropdown-menu>li>a:hover{ background:#f0f0f0; }

/* Modales con estética del tema */
.cs-modal .modal-header{
  background:#2B2B2B; color:#fff; border-top-left-radius:6px; border-top-right-radius:6px;
}
.cs-modal .modal-footer .btn-custom{ margin-left:6px; }