/* ===== Home Page Styles ===== */
/* Extraído de las inline <style> del original home.html */

.panel-card {
  background: #111111;
  border: 1px solid #222222;
  border-radius: 0.75rem;
}

.kpi-card-new {
  background: #111111;
  border: 1px solid #222222;
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.kpi-card-highlight {
  border: 1px solid rgba(255, 107, 44, 0.5);
}

.kpi-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.kpi-value-new {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.kpi-subtitle {
  font-size: 0.75rem;
  color: #666;
}

/* Watermark background */
.bg-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 25vw;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.02);
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

.search-input-new {
  background: #1A1A1A;
  border: 1px solid #333;
  border-radius: 0.5rem;
  color: white;
  padding: 0.875rem 1rem 0.875rem 2.5rem;
  width: 100%;
  outline: none;
  transition: all 0.2s;
}

.search-input-new:focus {
  border-color: var(--orange);
}

.action-btn-new {
  background: #111111;
  border: 1px solid #333;
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  transition: all 0.2s;
  cursor: pointer;
}

.action-btn-new:hover {
  border-color: rgba(255, 107, 44, 0.6);
  background: #161616;
}

.icon-box {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  background: rgba(255, 107, 44, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF6B2C;
  margin-right: 1rem;
}

.nav-grid-card {
  background: #111111;
  border: 1px solid #222222;
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
}

.nav-grid-card:hover {
  background: #161616;
  border-color: #333;
}

/* Visibility Toggle Button */
#btnToggleRecaudacion {
  padding: 0.25rem;
  margin: -0.25rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#btnToggleRecaudacion:hover {
  background: rgba(255, 255, 255, 0.05);
}