/* ============================================================================
   tdg-ui.css — Sistema visual del Sistema de Reclamos (v2, "embellecer").
   Additive sobre Bootstrap 5.3. Identidad: gris pizarra (#343a40) + ámbar (#f0a500).
   Refina tipografía, superficies, elevación, botones, formularios, tablas, badges
   y foco. NO toca la sidebar/offcanvas (clases propias). Se revierte quitando el <link>.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Marca: pizarra + ámbar */
  --tdg-dark:    #343a40;
  --tdg-dark-2:  #2a2f34;
  --tdg-slate:   #495057;
  --tdg-amber:   #f0a500;
  --tdg-amber-2: #d99400;
  /* Tinta */
  --tdg-ink:     #21262c;
  --tdg-ink-2:   #4c5561;
  --tdg-ink-mut: #8a929d;
  /* Superficies y bordes */
  --tdg-bg:      #f2f3f5;
  --tdg-surface: #ffffff;
  --tdg-surface-2:#f7f8f9;
  --tdg-border:  rgba(33,37,41,.12);
  --tdg-border-2:rgba(33,37,41,.07);
  /* Radios */
  --tdg-r:12px; --tdg-r-sm:9px; --tdg-r-lg:16px;
  /* Elevación */
  --tdg-e1: 0 1px 2px rgba(20,23,28,.05), 0 1px 3px rgba(20,23,28,.07);
  --tdg-e2: 0 2px 6px rgba(20,23,28,.06), 0 6px 16px rgba(20,23,28,.09);
  --tdg-e3: 0 12px 34px rgba(20,23,28,.18);
  --tdg-ease: 170ms cubic-bezier(.4,0,.2,1);
}

/* ---- Base tipográfica ---- */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--tdg-ink);
  font-feature-settings: 'cv02','cv03','cv04','ss01';
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { letter-spacing:-.015em; font-weight:700; color:var(--tdg-ink); }
.table, .badge, td, th, .fw-num { font-variant-numeric: tabular-nums; }
a { color: var(--tdg-slate); text-decoration-thickness:.06em; text-underline-offset:.15em; }
a:hover { color: var(--tdg-amber-2); }

/* ---- Botones ---- */
.btn {
  border-radius: var(--tdg-r-sm);
  font-weight: 600; letter-spacing:.005em;
  transition: transform var(--tdg-ease), box-shadow var(--tdg-ease),
              background-color var(--tdg-ease), border-color var(--tdg-ease), filter var(--tdg-ease);
}
.btn:hover  { transform: translateY(-1px); box-shadow: var(--tdg-e1); }
.btn:active { transform: translateY(0); box-shadow:none; }
.btn:focus-visible { outline:3px solid rgba(240,165,0,.5); outline-offset:2px; box-shadow:none; }
.btn-group > .btn { transform:none; }
/* Primario = pizarra de marca (matchea la sidebar); acento ámbar en hover-line */
.btn-primary {
  --bs-btn-bg: var(--tdg-dark); --bs-btn-border-color: var(--tdg-dark);
  --bs-btn-hover-bg: var(--tdg-dark-2); --bs-btn-hover-border-color: var(--tdg-dark-2);
  --bs-btn-active-bg:#1f2327; --bs-btn-active-border-color:#1f2327;
  --bs-btn-disabled-bg: var(--tdg-dark); --bs-btn-disabled-border-color: var(--tdg-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--tdg-dark); --bs-btn-border-color: rgba(33,37,41,.4);
  --bs-btn-hover-bg: var(--tdg-dark); --bs-btn-hover-border-color: var(--tdg-dark);
}
/* Ámbar utilitario: para acciones destacadas si se usa .btn-warning */
.btn-warning {
  --bs-btn-bg: var(--tdg-amber); --bs-btn-border-color: var(--tdg-amber);
  --bs-btn-hover-bg: var(--tdg-amber-2); --bs-btn-hover-border-color: var(--tdg-amber-2);
  --bs-btn-color:#3a2e00; --bs-btn-hover-color:#3a2e00;
}
.btn-link { --bs-btn-color: var(--tdg-slate); --bs-btn-hover-color: var(--tdg-amber-2); }

