*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }

.menu{
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
  min-height: 78px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
}
.logo{
  width: 100%;
  max-width: 300px;
  height: auto;
}
.filters{
  margin: 15px;
  background: #E9ECEF;
}

/* Boton hamburguesa de filtros: solo movil.
   El ocultamiento en escritorio lo hace la utilidad d-lg-none de Bootstrap
   aplicada en el propio boton (por encapsulacion de componente, una regla
   .btn-filtros aqui perderia especificidad contra .btn.btn-outline-secondary). */

@media (max-width: 991.98px) {
  /* El menu pasa a DOS filas:
       fila 1 -> [hamburguesa] [logo] ........ [usuario]
       fila 2 -> tabs a todo el ancho */
  .menu {
    flex-wrap: wrap; align-items: center; gap: .4rem;
    padding: .4rem .6rem !important; min-height: 0;
  }
  .btn-filtros {
    display: inline-flex !important; align-items: center;
    order: 1; flex: 0 0 auto;
  }
  .menu > div:first-of-type { order: 2; flex: 1 1 auto; min-width: 0; }
  .logo { max-width: 120px; }
  .menu .bloque-usuario { order: 3; flex: 0 0 auto; margin-left: auto !important; }
  .menu .bloque-tabs {
    order: 4; flex: 0 0 100%; width: 100%; margin-left: 0 !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .menu .bloque-tabs::-webkit-scrollbar { height: 0; }
  .menu .bloque-tabs .nav-tabs { flex-wrap: nowrap; border-bottom: 0; }
  .menu .bloque-tabs .nav-link { white-space: nowrap; padding: .35rem .6rem; font-size: .9rem; }
  .menu .bloque-usuario .nav-tabs { border-bottom: 0; }
}
@media (max-width: 400px) {
  .logo { max-width: 100px; }
}

/* --------------------------------------------------------- [LOGIN/REGISTER] */
@media (max-width: 991.98px) {
  .auth-card .form-control { min-height: 42px; }
  .auth-card .card-body { padding: 1.5rem 1rem !important; }
}


/* ===========================================================================
   [SECONDARY NAV] LIST bar restyled to sit under the C&S site header.
   Appended override block - nothing above this line was changed. Selectors
   are .menu-scoped and equal/higher specificity than Bootstrap + the
   compiled component styles. The site header above is NOT sticky; this bar is.
   Palette from the main site: navy #0b5388, teal #00baf2, border #dde2ec.
   =========================================================================== */
.menu {
  background: #f1f3f3;
  border-bottom: 3px solid #0b5388;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08) !important;
  min-height: 60px;
  margin-bottom: 10px;
  font-family: Helvetica, Roboto, Arial, sans-serif;
}
.menu .logo { max-width: 150px; }

.menu .nav-tabs { border-bottom: 0; }
.menu .nav-tabs .nav-link {
  font-family: 'Roboto Condensed', 'Helvetica Condensed', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1c2b4a;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  margin-bottom: -3px;
  padding: .6rem 1rem;
  transition: color 200ms ease, border-color 200ms ease;
}
.menu .nav-tabs .nav-link:hover,
.menu .nav-tabs .nav-link:focus-visible {
  color: #0b5388;
  border-bottom-color: #dde2ec;
}
.menu .nav-tabs .nav-link.active {
  color: #0b5388;
  background: transparent;
  border-bottom-color: #00baf2;
}
.menu .bloque-tabs .contSchedule {
  background-color: #00baf2;
  border-radius: 4px;
}
.menu .dropdown-menu {
  border-color: #dde2ec;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
.menu .dropdown-item:active { background-color: #0b5388; }

@media (max-width: 991.98px) {
  .menu .nav-tabs .nav-link { font-size: .9rem; padding: .35rem .6rem; letter-spacing: .04em; }
}


/* ===========================================================================
   [APP RESTYLE] Body of the LIST app restyled to the C&S Air Products site.
   Appended override block - nothing above this line was changed.

   HOW THE CASCADE WORKS HERE (read before editing):
   - index.html loads Bootstrap (CDN) -> this file -> compiled styles.*.css
     (a full Bootstrap build). The compiled bundle comes LAST, so equal
     specificity loses to it. Angular component styles are also injected
     later and carry an extra attribute selector ([_ngcontent-*]).
   - So every selector below is prefixed "body.sc-app" (class set on <body>
     in index.html) to out-rank both. Bootstrap theme variables are set on
     "html:root" for the same reason.
   - Colors/fonts are variables: change the --app-* values to re-theme.
   =========================================================================== */
html:root {
  --app-primary: #0b5388;        /* site navy: primary buttons, links, headings */
  --app-primary-dark: #002144;   /* site dark navy: hover/active */
  --app-accent: #00baf2;         /* site teal: focus ring, rules, active underline */
  --app-accent-dark: #006690;    /* teal dark: accessible teal for text on white */
  --app-surface: #f1f3f3;        /* site off-white: panels, table headers */
  --app-border: #dde2ec;
  --app-text: #1c2b4a;
  --app-text-light: #5a6479;
  --app-gray: #474c55;           /* site mid-gray: secondary buttons */
  --app-font-display: 'Roboto Condensed', 'Helvetica Condensed', Helvetica, Arial, sans-serif;
  --app-font-body: Helvetica, Roboto, Arial, sans-serif;
  --app-radius: 4px;
  --app-radius-md: 8px;
  --app-shadow-sm: 0 1px 4px rgba(0, 0, 0, .08);
  --app-shadow-md: 0 4px 16px rgba(0, 0, 0, .12);

  /* Bootstrap theme variables */
  --bs-primary: #0b5388;
  --bs-primary-rgb: 11, 83, 136;
  --bs-link-color: #0b5388;
  --bs-link-color-rgb: 11, 83, 136;
  --bs-link-hover-color: #006690;
  --bs-link-hover-color-rgb: 0, 102, 144;
  --bs-body-color: #1c2b4a;
  --bs-body-color-rgb: 28, 43, 74;
  --bs-body-font-family: Helvetica, Roboto, Arial, sans-serif;
  --bs-border-color: #dde2ec;
  --bs-heading-color: #1c2b4a;
}

/* ---------- Typography ---------- */
body.sc-app h1, body.sc-app h2, body.sc-app h3,
body.sc-app h4, body.sc-app h5, body.sc-app h6,
body.sc-app .modal-title, body.sc-app .offcanvas-title {
  font-family: var(--app-font-display);
  font-weight: 700;
  color: var(--app-primary);
}
/* Collapsible section headings ("+Louver Construction", "+Performance Criteria", ...) */
body.sc-app .titleCollapse {
  font-family: var(--app-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--app-primary);
}
body.sc-app .certificationsTitle { color: var(--app-text-light); }

/* ---------- Buttons (same look as the site: condensed, uppercase, 4px radius) ---------- */
body.sc-app .btn {
  --bs-btn-font-family: var(--app-font-display);
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: var(--app-radius);
  --bs-btn-focus-shadow-rgb: 0, 186, 242;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.sc-app .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-primary-dark);
  --bs-btn-hover-border-color: var(--app-primary-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-primary-dark);
  --bs-btn-active-border-color: var(--app-primary-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}
body.sc-app .btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-accent-dark);
  --bs-btn-border-color: var(--app-accent-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-primary-dark);
  --bs-btn-hover-border-color: var(--app-primary-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-primary-dark);
  --bs-btn-active-border-color: var(--app-primary-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--app-accent-dark);
  --bs-btn-disabled-border-color: var(--app-accent-dark);
}
body.sc-app .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-gray);
  --bs-btn-border-color: var(--app-gray);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #343840;
  --bs-btn-hover-border-color: #343840;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #343840;
  --bs-btn-active-border-color: #343840;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--app-gray);
  --bs-btn-disabled-border-color: var(--app-gray);
}
body.sc-app .btn-outline-secondary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-primary-dark);
  --bs-btn-active-border-color: var(--app-primary-dark);
  --bs-btn-disabled-color: var(--app-text-light);
  --bs-btn-disabled-border-color: var(--app-border);
}

