/* ============================================================
   TECMIN DRILL — Identidad corporativa
   ============================================================
   Basado en el Manual de Identidad de Tecmin Servicios S.A. de C.V.

   Paleta oficial:
     PANTONE 555 C (verde)  → #187031
     PANTONE 420 C (gris)   → #D9D9D9
   Tipografía: Arial (Normal, Narrow, Negrita, Black)
   ============================================================ */

:root {
  /* Colores corporativos primarios */
  --tecmin-verde:        #187031;
  --tecmin-verde-osc:    #0f5224;
  --tecmin-verde-clr:    #2a9a4a;
  --tecmin-verde-bg:     #e6f1e9;
  --tecmin-gris:         #D9D9D9;
  --tecmin-gris-osc:     #8a8a8a;
  --tecmin-gris-bg:      #f3f4f5;

  /* Tonos auxiliares (mantienen semántica Bootstrap) */
  --tecmin-rojo:         #c53030;
  --tecmin-amarillo:     #f0b400;
  --tecmin-azul-info:    #0d6efd;

  /* Tipografía oficial */
  --tecmin-font:         'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}

/* === Overrides globales === */
body {
  font-family: var(--tecmin-font) !important;
}

/* Bootstrap usa --bs-primary; lo apuntamos al verde */
:root {
  --bs-primary: var(--tecmin-verde);
  --bs-primary-rgb: 24, 112, 49;
}

.btn-primary {
  background-color: var(--tecmin-verde) !important;
  border-color: var(--tecmin-verde) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--tecmin-verde-osc) !important;
  border-color: var(--tecmin-verde-osc) !important;
}
.btn-outline-primary {
  color: var(--tecmin-verde) !important;
  border-color: var(--tecmin-verde) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.active {
  background-color: var(--tecmin-verde) !important;
  color: #fff !important;
  border-color: var(--tecmin-verde) !important;
}

.text-primary { color: var(--tecmin-verde) !important; }
.bg-primary  { background-color: var(--tecmin-verde) !important; }
.border-primary { border-color: var(--tecmin-verde) !important; }

.bg-primary-subtle { background-color: var(--tecmin-verde-bg) !important; }
.text-primary-emphasis { color: var(--tecmin-verde-osc) !important; }

/* Links — verde corporativo */
a { color: var(--tecmin-verde); }
a:hover { color: var(--tecmin-verde-osc); }

/* Focus rings con el verde */
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--tecmin-verde-clr);
  box-shadow: 0 0 0 0.2rem rgba(24, 112, 49, 0.18);
}
.form-check-input:checked {
  background-color: var(--tecmin-verde);
  border-color: var(--tecmin-verde);
}

/* Badges */
.badge.bg-primary { background-color: var(--tecmin-verde) !important; }

/* Tablas */
.table thead.table-light th { background-color: var(--tecmin-gris-bg); border-bottom: 2px solid var(--tecmin-verde); }

/* Tarjetas con header verde */
.card-header.bg-tecmin {
  background-color: var(--tecmin-verde);
  color: #fff;
}


/* ============================================================
   CAPA DE DISEÑO — aspecto y movimiento
   ============================================================
   Solo cambia la apariencia: mismos colores corporativos, mismas
   clases de Bootstrap. Aplica a todas las pantallas que cargan
   este archivo (layout base, login y recuperación de contraseña).

   Movimiento: rápido y sobrio (tablero profesional).
     - Solo se animan transform/translate/opacity (sin layout).
     - Entradas con ease-out fuerte, nada arriba de 300ms.
     - Efectos de hover solo con mouse real; reduced-motion respetado.
   ============================================================ */
