@media all
{
    :root {
        /* Colores de fondo en base a paleta */
        --bg-surface-10: var(--color-neutral-0);
        --bg-surface-10-hover: var(--color-neutral-10);
        --bg-surface-10-active: var(--color-neutral-10);
        --bg-surface-20: var(--color-neutral-20);
        --bg-surface-20-hover: var(--color-neutral-30);
        --bg-surface-30: var(--color-neutral-40);
        --bg-surface-30-hover: var(--color-neutral-50);
        --bg-surface-40: var(--color-neutral-60);
        --bg-contrast-00: var(--color-neutral-95);
        --bg-contrast-10: var(--color-neutral-90);
        --bg-contrast-10-hover: var(--color-neutral-80);
        --bg-contrast-10-active: var(--color-neutral-10);
        --bg-contrast-10-disabled: var(--color-neutral-10);
        --bg-selected-strong: var(--color-accent-60);
        --bg-selected-strong-hover: var(--color-accent-70);
        --bg-selected-active: var(--color-accent-80);
        --bg-selected-strong-disabled: var(--color-accent-10);
        --bg-info-strong: var(--color-info-50);
        --bg-info-strong-hover: var(--color-info-70);
        --bg-info-strong-disabled: var(--color-info-20);
        --bg-info-weak: var(--color-info-05);
        --bg-danger-strong: var(--color-negative-50);
        --bg-danger-strong-hover: var(--color-negative-70);
        --bg-danger-strong-disabled: var(--color-negative-20);
        --bg-danger-weak: var(--color-negative-05);
        --bg-success-strong: var(--color-positive-50);
        --bg-success-strong-hover: var(--color-positive-70);
        --bg-success-strong-weak: var(--color-positive-05);
        --bg-success-strong-disabled: var(--color-positive-20);
        --bg-warning-strong: var(--color-warning-50);
        --bg-warning-strong-hover: var(--color-warning-70);
        --bg-warning-strong-weak: var(--color-warning-05);
        --bg-warning-strong-disabled: var(--color-warning-20);
        --bg-accent-strong: var(--color-accent-50);
        --bg-accent-strong-hover: var(--color-accent-60);
        --bg-accent-strong-disabled: var(--color-accent-20);
        --bg-accent-med: var(--color-accent-05);
        --bg-accent-med-hover: var(--color-accent-10);
        --bg-accent-strong-weak: var(--color-accent-00);
        --bg-accent-strong-weak-hover: var(--color-accent-05);
        --bg-overlay-color: var(--color-neutral-100);
        --bg-overlay: color-mix(in srgb, var(--bg-overlay-color) 60%, transparent);
        --bg-gradient-ai: linear-gradient(82.6deg, var(--color-accent-50) 0%, var(--medium-purple-50) 100%);
        --bg-gradient-ai-hover: linear-gradient(82.6deg, var(--color-accent-60) 0%, var(--medium-purple-60) 100%);
        /* Colores de fondo en base a paleta */
        /* Colores de contenido en base a paleta */
        --cc-strong: var(--color-neutral-100);
        --cc-med: var(--color-neutral-80);
        --cc-weak: var(--color-neutral-70);
        --cc-disabled: var(--color-neutral-60);
        --cc-inverse: var(--color-neutral-0);
        --cc-inverse-med: var(--color-neutral-20);
        --cc-selected: var(--color-accent-70);
        --cc-accent: var(--color-accent-50);
        --cc-accent-inverse: var(--color-accent-40);
        --cc-link: var(--color-accent-60);
        --cc-link-hover: var(--color-accent-70);
        --cc-link-selected: var(--color-accent-80);
        --cc-link-disabled: var(--color-accent-20);
        --cc-info: var(--color-info-50);
        --cc-info-strong: var(--color-info-90);
        --cc-info-med: var(--color-info-70);
        --cc-info-disabled: var(--color-info-20);
        --cc-danger: var(--color-negative-50);
        --cc-danger-strong: var(--color-negative-90);
        --cc-danger-med: var(--color-negative-70);
        --cc-danger-disabled: var(--color-negative-20);
        --cc-success: var(--color-positive-50);
        --cc-success-weak: var(--color-positive-20);
        --cc-success-strong: var(--color-positive-90);
        --cc-success-med: var(--color-positive-70);
        --cc-warning: var(--color-warning-50);
        --cc-warning-weak: var(--color-warning-05);
        --cc-warning-strong: var(--color-warning-90);
        --cc-warning-med: var(--color-warning-70);
        /* Colores de contenido en base a paleta */
        /* Colores de bordes en base a paleta */
        --bc-default: var(--color-neutral-50);
        --bc-weak: var(--color-neutral-40);
        --bc-secondary: var(--color-neutral-60);
        --bc-disabled: var(--color-neutral-30);
        --bc-focus: var(--color-accent-50);
        --bc-selected: var(--color-accent-50);
        --bc-selected-over: var(--color-accent-80);
        --bc-active-disabled: var(--color-accent-10);
        --bc-inverse: var(--color-neutral-80);
        --bc-danger: var(--color-negative-50);
        --bc-danger-disabled: var(--color-negative-20);
        /* Colores de gr�ficos */
        --chart-10: var(--color-accent-50);
        --chart-10-hover: var(--color-accent-60);
        --chart-20: var(--persimmon-50);
        --chart-20-hover: var(--persimmon-60);
        --chart-30: var(--riptide-50);
        --chart-30-hover: var(--riptide-60);
        --chart-40: var(--saffron-50);
        --chart-40-hover: var(--saffron-60);
        --chart-50: var(--cadillac-50);
        --chart-50-hover: var(--cadillac-60);
        --chart-60: var(--color-accent-30);
        --chart-60-hover: var(--color-accent-40);
        --chart-70: var(--macaroni-cheese-50);
        --chart-70-hover: var(--macaroni-cheese-60);
        --chart-80: var(--medium-purple-50);
        --chart-80-hover: var(--medium-purple-60);
        --chart-90: var(--ocean-green-50);
        --chart-90-hover: var(--ocean-green-60);
        --chart-100: var(--melon-50);
        --chart-100-hover: var(--melon-60);
        --chart-110: var(--lavender-50);
        --chart-110-hover: var(--lavender-60);
        --chart-120: var(--tradewind-50);
        --chart-120-hover: var(--tradewind-60);
        /* Colores de bordes en base a paleta */
        /* Sombras */
        --shadow-default-color: var(--color-neutral-60);
        --shadow-overlay-color: var(--color-neutral-100);
        --shadow-input-focused-color: var(--color-accent-50);
        --shadow-input-error-color: var(--color-negative-50);
        --shadow-default: 0px 2px 4px 0px color-mix(in srgb, var(--shadow-default-color) 25%, transparent);
        --shadow-overlay: 4px 4px 16px 0px color-mix(in srgb, var(--shadow-overlay-color) 12%, transparent);
        --shadow-input-focused: 0px 0px 0px 3px color-mix(in srgb, var(--shadow-input-focused-color) 20%, transparent);
        --shadow-input-error: 0px 0px 0px 3px color-mix(in srgb, var(--shadow-input-error-color) 25%, transparent);
        /* Sombras */
        /* Radio de los bordes */
        --border-radius-xs: 0px;
        --border-radius-s: 6px;
        --border-radius-m: 10px;
        --border-radius-l: 16px;
        --border-radius-xl: 24px;
        --border-radius-full: 104px;
        /* Radio de los bordes */
        /* Espaciado */
        --spacing-0: 0px;
        --spacing-2: 2px;
        --spacing-4: 4px;
        --spacing-6: 6px;
        --spacing-8: 8px;
        --spacing-10: 10px;
        --spacing-11: 11px;
        --spacing-12: 12px;
        --spacing-16: 16px;
        --spacing-20: 20px;
        --spacing-24: 24px;
        --spacing-32: 32px;
        --spacing-40: 40px;
        --spacing-48: 48px;
        --spacing-56: 56px;
        --spacing-64: 64px;
        --spacing-80: 80px;
        --spacing-100: 100px;
        /* Espaciado */
        /* Altura/Anchura */
        --size-16: 16px;
        --size-18: 18px;
        --size-20: 20px;
        --size-32: 32px;
        --size-38: 38px;
        --size-40: 40px;
        --size-48: 48px;
        /* Ctrl font-size */
        --ctrl-font-size: 14px;
        /* Ctrl main height */
        --ctrl-height: var(--size-40);
        /* Ctrl main padding-top */
        --ctrl-padding-top: var(--spacing-11);
        /* Z-Index */
        --z-index-xs: 1;
        --z-index-s: 10;
        --z-index-m: 50;
        --z-index-l: 100;
        --z-index-xl: 1000;
        --z-index-xxl: 10000;
        --z-index-max: 999999;
        /* Other */
        --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' id='check'><polyline points='40 144 96 200 224 72' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/></svg>");
    }

/* Clases para textos */
.title-xs
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 115%;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--cc-strong);
    }
