/* ============================================================
   Cooservitec C.T.A. — Sistema de diseño (Bootstrap 5.3 / Tabler 1.0)
   Dorado  #BB8C16 / #D4A72C   Carbón  #1A1A1A   Verde  #139936
   ============================================================ */

:root {
  --coo-gold:        #BB8C16;
  --coo-gold-light:  #D4A72C;
  --coo-gold-rgb:    187, 140, 22;
  --coo-carbon:      #1A1A1A;
  --coo-carbon-rgb:  26, 26, 26;
  --coo-green:       #139936;
  --coo-green-rgb:   19, 153, 54;

  --tblr-primary:               var(--coo-gold);
  --tblr-primary-rgb:           var(--coo-gold-rgb);
  --tblr-link-color:            var(--coo-gold);
  --tblr-link-hover-color:      var(--coo-gold-light);
  --tblr-primary-text:          #8a6b10;
  --tblr-primary-bg-subtle:     #f7ecd2;
  --tblr-primary-border-subtle: #e9cf8f;

  --tblr-success:      var(--coo-green);
  --tblr-success-rgb:  var(--coo-green-rgb);

  --coo-radius:      0.75rem;
  --coo-radius-sm:   0.5rem;
  --coo-ease:        cubic-bezier(.2, .8, .2, 1);
}

/* ------------------------------------------------------------
   Transiciones globales — nada cambia de golpe, todo con
   micro-animación para que la interfaz se sienta viva
   ------------------------------------------------------------ */
.btn,
.form-control,
.form-select,
.form-check-input,
.nav-link,
.card,
.badge,
.page-link,
.dropdown-menu,
.alert,
a {
  transition: background-color .2s var(--coo-ease),
              border-color .2s var(--coo-ease),
              color .2s var(--coo-ease),
              box-shadow .2s var(--coo-ease),
              transform .15s var(--coo-ease);
}

/* ------------------------------------------------------------
   Sidebar vertical y barra superior (layout overlap) — carbón,
   el mismo color de fondo del escudo
   ------------------------------------------------------------ */
.navbar.navbar-vertical.navbar-dark {
  background-color: var(--coo-carbon) !important;
  border-right: none;
}

.navbar.navbar-dark.navbar-overlap {
  background-color: var(--coo-carbon) !important;
}

.navbar-vertical .navbar-nav .nav-link,
.navbar-overlap .navbar-nav .nav-link {
  border-radius: var(--coo-radius-sm);
}

.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical .navbar-nav .nav-link:hover,
.navbar-overlap .navbar-nav .nav-link.active,
.navbar-overlap .navbar-nav .nav-link:hover {
  background-color: rgba(var(--coo-gold-rgb), 0.25) !important;
  color: #ffffff !important;
}

/* ------------------------------------------------------------
   Botones — degradado dorado sutil + elevación al pasar el mouse
   ------------------------------------------------------------ */
.btn-primary {
  background: linear-gradient(135deg, var(--coo-gold), var(--coo-gold-light)) !important;
  border-color: var(--coo-gold) !important;
  color: #1a1a1a !important;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(var(--coo-gold-rgb), 0.35);
}
.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--coo-gold-rgb), 0.4);
  border-color: var(--coo-gold-light) !important;
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(var(--coo-gold-rgb), 0.35);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-warning,
.btn-outline-danger {
  border-width: 1.5px;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.btn:active {
  transform: scale(.98);
}

/* ------------------------------------------------------------
   Cards — esquinas más suaves y elevación ligera al pasar el
   mouse (solo donde el card no es un simple contenedor estático
   se nota; no molesta en los que no se interactúa)
   ------------------------------------------------------------ */
.card {
  border-radius: var(--coo-radius);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.card-header {
  border-bottom: 2px solid rgba(var(--coo-gold-rgb), 0.35);
  border-top-left-radius: var(--coo-radius);
  border-top-right-radius: var(--coo-radius);
}
.card-table,
.table-responsive {
  border-bottom-left-radius: var(--coo-radius);
  border-bottom-right-radius: var(--coo-radius);
}

/* ------------------------------------------------------------
   Formularios — foco dorado con resplandor suave, hover sutil
   ------------------------------------------------------------ */
.form-control,
.form-select {
  border-radius: var(--coo-radius-sm);
}
.form-control:hover,
.form-select:hover {
  border-color: rgba(var(--coo-gold-rgb), 0.5);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--coo-gold);
  box-shadow: 0 0 0 0.2rem rgba(var(--coo-gold-rgb), 0.25);
}
.form-check-input:checked {
  background-color: var(--coo-gold);
  border-color: var(--coo-gold);
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--coo-gold-rgb), 0.25);
}
.form-label {
  font-weight: 600;
  color: #2b2b2b;
}

/* ------------------------------------------------------------
   Badges, alertas, enlaces
   ------------------------------------------------------------ */
.badge {
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: .4em .7em;
}

.alert {
  border-radius: var(--coo-radius-sm);
  border-left: 4px solid currentColor;
}

.bg-primary { background-color: var(--coo-gold) !important; }
.bg-success { background-color: var(--coo-green) !important; }

.breadcrumb-item.active { color: var(--coo-gold); }

.nav-tabs .nav-link {
  border-radius: var(--coo-radius-sm) var(--coo-radius-sm) 0 0;
}
.nav-tabs .nav-link.active {
  color: var(--coo-gold);
  border-bottom-color: var(--coo-gold);
}

.page-item.active .page-link {
  background-color: var(--coo-gold) !important;
  border-color: var(--coo-gold) !important;
  color: #1a1a1a !important;
}
.page-link:hover {
  color: var(--coo-gold-light);
}

/* ------------------------------------------------------------
   Tablas — resaltado de fila más agradable
   ------------------------------------------------------------ */
.table-hover > tbody > tr {
  transition: background-color .15s var(--coo-ease);
}
.table-hover > tbody > tr:hover > * {
  background-color: rgba(var(--coo-gold-rgb), 0.06);
}