/* ---------- Forms ---------- */
body.sc-app .form-control,
body.sc-app .form-select {
  border-color: var(--app-border);
  border-radius: var(--app-radius);
  color: var(--app-text);
}
body.sc-app .form-control:focus,
body.sc-app .form-select:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 .2rem rgba(0, 186, 242, .25);
}
body.sc-app .form-check-input:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 .2rem rgba(0, 186, 242, .25);
}
body.sc-app .form-check-input:checked {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}
body.sc-app .input-group-text {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text-light);
}

/* ---------- Panels and cards ---------- */
/* Filters panel and its inner card (was Bootstrap gray #E9ECEF). Scoped so the
   Projects wrapper and the sign-in card keep their own backgrounds. */
body.sc-app .filters,
body.sc-app .filters .card,
body.sc-app .card.card-body {
  background: var(--app-surface);
}
body.sc-app .card { border-radius: var(--app-radius-md); }
body.sc-app .filters { border: 1px solid var(--app-border); }
/* Product cards: white, hairline border, soft shadow, like the site's product cards */
body.sc-app .card-product {
  background: #fff;
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-sm);
  overflow: hidden;
  transition: box-shadow 200ms ease;
}
body.sc-app .card-product:hover { box-shadow: var(--app-shadow-md); }
body.sc-app .card-product .card-header {
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
}
body.sc-app .card-product .titleProduct {
  font-family: var(--app-font-display);
  font-weight: 700;
  color: var(--app-primary);
}
body.sc-app .card-product .titleProduct:hover { color: var(--app-accent-dark); }
/* Spec text inside cards */
body.sc-app .tdLeft { color: var(--app-text-light); }
body.sc-app .plus-schedule { color: var(--app-primary); }
body.sc-app .plus-schedule:hover { color: var(--app-accent-dark); }
body.sc-app .printReport { color: var(--app-primary); }
body.sc-app .printReport:hover { color: var(--app-accent-dark); }