.title-s
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 135%;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--cc-strong);
    }
.title-m
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 135%;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--cc-strong);
    }
.title-l
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 135%;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--cc-strong);
    }
.title-xl
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 135%;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--cc-strong);
    }
.title-xxl
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 135%;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--cc-strong);
    }

.body-xs
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 140%;
    letter-spacing: 0;
    vertical-align: middle;
    }
.body-s
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 140%;
    letter-spacing: 0;
    vertical-align: middle;
    }
.body-s-medium
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 140%;
    letter-spacing: 0;
    vertical-align: middle;
    }
.body-m
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0;
    vertical-align: middle;
    }

.body-m-medium
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0;
    vertical-align: middle;
    }
.body-l
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0;
    vertical-align: middle;
    }
.body-l-medium
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0;
    vertical-align: middle;
    }

.text-s
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    }
.text-s-medium
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    }
.text-m
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    }
.text-m-medium
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    }
.text-l
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    }
.text-l-medium
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    }

.inline-xs
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    }
.inline-xs-hover
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    text-decoration: underline;
    }
.inline-s
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    }
.inline-s-hover
    {
	font-family:pawRegular, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    text-decoration: underline;
    }
/* Clases para textos */

HTML
    {
    height: 100%;
    }
frameset, frame 
    {
    height:100%;
    }
