@import "tailwindcss";

/* ============================================
   TEMA TAILWIND - Variables personalizadas
   ============================================ */
@source "../../../../../modules/custom";

@theme {
  /* Colores principales */
  --color-primary: #A81B2C;
  --color-secondary: #D0A821;
  --color-secondary-hard: #B28B18;
  --color-tertiary: #FFDE47;
  --color-danger: #F14444;
  --color-success: #20E3B5;
  --color-background: #F5F5F5;
  --color-border: #e5e7eb;
  --color-white: #FFF;

  /* Fuentes */
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent: "Quicksand", sans-serif;

  /* Breakpoints personalizados si necesitas */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1920px;
}

/* ============================================
   ESTILOS BASE
   ============================================ */
@layer base {

  /* Box-sizing universal */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Configuración del body */
  body {
    font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    padding: 0;
  }

  /* Imágenes responsivas */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}

/* ============================================
   VARIABLES CSS ADICIONALES (fuera de @theme)
   ============================================ */
:root {
  --NEGRO-CCERES: #3C3F42;
  --color-tertiary-gradient-start: #FFDE47;
  --color-tertiary-gradient-end: #CAA500;
  --color-primary-gradient-start: #0576E5;
  --color-primary-gradient-end: #0053A4;
  --color-hover: #f5f5f5;
  --color-text-default: #3C3F42;
  --color-text-primary: var(--color-primary);
  --color-text-secondary: #942280;
  --color-text-on-primary: #FFF;
  --color-text-on-secondary: #FFF;
  --color-text-on-tertiary: #000;
  --color-data-3: #F23EB3;
  --color-data-4: #84CBF2;
  --color-data-5: #ECDF6B;
  --color-data-6: #61BF8B;
  --color-data-7: #EBA71F;
  --color-data-8: #FF6565;
  --color-data-9: #BA761E;

  --button-color-primary: var(--color-primary);
  --button-color-secondary: var(--color-secondary);
  --button-color-tertiary: #f8d34a;
  --button-color-danger: #F14444;
  --button-color-success: #20E3B5;


  --filter-color-primary: brightness(0) saturate(100%) invert(48%) sepia(83%) saturate(7072%) hue-rotate(198deg) brightness(101%) contrast(96%);
  --filter-color-secondary: brightness(0) saturate(100%) invert(19%) sepia(60%) saturate(3308%) hue-rotate(291deg) brightness(87%) contrast(92%);
  --filter-color-tertiary: brightness(0) saturate(100%) invert(90%) sepia(68%) saturate(722%) hue-rotate(325deg) brightness(104%) contrast(101%);
  --filter-color-white: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(85deg) brightness(108%) contrast(102%);
  --filter-color-black: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7479%) hue-rotate(243deg) brightness(97%) contrast(106%);
  --filter-color-danger: brightness(0) saturate(100%) invert(52%) sepia(97%) saturate(4610%) hue-rotate(335deg) brightness(95%) contrast(96%);
  --filter-color-disabled: brightness(0) saturate(100%) invert(52%) sepia(0%) saturate(519%) hue-rotate(148deg) brightness(103%) contrast(90%);

  --font-family-base: "Roboto", sans-serif;
  --font-family-accent: "Quicksand", sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --padding-mobile: 23px;
  --padding-desktop: 220px;
  --padding-laptop: 150px;

  /* override 08/10/2025 */
  --Bg-Secondary: #F9FAFB;
  --Txt-Negative: #FFF;
  /* --Txt-Primary: #474C59; */
  --bg-header-solid: #023e29;
  --Bg-Secondary-hover: #ebf2f8;
}

/* ============================================
   COMPONENTES PERSONALIZADOS
   ============================================ */
@layer components {
  .font-accent {
    font-family: "Quicksand", sans-serif;
  }

  .font-roboto {
    font-family: "Roboto", sans-serif;
  }

  .font-base {
    font-family: var(--font-family-base) !important;
  }

  .bg-secondary-hard {
    background-color: var(--Bg-secondary-hard);
  }
}

/* ============================================
   ESTILOS ESPECÍFICOS DE PÁGINAS
   ============================================ */

/* PÁGINA DATAPANEL PAGE */
.page-node-type-datapanel-page .layout-content {
  --min: 20;
  --max: 220;
  --mintrans: 1000;
  --maxtrans: 1920;
  padding-inline: clamp(var(--min) * 1px, calc((var(--max) - var(--min)) * ((100vw - var(--mintrans) * 1px) / (var(--maxtrans) - var(--mintrans))) + var(--min) * 1px), var(--max) * 1px) !important;
}

