@charset "UTF-8";

/*  Este CSS está diseñado para usarse con Bootstrap 5.2.3.
    Se definió una convención basada en la palabra clave "brand" para utilizar el color institucional.

    Puede usar clases estándar como .btn-primary de Bootstrap,
    pero si prefiere aplicar el color de la marca, utilice clases personalizadas como:

    ▶ Botones:
      - .btn-brand, .btn-brand-primary, .btn-brand-secondary
      - .btn-outline-brand, .btn-outline-brand-primary, .btn-outline-brand-secondary

    ▶ Texto y enlaces:
      - .text-brand, .text-brand-primary
      - .link-brand, .brand-link

    ▶ Fondos y bordes:
      - .bg-brand, .bg-brand-primary
      - .text-bg-brand, .text-bg-brand-primary
      - .border-brand, .border-brand-primary

    ▶ Formularios:
      - .form-control.form-control-brand
      - .form-select.form-select-brand
      - .form-check-brand
      - .form-brand (aplicada al <form> para heredar estilos de marca)
      - .form-brand .btn-primary (estilo de botón dentro del formulario)

    ▶ Otros componentes:
      - .alert-brand, .alert-brand-primary
      - .nav-tabs.nav-brand
      - .nav-pills.nav-brand
      - .pagination.pagination-brand
      - .progress.progress-brand
      - .table-brand, .table-brand-primary

    Estas clases permiten mantener una coherencia visual con la identidad de la marca.
    Atte: Carlos Javier Gutierrez Orrego https://codepen.io/charlygut/pen/RNNbzbm
*/
:root {
  --brand-primary: var(--mdc-deeporange-500);
  --brand-primary-rgb: var(--mdc-deeporange-500-rgb);
  --brand-secondary: var(--mdc-gray-rgb-500);
  --brand-secondary-rgb: var(--mdc-gray-500-rgb);

  --brand-primary-border: var(--brand-primary);
  --brand-primary-border-dark: color-mix(
    in srgb,
    var(--brand-primary) 90%,
    black
  );

  /* Paleta O2Global (Material 50–900) 
     https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors 
     generar paleta en esa URL con el color base o brand
     <link rel="stylesheet" href="./css/material-colors-vars.min.css">
      */
  --brand-primary-50: var(--mdc-deeporange-50);
  --brand-primary-100: var(--mdc-deeporange-100);
  --brand-primary-200: var(--mdc-deeporange-200);
  --brand-primary-300: var(--mdc-deeporange-300);
  --brand-primary-400: var(--mdc-deeporange-400);
  --brand-primary-500: var(--mdc-deeporange-500); /* primary equivalente */
  --brand-primary-600: var(--mdc-deeporange-600);
  --brand-primary-700: var(--mdc-deeporange-700);
  --brand-primary-800: var(--mdc-deeporange-800);
  --brand-primary-900: var(--brand-primary);
  /* RGB equivalentes generado con chatgpt */
  --brand-primary-50-rgb: var(--mdc-deeporange-50-rgb);
  --brand-primary-100-rgb: var(--mdc-deeporange-100-rgb);
  --brand-primary-200-rgb: var(--mdc-deeporange-200-rgb);
  --brand-primary-300-rgb: var(--mdc-deeporange-300-rgb);
  --brand-primary-400-rgb: var(--mdc-deeporange-400-rgb);
  --brand-primary-500-rgb: var(--mdc-deeporange-500-rgb); /* primary equivalente */
  --brand-primary-600-rgb: var(--mdc-deeporange-600-rgb);
  --brand-primary-700-rgb: var(--mdc-deeporange-700-rgb);
  --brand-primary-800-rgb: var(--mdc-deeporange-800-rgb);
  --brand-primary-900-rgb: var(--mdc-deeporange-900-rgb);
}

.brand-link,
.link-brand,
.form-brand a {
  --bs-link-color: var(--brand-primary-500);
  --bs-link-hover-color: var(--brand-primary-600);
}

