/* ============================================================
   PORTAL TRIBUTARIO — TEMA CORPORATIVO
   ============================================================ */

:root {
  --azul-corporativo: #0d253f;
  --azul-claro: #16385c;
  --dorado: #c29b38;
  --dorado-claro: #e0c069;
  --gris-fondo: #f4f6f9;
  --gris-borde: #e2e6ea;
}

body {
  background-color: var(--gris-fondo);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- LAYOUT GENERAL ---------- */
.app-container {
  display: flex;
  min-height: 100vh;
}

.sidebar-espaciador {
  width: 280px;
  flex-shrink: 0;
}

.sidebar-flotante {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background: linear-gradient(180deg, var(--azul-corporativo) 0%, var(--azul-claro) 100%);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  z-index: 100;
}

.sidebar-contenido {
  padding: 24px 18px;
}

.contenido-principal {
  flex-grow: 1;
  padding: 32px 24px;
  min-height: 100vh;
}

/* ---------- SIDEBAR ---------- */
.sidebar-flotante img {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sidebar-flotante hr {
  opacity: 0.3;
  margin: 20px 0;
}

.sidebar-flotante .btn {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
}

.sidebar-flotante .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.sidebar-flotante .nav-link {
  border-radius: 8px;
  margin-bottom: 4px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.sidebar-flotante .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-flotante .nav-pills .nav-link.active {
  background-color: var(--dorado);
  color: var(--azul-corporativo) !important;
  font-weight: 700;
}

/* ---------- TARJETAS ---------- */
.card {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(13, 37, 63, 0.08) !important;
  transition: box-shadow 0.25s ease;
}

.card:hover {
  box-shadow: 0 6px 20px rgba(13, 37, 63, 0.12) !important;
}

.card-body h3, .card-body h4, .card-body h5, .card-body h6 {
  letter-spacing: 0.2px;
}

/* Borde superior de acento en tarjetas de resultado/liquidación */
.border-success {
  border-top: 4px solid #198754 !important;
  border-radius: 14px !important;
}

.border-warning {
  border-top: 4px solid var(--dorado) !important;
  border-radius: 14px !important;
}

/* ---------- BOTONES ---------- */
.btn {
  border-radius: 8px !important;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 0.5rem 1.1rem;
  transition: all 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

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

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

/* ---------- TABLAS ---------- */
.table {
  border-radius: 10px;
  overflow: hidden;
  background-color: white;
}

.table thead th {
  background-color: var(--azul-corporativo) !important;
  color: white !important;
  font-weight: 600;
  border: none !important;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  padding: 12px 14px;
}

.table tbody td {
  vertical-align: middle;
  padding: 10px 14px;
  font-size: 0.9rem;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #f9fafc;
}

/* ---------- BADGES ---------- */
.badge {
  font-weight: 600;
  padding: 0.4em 0.7em;
  border-radius: 6px;
  letter-spacing: 0.2px;
}

/* ---------- ALERTAS ---------- */
.alert {
  border: none;
  border-radius: 10px;
  border-left: 4px solid transparent;
}

.alert-success { border-left-color: #198754; }
.alert-warning { border-left-color: var(--dorado); }
.alert-danger  { border-left-color: #dc3545; }
.alert-info    { border-left-color: #0dcaf0; }
.alert-secondary { border-left-color: #6c757d; }

/* ---------- ENCABEZADOS DE SECCIÓN (H3/H5 con línea dorada) ---------- */
h3.fw-bold, h5.fw-bold {
  position: relative;
  padding-bottom: 10px;
}

/* ---------- SWITCHES / CHECKLISTS ---------- */
.form-check-input:checked {
  background-color: var(--dorado) !important;
  border-color: var(--dorado) !important;
}

/* ---------- SCROLLBAR SIDEBAR ---------- */
.sidebar-flotante::-webkit-scrollbar {
  width: 6px;
}
.sidebar-flotante::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* ---------- RESPONSIVE: sidebar colapsa en pantallas pequeñas ---------- */
@media (max-width: 768px) {
  .sidebar-espaciador { width: 0; }
  .sidebar-flotante { width: 100%; height: auto; position: relative; }
  .contenido-principal { padding: 16px; }
}