TABLE
	{
	border:none;
	border-collapse:separate; 
	border-spacing:0;
    }
TD
    {
    border:none;
    }
input[type="button"], button
	{
	outline:none;
	}
h1, h2, h3, h4
	{
    color:var(--cc-accent);
	}
a
    {
    color:var(--cc-link);
    }
a:hover
    {
    color:var(--cc-link-hover);
    }
a:visited
    {
    color:var(--cc-link-selected);
    }

/* Paw3 custom global classes */

.pawLink,
.pawLinkNoHover
	{
	cursor:pointer;
	}
.pawLink:hover
	{
	outline: 1px solid var(--bc-focus);
	box-shadow: var(--shadow-overlay);
	}
.pawHidden
	{
	display:none;
	}
.pawFlexColumn
    {
    display:flex;
    flex-direction:column;
    }
.pawFlexRow
    {
    display:flex;
    flex-direction:row;
    }
.pawDisabled
    {
    color:var(--cc-weak);
	opacity:0.5;
    cursor:default;
    }
.pawFlexAlignCenter
    {
    justify-content:center;
    }
.pawFlexAlignLeft
    {
    justify-content:left;
    }
.pawFlexAlignRight
    {
    justify-content:right;
    }
.pawFocus
    {    
    border-color:var(--bc-focus) !important;
    box-shadow:var(--shadow-input-focused) !important;
    }
}