/* ==========================================================================
 * TridicadSoft POS — Capa de diseño unificada (tridi-ui.css)
 *
 * Se carga DESPUÉS de bootstrap.min.css y style.css (lo incluye header.php y las pantallas
 * de acceso). Unifica tipografía, colores, encabezados de página, tarjetas, tablas, botones,
 * formularios, pestañas y modales para que todas las pantallas se vean como un solo sistema.
 *
 * Reglas:
 *  - Solo apariencia (colores, bordes, radios, sombras, tipografía). No cambia tamaños de
 *    columnas ni márgenes de maquetación, para no mover nada de lugar.
 *  - Paleta única: azul #2563eb + grises "slate". Para cambiar el color de marca basta con
 *    editar las variables --t-primario*.
 * ========================================================================== */

:root {
  --t-primario: #2563eb;
  --t-primario-osc: #1d4ed8;
  --t-primario-rgb: 37, 99, 235;
  --t-primario-suave: #eff6ff;
  --t-exito: #16a34a;
  --t-peligro: #dc2626;
  --t-aviso: #d97706;
  --t-info: #0891b2;

  --t-texto: #0f172a;
  --t-texto-2: #334155;
  --t-texto-3: #64748b;
  --t-borde: #e2e8f0;
  --t-borde-2: #cbd5e1;
  --t-fondo: #f4f6fa;
  --t-superficie: #ffffff;
  --t-superficie-2: #f8fafc;

  --t-radio: 12px;
  --t-radio-sm: 8px;
  --t-sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --t-sombra-hover: 0 8px 24px -8px rgba(15, 23, 42, .18);
  --t-fuente: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Bootstrap 5.3 toma estos valores en botones, enlaces, badges y utilidades */
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: #2563eb;
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: #1d4ed8;
  --bs-link-hover-color-rgb: 29, 78, 216;
  --bs-body-color: #0f172a;
  --bs-body-font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-border-color: #e2e8f0;
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 12px;
  --bs-focus-ring-color: rgba(37, 99, 235, .2);
}

/* --------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------ */
body {
  font-family: var(--t-fuente);
  background: var(--t-fondo);
  color: var(--t-texto);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--t-fuente);
  color: var(--t-texto);
  letter-spacing: -.01em;
}
a { color: var(--t-primario); }
a:hover { color: var(--t-primario-osc); }
.text-muted { color: var(--t-texto-3) !important; }
.fw-num, .tabular, td.text-end, th.text-end { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
 * Barra superior y menú lateral
 * ------------------------------------------------------------------------ */
.header {
  background: var(--t-superficie);
  box-shadow: none;
  border-bottom: 1px solid var(--t-borde);
}
.header .logo span {
  font-family: var(--t-fuente);
  font-weight: 800;
  color: var(--t-texto);
  letter-spacing: -.02em;
}
.header .toggle-sidebar-btn { color: var(--t-texto-2); }
.header-nav .nav-icon { color: var(--t-texto-2); }
.header-nav .nav-profile span { color: var(--t-texto-2); font-weight: 600; }
.header-nav .dropdown-menu { border: 1px solid var(--t-borde); border-radius: var(--t-radio); box-shadow: var(--t-sombra-hover); }

.sidebar {
  background: var(--t-superficie);
  box-shadow: none;
  border-right: 1px solid var(--t-borde);
}
.sidebar-nav .nav-heading {
  color: var(--t-texto-3);
  font-weight: 700;
  text-transform: uppercase;
}
.sidebar-nav .nav-link {
  color: var(--t-texto-2);
  background: transparent;
  border-radius: var(--t-radio-sm);
  font-weight: 600;
  font-size: .9rem;
}
.sidebar-nav .nav-link i { color: var(--t-texto-3); }
.sidebar-nav .nav-link.collapsed { color: var(--t-texto-2); background: transparent; }
.sidebar-nav .nav-link.collapsed i { color: var(--t-texto-3); }
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:not(.collapsed) { color: var(--t-primario); background: var(--t-primario-suave); }
.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-link:not(.collapsed) i { color: var(--t-primario); }
.sidebar-nav .nav-content a { color: var(--t-texto-2); }
.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active { color: var(--t-primario); }
.sidebar-nav .nav-content a i { font-size: .9rem; background: none !important; border-radius: 0; width: auto; height: auto; }

/* --------------------------------------------------------------------------
 * Botones
 * ------------------------------------------------------------------------ */
.btn { border-radius: var(--t-radio-sm); font-weight: 600; }
.btn-sm { border-radius: 7px; }
.btn-lg { border-radius: 10px; }
.btn-primary {
  --bs-btn-bg: var(--t-primario);
  --bs-btn-border-color: var(--t-primario);
  --bs-btn-hover-bg: var(--t-primario-osc);
  --bs-btn-hover-border-color: var(--t-primario-osc);
  --bs-btn-active-bg: #1e40af;
  --bs-btn-active-border-color: #1e40af;
  --bs-btn-disabled-bg: var(--t-primario);
  --bs-btn-disabled-border-color: var(--t-primario);
}
.btn-outline-primary {
  --bs-btn-color: var(--t-primario);
  --bs-btn-border-color: var(--t-primario);
  --bs-btn-hover-bg: var(--t-primario);
  --bs-btn-hover-border-color: var(--t-primario);
  --bs-btn-active-bg: var(--t-primario-osc);
  --bs-btn-active-border-color: var(--t-primario-osc);
}
.btn-success {
  --bs-btn-bg: var(--t-exito);
  --bs-btn-border-color: var(--t-exito);
  --bs-btn-hover-bg: #15803d;
  --bs-btn-hover-border-color: #15803d;
}
.btn-danger {
  --bs-btn-bg: var(--t-peligro);
  --bs-btn-border-color: var(--t-peligro);
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
}
.btn-outline-secondary {
  --bs-btn-color: var(--t-texto-2);
  --bs-btn-border-color: var(--t-borde-2);
  --bs-btn-hover-color: var(--t-texto);
  --bs-btn-hover-bg: #f1f5f9;
  --bs-btn-hover-border-color: var(--t-borde-2);
}
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--t-primario-rgb), .25); }

