/* ============================================================
   Garden Home — Sistema de Reservaciones
   assets/css/estilos.css
   ============================================================ */

:root {
  --gh-verde:     #7A9E7E;
  --gh-verde-dk:  #4e7053;
  --gh-cafe:      #8C7E74;
  --gh-cafe-dk:   #5a4f48;
  --gh-crema:     #FAF7F2;
  --gh-parchm:    #F0EBE1;
  --gh-gold:      #B8975A;
  --gh-rose:      #C4806A;
  --gh-ink:       #2A2420;
  --gh-muted:     #8C7E74;
}

/* ── Base ─────────────────────── */
body {
  background: var(--gh-crema);
  color: var(--gh-ink);
  font-family: 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Navbar ───────────────────── */
.gh-navbar {
  background: var(--gh-ink) !important;
  border-bottom: 3px solid var(--gh-verde);
  padding: .75rem 1.5rem;
}
.gh-navbar .navbar-brand { font-weight: 600; letter-spacing: .04em; }
.gh-logo-icon { font-size: 1.3rem; }
.gh-navbar .nav-link { color: rgba(255,255,255,.7) !important; font-size: .85rem; transition: color .2s; }
.gh-navbar .nav-link:hover,
.gh-navbar .nav-link.active { color: #fff !important; }
.gh-navbar .nav-link.active { border-bottom: 2px solid var(--gh-verde); }
.gh-badge-rol {
  background: var(--gh-verde);
  font-size: .65rem; letter-spacing: .12em; padding: .35em .7em;
}

/* ── Wrapper & Footer ─────────── */
.gh-wrapper { flex: 1; padding: 1.8rem 1.5rem; }
.gh-footer {
  background: var(--gh-ink); color: rgba(255,255,255,.45);
  padding: .8rem 1.5rem; font-size: .78rem; margin-top: auto;
}

/* ── Login ────────────────────── */
.gh-login-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--gh-ink) 0%, #3d3028 100%);
  display: flex; align-items: center; justify-content: center;
}
.gh-login-card {
  background: var(--gh-crema);
  border-radius: .5rem;
  padding: 2.5rem 2rem;
  width: 100%; max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.gh-login-logo {
  text-align: center; margin-bottom: 1.8rem;
}
.gh-login-logo .icon { font-size: 2.5rem; }
.gh-login-logo h1 {
  font-size: 1.5rem; font-weight: 600;
  color: var(--gh-ink); margin-top: .4rem;
}
.gh-login-logo p { font-size: .8rem; color: var(--gh-muted); }

/* ── Cards ────────────────────── */
.gh-card {
  background: #fff;
  border: 1px solid rgba(122,158,126,.2);
  border-radius: .5rem;
  padding: 1.5rem;
  height: 100%;
}
.gh-card-stat {
  border-left: 4px solid var(--gh-verde);
}
.gh-card-stat .stat-num {
  font-size: 2.2rem; font-weight: 700; color: var(--gh-ink); line-height: 1;
}
.gh-card-stat .stat-lbl {
  font-size: .78rem; color: var(--gh-muted); letter-spacing: .06em; text-transform: uppercase;
}
.gh-card-stat .stat-icon { font-size: 2rem; opacity: .25; }

/* ── Página título ────────────── */
.gh-page-title {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: .8rem;
}
.gh-page-title h2 {
  font-size: 1.3rem; font-weight: 600; color: var(--gh-ink); margin: 0;
}
.gh-page-title .breadcrumb { margin: 0; font-size: .8rem; }

/* ── Botones ──────────────────── */
.btn-gh-primary {
  background: var(--gh-verde); border-color: var(--gh-verde); color: #fff;
}
.btn-gh-primary:hover { background: var(--gh-verde-dk); border-color: var(--gh-verde-dk); color: #fff; }

.btn-gh-secondary {
  background: var(--gh-cafe); border-color: var(--gh-cafe); color: #fff;
}
.btn-gh-secondary:hover { background: var(--gh-cafe-dk); border-color: var(--gh-cafe-dk); color: #fff; }

/* ── Tabla ────────────────────── */
.gh-table { font-size: .87rem; }
.gh-table thead th {
  background: var(--gh-parchm);
  color: var(--gh-cafe-dk);
  font-weight: 600; font-size: .75rem;
  letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 2px solid rgba(122,158,126,.3);
}
.gh-table tbody tr:hover { background: rgba(122,158,126,.05); }

/* ── Badges de estado ─────────── */
.badge-confirmada  { background: #d1fae5; color: #065f46; }
.badge-pendiente   { background: #fef3c7; color: #92400e; }
.badge-cancelada   { background: #fee2e2; color: #991b1b; }

/* ── Formulario ───────────────── */
.gh-form-section {
  background: #fff;
  border: 1px solid rgba(122,158,126,.2);
  border-radius: .5rem;
  padding: 1.5rem;
  margin-bottom: 1.2rem;
}
.gh-form-section h6 {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gh-verde); margin-bottom: 1rem; padding-bottom: .4rem;
  border-bottom: 1px solid rgba(122,158,126,.2);
}
.form-label { font-size: .82rem; font-weight: 500; color: var(--gh-cafe-dk); }
.form-control:focus, .form-select:focus {
  border-color: var(--gh-verde);
  box-shadow: 0 0 0 .2rem rgba(122,158,126,.25);
}

/* ── Calendario ───────────────── */
.gh-calendar-wrap {
  background: #fff;
  border: 1px solid rgba(122,158,126,.2);
  border-radius: .5rem;
  padding: 1.2rem;
}
.fc-toolbar-title { font-size: 1.1rem !important; font-weight: 600; color: var(--gh-ink); }
.fc-button-primary {
  background: var(--gh-verde) !important;
  border-color: var(--gh-verde-dk) !important;
}
.fc-button-primary:hover {
  background: var(--gh-verde-dk) !important;
}
.fc-event {
  border-radius: 3px;
  font-size: .75rem;
  border: none !important;
}
.fc-day-today { background: rgba(122,158,126,.08) !important; }

/* ── Alerta disponibilidad ────── */
.gh-disponible   { color: #065f46; background: #d1fae5; border-left: 4px solid #10b981; }
.gh-ocupado      { color: #991b1b; background: #fee2e2; border-left: 4px solid #ef4444; }

/* ── Responsive tweaks ────────── */
@media (max-width: 576px) {
  .gh-wrapper { padding: 1rem .8rem; }
  .gh-card-stat .stat-num { font-size: 1.7rem; }
  .gh-page-title { flex-direction: column; align-items: flex-start; }
}