/* ============================================
   AltruPets Custom Fonts
   ============================================ */

/* Poppins Font Family */
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Lemon Milk Font Family */
@font-face {
  font-family: 'Lemon Milk';
  src: url('../assets/fonts/lemon_milk/LemonMilkLight-owxMq.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lemon Milk';
  src: url('../assets/fonts/lemon_milk/LemonMilkLightItalic-7BjPE.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lemon Milk';
  src: url('../assets/fonts/lemon_milk/LemonMilkRegular-X3XE2.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lemon Milk';
  src: url('../assets/fonts/lemon_milk/LemonMilkRegularItalic-L3AEy.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lemon Milk';
  src: url('../assets/fonts/lemon_milk/LemonMilkMedium-mLZYV.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lemon Milk';
  src: url('../assets/fonts/lemon_milk/LemonMilkMediumItalic-d95nl.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lemon Milk';
  src: url('../assets/fonts/lemon_milk/LemonMilkBold-gx2B3.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lemon Milk';
  src: url('../assets/fonts/lemon_milk/LemonMilkBoldItalic-PKZ3P.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ============================================
   AltruPets Design System - Brand Colors
   Based on style-dictionary/tokens.json
   ============================================ */

:root {
  /* Brand Colors */
  --altrupets-primary: #094F72;
  --altrupets-secondary: #EA840B;
  --altrupets-accent: #1370A6;
  --altrupets-warning: #F4AE22;
  --altrupets-error: #E54C12;
  --altrupets-success: #2E7D32;

  /* Primary Palette */
  --altrupets-primary-10: #001E2F;
  --altrupets-primary-20: #00344E;
  --altrupets-primary-30: #004B6F;
  --altrupets-primary-40: #006491;
  --altrupets-primary-50: #007FB6;
  --altrupets-primary-60: #3699D2;
  --altrupets-primary-70: #58B4EE;
  --altrupets-primary-80: #8ACEFF;
  --altrupets-primary-90: #C9E6FF;
  --altrupets-primary-95: #E6F2FF;

  /* Secondary Palette */
  --altrupets-secondary-10: #2E1500;
  --altrupets-secondary-20: #4C2700;
  --altrupets-secondary-30: #6D3A00;
  --altrupets-secondary-40: #8F4E00;
  --altrupets-secondary-50: #B36300;
  --altrupets-secondary-60: #D87800;
  --altrupets-secondary-70: #FB911F;
  --altrupets-secondary-80: #FFB77A;
  --altrupets-secondary-90: #FFDCC2;

  /* Neutral Palette */
  --altrupets-neutral-10: #191C1E;
  --altrupets-neutral-20: #2E3133;
  --altrupets-neutral-30: #454749;
  --altrupets-neutral-50: #75777A;
  --altrupets-neutral-80: #C5C6C9;
  --altrupets-neutral-90: #E2E2E5;
  --altrupets-neutral-95: #F0F0F3;

  /* Material for MkDocs Theme Colors */
  --md-primary-fg-color: var(--altrupets-primary);
  --md-primary-fg-color--light: var(--altrupets-primary-60);
  --md-primary-fg-color--dark: var(--altrupets-primary-30);
  --md-primary-bg-color: var(--altrupets-primary-95);
  --md-primary-bg-color--light: var(--altrupets-primary-90);

  --md-accent-fg-color: var(--altrupets-accent);
  --md-accent-fg-color--transparent: rgba(19, 112, 166, 0.1);
  --md-accent-bg-color: var(--altrupets-primary-95);
  --md-accent-bg-color--light: var(--altrupets-primary-90);

  /* Typography */
  --md-text-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --md-code-font: "Roboto Mono", "Courier New", monospace;
}

/* Dark mode colors */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--altrupets-primary-60);
  --md-primary-fg-color--light: var(--altrupets-primary-70);
  --md-primary-fg-color--dark: var(--altrupets-primary-40);
  --md-primary-bg-color: var(--altrupets-primary-20);
  --md-primary-bg-color--light: var(--altrupets-primary-30);

  --md-accent-fg-color: var(--altrupets-accent);
  --md-accent-fg-color--transparent: rgba(19, 112, 166, 0.1);

  /* Headings in dark mode - orange secondary color */
  --md-typeset-color: var(--altrupets-secondary-80);
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  color: var(--altrupets-secondary) !important;
}

/* ============================================
   Header & Navigation
   ============================================ */

.md-header {
  background-color: var(--altrupets-primary);
  background: linear-gradient(135deg, var(--altrupets-primary) 0%, var(--altrupets-primary-40) 100%);
  box-shadow: 0 2px 8px rgba(9, 79, 114, 0.2);
  color: #ffffff !important;
}

.md-header__title {
  font-family: "Lemon Milk", var(--md-text-font);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #ffffff !important;
}

.md-header__topic {
  color: #ffffff !important;
}

.md-tabs {
  background-color: var(--altrupets-primary-30);
  background: linear-gradient(180deg, var(--altrupets-primary-30) 0%, var(--altrupets-primary-20) 100%);
}

.md-tabs__link {
  font-weight: 500;
  transition: all 0.2s ease;
}

.md-tabs__link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.md-tabs__link--active {
  background-color: rgba(255, 255, 255, 0.15);
  border-bottom: 2px solid var(--altrupets-secondary);
}

/* ============================================
   Sidebar Navigation
   ============================================ */

.md-nav__link--active {
  color: var(--altrupets-primary);
  font-weight: 600;
}

.md-nav__link:hover {
  color: var(--altrupets-accent);
}

.md-nav__item--nested > .md-nav__link {
  font-weight: 600;
  color: var(--altrupets-primary-30);
}

/* ============================================
   Content Styling
   ============================================ */

/* Links */
.md-content a {
  color: var(--altrupets-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.md-content a:hover {
  color: var(--altrupets-primary);
  border-bottom-color: var(--altrupets-primary);
}

/* Headings */
.md-typeset h1 {
  color: var(--altrupets-primary);
  font-family: "Lemon Milk", var(--md-text-font);
  font-weight: 700;
  border-bottom: 3px solid var(--altrupets-secondary);
  padding-bottom: 0.5rem;
}

.md-typeset h2 {
  color: var(--altrupets-primary-30);
  font-family: "Lemon Milk", var(--md-text-font);
  font-weight: 600;
  border-bottom: 2px solid var(--altrupets-primary-90);
  padding-bottom: 0.3rem;
}

.md-typeset h3 {
  color: var(--altrupets-primary-40);
  font-weight: 600;
}

/* Code blocks */
.md-typeset code {
  background-color: var(--altrupets-primary-95);
  color: var(--altrupets-primary-30);
  border: 1px solid var(--altrupets-primary-90);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

.md-typeset pre > code {
  background-color: var(--altrupets-neutral-95);
  border: 1px solid var(--altrupets-neutral-90);
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: var(--altrupets-primary-20);
  color: var(--altrupets-primary-80);
  border-color: var(--altrupets-primary-30);
}

/* Tables */
.md-typeset table:not([class]) {
  border: 2px solid var(--altrupets-primary-90);
  border-radius: 8px;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: var(--altrupets-primary);
  color: white;
  font-weight: 600;
  padding: 1rem;
}

.md-typeset table:not([class]) tr:hover {
  background-color: var(--altrupets-primary-95);
}

/* Admonitions */
.md-typeset .admonition {
  border-left: 4px solid var(--altrupets-accent);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.md-typeset .admonition.note {
  border-left-color: var(--altrupets-accent);
}

.md-typeset .admonition.warning {
  border-left-color: var(--altrupets-warning);
}

.md-typeset .admonition.danger {
  border-left-color: var(--altrupets-error);
}

.md-typeset .admonition.success {
  border-left-color: var(--altrupets-success);
}

/* Buttons */
.md-button {
  background-color: var(--altrupets-primary);
  color: white;
  border-radius: 8px;
  padding: 0.6em 1.2em;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(9, 79, 114, 0.2);
}

.md-button:hover {
  background-color: var(--altrupets-primary-40);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(9, 79, 114, 0.3);
}

.md-button--primary {
  background-color: var(--altrupets-secondary);
}

.md-button--primary:hover {
  background-color: var(--altrupets-secondary-60);
}

/* Search */
.md-search__input {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.md-search__input:focus {
  background-color: white;
  border-color: var(--altrupets-accent);
}

/* Footer */
.md-footer {
  background-color: var(--altrupets-primary-20);
  color: var(--altrupets-neutral-90);
}

.md-footer-meta {
  background-color: var(--altrupets-primary-10);
}

/* ============================================
   Mermaid Diagram Styles
   ============================================ */

/* Wrapper para cada diagrama Mermaid con estilo de marca */
.mermaid {
  margin: 1.5em 0;
  border: 2px solid var(--altrupets-primary-90);
  border-radius: 8px;
  padding: 1.5em;
  background-color: var(--altrupets-primary-95);
  box-shadow: 0 2px 4px rgba(9, 79, 114, 0.1);
  cursor: zoom-in;
  transition: all 0.2s ease;
}

.mermaid:hover {
  border-color: var(--altrupets-primary-80);
  box-shadow: 0 4px 8px rgba(9, 79, 114, 0.15);
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .mermaid {
  background-color: var(--altrupets-primary-20);
  border-color: var(--altrupets-primary-30);
}

[data-md-color-scheme="slate"] .mermaid:hover {
  border-color: var(--altrupets-primary-40);
}

/* Dark mode Mermaid text and elements */
[data-md-color-scheme="slate"] .mermaid svg {
  color: #e0e0e0 !important;
}

[data-md-color-scheme="slate"] .mermaid svg text,
[data-md-color-scheme="slate"] .mermaid svg .nodeLabel,
[data-md-color-scheme="slate"] .mermaid svg .edgeLabel,
[data-md-color-scheme="slate"] .mermaid svg .label,
[data-md-color-scheme="slate"] .mermaid svg [fill="#333"] {
  fill: #e0e0e0 !important;
  color: #e0e0e0 !important;
}

[data-md-color-scheme="slate"] .mermaid svg .edgePath .path,
[data-md-color-scheme="slate"] .mermaid svg .flowchart-link {
  stroke: #e0e0e0 !important;
}

[data-md-color-scheme="slate"] .mermaid svg .marker {
  fill: #e0e0e0 !important;
  stroke: #e0e0e0 !important;
}

[data-md-color-scheme="slate"] .mermaid svg .node rect,
[data-md-color-scheme="slate"] .mermaid svg .node circle,
[data-md-color-scheme="slate"] .mermaid svg .node polygon {
  fill: #2d2d44 !important;
  stroke: #EA840B !important;
  stroke-width: 2px !important;
}

[data-md-color-scheme="slate"] .mermaid svg .cluster rect {
  fill: #1a1a2e !important;
  stroke: #888866 !important;
}

[data-md-color-scheme="slate"] .mermaid svg .cluster text,
[data-md-color-scheme="slate"] .mermaid svg .cluster span {
  color: #EA840B !important;
}

/* Mermaid zoom cursor */
.mermaid svg {
  cursor: grab;
}

.mermaid svg:active {
  cursor: grabbing;
}

/* ============================================
   Emoji & Icons
   ============================================ */

.md-typeset .twemoji {
  vertical-align: text-bottom;
}

/* ============================================
   Animations
   ============================================ */

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.md-nav__link--active::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: var(--altrupets-secondary);
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================
   Custom Utilities
   ============================================ */

.text-primary {
  color: var(--altrupets-primary) !important;
}

.text-secondary {
  color: var(--altrupets-secondary) !important;
}

.text-accent {
  color: var(--altrupets-accent) !important;
}

.bg-primary {
  background-color: var(--altrupets-primary) !important;
}

.bg-secondary {
  background-color: var(--altrupets-secondary) !important;
}

.border-primary {
  border-color: var(--altrupets-primary) !important;
}


/* ============================================
   Pan & Zoom Plugin Enhancements
   ============================================ */

/* Cursor states for pan & zoom */
.mermaid.panzoom-enabled {
  cursor: grab;
}

.mermaid.panzoom-enabled:active {
  cursor: grabbing;
}

.mermaid.panzoom-zoomed {
  cursor: move;
}

/* Smooth transitions for zoom */
.mermaid svg {
  transition: transform 0.1s ease-out;
}

/* Hint text for zoom functionality */
.mermaid::after {
  content: "💡 Click para hacer zoom, arrastra para mover";
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--altrupets-neutral-50);
  margin-top: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mermaid:hover::after {
  opacity: 1;
}

[data-md-color-scheme="slate"] .mermaid::after {
  color: var(--altrupets-neutral-80);
}

/* Hide hint when zoomed */
.mermaid.panzoom-zoomed::after {
  display: none;
}