.page-node-type-datapanel-page h1 {
  color: var(--txt-secondary-hard, #906B20);
  font-family: var(--font-family-accent);
  font-size: 45px;
  text-transform: uppercase;
  font-weight: 500;
  --min: 45;
  --max: 35;
  --mintrans: 1000;
  --maxtrans: 1920;
  font-size: clamp(var(--min) * 1px, calc((var(--max) - var(--min)) * ((100vw - var(--mintrans) * 1px) / (var(--maxtrans) - var(--mintrans))) + var(--min) * 1px), var(--max) * 1px) !important;
}

.page-node-type-datapanel-page .section-panel .tab-button {
  color: var(--Txt-Primary);
  font-family: var(--font-family-accent);
  font-weight: 500;
  text-transform: uppercase;
}

.page-node-type-datapanel-page .section-panel .tab-button[aria-selected="true"] {
  font-weight: 700 !important;
}

.page-node-type-datapanel-page .section-panel .tab-button[aria-selected="false"] {
  border: none !important;
  font-weight: 500 !important;
  background: var(--Bg-Secondary, #F9FAFB) !important;
}

.page-node-type-datapanel-page .section-panel .tab-button[aria-selected="false"]:hover {
  background: var(--Bg-Secondary-hover, #ebf2f8) !important;
}

/* DEBUG DEL CREADO POR */
.field.field--name-created,
.node__meta {
  display: none;
}

.block.block-menu h2 {
  display: none;
}

/* 404 PAGE */
.notfound-advisor {
  min-height: calc(100vh - 375px - 94px) !important;
}

@media (max-width: 768px) {
  .notfound-advisor {
    min-height: unset !important;
  }
}

.notfound-advisor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255 255 255 / 87%);
  z-index: 1;
}

.notfound-advisor h1 {
  font-family: var(--font-family-accent);
  z-index: 2;
  color: var(--color-text-default);
  text-transform: uppercase;
  --min: 45;
  --max: 150;
  --mintrans: 1000;
  --maxtrans: 1920;
  font-size: clamp(var(--min) * 1px, calc((var(--max) - var(--min)) * ((100vw - var(--mintrans) * 1px) / (var(--maxtrans) - var(--mintrans))) + var(--min) * 1px), var(--max) * 1px) !important;
}

.notfound-advisor h1~p {
  z-index: 2;
  font-family: var(--font-family-accent);
  color: var(--color-text-default);
  font-size: 20px;
  text-transform: uppercase;
  --min: 20;
  --max: 110;
  --mintrans: 1000;
  --maxtrans: 1920;
  font-size: clamp(var(--min) * 1px, calc((var(--max) - var(--min)) * ((100vw - var(--mintrans) * 1px) / (var(--maxtrans) - var(--mintrans))) + var(--min) * 1px), var(--max) * 1px) !important;
}

.goal-item--hasnot-indicators {
  opacity: .2;
}

.category__description strong {
  font-weight: 700;
}

/* PÁGINA LEGAL */
.legal-content {
  --min: 20;
  --max: 220;
  --mintrans: 1000;
  --maxtrans: 1920;
  padding-inline: clamp(var(--min) * 1px, calc((var(--max) - var(--min)) * ((100vw - var(--mintrans) * 1px) / (var(--maxtrans) - var(--mintrans))) + var(--min) * 1px), var(--max) * 1px) !important;
}

.legal-content .html-text-block {
  padding-inline: 0;
}

/* Transición fade */
.transition-fade {
  transition: opacity 0.3s;
}

html.is-changing .transition-fade {
  opacity: 0;
}

body:not(.path-frontpage) .section-contact {
  height: fit-content;
}

/* bloquear bg color urbo */
iframe .bg-layout-bg {
  background-color: #fff !important;
}


.breadcrumb {
  display: none !important;
}

/* indicator */
.indicator-layout {
  @media (max-width: 1024px) and (min-width: 769px) {
    --min: 100;
    --max: 0;
    --mintrans: 425;
    --maxtrans: 1920;
    padding-inline: clamp(var(--min) * 1px, calc((var(--max) - var(--min)) * ((100vw - var(--mintrans) * 1px) / (var(--maxtrans) - var(--mintrans))) + var(--min) * 1px), var(--max) * 1px) !important;
  }

  @media (max-width: 1920px) and (min-width: 769px) {
    --min: 0;
    --max: 230;
    --mintrans: 769;
    --maxtrans: 1920;
    padding-inline: clamp(var(--min) * 1px, calc((var(--max) - var(--min)) * ((100vw - var(--mintrans) * 1px) / (var(--maxtrans) - var(--mintrans))) + var(--min) * 1px), var(--max) * 1px) !important;
  
  }
}