/* =========================================================
   ELECCION 2027
   Hoja de estilos general
   Identidad: Guinda + Verde suave + Gris
   ========================================================= */

/* =========================================================
   1. COLORES GENERALES
   ========================================================= */

:root {
  --guinda: #508e5c;
  --guinda-oscuro: #b1c2a3;
  --guinda-suave: #6f9f8e;

  --verde: #6f9f8e;
  --verde-suave: #a9cbbf;
  --verde-claro: #dcebe6;

  --gris-menu: #263238;
  --gris-menu-oscuro: #202b30;
  --gris-texto: #37474f;

  --blanco: #ffffff;
}

/* =========================================================
   2. FONDO GENERAL
   ========================================================= */

html,
body {
  min-height: 100%;
}

body {
  background-image: url("../images/logo27.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-color: #f4f6f9 !important;
}

/* =========================================================
   3. ADMINLTE TRANSPARENTE
   Permite que se vea logo27.png
   ========================================================= */

.wrapper,
.content-wrapper,
.content,
.container,
.container-fluid {
  background: transparent !important;
  background-color: transparent !important;
}

.content-wrapper {
  background-image: none !important;
}

/* =========================================================
   4. BARRA SUPERIOR
   ========================================================= */

.main-header.navbar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.main-header .nav-link {
  color: #455a64 !important;
}

.main-header .nav-link:hover {
  color: var(--guinda) !important;
}

/* =========================================================
   5. MENU LATERAL
   ========================================================= */

.main-sidebar,
.main-sidebar.sidebar-dark-primary {
  background: var(--gris-menu) !important;
}

/* Marca superior */

.brand-link {
  background: var(--gris-menu-oscuro) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Usuario */

.user-panel {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.user-panel .info a {
  color: #ffffff !important;
}

/* =========================================================
   6. OPCIONES DEL MENU
   ========================================================= */

.main-sidebar .nav-sidebar > .nav-item > .nav-link,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.bg-primary,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.bg-info,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.bg-success,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.bg-warning {
  background: transparent !important;
  background-color: transparent !important;

  color: #e8eeee !important;

  margin: 3px 7px !important;
  width: auto !important;

  border-radius: 7px !important;
  border-left: 3px solid transparent !important;

  box-shadow: none !important;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Iconos */

.main-sidebar .nav-sidebar .nav-link .nav-icon {
  color: var(--verde-suave) !important;
}

/* Hover */

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
  background: rgba(139, 16, 36, 0.15) !important;
  color: #ffffff !important;

  border-left-color: var(--guinda-suave) !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover .nav-icon {
  color: #ffffff !important;
}

/* Opción activa */

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background: var(--guinda) !important;
  background-color: var(--guinda) !important;

  color: #ffffff !important;

  border-left: 3px solid var(--verde-suave) !important;

  box-shadow: none !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active .nav-icon {
  color: #ffffff !important;
}

/* Flecha */

.main-sidebar .nav-sidebar .nav-link .right {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* =========================================================
   7. CERRAR SESION
   ========================================================= */

.main-sidebar .nav-sidebar .nav-link.bg-danger,
.main-sidebar .nav-sidebar .nav-link.logout-link {
  background: transparent !important;
  background-color: transparent !important;

  color: #e6c1c8 !important;

  margin: 3px 7px !important;
  width: auto !important;

  border-radius: 7px !important;
  border-left: 3px solid var(--guinda) !important;

  box-shadow: none !important;
}

.main-sidebar .nav-sidebar .nav-link.bg-danger .nav-icon,
.main-sidebar .nav-sidebar .nav-link.logout-link .nav-icon {
  color: var(--guinda-suave) !important;
}

.main-sidebar .nav-sidebar .nav-link.bg-danger:hover,
.main-sidebar .nav-sidebar .nav-link.logout-link:hover {
  background: var(--guinda) !important;
  color: #ffffff !important;
}

.main-sidebar .nav-sidebar .nav-link.bg-danger:hover .nav-icon,
.main-sidebar .nav-sidebar .nav-link.logout-link:hover .nav-icon {
  color: #ffffff !important;
}

/* =========================================================
   8. TITULO DEL DASHBOARD
   ========================================================= */

.titulo-dashboard {
  color: var(--gris-texto) !important;
  font-weight: 600;
  margin-bottom: 14px;
}

/* =========================================================
   9. TARJETAS DEL DASHBOARD
   Clases que estamos usando actualmente
   ========================================================= */

.tarjeta-eleccion {
  position: relative !important;

  min-height: 145px !important;
  margin-bottom: 25px !important;

  background: rgba(255, 255, 255, 0.94) !important;

  border: 1px solid rgba(111, 159, 142, 0.35) !important;
  border-left: 4px solid var(--guinda) !important;

  border-radius: 14px !important;

  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.09) !important;

  overflow: hidden !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

.tarjeta-eleccion:hover {
  transform: translateY(-3px);

  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.14) !important;
}

/* Contenido */

.tarjeta-contenido {
  padding: 18px 75px 45px 20px !important;
}

/* Número */

.tarjeta-numero {
  font-size: 34px !important;
  line-height: 38px !important;

  font-weight: 700 !important;

  color: var(--guinda) !important;
}

/* Texto */

.tarjeta-titulo {
  margin-top: 5px !important;

  font-size: 15px !important;
  font-weight: 600 !important;

  color: var(--gris-texto) !important;
}

/* Icono grande */

.tarjeta-icono {
  position: absolute !important;

  top: 20px !important;
  right: 22px !important;

  font-size: 45px !important;

  color: rgba(111, 159, 142, 0.28) !important;
}

/* Pie de tarjeta */

.tarjeta-enlace {
  position: absolute !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  padding: 8px 12px !important;

  background: var(--guinda) !important;

  color: #ffffff !important;

  text-align: center !important;
  text-decoration: none !important;

  font-size: 13px !important;
  font-weight: 500 !important;

  transition: background 0.2s ease;
}

.tarjeta-enlace:hover {
  background: var(--guinda-oscuro) !important;
  color: #ffffff !important;
}

/* =========================================================
   10. TARJETAS NORMALES
   Formularios, listados, etc.
   ========================================================= */

.card {
  background: rgba(255, 255, 255, 0.95) !important;

  border-radius: 10px !important;

  border: 1px solid rgba(0, 0, 0, 0.06);

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}

/* =========================================================
   11. TABLAS
   ========================================================= */

.table {
  background: rgba(255, 255, 255, 0.96) !important;
}

.table thead th {
  background: #f6f8f7 !important;

  color: var(--gris-texto) !important;

  border-bottom: 2px solid var(--guinda) !important;
}

.table-hover tbody tr:hover {
  background-color: rgba(111, 159, 142, 0.1) !important;
}

/* =========================================================
   12. BOTONES
   ========================================================= */

.btn-primary {
  background-color: var(--guinda) !important;
  border-color: var(--guinda) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--guinda-oscuro) !important;
  border-color: var(--guinda-oscuro) !important;
}

/* Botones success conservan un verde suave */

.btn-success {
  background-color: #648f80 !important;
  border-color: #648f80 !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #52786b !important;
  border-color: #52786b !important;
}

/* =========================================================
   13. FORMULARIOS
   ========================================================= */

.form-control:focus {
  border-color: var(--guinda-suave) !important;

  box-shadow: 0 0 0 0.2rem rgba(139, 16, 36, 0.12) !important;
}

/* =========================================================
   14. ENLACES
   ========================================================= */

.content-wrapper a:not(.btn):not(.tarjeta-enlace) {
  color: var(--guinda);
}

.content-wrapper a:not(.btn):not(.tarjeta-enlace):hover {
  color: var(--guinda-oscuro);
}

/* =========================================================
   15. FOOTER
   ========================================================= */

.main-footer {
  background: rgba(255, 255, 255, 0.94) !important;

  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;

  color: #607d8b !important;
}

.main-footer a {
  color: var(--guinda) !important;
}

/* =========================================================
   16. LOGIN
   ========================================================= */

.login-page {
  background-image: url("../images/logo27.png") !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;

  background-color: #f4f6f9 !important;
}

.login-box .card {
  background: rgba(255, 255, 255, 0.96) !important;

  border: none !important;

  border-radius: 12px !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16) !important;
}

.login-card-body {
  background: transparent !important;
}

/* Botón del login */

.login-page .btn-primary,
.login-page .btn-success {
  background: var(--guinda) !important;
  border-color: var(--guinda) !important;
  color: #ffffff !important;
}

.login-page .btn-primary:hover,
.login-page .btn-success:hover {
  background: var(--guinda-oscuro) !important;
  border-color: var(--guinda-oscuro) !important;
}

/* =========================================================
   17. RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
  body,
  .login-page {
    background-attachment: scroll !important;
    background-position: center center !important;
  }

  .tarjeta-eleccion {
    min-height: 135px !important;
  }

  .tarjeta-numero {
    font-size: 30px !important;
  }

  .tarjeta-icono {
    font-size: 40px !important;
  }
}

/* =====================================================
   LOGO SUPERIOR DEL MENÚ
   ===================================================== */

.brand-link.brand-eleccion27 {
  height: 58px !important;
  min-height: 58px !important;
  padding: 6px 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #263238 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

  overflow: hidden !important;
}

.brand-eleccion27 .logo-largo {
  display: block !important;

  width: auto !important;
  max-width: 185px !important;

  height: auto !important;
  max-height: 43px !important;

  object-fit: contain !important;

  margin: 0 auto !important;
  padding: 0 !important;

  float: none !important;
  position: static !important;
}

/* ==========================================
   ELECCION2027 - COLORES DEL MENU LATERAL
   ========================================== */

/* Menús principales: verde original */
.main-sidebar .nav-sidebar > .nav-item > .nav-link,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background-color: #4f9061 !important;
  color: #ffffff !important;
  border-radius: 5px;
}

/* Submenús: gris claro original */
.main-sidebar .nav-treeview > .nav-item > .nav-link,
.main-sidebar .nav-treeview > .nav-item > .nav-link.active {
  background-color: #eeeeee !important;
  color: #263238 !important;
  border-radius: 5px;
}

/* Al pasar el mouse */
.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
  background-color: #39754f !important;
  color: #ffffff !important;
}

.main-sidebar .nav-treeview > .nav-item > .nav-link:hover {
  background-color: #dddddd !important;
  color: #263238 !important;
}

/* Iconos del menú */
.main-sidebar .nav-sidebar > .nav-item > .nav-link i {
  color: #ffffff !important;
}

/* Iconos del submenú */
.main-sidebar .nav-treeview > .nav-item > .nav-link i {
  color: #263238 !important;
}