/* 
==========================================================================
   1. DESIGN TOKENS
========================================================================== 
*/
:root {
  /* ------------------------------------------------------------------------
     1.1. PRIMITIVE TOKENS (Paleta Base / Colores Crudos)
     ------------------------------------------------------------------------ */
  /* Entrepreneur Yellow */
  --shine-yellow-50: #fefce8;
  --shine-yellow-100: #fffac2;
  --shine-yellow-200: #fff389;
  --shine-yellow-300: #ffe545;
  --shine-yellow-400: #fcd113;
  --shine-yellow-500: #ecb806;
  --shine-yellow-600: #cc9d30;
  --shine-yellow-700: #a17827;
  --shine-yellow-800: #67481b;
  --shine-yellow-900: #513516;
  --shine-yellow-950: #432913;

  /* Accounting Green */
  --shine-green-50: #e0f6ea;
  --shine-green-100: #c9eeda;
  --shine-green-200: #9adfb9;
  --shine-green-300: #63d198;
  --shine-green-400: #42c37b;
  --shine-green-500: #25ba66;
  --shine-green-600: #20a159;
  --shine-green-700: #198447;
  --shine-green-800: #0f5f35;
  --shine-green-900: #074629;
  --shine-green-950: #003725;

  /* Prosperity Stone */
  --shine-stone-50: #f9f7f1;
  --shine-stone-100: #f2eee2;
  --shine-stone-200: #e8e2cd;
  --shine-stone-300: #dfd5b8;
  --shine-stone-400: #c2b89a;
  --shine-stone-500: #aaa187;
  --shine-stone-600: #88826d;
  --shine-stone-700: #716d5c;
  --shine-stone-800: #5a594a;
  --shine-stone-900: #3e3f34;
  --shine-stone-950: #2d2f27;

  /* Ledger Blue */
  --shine-blue-50: #f0f4fe;
  --shine-blue-100: #dde6fc;
  --shine-blue-200: #c2d4fb;
  --shine-blue-300: #99b9f7;
  --shine-blue-400: #6894f2;
  --shine-blue-500: #3a66eb;
  --shine-blue-600: #2f50e1;
  --shine-blue-700: #273dce;
  --shine-blue-800: #2633a7;
  --shine-blue-900: #1a2051;
  --shine-blue-950: #12163a;

  /* Monochrome / Neutrals */
  --shine-neutral-50: #ffffff;
  --shine-neutral-100: #f4f4f4;
  --shine-neutral-200: #e8e8e8;
  --shine-neutral-300: #d0d0d0;
  --shine-neutral-400: #b8b8b8;
  --shine-neutral-500: #979797;
  --shine-neutral-600: #787878;
  --shine-neutral-700: #646464;
  --shine-neutral-800: #515151;
  --shine-neutral-900: #363636;
  --shine-neutral-950: #262626;

  /* Red Palette (Danger/Errors) */
  --shine-red-50: #fff1f0;
  --shine-red-100: #ffe4e1;
  --shine-red-200: #ffc8c4;
  --shine-red-300: #ffa8a3;
  --shine-red-400: #ff7b75;
  --shine-red-500: #ef5c44;
  --shine-red-600: #d94a36;
  --shine-red-700: #b33a2b;
  --shine-red-800: #8b2b20;
  --shine-red-900: #5c1a14;
  --shine-red-950: #3e120e;

  /* ------------------------------------------------------------------------
     1.2. SEMANTIC TOKENS (Capas de Uso / Roles en UI)
     ------------------------------------------------------------------------ */
  /* Brand / Acciones */
  --color-brand-primary: var(--shine-green-950);
  --color-brand-primary-hover: var(--shine-green-700);
  --color-brand-secondary: var(--shine-green-700);
  --color-brand-secondary-hover: var(--shine-green-950);
  --color-brand-accent: var(--shine-yellow-200);
  --color-brand-accent-hover: var(--shine-yellow-300);
  --color-interactive: var(--shine-blue-500);

  /* Backgrounds & Surfaces */
  --color-bg-body: var(--shine-stone-50);
  --color-bg-surface: var(--shine-neutral-50);
  --color-bg-surface-hover: var(--shine-neutral-100);
  --color-bg-subtle: var(--shine-stone-100);
  --color-bg-subtle-hover: var(--shine-stone-50);

  /* Typography */
  --font-family-body: "Inter", Arial, sans-serif;
  --font-family-display: "ShineSpectra", Georgia, serif;

  --color-text-main: var(--shine-neutral-950);
  --color-text-muted: var(--shine-neutral-500);
  --color-text-subtle: var(--shine-stone-600);
  --color-text-inverse: var(--shine-neutral-50);
  --color-text-brand: var(--shine-green-950);
  --color-text-accent: var(--shine-yellow-800);

  /* Borders & Dividers */
  --color-border-default: var(--shine-stone-200);
  --color-border-subtle: var(--shine-neutral-200);
  --color-border-strong: var(--shine-stone-300);
  --color-border-accent: var(--shine-yellow-500);
}

