/* =========================================================================
   theme.css — Capa de modernización visual (NO toca los CSS existentes).
   Se carga DESPUÉS de style.css para ganar en la cascada.
   Estrategia: variables CSS + overrides sobre clases de Bootstrap.
   Para revertir todo: quitar el <link> de theme.css en index.html.
   ========================================================================= */

:root {
  /* --- Marca EcoprintQ (verde original, afinado) --- */
  --tg-primary:        #5a9a2e;
  --tg-primary-600:    #4e8527;
  --tg-primary-700:    #3f6d1f;
  --tg-primary-soft:   #eef6e7;   /* fondos sutiles, hovers */

  /* --- Acentos existentes en el sistema --- */
  --tg-accent:         #e73c48;   /* rojo: peligro / alertas */
  --tg-teal:           #6fc1ab;   /* secundario / info */

  /* --- Neutros (reemplazan los grises sueltos #999/#ccc/#666) --- */
  --tg-ink:            #1f2430;   /* texto principal */
  --tg-ink-soft:       #5b6472;   /* texto secundario */
  --tg-line:           #e6e9ee;   /* bordes / divisores */
  --tg-bg:             #f5f7fa;   /* fondo de página */
  --tg-surface:        #ffffff;   /* tarjetas / paneles */

  /* --- Sistema de diseño --- */
  --tg-radius:         10px;
  --tg-radius-sm:      8px;
  --tg-shadow:         0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --tg-shadow-sm:      0 1px 2px rgba(16,24,40,.06);
  --tg-transition:     .18s ease;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
body {
  background-color: var(--tg-bg);
  color: var(--tg-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--tg-primary-600);
  transition: color var(--tg-transition);
}
a:hover { color: var(--tg-primary-700); }

/* -------------------------------------------------------------------------
   Botones
   ------------------------------------------------------------------------- */
.btn {
  border-radius: var(--tg-radius-sm);
  font-weight: 600;
  letter-spacing: .1px;
  padding: .5rem 1.1rem;
  transition: background-color var(--tg-transition),
              border-color var(--tg-transition),
              box-shadow var(--tg-transition),
              transform var(--tg-transition);
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tg-primary-soft);
}

