/* =========================================================
   Tech Form System (Bootstrap-friendly) — REWRITE
   Fixes:
   - Revert any "wide" font feel: no global font-family changes here
   - Reduce excessive rounding (buttons/toolbars looked odd)
   - Keep modern cards/inputs
   - Scope offcanvas styling so it doesn't mess with button bars
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --tf-bg: #ffffff;
  --tf-muted: #6b7280;
  --tf-text: #111827;
  --tf-border: #e5e7eb;
  --tf-soft: #f8fafc;
  --tf-ring: rgba(13,110,253,.18);

  /* Softer, less “bubble” */
  --tf-radius: 12px;
  --tf-radius-sm: 10px;
  --tf-radius-btn: 8px;
}

/* ---------- Building blocks ---------- */
.tf-card{
  background: var(--tf-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  box-shadow: 0 10px 26px rgba(16,24,40,.06);
}

.tf-card-header{
  padding: 12px 14px;
  border-bottom: 1px solid var(--tf-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.tf-title{
  font-size: .98rem;
  font-weight: 800;
  color: var(--tf-text);
  letter-spacing: .15px;
  margin: 0;
}

.tf-subtitle{
  margin: 2px 0 0;
  font-size: .82rem;
  color: var(--tf-muted);
}

.tf-card-body{ padding: 14px; }

.tf-section{
  padding: 12px;
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-sm);
  background: #fff;
}

.tf-divider{
  height: 1px;
  background: var(--tf-border);
  margin: 12px 0;
}

.tf-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: .66rem;
  font-weight: 800;
  color: var(--tf-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.tf-help{
  font-size: .80rem;
  color: var(--tf-muted);
  margin-top: 6px;
}

/* Inputs */
.tf-control{
  width: 100%;
  background: var(--tf-soft);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-sm);
  padding: .6rem .75rem;
  color: var(--tf-text);
  
  font-size: .9rem;
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.tf-control:focus{
  background: #fff;
  border-color: rgba(13,110,253,.5);
  box-shadow: 0 0 0 4px var(--tf-ring);
}
.tf-control::placeholder{ color: #9ca3af; font-weight: 500; }

/* Layout helpers */
.tf-row{ display:grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px){
  .tf-row.cols-2{ grid-template-columns: 1fr 1fr; }
  .tf-row.cols-3{ grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- Buttons (less rounded) ---------- */
.tf-btn{
  border-radius: var(--tf-radius-btn);
  padding: .52rem .85rem;
  font-weight: 800;
  letter-spacing: .15px;
  border: 1px solid transparent;
  box-shadow: 0 10px 18px rgba(16,24,40,.08);
}

.tf-btn-primary{
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}
.tf-btn-primary:hover{ filter: brightness(.97); }

.tf-btn-ghost{
  background: #fff;
  border-color: var(--tf-border);
  color: var(--tf-text);
  box-shadow: none;
}
.tf-btn-ghost:hover{ background: var(--tf-soft); }

/* Badges */
.tf-badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: .28rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--tf-border);
  background: #fff;
  font-size: .75rem;
  color: var(--tf-text);
}

.tf-kpi{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tf-kpi .tf-badge{ background: var(--tf-soft); }

/* Alerts */
.tf-alert{
  border-radius: var(--tf-radius-sm);
  border: 1px solid var(--tf-border);
  padding: 10px 12px;
  background: #fff;
}
.tf-alert-warn{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.10);
  color: #92400e;
}

/* Check rows */
.tf-check{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-sm);
  background: #fff;
  cursor: pointer;
  user-select:none;
  transition: background .12s ease, border-color .12s ease;
}
.tf-check:hover{ background: var(--tf-soft); }
.tf-check.active{
  border-color: rgba(13,110,253,.45);
  background: rgba(13,110,253,.08);
}

/* Pills */
.tf-pill{
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .70rem;
  font-weight: 800;
  border: 1px solid var(--tf-border);
  background: #fff;
  color: var(--tf-text);
}
.tf-pill.on{
  background:#0d6efd;
  border-color:#0d6efd;
  color:#fff;
}

/* =========================================================
   Offcanvas styling (SCOPED) — Avoid messing with top button bars
   Apply only inside .fdk-newres or inside #resPanelContent
   (Pick the one you actually have; leaving both is safe)
   ========================================================= */

/* If your offcanvas content container is #resPanelContent, this is ideal */
#resPanelContent .card,
.offcanvas #resPanelContent .card{
  border: 1px solid var(--tf-border) !important;
  border-radius: var(--tf-radius) !important;
  box-shadow: 0 10px 26px rgba(16,24,40,.06) !important;
}

#resPanelContent .card-header,
.offcanvas #resPanelContent .card-header{
  background: #fff !important;
  border-bottom: 1px solid var(--tf-border) !important;
  border-radius: var(--tf-radius) var(--tf-radius) 0 0 !important;
  padding: 12px 14px !important;
}

#resPanelContent .card-body,
.offcanvas #resPanelContent .card-body{
  padding: 14px !important;
}