/* 
==========================================================================
   2. TEXT COLOR UTILITIES
========================================================================== 
*/
.text-brand { color: var(--shine-green-950) !important; }
.text-accent { color: var(--shine-yellow-800) !important; }
.text-muted { color: var(--shine-neutral-500) !important; }
.text-dark { color: var(--shine-neutral-900) !important; }
.text-subtle { color: var(--shine-stone-600) !important; }

.white { color: var(--shine-neutral-50) !important; }
.red   { color: var(--shine-red-600) !important; }
.blue  { color: var(--shine-blue-500) !important; }
.green { color: var(--shine-green-950) !important; }
.yellow { color: var(--shine-yellow-500) !important; }
.stone { color: var(--shine-stone-700) !important; }

/* 
==========================================================================
   3. COMPONENTS: ALERTS
========================================================================== 
*/
.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
.alert-heading { color: inherit; }
.alert-link { font-weight: 700; }

.alert-dismissible { padding-right: 4rem; }
.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

/* Alert Variants */
.alert-primary {
  color: var(--shine-green-950);
  background-color: var(--shine-green-50);
  border-color: var(--shine-green-200);
}
.alert-primary hr { border-top-color: var(--shine-green-200); }
.alert-primary .alert-link { color: var(--shine-green-900); }

.alert-secondary {
  color: var(--shine-stone-900);
  background-color: var(--shine-stone-100);
  border-color: var(--shine-stone-300);
}
.alert-secondary hr { border-top-color: var(--shine-stone-300); }
.alert-secondary .alert-link { color: var(--shine-stone-950); }

.alert-success {
  color: var(--shine-green-950);
  background-color: var(--shine-green-50);
  border-color: var(--shine-green-300);
}
.alert-success hr { border-top-color: var(--shine-green-300); }
.alert-success .alert-link { color: var(--shine-green-800); }

.alert-info {
  color: var(--shine-blue-950);
  background-color: var(--shine-blue-50);
  border-color: var(--shine-blue-200);
}
.alert-info hr { border-top-color: var(--shine-blue-200); }
.alert-info .alert-link { color: var(--shine-blue-700); }

.alert-warning {
  color: var(--shine-yellow-950);
  background-color: var(--shine-yellow-50);
  border-color: var(--shine-yellow-300);
}
.alert-warning hr { border-top-color: var(--shine-yellow-300); }
.alert-warning .alert-link { color: var(--shine-yellow-900); }

.alert-danger {
  color: var(--shine-red-950);
  background-color: var(--shine-red-50);
  border-color: var(--shine-red-200);
}
.alert-danger hr { border-top-color: var(--shine-red-200); }
.alert-danger .alert-link { color: var(--shine-red-800); }

.alert-light {
  color: var(--shine-stone-800);
  background-color: var(--shine-neutral-50);
  border-color: var(--shine-stone-200);
}
.alert-light hr { border-top-color: var(--shine-stone-200); }
.alert-light .alert-link { color: var(--shine-stone-950); }

.alert-dark {
  color: var(--shine-stone-50);
  background-color: var(--shine-stone-900);
  border-color: var(--shine-stone-950);
}
.alert-dark hr { border-top-color: var(--shine-stone-800); }
.alert-dark .alert-link { color: var(--shine-neutral-50); }