:root {
  --tecmin-oscuro:      #0a3318;
  --tecmin-texto:       #1f2a24;
  --tecmin-texto-2:     #5b6660;
  --tecmin-borde:       #e3e8e5;
  --tecmin-fondo:       #f1f3f2;   /* "fondo blanco-gris" del manual */
  --tm-font-black:      "Arial Black", "Arial", sans-serif;
  --tm-font-narrow:     "Arial Narrow", "Arial", sans-serif;

  --tm-radius:          .75rem;
  --tm-radius-sm:       .5rem;
  --tm-shadow-sm:       0 1px 2px rgba(16, 32, 22, .05), 0 1px 3px rgba(16, 32, 22, .06);
  --tm-shadow-md:       0 6px 16px -4px rgba(16, 32, 22, .12), 0 2px 4px -2px rgba(16, 32, 22, .06);
  --tm-shadow-verde:    0 4px 12px -2px rgba(24, 112, 49, .35);
  --tm-degradado:       linear-gradient(135deg, var(--tecmin-oscuro) 0%, var(--tecmin-verde) 100%);

  --ease-out:           cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:        cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:        cubic-bezier(0.32, 0.72, 0, 1);
}

body {
  color: var(--tecmin-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(24, 112, 49, .18); }

/* ---------- Entrada de página ----------
   Los bloques del contenido aparecen en cascada (40ms entre cada uno).
   fill-mode "backwards": al terminar no queda ningún transform, así los
   modales, sticky y position:fixed siguen funcionando igual. */
@keyframes tm-entrar {
  from { opacity: 0; translate: 0 10px; }
}
.content-area > *,
.tm-entrar {
  animation: tm-entrar 280ms var(--ease-out) backwards;
}

/* Bandas diagonales del manual (pág. 1 y 23) en la esquina superior de cada
   página. z-index -1 sin crear contexto de apilamiento: queda detrás del
   contenido y no afecta modales ni elementos fijos. */
.content-area { position: relative; }
.content-area::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 320px; height: 200px;
  background: url("../img/bandas-tecmin.svg") no-repeat top right / contain;
  opacity: .38;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .content-area::before { width: 190px; height: 120px; opacity: .3; }
}
.content-area > *:nth-child(2) { animation-delay: 40ms; }
.content-area > *:nth-child(3) { animation-delay: 80ms; }
.content-area > *:nth-child(4) { animation-delay: 120ms; }
.content-area > *:nth-child(5) { animation-delay: 160ms; }
.content-area > *:nth-child(n+6) { animation-delay: 200ms; }
/* Los scripts y elementos ocultos no cuentan */
.content-area > script, .content-area > style { animation: none; }

/* ---------- Títulos ---------- */
.content-area h2, .content-area .h2 {
  font-family: var(--tm-font-black);
  font-weight: 900;
  letter-spacing: -.005em;
  color: var(--tecmin-texto);
  font-size: calc(1.3rem + .6vw);
}
@media (min-width: 1200px) { .content-area h2, .content-area .h2 { font-size: 1.85rem; } }
.content-area h2 > .bi:first-child {
  color: var(--tecmin-verde);
  margin-right: .25rem;
}
/* Subtítulo debajo del título de página */
.content-area h2 + p, .content-area h2 + .text-muted, .content-area h2 + small {
  font-size: .95rem;
}
.text-muted { color: var(--tecmin-texto-2) !important; }

/* ---------- Tarjetas ---------- */
.card {
  --bs-card-border-radius: var(--tm-radius);
  --bs-card-border-color: var(--tecmin-borde);
  --bs-card-cap-bg: #fff;
}
.card.border-0 { --bs-card-border-color: transparent; }
.shadow-sm { box-shadow: var(--tm-shadow-sm) !important; }
.shadow    { box-shadow: var(--tm-shadow-md) !important; }