/* ---- Tarjetas ---- */
.card {
  border:1px solid var(--tdg-border-2); border-radius: var(--tdg-r);
  box-shadow: var(--tdg-e1); background: var(--tdg-surface);
  transition: box-shadow var(--tdg-ease);
}
.card:hover { box-shadow: var(--tdg-e2); }
.card-header {
  background: linear-gradient(180deg, var(--tdg-surface-2), var(--tdg-surface));
  border-bottom:1px solid var(--tdg-border-2); font-weight:700; letter-spacing:-.01em;
  position:relative;
}
/* firma sutil: filo ámbar arriba del header de card */
.card-header::after { content:""; position:absolute; left:0; top:0; height:3px; width:44px; background: var(--tdg-amber); border-top-left-radius: var(--tdg-r); }
.card-footer { background: var(--tdg-surface-2); border-color: var(--tdg-border-2); }

/* ---- Formularios ---- */
.form-control, .form-select {
  border-radius: var(--tdg-r-sm); border-color:#d5d9de;
  transition: border-color var(--tdg-ease), box-shadow var(--tdg-ease);
}
.form-control:hover, .form-select:hover { border-color:#c0c6cd; }
.form-control:focus, .form-select:focus {
  border-color: var(--tdg-amber);
  box-shadow: 0 0 0 .22rem rgba(240,165,0,.18);
}
.form-label { font-weight:600; color: var(--tdg-ink-2); margin-bottom:.3rem; }
.form-check-input:checked { background-color: var(--tdg-dark); border-color: var(--tdg-dark); }
.form-check-input:focus { border-color: var(--tdg-amber); box-shadow: 0 0 0 .22rem rgba(240,165,0,.18); }
.input-group-text { background: var(--tdg-surface-2); border-color:#d5d9de; color: var(--tdg-ink-2); }

/* ---- Tablas ---- */
.table {
  --bs-table-hover-bg: rgba(52,58,64,.05);
  --bs-table-color: var(--tdg-ink); border-color: var(--tdg-border-2);
}
.table > :not(caption) > * > * { padding-top:.6rem; padding-bottom:.6rem; }
.table thead th {
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color: var(--tdg-ink-mut); border-bottom:2px solid var(--tdg-border);
  background: var(--tdg-surface-2); white-space:nowrap;
}
.table-hover > tbody > tr:hover > * { background-color: var(--bs-table-hover-bg); }
.table-responsive { border-radius: var(--tdg-r); border:1px solid var(--tdg-border-2); box-shadow: var(--tdg-e1); }
.table-responsive > .table { margin-bottom:0; }

/* ---- Badges, alerts, modales, dropdowns ---- */
.badge { border-radius:7px; font-weight:600; letter-spacing:.02em; padding:.4em .6em; }
.alert {
  border:1px solid var(--tdg-border-2); border-left-width:4px; border-radius: var(--tdg-r);
  box-shadow: var(--tdg-e1);
}
.alert-success { border-left-color:#28a745; }
.alert-danger  { border-left-color:#dc3545; }
.alert-warning { border-left-color: var(--tdg-amber); }
.alert-info    { border-left-color: var(--tdg-slate); }
.modal-content { border:none; border-radius: var(--tdg-r-lg); box-shadow: var(--tdg-e3); overflow:hidden; }
.modal-header  { background: var(--tdg-surface-2); border-bottom:1px solid var(--tdg-border-2); }
.dropdown-menu { border:none; border-radius: var(--tdg-r); box-shadow: var(--tdg-e2); padding:.35rem; }
.dropdown-item { border-radius:7px; font-weight:500; }
.dropdown-item:active { background: var(--tdg-dark); }
.list-group { border-radius: var(--tdg-r); overflow:hidden; }
.nav-pills .nav-link.active { background: var(--tdg-dark); }
.page-link { color: var(--tdg-slate); }
.active > .page-link { background: var(--tdg-dark); border-color: var(--tdg-dark); }
.progress-bar { background-color: var(--tdg-amber); }

/* ---- Scrollbar ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(52,58,64,.3) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background: rgba(52,58,64,.26); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(52,58,64,.42); background-clip:content-box; }

/* ---- Accesibilidad ---- */
:focus-visible { outline:3px solid rgba(240,165,0,.55); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
  .btn:hover, .card:hover { transform:none; }
}