.btn-brand-primary,
.btn-brand {
  --brand-primary-hover-bg: color-mix(in srgb, var(--brand-primary) 90%, black);
  --brand-primary-hover-border-color: color-mix(
    in srgb,
    var(--brand-primary) 80%,
    black
  );
  --brand-primary-hover-color: #fff;

  --brand-primary-active-bg: color-mix(
    in srgb,
    var(--brand-primary) 80%,
    black
  );
  --brand-primary-active-border-color: color-mix(
    in srgb,
    var(--brand-primary) 70%,
    black
  );
  --brand-primary-active-color: #fff;
  --brand-primary-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary-border);

  --bs-btn-hover-color: var(--brand-primary-hover-color);
  --bs-btn-hover-bg: var(--brand-primary-hover-bg);
  --bs-btn-hover-border-color: var(--brand-primary-hover-border-color);

  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);

  --bs-btn-active-color: var(--brand-primary-active-color);
  --bs-btn-active-bg: var(--brand-primary-active-bg);
  --bs-btn-active-border-color: var(--brand-primary-active-border-color);
  --bs-btn-active-shadow: var(--brand-primary-active-shadow);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-brand-secondary {
  --brand-secondary-hover-bg: color-mix(
    in srgb,
    var(--brand-secondary) 90%,
    black
  );
  --brand-secondary-hover-border-color: color-mix(
    in srgb,
    var(--brand-secondary) 80%,
    black
  );
  --brand-secondary-hover-color: #fff;

  --brand-secondary-active-bg: color-mix(
    in srgb,
    var(--brand-secondary) 80%,
    black
  );
  --brand-secondary-active-border-color: color-mix(
    in srgb,
    var(--brand-secondary) 70%,
    black
  );
  --brand-secondary-active-color: #fff;
  --brand-secondary-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary-border);

  --bs-btn-hover-color: var(--brand-secondary-hover-color);
  --bs-btn-hover-bg: var(--brand-secondary-hover-bg);
  --bs-btn-hover-border-color: var(--brand-secondary-hover-border-color);

  --bs-btn-focus-shadow-rgb: var(--brand-secondary-rgb);

  --bs-btn-active-color: var(--brand-secondary-active-color);
  --bs-btn-active-bg: var(--brand-secondary-active-bg);
  --bs-btn-active-border-color: var(--brand-secondary-active-border-color);
  --bs-btn-active-shadow: var(--brand-secondary-active-shadow);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand-secondary);
  --bs-btn-disabled-border-color: var(--brand-secondary);
}

[class*="btn-outline-brand"] {
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-bg: transparent;
  --bs-gradient: none;
}
.btn-outline-brand-primary,
.btn-outline-brand {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
  --bs-btn-disabled-color: var(--brand-primary);
}

.btn-outline-brand-secondary {
  --bs-btn-color: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-hover-bg: var(--brand-secondary);
  --bs-btn-hover-border-color: var(--brand-secondary);
  --bs-btn-focus-shadow-rgb: var(--brand-secondary-rgb);
  --bs-btn-active-bg: var(--brand-secondary);
  --bs-btn-active-border-color: var(--brand-secondary);
  --bs-btn-disabled-color: var(--brand-secondary);
}

.text-brand-primary,
.text-brand {
  --bs-text-opacity: 1;
  color: rgba(var(--brand-primary-rgb), var(--bs-text-opacity)) !important;
}

.text-bg-brand-primary,
.text-bg-brand {
  color: #fff !important;
  background-color: RGBA(
    var(--brand-primary-rgb),
    var(--bs-bg-opacity, 1)
  ) !important;
}

.bg-brand-primary,
.bg-brand {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--brand-primary-rgb),
    var(--bs-bg-opacity)
  ) !important;
}

.border-brand-primary,
.border-brand {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--brand-primary-rgb),
    var(--bs-border-opacity)
  ) !important;
}

.alert-brand-primary,
.alert-brand {
  --brand-primary-light: var(--brand-primary-100);
  --brand-primary-border-light: var(--brand-primary-200);
  --brand-primary-dark: var(--brand-primary-800);
  --brand-primary-link: var(--brand-primary-900);

  --bs-alert-color: var(--brand-primary-dark);
  --bs-alert-bg: var(--brand-primary-light);
  --bs-alert-border-color: var(--brand-primary-border-light);
}

.alert-brand-primary .alert-link,
.alert-brand .alert-link {
  color: var(--brand-primary-link);
}