/* 
==========================================================================
   4. BACKGROUND UTILITIES
========================================================================== 
*/
.bg-primary {
  background-color: var(--shine-green-950) !important;
  color: var(--shine-neutral-50);
}
a.bg-primary:hover, a.bg-primary:focus, 
button.bg-primary:hover, button.bg-primary:focus {
  background-color: var(--shine-green-800) !important;
}

.bg-secondary {
  background-color: var(--shine-green-700) !important;
  color: var(--shine-neutral-50);
}
a.bg-secondary:hover, a.bg-secondary:focus, 
button.bg-secondary:hover, button.bg-secondary:focus {
  background-color: var(--shine-green-900) !important;
}

.bg-success {
  background-color: var(--shine-green-600) !important;
  color: var(--shine-neutral-50);
}
a.bg-success:hover, a.bg-success:focus, 
button.bg-success:hover, button.bg-success:focus {
  background-color: var(--shine-green-800) !important;
}

.bg-info {
  background-color: var(--shine-blue-500) !important;
  color: var(--shine-neutral-50);
}
a.bg-info:hover, a.bg-info:focus, 
button.bg-info:hover, button.bg-info:focus {
  background-color: var(--shine-blue-700) !important;
}

.bg-warning {
  background-color: var(--shine-yellow-300) !important;
  color: var(--shine-yellow-950);
}
a.bg-warning:hover, a.bg-warning:focus, 
button.bg-warning:hover, button.bg-warning:focus {
  background-color: var(--shine-yellow-400) !important;
}

.bg-danger {
  background-color: var(--shine-red-600) !important;
  color: var(--shine-neutral-50);
}
a.bg-danger:hover, a.bg-danger:focus, 
button.bg-danger:hover, button.bg-danger:focus {
  background-color: var(--shine-red-800) !important;
}

.bg-light {
  background-color: var(--shine-stone-100) !important;
  color: var(--shine-stone-900);
}
a.bg-light:hover, a.bg-light:focus, 
button.bg-light:hover, button.bg-light:focus {
  background-color: var(--shine-stone-200) !important;
}

.bg-dark {
  background-color: var(--shine-stone-900) !important;
  color: var(--shine-stone-50);
}
a.bg-dark:hover, a.bg-dark:focus, 
button.bg-dark:hover, button.bg-dark:focus {
  background-color: var(--shine-stone-950) !important;
}

.bg-white { background-color: var(--shine-neutral-50) !important; }
.bg-transparent { background-color: transparent !important; }