/* --------------------------------------------------------------------------
 * Formularios
 * ------------------------------------------------------------------------ */
.form-control, .form-select, .input-group-text { border-color: var(--t-borde-2); }
.input-group-text { background: var(--t-superficie-2); color: var(--t-texto-3); }
.form-control:focus, .form-select:focus {
  border-color: var(--t-primario);
  box-shadow: 0 0 0 .2rem rgba(var(--t-primario-rgb), .15);
}
.form-label { color: var(--t-texto-2); }
.form-check-input:checked { background-color: var(--t-primario); border-color: var(--t-primario); }

/* --------------------------------------------------------------------------
 * Pestañas, badges, alertas, modales
 * ------------------------------------------------------------------------ */
.nav-tabs { border-bottom: 1px solid var(--t-borde); }
.nav-tabs .nav-link,
.nav-tabs-bordered .nav-link {
  color: var(--t-texto-3);
  font-weight: 600;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--t-texto); border-bottom-color: var(--t-borde-2); }
.nav-tabs .nav-link.active,
.nav-tabs-bordered .nav-link.active {
  color: var(--t-primario);
  background: transparent;
  border-bottom: 2px solid var(--t-primario);
}
.nav-pills .nav-link.active { background: var(--t-primario); }

.badge { font-weight: 600; border-radius: 6px; }
.badge.rounded-pill { border-radius: 50rem; }

.alert { border-radius: var(--t-radio-sm); border-width: 1px; }

.modal-content { border: 0; border-radius: 14px; box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .3); }
.modal-header { border-bottom-color: var(--t-borde); }
.modal-footer { border-top-color: var(--t-borde); }
.modal-title { font-weight: 700; color: var(--t-texto); }

.dropdown-menu { border-color: var(--t-borde); border-radius: 10px; }
.dropdown-item.active, .dropdown-item:active { background: var(--t-primario); }

/* --------------------------------------------------------------------------
 * Pantallas de acceso (login, recuperación, licencia, asistente sin sesión)
 * ------------------------------------------------------------------------ */
.t-acceso .card,
body.bg-light .card { border: 1px solid var(--t-borde); border-radius: 14px; box-shadow: var(--t-sombra-hover); }

/* --------------------------------------------------------------------------
 * Pie de página
 * ------------------------------------------------------------------------ */
.footer { border-top-color: var(--t-borde); color: var(--t-texto-3); }

/* --------------------------------------------------------------------------
 * Impresión: sin menú ni barra
 * ------------------------------------------------------------------------ */
@media print {
  .header, .sidebar, .btn, .nav-tabs { display: none !important; }
  .main { margin: 0 !important; padding: 0 !important; }
  .main .card { box-shadow: none; }
}