.card-header {
  border-bottom-color: var(--tecmin-borde);
  padding-top: .8rem; padding-bottom: .8rem;
}
.card-header h5, .card-header h6, .card-header .h5, .card-header .h6 {
  font-family: var(--tm-font-narrow);
  font-stretch: condensed;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1rem;
}
.card-header > strong {
  font-family: var(--tm-font-narrow);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.card-footer { background: #fafbfa; border-top-color: var(--tecmin-borde); }

/* Encabezados verdes (clase o estilo en línea): verde 555 plano como en el
   manual, con el anillo del logo oficial como marca de agua a la derecha. */
.card-header.bg-tecmin,
.card-header.bg-success,
.card-header.bg-primary,
.card-header[style*="#187031"] {
  background:
    linear-gradient(rgba(24,112,49,.9), rgba(24,112,49,.9)),
    url("../img/logo-tecmin-blanco-oficial.png") no-repeat right -36px center / 120px,
    var(--tecmin-verde) !important;
  border-bottom: 0;
  color: #fff;
}

/* Tarjetas KPI: anillo del logo oficial como marca de agua (6%) y cifra en Arial Black */
.card-kpi, .tm-kpi {
  border-left-width: 4px !important;
  background:
    linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)),
    url("../img/logo-tecmin-color.png") no-repeat right -42px center / 128px,
    #fff;
}
.card-kpi .h3, .card-kpi h3, .card-kpi .fs-3, .card-kpi .display-6, .card-kpi .h4, .card-kpi h4,
.tm-kpi .tm-kpi-valor {
  font-family: var(--tm-font-black);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.tm-kpi .tm-kpi-etiqueta {
  font-family: var(--tm-font-narrow);
  font-stretch: condensed;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .78rem;
  color: var(--tecmin-texto-2);
}

/* Tarjetas que son enlace: se elevan al pasar el mouse */
a.text-decoration-none > .card,
a > .card.catalogo-card {
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.text-decoration-none:hover > .card,
  a:hover > .card.catalogo-card {
    transform: translateY(-2px);
    box-shadow: var(--tm-shadow-md) !important;
  }
}
a.text-decoration-none:active > .card { transform: scale(.985); transition-duration: 120ms; }

/* ---------- Botones ---------- */
.btn {
  --bs-btn-border-radius: var(--tm-radius-sm);
  --bs-btn-font-weight: 600;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease,
              box-shadow 150ms ease, transform 120ms var(--ease-out);
}
.btn-sm { --bs-btn-border-radius: .4rem; }
.btn-lg { --bs-btn-border-radius: .65rem; }
.btn:active:not(:disabled):not(.disabled) { transform: scale(.97); }
.btn-primary, .btn-success { box-shadow: 0 1px 2px rgba(15, 82, 36, .25); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .btn-success:hover { box-shadow: var(--tm-shadow-verde); }
}
.btn-success {
  --bs-btn-bg: var(--tecmin-verde);
  --bs-btn-border-color: var(--tecmin-verde);
  --bs-btn-hover-bg: var(--tecmin-verde-osc);
  --bs-btn-hover-border-color: var(--tecmin-verde-osc);
  --bs-btn-active-bg: var(--tecmin-verde-osc);
  --bs-btn-active-border-color: var(--tecmin-verde-osc);
}
.btn-outline-secondary {
  --bs-btn-color: var(--tecmin-texto-2);
  --bs-btn-border-color: #cfd6d2;
  --bs-btn-hover-bg: var(--tecmin-gris-bg);
  --bs-btn-hover-color: var(--tecmin-texto);
  --bs-btn-hover-border-color: #b9c2bd;
  --bs-btn-active-bg: #e7ebe9;
  --bs-btn-active-color: var(--tecmin-texto);
  --bs-btn-active-border-color: #b9c2bd;
}

/* Foco visible solo con teclado */
.btn:focus-visible, .nav-link:focus-visible, a:focus-visible, .page-link:focus-visible {
  outline: 2px solid var(--tecmin-verde-clr);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------- Formularios ---------- */
.form-control, .form-select {
  border-color: #d5dcd8;
  border-radius: var(--tm-radius-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.form-control-sm, .form-select-sm { border-radius: .4rem; }
@media (hover: hover) and (pointer: fine) {
  .form-control:hover:not(:focus):not(:disabled),
  .form-select:hover:not(:focus):not(:disabled) { border-color: #b9c4be; }
}
.form-control:focus, .form-select:focus {
  border-color: var(--tecmin-verde-clr);
  box-shadow: 0 0 0 .2rem rgba(24, 112, 49, .15);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: #f1f3f2; }
.form-label { font-weight: 600; font-size: .875rem; color: #3d4741; margin-bottom: .3rem; }
.form-label.text-muted, .form-label.small { font-weight: 600; }
.form-text { color: var(--tecmin-texto-2); }
.form-check-input { transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.input-group-text { background: var(--tecmin-gris-bg); border-color: #d5dcd8; }
.invalid-feedback, .text-danger.small { font-weight: 500; }

/* ---------- Tablas ---------- */
.table {
  --bs-table-border-color: #edf0ee;
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
}
.table > tbody > tr > td { padding-top: .6rem; padding-bottom: .6rem; }
.table-sm > tbody > tr > td { padding-top: .4rem; padding-bottom: .4rem; }
.table > thead th {
  font-family: var(--tm-font-narrow);
  font-stretch: condensed;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tecmin-verde-osc);
  white-space: nowrap;
  vertical-align: middle;
}
.table thead.table-light th {
  background-color: var(--tecmin-verde-bg);
  border-bottom: 2px solid var(--tecmin-verde);
}
.table > tbody > tr > * { transition: background-color 120ms ease, box-shadow 120ms ease; }
.table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: rgba(24, 112, 49, .045);
  --bs-table-accent-bg: rgba(24, 112, 49, .045);
}
.card > .table-responsive > .table > :last-child > tr:last-child > *,
.card > .table > :last-child > tr:last-child > * { border-bottom-width: 0; }
.table-responsive { scrollbar-width: thin; scrollbar-color: #c8d1cc transparent; }

/* ---------- Badges ---------- */
.badge {
  font-family: var(--tm-font-narrow);
  font-stretch: condensed;
  font-weight: 700;
  font-size: .78em;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: .35rem;
  padding: .42em .7em;
}
.badge.bg-success { background-color: var(--tecmin-verde) !important; }
.badge.bg-light { color: var(--tecmin-texto) !important; border: 1px solid var(--tecmin-borde); }

/* ---------- Alertas ---------- */
@keyframes tm-alerta {
  from { opacity: 0; translate: 0 -4px; }
}
.alert {
  border-radius: var(--tm-radius-sm);
  border-width: 0 0 0 4px;
  border-left-color: currentColor;
  box-shadow: var(--tm-shadow-sm);
  animation: tm-alerta 220ms var(--ease-out) backwards;
}
.alert-success {
  --bs-alert-bg: var(--tecmin-verde-bg);
  --bs-alert-color: var(--tecmin-verde-osc);
}
.alert .btn-close { transition: opacity 150ms ease; }

/* ---------- Navegación: pills, tabs, breadcrumb, paginación ---------- */
.nav-pills .nav-link {
  border-radius: var(--tm-radius-sm);
  color: #3d4741;
  font-weight: 500;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 120ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-pills .nav-link:not(.active):hover { background-color: var(--tecmin-verde-bg); color: var(--tecmin-verde-osc); }
}
.nav-pills .nav-link:active { transform: scale(.97); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--tecmin-verde) !important;
  color: #fff;
  font-weight: 700;
  box-shadow: var(--tm-shadow-verde);
}
.nav-tabs { --bs-nav-tabs-border-color: var(--tecmin-borde); }
.nav-tabs .nav-link {
  color: var(--tecmin-texto-2);
  font-weight: 500;
  border-width: 0 0 2px;
  border-color: transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.nav-tabs .nav-link:hover { color: var(--tecmin-verde); border-color: transparent transparent var(--tecmin-gris); }
.nav-tabs .nav-link.active {
  color: var(--tecmin-verde);
  border-color: transparent transparent var(--tecmin-verde);
  background: transparent;
  font-weight: 600;
}

.breadcrumb {
  --bs-breadcrumb-divider: "›";
  --bs-breadcrumb-divider-color: #a3ada8;
  --bs-breadcrumb-item-active-color: var(--tecmin-texto-2);
  font-size: .82rem;
}
.breadcrumb a { text-decoration: none; transition: color 150ms ease; }
.breadcrumb a:hover { text-decoration: underline; }

.pagination {
  --bs-pagination-color: var(--tecmin-verde);
  --bs-pagination-hover-color: var(--tecmin-verde-osc);
  --bs-pagination-hover-bg: var(--tecmin-verde-bg);
  --bs-pagination-focus-color: var(--tecmin-verde-osc);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(24, 112, 49, .15);
  --bs-pagination-active-bg: var(--tecmin-verde);
  --bs-pagination-active-border-color: var(--tecmin-verde);
  --bs-pagination-border-color: var(--tecmin-borde);
}

/* ---------- List group ---------- */
.list-group { --bs-list-group-border-color: var(--tecmin-borde); }
.list-group-item-action { transition: background-color 120ms ease, color 120ms ease; }
.list-group-item.active {
  background-color: var(--tecmin-verde);
  border-color: var(--tecmin-verde);
}

/* ---------- Menús desplegables ----------
   Se anima con "translate" (no "transform") para no pelear con el
   posicionamiento de Popper, que usa transform en línea. */
@keyframes tm-menu {
  from { opacity: 0; translate: 0 -4px; }
}
.dropdown-menu {
  --bs-dropdown-border-color: var(--tecmin-borde);
  --bs-dropdown-border-radius: .65rem;
  --bs-dropdown-link-active-bg: var(--tecmin-verde);
  --bs-dropdown-link-hover-bg: var(--tecmin-verde-bg);
  --bs-dropdown-link-hover-color: var(--tecmin-verde-osc);
  box-shadow: var(--tm-shadow-md);
  padding: .35rem;
}
.dropdown-menu.show { animation: tm-menu 160ms var(--ease-out); }
.dropdown-item {
  border-radius: .4rem;
  transition: background-color 120ms ease, color 120ms ease;
}

/* ---------- Modales y paneles laterales ---------- */
.modal { --bs-modal-border-radius: .9rem; --bs-modal-border-color: transparent; }
.modal-content { box-shadow: 0 24px 48px -12px rgba(10, 51, 24, .35); }
.modal.fade .modal-dialog {
  transform: translateY(12px) scale(.98);
  transition: transform 240ms var(--ease-out);
}
.modal.show .modal-dialog { transform: none; }
.modal-backdrop.show { opacity: .45; }
.offcanvas { transition: transform 300ms var(--ease-drawer), visibility 300ms var(--ease-drawer); }
.collapsing { transition: height 220ms var(--ease-out); }

/* ---------- Barras de progreso ---------- */
.progress { border-radius: 99px; background-color: #e9eeeb; }
.progress-bar { transition: width 600ms var(--ease-out); }

/* ---------- Pantallas de acceso (login / recuperar contraseña) ----------
   Se ven pocas veces al día: entrada un poco más rica (marca y luego tarjeta). */
@keyframes tm-auth-marca {
  from { opacity: 0; translate: 0 -8px; scale: .96; }
}
@keyframes tm-auth-tarjeta {
  from { opacity: 0; translate: 0 14px; }
}
.tm-auth-marca   { animation: tm-auth-marca 420ms var(--ease-out) backwards; }
.tm-auth-tarjeta { animation: tm-auth-tarjeta 420ms var(--ease-out) 90ms backwards; }
.tm-auth-tarjeta .btn-tecmin, .tm-auth-tarjeta .btn {
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 120ms var(--ease-out);
}
.tm-auth-tarjeta .btn-tecmin:active, .tm-auth-tarjeta .btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .tm-auth-tarjeta .btn-tecmin:hover { box-shadow: var(--tm-shadow-verde); }
}

/* ---------- Accesibilidad e impresión ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Menos movimiento, no cero: se conservan los desvanecidos */
  @keyframes tm-entrar { from { opacity: 0; } }
  @keyframes tm-alerta { from { opacity: 0; } }
  @keyframes tm-menu   { from { opacity: 0; } }
  @keyframes tm-auth-marca   { from { opacity: 0; } }
  @keyframes tm-auth-tarjeta { from { opacity: 0; } }
  .btn:active:not(:disabled):not(.disabled),
  .nav-pills .nav-link:active,
  a.text-decoration-none:active > .card { transform: none; }
  a.text-decoration-none:hover > .card, a:hover > .card.catalogo-card { transform: none !important; }
  .modal.fade .modal-dialog { transform: none; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .shadow-sm, .shadow, .card { box-shadow: none !important; }
}