/* Mate Tinta Disparate Cloud - Branding */

:root {
  --crema: #F0EBD8;
  --verde: #2D4A2D;
  --mostaza: #C9922A;
  --crema-oscura: #E8E0C8;
  --texto-oscuro: #1A2E1A;
}

/* Globales */
body, html, #app {
  background-color: var(--crema) !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--texto-oscuro) !important;
}

/* Header */
header {
  background-color: var(--verde) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

header .logo img {
  border-radius: 50% !important;
  border: 1px solid var(--mostaza) !important;
}

header .title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  color: var(--crema) !important;
}

/* Sidebar */
#sidebar {
  background-color: var(--verde) !important;
  color: var(--crema) !important;
}

#sidebar .action:hover {
  background-color: rgba(201, 146, 42, 0.2) !important;
}

/* Botones y Acciones */
.button, .action, i {
  color: var(--mostaza) !important;
}

.button--raised {
  background-color: var(--mostaza) !important;
  color: var(--crema) !important;
}

/* Archivos e Items */
.item {
  background-color: #fff !important;
  border-bottom: 1px solid var(--crema-oscura) !important;
}

.item:hover {
  background-color: var(--crema-oscura) !important;
}

/* Login */
.login-wrapper {
  background-color: var(--verde) !important;
}

#login {
  background-color: var(--crema) !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important;
}

#login h1 {
  font-family: 'Playfair Display', serif !important;
  color: var(--verde) !important;
}

#login input[type="submit"] {
  background-color: var(--mostaza) !important;
  color: var(--crema) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}