/*
 * price2b-brand.css
 * --------------------------------------------------------------------------
 * ÚNICA capa de marca Price2b (color + tipografía) sobre el tema Sneat/Vuexy.
 * Se carga AL FINAL en layouts/sections/styles.blade.php, después de demo.css.
 *
 * Por qué acá y no en los CSS de vendor compilados:
 *   los vendor .css se regeneran desde SCSS con `npm run dev/prod` (vuelven a
 *   azul Sneat). Esta capa, cargada última y basada en variables --bs-* + reglas
 *   puntuales, re-aplica la marca aunque el vendor se regenere. Fuente única.
 *
 * Reglas duras de marca:
 *   - Amarillo SIEMPRE como fondo, con texto carbón #1C1C1E.
 *   - Nunca texto amarillo sobre blanco ni blanco sobre amarillo.
 *   - Solo color/tipografía. No se toca HTML/estructura/layout ni el logo.
 * Editar en resources/ ; `npm run dev` copia a public/assets/css/.
 ************************************************************************** */

/* ====================================================================== *
 * 1. TOKENS DE COLOR + TIPOGRAFÍA (variables del tema)
 * ====================================================================== */
:root {
  /* Primary -> PETRÓLEO */
  --bs-primary: #102A43;
  --bs-primary-rgb: 16, 42, 67;
  --p2b-primary-darker: #0A1B2E;

  /* Acento -> AMARILLO de marca (siempre fondo, texto carbón) */
  --bs-warning: #FFCC28;
  --bs-warning-rgb: 255, 204, 40;
  --p2b-warning-press: #E6B41C;
  --p2b-on-warning: #1C1C1E;

  /* Funcionales */
  --bs-success: #157A52;
  --bs-success-rgb: 21, 122, 82;
  --bs-danger: #E5484D;
  --bs-danger-rgb: 229, 72, 77;
  /* "info" cian fuera de paleta -> petróleo (no decorativo) */
  --bs-info: #102A43;
  --bs-info-rgb: 16, 42, 67;

  /* Neutros / texto (oscurecidos: hoy se ven muy claros) */
  --bs-body-color: #33404D;
  --bs-body-color-rgb: 51, 64, 77;
  --bs-heading-color: #232E3A;
  --bs-border-color: #E4E7EB;
  --bs-border-color-translucent: #E4E7EB;

  /* Links -> petróleo */
  --bs-link-color: #102A43;
  --bs-link-color-rgb: 16, 42, 67;
  --bs-link-hover-color: #0A1B2E;
  --bs-link-hover-color-rgb: 10, 27, 46;

  /* Tipografía de marca */
  --bs-font-sans-serif: "Hanken Grotesk", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

/* ====================================================================== *
 * 2. TIPOGRAFÍA  (Hanken Grotesk cuerpo / Archivo títulos+números)
 *    Fuentes cargadas vía <link> en styles.blade.php. No se bajan tamaños.
 * ====================================================================== */
body {
  font-family: var(--bs-font-sans-serif) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.fw-bold, .fw-bolder,
.btn {
  font-family: "Archivo", var(--bs-font-sans-serif) !important;
}

/* color de headings (sin !important: deja ganar a las utilidades .text-*) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--bs-heading-color);
}

/* ====================================================================== *
 * 3. UTILIDADES DE TEXTO (brand-safe)
 *    Amarillo NUNCA como texto -> warning textual = carbón. Cian -> petróleo.
 * ====================================================================== */
.text-primary { color: var(--bs-primary) !important; }
.text-success { color: var(--bs-success) !important; }
.text-danger  { color: var(--bs-danger) !important; }
.text-warning { color: var(--p2b-on-warning) !important; }
.text-info    { color: var(--bs-primary) !important; }
/* secundarios / muted más oscuros para legibilidad */
.text-muted   { color: #58606B !important; }

/* ====================================================================== *
 * 4. BADGES "SOFT" (.bg-label-*)
 *    warning = acento de marca -> SÓLIDO oro + carbón (ENTERPRISE, etc.).
 *    resto -> paleta de marca, sin cian.
 * ====================================================================== */
.bg-label-warning,
.badge.bg-label-warning {
  background-color: var(--bs-warning) !important;
  color: var(--p2b-on-warning) !important;
}
.bg-label-primary   { background-color: rgba(16, 42, 67, .08) !important; color: var(--bs-primary) !important; }

/* Badge de plan en el navbar (ENTERPRISE / Starter) -> oro SÓLIDO + carbón.
   Targeteado por href (CSS-only, sin tocar el HTML): la vista usa
   .badge.bg-label-primary|success enlazando a la página de planes. */
a.badge[href*="/billing/subscription/plans"] {
  background-color: var(--bs-warning) !important;
  color: var(--p2b-on-warning) !important;
}
a.badge[href*="/billing/subscription/plans"] i {
  color: var(--p2b-on-warning) !important;
}

/* Badge de conteo "N PRODUCTS" (explorer DDP) -> oro SÓLIDO + carbón.
   Es un .badge.bg-primary con .text-black forzado -> quedaba invisible. */
.badge.bg-primary.text-black {
  background-color: var(--bs-warning) !important;
  color: var(--p2b-on-warning) !important;
}

/* Badge sólido petróleo (.bg-primary) -> texto blanco. Bootstrap .bg-* no setea
   color de texto, así que heredaba el petróleo oscuro del contenedor y quedaba
   invisible (ej. el "1,230" en "Seleccionar todos los registros"). Excluye el
   badge gold "N PRODUCTS" de arriba (.text-black). */
.badge.bg-primary:not(.text-black) {
  color: #fff !important;
}
.bg-label-info      { background-color: rgba(16, 42, 67, .08) !important; color: var(--bs-primary) !important; }
.bg-label-success   { background-color: #DFF9EC !important; color: var(--bs-success) !important; }
.bg-label-danger    { background-color: #FDE8E8 !important; color: var(--bs-danger) !important; }

/* ====================================================================== *
 * 5. CHIPS DE ÍCONO UNIFICADOS  (KPI cards + tarjetas de región)
 *    metric-card usa .avatar-initial.bg-label-{type}: un solo estilo petróleo.
 *    Mayor especificidad que §4 -> los íconos quedan neutros aunque el badge
 *    warning sea sólido en otros lados.
 * ====================================================================== */
.avatar-initial.bg-label-primary,
.avatar-initial.bg-label-secondary,
.avatar-initial.bg-label-info,
.avatar-initial.bg-label-success,
.avatar-initial.bg-label-warning,
.avatar-initial.bg-label-danger,
/* otros contenedores de ícono usados en explorers DDP (KPI .rounded-circle,
   tarjetas de región .region-icon): mismo chip neutro, NUNCA amarillo */
.region-icon.bg-label-primary,
.region-icon.bg-label-secondary,
.region-icon.bg-label-info,
.region-icon.bg-label-success,
.region-icon.bg-label-warning,
.region-icon.bg-label-danger,
.rounded-circle.bg-label-primary,
.rounded-circle.bg-label-secondary,
.rounded-circle.bg-label-info,
.rounded-circle.bg-label-success,
.rounded-circle.bg-label-warning,
.rounded-circle.bg-label-danger {
  background-color: rgba(16, 42, 67, .07) !important;
  color: var(--bs-primary) !important;
}

/* ====================================================================== *
 * 6. BOTONES
 * ====================================================================== */
/* Primary -> petróleo, texto blanco */
.btn-primary {
  /* setear las variables de botón Bootstrap cubre TODOS los estados, incl.
     :disabled (Sneat dejaba el disabled en su $primary gold). */
  --bs-btn-bg: #102A43;
  --bs-btn-border-color: #102A43;
  --bs-btn-hover-bg: #0A1B2E;
  --bs-btn-hover-border-color: #0A1B2E;
  --bs-btn-active-bg: #0A1B2E;
  --bs-btn-active-border-color: #0A1B2E;
  --bs-btn-disabled-bg: #102A43;
  --bs-btn-disabled-border-color: #102A43;
  --bs-btn-disabled-color: #fff;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:active, .btn-primary.active {
  background-color: var(--p2b-primary-darker) !important;
  border-color: var(--p2b-primary-darker) !important;
  color: #fff !important;
}
/* :disabled — el tema hardcodea el disabled en gold !important (mayor
   especificidad). Igualamos especificidad + !important para ganar (Bootstrap
   ya lo atenúa con opacity .65 -> petróleo apagado, calmo). */
.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Warning sólido (Filtrar) -> oro + carbón */
.btn-warning {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  color: var(--p2b-on-warning) !important;
}
.btn-warning:hover, .btn-warning:focus,
.btn-warning:active, .btn-warning.active {
  background-color: var(--p2b-warning-press) !important;
  border-color: var(--p2b-warning-press) !important;
  color: var(--p2b-on-warning) !important;
}

/* btn-label-warning (Comparar) crema -> oro SÓLIDO + carbón */
.btn-label-warning {
  background: var(--bs-warning) !important;
  border-color: transparent !important;
  color: var(--p2b-on-warning) !important;
}
.btn-label-warning:hover, .btn-label-warning:focus,
.btn-label-warning:active, .btn-label-warning.active,
.btn-label-warning.show.dropdown-toggle {
  background: var(--p2b-warning-press) !important;
  border-color: transparent !important;
  color: var(--p2b-on-warning) !important;
}

/* Botón "Comparar" (explorer DDP, .btn-compare) -> oro SÓLIDO + carbón.
   Hoy es btn-outline-primary y se ve lavado. */
.btn-compare {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  color: var(--p2b-on-warning) !important;
}
.btn-compare:hover, .btn-compare:focus, .btn-compare:active {
  background-color: var(--p2b-warning-press) !important;
  border-color: var(--p2b-warning-press) !important;
  color: var(--p2b-on-warning) !important;
}
.btn-compare i { color: var(--p2b-on-warning) !important; }

/* ====================================================================== *
 * 7. FONDOS CONTEXTUALES SÓLIDOS
 * ====================================================================== */
.bg-primary { background-color: var(--bs-primary) !important; }
.bg-info    { background-color: var(--bs-primary) !important; } /* cian -> petróleo */
.bg-success { background-color: var(--bs-success) !important; }
.bg-warning { background-color: var(--bs-warning) !important; color: var(--p2b-on-warning) !important; }

/* ====================================================================== *
 * 8. JERARQUÍA DE NAVEGACIÓN — dos niveles distintos (a propósito)
 *    HEADER (menú horizontal, muchos ítems de igual peso): activo = AMARILLO
 *      SUAVE + carbón. El acento marca "seleccionado" sin recargar; evita dos
 *      bloques oscuros compitiendo en pantalla.
 *    SIDEBAR (menú vertical, ancla persistente de sección): activo = PETRÓLEO
 *      sólido + ícono oro.
 *    Petróleo = superficie/ancla ; amarillo = único acento de selección.
 * ====================================================================== */
/* Header (top nav horizontal) activo -> amarillo suave, texto + ícono carbón */
.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link,
.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle) {
  background-color: #FFF3CC !important;
  color: var(--p2b-on-warning) !important;
}
.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link .menu-icon,
.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link i {
  color: var(--p2b-on-warning) !important;
}

/* Sidebar (menú vertical) activo -> petróleo sólido, texto blanco, ícono oro */
.bg-menu-theme.menu-vertical .menu-inner .menu-item.active > .menu-link:not(.menu-toggle),
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}
.bg-menu-theme.menu-vertical .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon,
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) i {
  color: var(--bs-warning) !important;
}

/* ====================================================================== *
 * 9. BOTONES OUTLINE — el tema los compila con la paleta VIEJA de Sneat
 *    hardcodeada (primary dorado, warning naranja #fdac41, danger #ff5b5c,
 *    success #39da8a, info cian #00cfdd). Remap a marca. Warning NUNCA texto
 *    amarillo sobre blanco -> texto carbón + borde oro, hover oro sólido.
 * ====================================================================== */
.btn-outline-primary {
  --bs-btn-color: #102A43;
  --bs-btn-border-color: #102A43;
  --bs-btn-hover-bg: #102A43;
  --bs-btn-hover-border-color: #102A43;
  --bs-btn-active-bg: #102A43;
  --bs-btn-disabled-color: #102A43;
  --bs-btn-disabled-border-color: rgba(16, 42, 67, .4);
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary:active, .btn-outline-primary.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled {
  color: var(--bs-primary) !important;
  border-color: rgba(16, 42, 67, .4) !important;
  background-color: transparent !important;
}
.btn-outline-warning {
  color: var(--p2b-on-warning) !important;
  border-color: var(--bs-warning) !important;
}
.btn-outline-warning:hover, .btn-outline-warning:focus,
.btn-outline-warning:active, .btn-outline-warning.active {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  color: var(--p2b-on-warning) !important;
}
.btn-outline-danger {
  color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
}
.btn-outline-danger:hover, .btn-outline-danger:focus,
.btn-outline-danger:active, .btn-outline-danger.active {
  background-color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
  color: #fff !important;
}
.btn-outline-success {
  color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
}
.btn-outline-success:hover, .btn-outline-success:focus,
.btn-outline-success:active, .btn-outline-success.active {
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
  color: #fff !important;
}
.btn-outline-info {                 /* cian -> petróleo */
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-outline-info:hover, .btn-outline-info:focus,
.btn-outline-info:active, .btn-outline-info.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* "Publicación Masiva" (.bulk-publish-btn) -> oro SÓLIDO + carbón */
.bulk-publish-btn {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  color: var(--p2b-on-warning) !important;
}
.bulk-publish-btn:hover, .bulk-publish-btn:focus, .bulk-publish-btn:active {
  background-color: var(--p2b-warning-press) !important;
  border-color: var(--p2b-warning-press) !important;
  color: var(--p2b-on-warning) !important;
}

/* ====================================================================== *
 * 10. ALERTS — Sneat los compila con la paleta vieja (warning crema #fff2e1
 *     + texto naranja, info cian, etc.). Remap a tinte de marca; warning con
 *     texto carbón (nunca amarillo sobre claro). El ícono hereda currentColor.
 * ====================================================================== */
.alert-warning {
  background-color: rgba(255, 204, 40, .16) !important;
  border-color: rgba(255, 204, 40, .55) !important;
  color: var(--p2b-on-warning) !important;
}
.alert-info, .alert-primary {
  background-color: rgba(16, 42, 67, .08) !important;
  border-color: rgba(16, 42, 67, .25) !important;
  color: var(--bs-primary) !important;
}
.alert-success {
  background-color: #DFF9EC !important;
  border-color: rgba(21, 122, 82, .35) !important;
  color: var(--bs-success) !important;
}
.alert-danger {
  background-color: #FDE8E8 !important;
  border-color: rgba(229, 72, 77, .35) !important;
  color: var(--bs-danger) !important;
}
/* íconos/links dentro del alert siguen el color del alert */
.alert-warning .alert-icon, .alert-warning i { color: var(--p2b-on-warning) !important; }
.alert-info i, .alert-primary i { color: var(--bs-primary) !important; }
.alert-success i { color: var(--bs-success) !important; }
.alert-danger i { color: var(--bs-danger) !important; }

/* ====================================================================== *
 * 11. SUPERFICIE — tarjetas redondeadas + fondo humo (SOLO layout, sin color
 *     de marca). Humo de fondo, paneles blancos flotando; sistema plano.
 * ====================================================================== */
/* Área de contenido en humo (navbar/menú quedan blancos; tarjetas blancas).
   Humo perceptible contra las cards blancas (#F7F8FA era casi blanco). */
.content-wrapper { background-color: #ECEFF3 !important; }

/* Card base -> radius 20, borde niebla, sombra muy sutil.
   El borde va SIN !important para no pisar acentos (border-left de color en
   las KPI cards, utilidades border-*); el radius/sombra sí se fuerzan. */
.card {
  border: 1px solid #E4E7EB;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}

/* Radios de elementos internos (consistencia) */
.form-control, .form-select, .flatpickr-input,
input.form-control, .dataTables_filter input {
  border-radius: 10px !important;
}
.btn { border-radius: 10px !important; }
.badge { border-radius: 8px !important; }
.cross-actions-btn, .channels-btn { border-radius: 8px !important; }
.form-check-input:not([type="radio"]) { border-radius: 4px !important; }
.pagination .page-link,
.dataTables_paginate .paginate_button,
.paginate_button.page-item .page-link { border-radius: 10px !important; }

/* input-group: re-asentar el redondeo de grupo tras el radius de inputs
   (ej. FOB con prefijo "$") para que no queden esquinas sueltas */
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.invalid-tooltip) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}