.btn-primary,
.btn-success {
  background-color: var(--tg-primary);
  border-color: var(--tg-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-success:hover,
.btn-primary:focus,
.btn-success:focus {
  background-color: var(--tg-primary-600);
  border-color: var(--tg-primary-600);
  color: #fff;
}

.btn-outline-primary {
  color: var(--tg-primary-600);
  border-color: var(--tg-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background-color: var(--tg-primary);
  border-color: var(--tg-primary);
  color: #fff;
}

.btn-danger {
  background-color: var(--tg-accent);
  border-color: var(--tg-accent);
}
.btn-danger:hover {
  background-color: #cf2f3b;
  border-color: #cf2f3b;
}

.btn-secondary {
  background-color: #eef1f5;
  border-color: #eef1f5;
  color: var(--tg-ink);
}
.btn-secondary:hover {
  background-color: #e3e8ee;
  border-color: #e3e8ee;
  color: var(--tg-ink);
}

/* -------------------------------------------------------------------------
   Formularios
   ------------------------------------------------------------------------- */
.form-control,
.custom-select {
  border-radius: var(--tg-radius-sm);
  border: 1px solid var(--tg-line);
  color: var(--tg-ink);
  transition: border-color var(--tg-transition), box-shadow var(--tg-transition);
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--tg-primary);
  box-shadow: 0 0 0 3px var(--tg-primary-soft);
}
.form-control::placeholder { color: #9aa3b0; }

label { color: var(--tg-ink-soft); font-weight: 600; }

/* -------------------------------------------------------------------------
   Tarjetas / paneles
   ------------------------------------------------------------------------- */
.card,
.panel {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius);
  box-shadow: var(--tg-shadow-sm);
}
.card .card-header,
.panel .panel-heading {
  background: transparent;
  border-bottom: 1px solid var(--tg-line);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Navbar
   ------------------------------------------------------------------------- */
.navbar {
  background: var(--tg-surface);
  box-shadow: var(--tg-shadow-sm);
  border-bottom: 1px solid var(--tg-line);
}

/* Bloque "usuario - canal / price list" del header.
   Su margin-top:-20px lo sube bajo el navbar y la 1ª línea (nombre) quedaba
   tapada. Lo levantamos por encima y garantizamos color visible. */
.user-online {
  position: relative;
  z-index: 20;
  color: var(--tg-ink-soft) !important;
}
.user-online .user-on { color: var(--tg-primary); }

/* -------------------------------------------------------------------------
   Tablas
   ------------------------------------------------------------------------- */
.table {
  color: var(--tg-ink);
}
.table thead th {
  background: #fafbfc;
  border-bottom: 1px solid var(--tg-line);
  color: var(--tg-ink-soft);
  font-weight: 600;
  text-transform: none;
}
.table td, .table th { border-top: 1px solid var(--tg-line); }
.table-hover tbody tr:hover { background-color: var(--tg-primary-soft); }

/* Centrado vertical + padding parejo. Selector con .center-all e !important
   para ganarle a la cascada previa (bootstrap .table td => vertical-align:top). */
table.table.center-all td,
table.table.center-all th {
  vertical-align: middle !important;   /* margen igual arriba/abajo */
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* El código de parte (PART #) no debe partirse en 2 líneas: mantiene la fila baja */
table.table.center-all td.info { white-space: nowrap; }

/* -------------------------------------------------------------------------
   Badges / estados
   ------------------------------------------------------------------------- */
.badge { border-radius: 999px; font-weight: 600; padding: .35em .7em; }
.badge-success { background-color: var(--tg-primary); }
.badge-danger  { background-color: var(--tg-accent); }
.badge-info    { background-color: var(--tg-teal); }

/* -------------------------------------------------------------------------
   Modales
   ------------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--tg-radius);
  box-shadow: 0 12px 40px rgba(16,24,40,.18);
}
.modal-header, .modal-footer { border-color: var(--tg-line); }

/* -------------------------------------------------------------------------
   Scrollbar (navegadores webkit)
   ------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #c7cdd6;
  border-radius: 999px;
  border: 2px solid var(--tg-bg);
}
::-webkit-scrollbar-thumb:hover { background: #aab2bd; }

/* =========================================================================
   Clases PROPIAS del sistema (no Bootstrap).
   Reutilizadas en muchas pantallas: botones, títulos, buscador, filtros.
   ========================================================================= */

/* --- Botón de acción primaria (Accept, Apply, etc.) --- */
.btn-apply {
  background-color: var(--tg-primary);
  border-radius: var(--tg-radius-sm);
  color: #fff;
  padding: .5rem 1.2rem;
  box-shadow: var(--tg-shadow-sm);
  transition: background-color var(--tg-transition), transform var(--tg-transition);
}
.btn-apply:hover  { background-color: var(--tg-primary-600); color: #fff; }
.btn-apply:active { transform: translateY(1px); }

/* --- Botón secundario / cancelar --- */
.btn-download {
  background-color: #eef1f5;
  border-radius: var(--tg-radius-sm);
  color: var(--tg-ink-soft);
  padding: .5rem 1.2rem;
  transition: background-color var(--tg-transition), transform var(--tg-transition);
}
.btn-download:hover  { background-color: #e3e8ee; color: var(--tg-ink); }
.btn-download:active { transform: translateY(1px); }

/* --- Botón outline de filtros --- */
.btn-out-filters {
  color: var(--tg-primary-600);
  border: 1.5px solid var(--tg-primary);
  border-radius: var(--tg-radius-sm);
  padding: .4rem 1rem;
  background: transparent;
  transition: background-color var(--tg-transition), color var(--tg-transition);
}
.btn-out-filters:hover {
  background-color: var(--tg-primary);
  color: #fff;
}

/* --- Títulos de sección --- */
.title { color: var(--tg-ink); }

/* --- Tarjeta de filtros (col-md-5) y panel del buscador --- */
.container-up .border {
  border-color: var(--tg-line) !important;   /* pisa .border-light de Bootstrap */
  border-radius: var(--tg-radius) !important;
  background: var(--tg-surface);
  box-shadow: var(--tg-shadow-sm);
  padding: 1rem;
}

/* --- Buscador y fechas dentro de la tarjeta de filtros --- */
.busqueda,
.fecha-coti {
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-sm);
  padding: .45rem .6rem;
  transition: border-color var(--tg-transition), box-shadow var(--tg-transition);
}
.busqueda:focus,
.fecha-coti:focus {
  outline: none;
  border-color: var(--tg-primary);
  box-shadow: 0 0 0 3px var(--tg-primary-soft);
}