// ============================================================
// Aislar el panel admin del theme del catálogo (monolito)
// ------------------------------------------------------------
// En el monolito, el CSS del catálogo (h1/h3, .dashboard, .row,
// .card, .btn, enlaces, etc.) se carga globalmente junto al panel,
// lo que "mueve" o rompe los estilos del admin (que en "Unirlos en
// uno solo" era una app separada y no tenía ese theme encima).
// Aquí se re-establecen, scopeados bajo .admin-layout, los estilos
// propios del panel para que se vea idéntico.
// ============================================================

.admin-layout {
  // --- Reseteo de tipografía base (anula el theme del catálogo) ---
  h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    line-height: 1.2;
  }

  h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #212529;
    margin: 0 0 0.5rem;
  }

  h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
  }

  p {
    color: #6c757d;
    margin: 0;
  }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: none;
    }
  }

  // --- Dashboard (anula el .dashboard del tema: display:flex) ---
  .dashboard {
    display: block;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .dashboard__header {
    margin-bottom: 1.875rem;
  }

  // --- Espaciado del grid del dashboard ---
  // En la app admin original los .col/.row de Bootstrap daban separación.
  // El theme del catálogo anula esos márgenes, así que aquí se re-establecen.
  .dashboard__stats {
    .row {
      margin-left: -15px;
      margin-right: -15px;
    }

    // Espacio entre las tarjetas de UNA misma fila
    [class*='col-'] {
      padding-left: 15px;
      padding-right: 15px;
      margin-bottom: 20px;
    }

    // Separación entre las FILAS de tarjetas (la 2ª fila queda junta sin esto)
    .row + .row {
      margin-top: 24px;
    }
  }

  .stat-card {
    background: white;
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
  }

  // --- Header (tabs del subménu de sección) ---
  // Asegura que los botones de sección se vean como en la app admin original
  // (el theme del catálogo puede forzar uppercase/colores en los enlaces).
  .admin-header {
    height: 60px;

    .admin-header__tabs {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .admin-header__tab {
      display: inline-flex;
      align-items: center;
      padding: 7px 16px;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: 500;
      line-height: 1.2;
      text-transform: none;
      color: #333;
      text-decoration: none;
      white-space: nowrap;
      background: transparent;
      border: none;
      cursor: pointer;

      &:hover {
        background-color: rgba(52, 152, 219, 0.1);
        color: #e52727;
        text-decoration: none;
      }

      i {
        margin-right: 4px;
      }

      &--active {
        background-color: #e52727;
        color: white;

        &:hover {
          background-color: darken(#e52727, 8%);
          color: white;
        }
      }
    }
  }

  // --- Tablas: separación de botones de acciones (Editar/Borrar) ---
  // En el original cada botón llevaba `mr-2` de Bootstrap; el theme del
  // catálogo puede anular/compactar ese margen. Reforzamos con gap.
  .table {
    td {
      .btn + .btn {
        margin-left: 8px;
      }
    }

    .btn-sm {
      padding: 0.25rem 0.5rem;
      line-height: 1.5;
    }
  }

  // --- Page header: espacio entre los botones de acción ---
  // Ej. Ofertas: "Eliminar todas" | "Eliminar seleccionadas" | "+ Nueva Oferta".
  // El theme del catálogo anulaba los `mr-2` de Bootstrap y quedaban pegados.
  .page-header {
    .btn {
      margin-right: 14px !important;
    }

    .btn:last-child {
      margin-right: 0 !important;
    }
  }

  // --- Buscador de productos: alinear/espaciar la barra y el filtro por modelo ---
  .productos-search__wrapper {
    flex: 1 1 auto;
    max-width: 480px;
    margin-right: 12px;
  }

  .productos-search__model {
    margin-left: 0;
    margin-right: 12px;
  }

  .productos-search__filters {
    margin-right: 12px;
  }

  // ================================================================
  // BUSCADOR DE PRODUCTOS — override scopeado y completo
  // El HTML del buscador es idéntico al original; aquí se fuerza el
  // estilo exacto del panel ("Unirlos en uno solo") porque el theme del
  // catálogo altera .form-control/.btn/.d-flex de la barra.
  // ================================================================
  // Barra en UNA SOLA FILA horizontal, en orden:
  // buscador → filtro por modelo → estado → eliminar → + Nuevo producto
  .productos-search-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0;

    // Los hijos no se encogen ni bajan de línea
    > * {
      flex-shrink: 0;
    }

    // En pantallas muy pequeñas sí permite scroll horizontal en vez de apilarse
    @media (max-width: 768px) {
      flex-wrap: wrap !important;
      row-gap: 10px;
    }
  }

  .productos-search__wrapper {
    position: relative;
    flex: 1 1 auto;
    min-width: 220px;
    max-width: 420px;
    margin-right: 12px;
  }

  .productos-search__input {
    width: 100%;
    height: 42px;
    border-radius: 50px;
    border: 1px solid #ced4da;
    background: white;
    color: #212529;
    font-size: 0.95rem;
    padding-left: 18px;
    padding-right: 48px;
    box-shadow: none;

    &:focus {
      border-color: #e52727;
      box-shadow: 0 0 0 3px rgba(229, 39, 39, 0.12);
      outline: none;
    }

    &--with-btn {
      padding-right: 48px;
    }
  }

  .productos-search__go {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #0b4b99;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .productos-search__model {
    position: relative;
    margin-left: 0;
    margin-right: 12px;
  }

  .productos-search__model-btn {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 18px;
    border-radius: 50px;
    border: 1px solid #ced4da;
    background: white;
    color: #495057;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;

    &:hover {
      border-color: #e52727;
      color: #e52727;
    }

    &--active {
      border-color: #e52727;
      color: #e52727;
    }
  }

  .productos-search__filters-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #adb5bd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 10px;
    font-family: inherit;
  }

  .productos-search__filter {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6c757d;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    font-family: inherit;

    &:hover {
      color: #495057;
      background: #e9ecef;
      text-decoration: none;
    }

    &--active {
      background: #e52727;
      color: white;
      box-shadow: 0 2px 6px rgba(229, 39, 39, 0.35);
    }

    &--green:hover {
      color: #2ecc71;
    }

    &--gray:hover {
      color: #6c757d;
    }

    &--active-green {
      background: #2ecc71;
      color: white;
    }

    &--active-gray {
      background: #6c757d;
      color: white;
    }
  }

  .productos-search__action {
    margin-left: 14px;
    border-radius: 50px;
    height: 42px;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 500;
    white-space: nowrap;

    &:disabled {
      opacity: 0.45;
    }
  }

  .productos-search__new {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    height: 42px;
    padding-left: 22px;
    padding-right: 22px;
    border-radius: 50px;
    border: none;
    background: #0b4b99;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(11, 75, 153, 0.3);

    &:hover {
      background: darken(#0b4b99, 8%);
      color: white;
      text-decoration: none;
    }
  }

  .productos-search__model-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;
    background: white;
    border-radius: 14px;
    border: 1px solid #dee2e6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 16px;
    width: 280px;
  }

  .productos-search__model-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 8px;
    display: block;
    font-family: inherit;
  }

  .productos-search__model-select {
    border-radius: 10px;
    height: 40px;
    width: 100%;

    &:focus {
      border-color: #e52727;
      box-shadow: 0 0 0 3px rgba(229, 39, 39, 0.12);
    }
  }

  // ================================================================
  // RESET GLOBAL de clases genéricas de Bootstrap / theme del catálogo
  // (lo que el panel NO define por sí mismo y el theme altera)
  // para que el admin se vea idéntico a "Unirlos en uno solo".
  // ================================================================

  // --- Tipografía global (h2, h4, etc. que faltaban) ---
  h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #212529;
    margin: 0 0 0.5rem;
  }

  h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #212529;
  }

  // --- Grid de Bootstrap (gutters estándar 15px) ---
  .container,
  .container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

  [class*='col-'] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }

  // --- Utilidades de texto (el theme del catálogo las puede re-colorear) ---
  .text-muted {
    color: #6c757d !important;
  }

  .text-primary {
    color: #007bff !important;
  }

  .text-center {
    text-align: center !important;
  }

  // --- Input group (Barra de búsqueda / prefijos) ---
  .input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
  }

  .input-group-prepend,
  .input-group-append {
    display: flex;
  }

  .input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
  }

  .input-group-prepend .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .input-group-append .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  // --- Dropdown (menú de usuario / filtro modelo) ---
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: block;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
  }

  .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;

    &:hover,
    &:focus {
      color: #16181b;
      text-decoration: none;
      background-color: #f8f9fa;
    }
  }

  .dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
  }

  .dropdown-item-text {
    display: block;
    padding: 0.25rem 1.5rem;
    color: #212529;
  }

  // --- Badges (variantes que el panel usa y no están en _components) ---
  .badge {
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
  }

  .badge-light {
    background-color: #f8f9fa;
    color: #212529;
  }

  // --- Botón block (login usa btn-block) ---
  .btn-block {
    display: block;
    width: 100%;
  }

  // --- Spinner ---
  .spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
  }

  .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
  }

  @keyframes admin-spinner-border {
    to {
      transform: rotate(360deg);
    }
  }

  .spinner-border {
    animation-name: admin-spinner-border;
  }

  // --- Checkbox / input alineados en tablas ---
  .text-center.align-middle {
    vertical-align: middle;
  }

  .align-middle {
    vertical-align: middle !important;
  }

  .align-items-center {
    align-items: center !important;
  }

  .justify-content-center {
    justify-content: center !important;
  }

  // ================================================================
  // FORMULARIO DE OFERTAS (OfferForm): separar
  // Marca/Modelo (selects) → Buscar → "Seleccionar Productos" → selector
  // El theme del catálogo anulaba los mb-2/mt-2 de Bootstrap.
  // ================================================================
  // El input "Buscar" es el .form-control que sigue al .row de selects
  // dentro del mismo .form-group.
  .form-group {
    // Espacio después de la fila Marca/Modelo
    .row {
      margin-bottom: 6px;
    }

    // El buscador "Buscar" (input que sigue al row): baja y separa
    .row + .form-control {
      margin-top: 16px !important;
      margin-bottom: 18px !important;
    }

    // "Seleccionar Productos": separado del buscador
    .row + .form-control + label {
      margin-top: 14px;
      margin-bottom: 10px;
    }
  }

  // Caja del selector de productos: no queda montada con lo anterior
  .product-selector {
    margin-top: 4px;
  }
}