/* Labels + controls only for the form content */
#resPanelContent label,
.offcanvas #resPanelContent label{
  
  color: var(--tf-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

#resPanelContent .form-control,
#resPanelContent .custom-select,
#resPanelContent select.form-control,
#resPanelContent textarea.form-control,
.offcanvas #resPanelContent .form-control,
.offcanvas #resPanelContent .custom-select,
.offcanvas #resPanelContent select.form-control,
.offcanvas #resPanelContent textarea.form-control{
  background: var(--tf-soft) !important;
  border: 1px solid var(--tf-border) !important;
  border-radius: var(--tf-radius-sm) !important;
  padding: .6rem .75rem !important;
  
  color: var(--tf-text);
  box-shadow: none !important;
}

#resPanelContent .form-control:focus,
#resPanelContent select.form-control:focus,
#resPanelContent textarea.form-control:focus,
.offcanvas #resPanelContent .form-control:focus,
.offcanvas #resPanelContent select.form-control:focus,
.offcanvas #resPanelContent textarea.form-control:focus{
  background: #fff !important;
  border-color: rgba(13,110,253,.55) !important;
  box-shadow: 0 0 0 4px var(--tf-ring) !important;
}

/* IMPORTANT: do NOT globally restyle all .offcanvas .btn
   because it breaks your toolbar/button bars. Only style buttons inside the reservation form. */
#resPanelContent form .btn,
.offcanvas #resPanelContent form .btn{
  border-radius: var(--tf-radius-btn) !important;
  font-weight: 800;
  letter-spacing: .15px;
  padding: .52rem .85rem;
}

/* =========================================
   RESET TIPOGRÁFICO – volver a algo humano
   ========================================= */

/* Títulos */
.fdk-newres h4,
.fdk-newres .tf-title,
.fdk-newres .fdk-title {
  font-weight: 600 !important;   /* antes 800/900 */
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Subtítulos */
.fdk-newres .tf-subtitle,
.fdk-newres .fdk-subtitle {
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

/* Labels */
.fdk-newres label,
.fdk-newres .tf-label,
.fdk-newres .fdk-label,
.offcanvas #resPanelContent label {
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-size: .75rem !important;
}

/* Inputs */
.fdk-newres .form-control,
.fdk-newres .tf-control,
.fdk-newres .fdk-control,
.offcanvas #resPanelContent .form-control {
  font-weight: 400 !important;
  letter-spacing: normal !important;
  font-size: .9rem !important;
}

/* Texto auxiliar */
.fdk-newres .small,
.fdk-newres .text-muted {
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

/* Botones */
.fdk-newres .btn,
.fdk-newres .tf-btn,
.fdk-newres .fdk-btn-primary,
.offcanvas #resPanelContent .btn {
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

/* Badges */
.fdk-newres .badge,
.fdk-newres .tf-badge,
.fdk-newres .fdk-badge {
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

/* Buttons: less rounded */
.fdk-newres .fdk-btn-primary{
  border-radius: var(--tf-radius-btn) !important;
  padding: .52rem .85rem !important;
  font-weight: 800 !important;
  letter-spacing: .15px;
  box-shadow: 0 10px 18px rgba(13,110,253,.18);
}

.fdk-newres .fdk-btn-ghost{
  border-radius: var(--tf-radius-btn) !important;
  font-weight: 800 !important;
}

.fdk-newres .fdk-btn-outline-danger{
  border-radius: var(--tf-radius-btn) !important;
  font-weight: 800 !important;
}

.fdk-newres .fdk-tip{
  border:1px solid var(--tf-border);
  border-radius: var(--tf-radius-sm);
  padding: 12px;
  background:#fff;
}

/* =========================================================
   Optional: keep everything slightly tighter
   (does not affect font-family)
   ========================================================= */
.fdk-newres .small,
.fdk-newres .text-muted{ font-size: .78rem; }