/*
==========================================================================
   5. SIZES & TYPOGRAPHY
========================================================================== 
*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
  margin: 16px 0;
}

h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }

.size-8 { font-size: 8px !important; }
.size-9 { font-size: 9px !important; }
.size-10 { font-size: 10px !important; }
.size-11 { font-size: 11px !important; }
.size-12 { font-size: 12px !important; }
.size-13 { font-size: 13px !important; }
.size-14 { font-size: 14px !important; }
.size-15 { font-size: 15px !important; width: 15px; height: 15px; min-width: 15px; min-height: 15px; }
.size-16 { font-size: 16px !important; }
.size-17 { font-size: 17px !important; }
.size-18 { font-size: 18px !important; }
.size-19 { font-size: 19px !important; }
.size-20 { font-size: 20px !important; }
.size-21 { font-size: 21px !important; }
.size-22 { font-size: 22px !important; }
.size-24 { font-size: 24px !important; }
.size-26 { font-size: 26px !important; }
.size-28 { font-size: 28px !important; }
.size-30 { font-size: 30px !important; }
.size-32 { font-size: 32px !important; }
.size-34 { font-size: 34px !important; }
.size-36 { font-size: 36px !important; }
.size-38 { font-size: 38px !important; }
.size-40 { font-size: 40px !important; }
.size-42 { font-size: 42px !important; }
.size-44 { font-size: 44px !important; }
.size-46 { font-size: 46px !important; }
.size-48 { font-size: 48px !important; }
.size-50 { font-size: 50px !important; }

md-icon[size='10']{ height:10px; min-height:10px; font-size:10px; line-height:10px; width:10px; min-width:10px;}
md-icon[size='12']{ height:12px; min-height:12px; font-size:12px; line-height:12px; width:12px; min-width:12px;}
md-icon[size='14']{ height:14px; min-height:14px; font-size:14px; line-height:14px; width:14px; min-width:14px;}
md-icon[size='16']{ height:16px; min-height:16px; font-size:16px; line-height:16px; width:16px; min-width:16px;}
md-icon[size='18']{ height:17px; min-height:17px; font-size:17px; line-height:17px; width:17px; min-width:17px;}
md-icon[size='20']{ height:20px; min-height:20px; font-size:20px; line-height:20px; width:20px; min-width:20px;}
md-icon[size='22']{ height:22px; min-height:22px; font-size:22px; line-height:22px; width:22px; min-width:22px;}
md-icon[size='24']{ height:24px; min-height:24px; font-size:24px; line-height:24px; width:24px; min-width:24px;}
md-icon[size='26']{ height:26px; min-height:26px; font-size:26px; line-height:26px; width:26px; min-width:26px;}
md-icon[size='28']{ height:28px; min-height:28px; font-size:28px; line-height:28px; width:28px; min-width:28px;}
md-icon[size='30']{ height:30px; min-height:30px; font-size:30px; line-height:30px; width:30px; min-width:30px;}
md-icon[size='32']{ height:32px; min-height:32px; font-size:32px; line-height:32px; width:32px; min-width:32px;}
md-icon[size='34']{ height:34px; min-height:34px; font-size:34px; line-height:34px; width:34px; min-width:34px;}
md-icon[size='36']{ height:36px; min-height:36px; font-size:36px; line-height:36px; width:36px; min-width:36px;}
md-icon[size='50']{ height:50px; min-height:50px; font-size:50px; line-height:50px; width:50px; min-width:50px;}

.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto; }

.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.h-auto { height: auto; }

.mw-100 { max-width: 100%; }
.mh-100 { max-height: 100%; }

/*
==========================================================================
   6. SPACING (MARGINS & PADDINGS)
========================================================================== 
*/
p { margin: 0 0 1rem 0; }

.m-0 { margin: 0 !important; }
.mt-0, .my-0 { margin-top: 0 !important; }
.mr-0, .mx-0 { margin-right: 0 !important; }
.mb-0, .my-0 { margin-bottom: 0 !important; }
.ml-0, .mx-0 { margin-left: 0 !important; }

.m-1 { margin: 0.25rem !important; }
.mt-1, .my-1 { margin-top: 0.25rem !important; }
.mr-1, .mx-1 { margin-right: 0.25rem !important; }
.mb-1, .my-1 { margin-bottom: 0.25rem !important; }
.ml-1, .mx-1 { margin-left: 0.25rem !important; }

.m-2 { margin: 0.5rem !important; }
.mt-2, .my-2 { margin-top: 0.5rem !important; }
.mr-2, .mx-2 { margin-right: 0.5rem !important; }
.mb-2, .my-2 { margin-bottom: 0.5rem !important; }
.ml-2, .mx-2 { margin-left: 0.5rem !important; }

.m-3 { margin: 1rem !important; }
.mt-3, .my-3 { margin-top: 1rem !important; }
.mr-3, .mx-3 { margin-right: 1rem !important; }
.mb-3, .my-3 { margin-bottom: 1rem !important; }
.ml-3, .mx-3 { margin-left: 1rem !important; }

.m-4 { margin: 1.5rem !important; }
.mt-4, .my-4 { margin-top: 1.5rem !important; }
.mr-4, .mx-4 { margin-right: 1.5rem !important; }
.mb-4, .my-4 { margin-bottom: 1.5rem !important; }
.ml-4, .mx-4 { margin-left: 1.5rem !important; }

.m-5 { margin: 3rem !important; }
.mt-5, .my-5 { margin-top: 3rem !important; }
.mr-5, .mx-5 { margin-right: 3rem !important; }
.mb-5, .my-5 { margin-bottom: 3rem !important; }
.ml-5, .mx-5 { margin-left: 3rem !important; }

.m-6 { margin: 6rem !important; }
.mt-6, .my-6 { margin-top: 6rem !important; }
.mr-6, .mx-6 { margin-right: 6rem !important; }
.mb-6, .my-6 { margin-bottom: 6rem !important; }
.ml-6, .mx-6 { margin-left: 6rem !important; }