.nav-brand {
  --bs-link-color: var(--brand-primary-500);
  --bs-link-hover-color: var(--brand-primary-600);

  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-pills-link-active-bg: var(--brand-primary);
}

.pagination.pagination-brand {
  --bs-link-color: var(--brand-primary-500);
  --bs-link-hover-color: var(--brand-primary-600);

  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem
    rgba(var(--brand-primary-700-rgb), 0.25);
  --bs-pagination-active-bg: var(--brand-primary-900);
  --bs-pagination-active-border-color: var(--brand-primary-900);
}

.progress.progress-brand {
  --bs-progress-bar-bg: var(--brand-primary-500);
}

.table-brand-primary,
.table-brand {
  --bs-table-border-color: var(--brand-primary-200);
  --bs-table-bg: var(--brand-primary-100);
  --bs-table-striped-bg: var(--brand-primary-50);
  --bs-table-active-bg: var(--brand-primary-200);
  --bs-table-hover-bg: var(--brand-primary-300);
}

.form-control.form-control-brand:focus,
.form-select.form-select-brand:focus,
.form-check-input:focus {
  border-color: var(--brand-primary-300);
  box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-900-rgb), 0.25);
}

.form-check-brand .form-check-input:checked,
.form-check-brand .form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2392c0db'/%3e%3c/svg%3e");
}

/* Chrome, Safari, Edge */
.form-range::-webkit-slider-thumb {
  background-color: var(--brand-primary);
}
.form-range:active::-webkit-slider-thumb {
  background-color: var(--brand-primary-200);
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff,
    0 0 0 0.25rem rgba(var(--brand-primary-900-rgb), 0.25);
}

/* Firefox */
.form-range::-moz-range-thumb {
  background-color: var(--brand-primary);
}
.form-range:active::-moz-range-thumb {
  background-color: var(--brand-primary-200);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff,
    0 0 0 0.25rem rgba(var(--brand-primary-900-rgb), 0.25);
}

/* ///////////////////////////////////////////////////////// */
.form-brand .form-control:focus,
.form-brand .form-select:focus,
.form-brand .form-check-input:focus {
  border-color: var(--brand-primary-300);
  box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-900-rgb), 0.25);
}

.form-brand .form-check-input:checked,
.form-brand .form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.form-brand .form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2392c0db'/%3e%3c/svg%3e");
}

/* Chrome, Safari, Edge */
.form-brand .form-range::-webkit-slider-thumb {
  background-color: var(--brand-primary);
}
.form-brand .form-range:active::-webkit-slider-thumb {
  background-color: var(--brand-primary-200);
}
.form-brand .form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff,
    0 0 0 0.25rem rgba(var(--brand-primary-900-rgb), 0.25);
}

/* Firefox */
.form-brand .form-range::-moz-range-thumb {
  background-color: var(--brand-primary);
}
.form-brand .form-range:active::-moz-range-thumb {
  background-color: var(--brand-primary-200);
}
.form-brand .form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff,
    0 0 0 0.25rem rgba(var(--brand-primary-900-rgb), 0.25);
}

.form-brand .btn-primary {
  --brand-primary-hover-bg: color-mix(in srgb, var(--brand-primary) 90%, black);
  --brand-primary-hover-border-color: color-mix(
    in srgb,
    var(--brand-primary) 80%,
    black
  );
  --brand-primary-hover-color: #fff;

  --brand-primary-active-bg: color-mix(
    in srgb,
    var(--brand-primary) 80%,
    black
  );
  --brand-primary-active-border-color: color-mix(
    in srgb,
    var(--brand-primary) 70%,
    black
  );
  --brand-primary-active-color: #fff;
  --brand-primary-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary-border);

  --bs-btn-hover-color: var(--brand-primary-hover-color);
  --bs-btn-hover-bg: var(--brand-primary-hover-bg);
  --bs-btn-hover-border-color: var(--brand-primary-hover-border-color);

  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);

  --bs-btn-active-color: var(--brand-primary-active-color);
  --bs-btn-active-bg: var(--brand-primary-active-bg);
  --bs-btn-active-border-color: var(--brand-primary-active-border-color);
  --bs-btn-active-shadow: var(--brand-primary-active-shadow);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}