/* ---------- Schedule / projects tables ---------- */
/* Header cells: navy bar with white condensed caps */
body.sc-app .titles {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: #fff;
  font-family: var(--app-font-display);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.sc-app .proj-table td,
body.sc-app .sched-table td { border-color: var(--app-border) !important; }
@media (min-width: 992px) {
  body.sc-app .sched-table tr:not(.filaTitulos):hover > td,
  body.sc-app .proj-table tr:not(.filaTitulos):hover > td { background-color: var(--app-surface); }
}

/* ---------- Sign in / Register / Admin pages ---------- */
/* The gray page backdrop + 100vh heights assumed no site header above the app. */
body.sc-app .body {
  background: var(--app-surface);
  height: auto;
  min-height: 60vh;
}
body.sc-app .auth-card {
  border: 1px solid var(--app-border);
  border-top: 4px solid var(--app-accent);
  border-radius: var(--app-radius-md);
  background: #fff;
  box-shadow: var(--app-shadow-md);
}
body.sc-app .auth-card h2 { font-size: 1.75rem; }
body.sc-app .auth-card hr { border-color: var(--app-border); opacity: 1; }

/* ---------- Modals and offcanvas (print options, new project, mobile filters) ---------- */
body.sc-app .modal-content {
  border: 0;
  border-radius: var(--app-radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .16);
}
body.sc-app .modal-header {
  border-bottom: 3px solid var(--app-accent);
}
body.sc-app .offcanvas-header { border-bottom: 3px solid var(--app-accent); }

/* ---------- Alerts: keep success/error colors, match site shape and type ---------- */
body.sc-app .alert-container {
  border-radius: var(--app-radius);
  font-family: var(--app-font-display);
  letter-spacing: .03em;
}