.p-0 { padding: 0 !important; }
.pt-0, .py-0 { padding-top: 0 !important; }
.pr-0, .px-0 { padding-right: 0 !important; }
.pb-0, .py-0 { padding-bottom: 0 !important; }
.pl-0, .px-0 { padding-left: 0 !important; }

.p-1 { padding: 0.25rem !important; }
.pt-1, .py-1 { padding-top: 0.25rem !important; }
.pr-1, .px-1 { padding-right: 0.25rem !important; }
.pb-1, .py-1 { padding-bottom: 0.25rem !important; }
.pl-1, .px-1 { padding-left: 0.25rem !important; }

.p-2 { padding: 0.5rem !important; }
.pt-2, .py-2 { padding-top: 0.5rem !important; }
.pr-2, .px-2 { padding-right: 0.5rem !important; }
.pb-2, .py-2 { padding-bottom: 0.5rem !important; }
.pl-2, .px-2 { padding-left: 0.5rem !important; }

.p-3 { padding: 1rem !important; }
.pt-3, .py-3 { padding-top: 1rem !important; }
.pr-3, .px-3 { padding-right: 1rem !important; }
.pb-3, .py-3 { padding-bottom: 1rem !important; }
.pl-3, .px-3 { padding-left: 1rem !important; }

.p-4 { padding: 1.5rem !important; }
.pt-4, .py-4 { padding-top: 1.5rem !important; }
.pr-4, .px-4 { padding-right: 1.5rem !important; }
.pb-4, .py-4 { padding-bottom: 1.5rem !important; }
.pl-4, .px-4 { padding-left: 1.5rem !important; }

.p-5 { padding: 3rem !important; }
.pt-5, .py-5 { padding-top: 3rem !important; }
.pr-5, .px-5 { padding-right: 3rem !important; }
.pb-5, .py-5 { padding-bottom: 3rem !important; }
.pl-5, .px-5 { padding-left: 3rem !important; }

.p-6 { padding: 6rem !important; }
.pt-6, .py-6 { padding-top: 6rem !important; }
.pr-6, .px-6 { padding-right: 6rem !important; }
.pb-6, .py-6 { padding-bottom: 6rem !important; }
.pl-6, .px-6 { padding-left: 6rem !important; }

.m-auto { margin: auto !important; }
.mt-auto, .my-auto { margin-top: auto !important; }
.mr-auto, .mx-auto { margin-right: auto !important; }
.mb-auto, .my-auto { margin-bottom: auto !important; }
.ml-auto, .mx-auto { margin-left: auto !important; }

/*
==========================================================================
   7. POSITION, TEXT ALIGNMENT & LINKS
========================================================================== 
*/
.relative { position: relative; }
.absolute { position: absolute; }

.text-justify { text-align: justify !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

a {
  text-transform: none;  
  cursor: pointer;
}
a:visited { color: inherit; }

/*
==========================================================================
   8. TEXT UTILITIES
========================================================================== 
*/
.text-xs { font-size: 0.75rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-base { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-xl { font-size: 1.25rem !important; }
.text-2xl { font-size: 1.5rem !important; }
.text-3xl { font-size: 1.875rem !important; }
.text-4xl { font-size: 2.25rem !important; }
.text-5xl { font-size: 3rem !important; }
.text-6xl { font-size: 4rem !important; }

.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.font-bold { font-weight: 600 !important; }
.font-medium { font-weight: 500 !important; }
.font-normal { font-weight: 400 !important; }
.font-light { font-weight: 300 !important; }

/*
========================================================================== 
   9. MISCELLANEOUS & PRINT MEDIA
========================================================================== 
*/
.opacity-20 { opacity: 0.2; }
.opacity-50 { opacity: 0.5; }

.borderless { border: none !important; }

@media print {
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a:not(.btn) {
    text-decoration: underline;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid var(--shine-neutral-400);
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  @page {
    size: a3;
  }
  body {
    min-width: 992px !important;
  }
  .container {
    min-width: 992px !important;
  }
  .navbar {
    display: none;
  }
  .badge {
    border: 1px solid var(--shine-neutral-950);
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: var(--shine-neutral-50) !important;
  }
}