/* =====================================================
	 Mini Framework CSS - v1
	 Autor: Jaime
	 Descripción: Micro framework CSS ligero inspirado en Bootstrap y Tailwind
	 ===================================================== */

/* =========================
	 1. Variables (Root)
	 ========================= */
:root {
	/* 🎨 Paleta de colores */
	--c-primary: 52, 152, 219;   /* Azul */
	--c-secondary: 155, 89, 182; /* Púrpura */
	--c-tertiary: 75, 20, 110;
	--c-success: 106, 199, 90;   /* Verde */
	--c-danger: 231, 76, 60;     /* Rojo */
	--c-warning: 241, 196, 15;   /* Amarillo */
	--c-info: 103, 186, 241;      /* Turquesa */
	--c-dark: 44, 62, 80;        /* Gris oscuro */
	--c-text: 20, 23, 40;
	--c-light: 236, 240, 241;    /* Gris claro */
	/* 🔤 Tipografía */
	--font-family-base: Tahoma, Arial, sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.5;
	/* 📏 Espaciados */
	--spacer-0: 0;
	--spacer-1: 0.25rem;
	--spacer-2: 0.5rem;
	--spacer-3: 1rem;
	--spacer-4: 1.5rem;
	--spacer-5: 3rem;
	/* 🔲 Bordes */
	--border-radius: 1rem;
	--border-width: 1px;

	/* ✨ Sombras */
	--box-shadow: 0 0.5rem 1rem rgba(var(--c-dark), 0.15);
}

html {
	font-size: var(--font-size-base);
  scroll-behavior: smooth;
  height: 100%;
}
html.dark-scheme {
	--c-text: 245, 245, 245;
	--c-background: 33, 33, 33;
}
/*.transition-enter {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.transition-leave {
  opacity: 1;
  transition: opacity 0.3s ease;
}
html.is-changing .transition-enter {
  opacity: 1;
}
html.is-animating .transition-leave {
  opacity: 0;
}*/

.transition-fade {
  transition-property: opacity;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  /*transform: translateY(0);*/
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
  /*transform: translateY(-1rem);*/
}
html.is-leaving .transition-fade {
  /*transform: translateY(1rem);*/
}
html.is-animating.to-left .transition-fade {
  opacity: 0;
  /*transform: translateY(1rem);*/
}
html.is-leaving.to-left .transition-fade {
  /*transform: translateY(-1rem);*/
}

[x-cloak] { display: none !important; }

/*********************** SCROLLBAR ***********************/

::-webkit-scrollbar {
	width: .5rem;
	height: .5rem;
	background-color: var(--c-background);
}
::-webkit-scrollbar-thumb {
	border-radius: .5rem;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
	/*border: 1px solid var(--c-background);*/
	background-color: rgb(var(--c-primary));
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
::-webkit-scrollbar-corner {
	background-color: var(--c-background);
}

@media (max-width: 768px) {
	::-webkit-scrollbar {
		width: .2rem;
		height: .2rem;
	}
}

/* =========================
	 2. Tipografía global
	 ========================= */
body {
	font-family: var(--font-family-base);
	/*font-size: var(--font-size-base);*/
	/*line-height: var(--line-height-base);*/
	background: rgb(var(--c-background));
	color: rgb(var(--c-text));
	margin: 0;
	overflow-x: hidden;
	overflow-x: auto;
}

/* =========================
	 3. Reset básico
	 ========================= */
* {
	/*margin: 0;*/
	/*padding: 0;*/
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: all 0.3s ease 0s;
}
/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }

img, video {
/*	max-width: 100%;
	height: auto;*/
}

/* ========================================
	 ELEMENTOS BASE - ENLACES
	 ======================================== */

a {
	color: rgba(var(--c-primary), .75);
	text-decoration: none;
}

a:hover,
a:focus {
	color: rgba(var(--c-primary), 1);
	text-decoration: none;
	outline: none;
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
	color: inherit;
	text-decoration: none;
}

a:active {
	color: var(--c-secondary);
}

a[disabled],
a.disabled {
	pointer-events: none;
	color: var(--c-light);
	text-decoration: none;
	cursor: default;
}

/* =========================
	 Tipografía semántica
	 ========================= */

/* Encabezados */
h1, .h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.5rem; }
h2, .h2 { font-size: 2rem;   font-weight: 600; line-height: 1.3; margin-bottom: 0.5rem; }
h3, .h3 { font-size: 1.75rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.5rem; }
h4, .h4 { font-size: 1.5rem; font-weight: 500; line-height: 1.4; margin-bottom: 0.5rem; }
h5, .h5 { font-size: 1.25rem; font-weight: 500; line-height: 1.4; margin-bottom: 0.5rem; }
h6, .h6 { font-size: 1rem; font-weight: 500; line-height: 1.5; margin-bottom: 0.5rem; }

hr {
	border: 1px solid rgb(var(--c-primary), .5);
	margin: 1rem 0;
}
/* Párrafos */
p {
	margin-bottom: 1rem;
	color: rgb(var(--c-text));
}

/* Texto pequeño */
small, .text-small {
	font-size: 0.875rem;
	color: rgb(var(--c-text));
	opacity: 0.8;
}

/* Citas */
blockquote {
	margin: 1rem 0;
	padding: 0.5rem 1rem;
	border-left: 4px solid rgb(var(--c-primary));
	color: rgb(var(--c-dark));
	font-style: italic;
	background: rgba(var(--c-primary), 0.05);
}

/* Listas */
ul, ol {
	margin: 1rem 0 1rem 1.5rem;
	padding: 0;
}
li {
	margin-bottom: 0.5rem;
}

/* Código inline */
code {
	font-family: monospace, monospace;
	background: rgba(var(--c-dark), 0.1);
	padding: 0.125rem 0.25rem;
	border-radius: 0.25rem;
	font-size: 0.875rem;
}

/* Bloques de código */
pre {
	font-family: monospace, monospace;
	background: rgba(var(--c-dark), 0.1);
	padding: 1rem;
	border-radius: 0.5rem;
	overflow-x: auto;
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

/* ========================================
	 UTILIDADES TIPOGRÁFICAS
	 ======================================== */

/* Alineación de texto */
.text-start   { text-align: left; }
.text-center  { text-align: center; }
.text-end     { text-align: right; }
.text-justify { text-align: justify; }

/* Transformación de texto */
.text-lowercase  { text-transform: lowercase; }
.text-uppercase  { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }

/* Peso y estilo de fuente */
.fw-light   { font-weight: 300; }
.fw-normal  { font-weight: 400; }
.fw-medium  { font-weight: 500; }
.fw-bold    { font-weight: 700; }
.fw-bolder  { font-weight: 900; }
.fst-italic { font-style: italic; }
.fst-normal { font-style: normal; }

/* Truncamiento de texto */
.text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tamaños de fuente */
.fs-1 { font-size: 2.5rem; }
.fs-2 { font-size: 2rem; }
.fs-3 { font-size: 1.75rem; }
.fs-4 { font-size: 1.5rem; }
.fs-5 { font-size: 1.25rem; }
.fs-6 { font-size: 1rem; }
.fs-7 { font-size: .85rem; }
.fs-8 { font-size: .7rem; }
.fs-9 { font-size: .55rem; }

/* Colores de texto */




/* =====================================================
	 Mini Framework CSS - Fase 2: Utilidades rápidas
	 Autor: Jaime
	 Descripción: Clases rápidas de espaciado, colores y display
	 ===================================================== */

/* =========================
	 1. Espaciados (Margin / Padding)
	 ========================= */

/* Margen general */
.m-0 { margin: var(--spacer-0) !important; }
.m-1 { margin: var(--spacer-1) !important; }
.m-2 { margin: var(--spacer-2) !important; }
.m-3 { margin: var(--spacer-3) !important; }
.m-4 { margin: var(--spacer-4) !important; }
.m-5 { margin: var(--spacer-5) !important; }

/* Padding general */
.p-0 { padding: var(--spacer-0) !important; }
.p-1 { padding: var(--spacer-1) !important; }
.p-2 { padding: var(--spacer-2) !important; }
.p-3 { padding: var(--spacer-3) !important; }
.p-4 { padding: var(--spacer-4) !important; }
.p-5 { padding: var(--spacer-5) !important; }

/* Margen en un solo lado */
.mt-0 { margin-top: var(--spacer-0) !important; }
.mt-1 { margin-top: var(--spacer-1) !important; }
.mt-2 { margin-top: var(--spacer-2) !important; }
.mt-3 { margin-top: var(--spacer-3) !important; }
.mt-4 { margin-top: var(--spacer-4) !important; }
.mt-5 { margin-top: var(--spacer-5) !important; }

.mb-0 { margin-bottom: var(--spacer-0) !important; }
.mb-1 { margin-bottom: var(--spacer-1) !important; }
.mb-2 { margin-bottom: var(--spacer-2) !important; }
.mb-3 { margin-bottom: var(--spacer-3) !important; }
.mb-4 { margin-bottom: var(--spacer-4) !important; }
.mb-5 { margin-bottom: var(--spacer-5) !important; }

.ms-0 { margin-left: var(--spacer-0) !important; }
.ms-1 { margin-left: var(--spacer-1) !important; }
.ms-2 { margin-left: var(--spacer-2) !important; }
.ms-3 { margin-left: var(--spacer-3) !important; }
.ms-4 { margin-left: var(--spacer-4) !important; }
.ms-5 { margin-left: var(--spacer-5) !important; }

.me-0 { margin-right: var(--spacer-0) !important; }
.me-1 { margin-right: var(--spacer-1) !important; }
.me-2 { margin-right: var(--spacer-2) !important; }
.me-3 { margin-right: var(--spacer-3) !important; }
.me-4 { margin-right: var(--spacer-4) !important; }
.me-5 { margin-right: var(--spacer-5) !important; }

.mx-0 { margin: 0 var(--spacer-0) !important; }
.mx-1 { margin: 0 var(--spacer-1) !important; }
.mx-2 { margin: 0 var(--spacer-2) !important; }
.mx-3 { margin: 0 var(--spacer-3) !important; }
.mx-4 { margin: 0 var(--spacer-4) !important; }
.mx-5 { margin: 0 var(--spacer-5) !important; }

.my-0 { margin: var(--spacer-0) 0 !important; }
.my-1 { margin: var(--spacer-1) 0 !important; }
.my-2 { margin: var(--spacer-2) 0 !important; }
.my-3 { margin: var(--spacer-3) 0 !important; }
.my-4 { margin: var(--spacer-4) 0 !important; }
.my-5 { margin: var(--spacer-5) 0 !important; }

/* Padding en un solo lado */
.pt-0 { padding-top: var(--spacer-0) !important; }
.pt-1 { padding-top: var(--spacer-1) !important; }
.pt-2 { padding-top: var(--spacer-2) !important; }
.pt-3 { padding-top: var(--spacer-3) !important; }
.pt-4 { padding-top: var(--spacer-4) !important; }
.pt-5 { padding-top: var(--spacer-5) !important; }

.pb-0 { padding-bottom: var(--spacer-0) !important; }
.pb-1 { padding-bottom: var(--spacer-1) !important; }
.pb-2 { padding-bottom: var(--spacer-2) !important; }
.pb-3 { padding-bottom: var(--spacer-3) !important; }
.pb-4 { padding-bottom: var(--spacer-4) !important; }
.pb-5 { padding-bottom: var(--spacer-5) !important; }

.ps-0 { padding-left: var(--spacer-0) !important; }
.ps-1 { padding-left: var(--spacer-1) !important; }
.ps-2 { padding-left: var(--spacer-2) !important; }
.ps-3 { padding-left: var(--spacer-3) !important; }
.ps-4 { padding-left: var(--spacer-4) !important; }
.ps-5 { padding-left: var(--spacer-5) !important; }

.pe-0 { padding-right: var(--spacer-0) !important; }
.pe-1 { padding-right: var(--spacer-1) !important; }
.pe-2 { padding-right: var(--spacer-2) !important; }
.pe-3 { padding-right: var(--spacer-3) !important; }
.pe-4 { padding-right: var(--spacer-4) !important; }
.pe-5 { padding-right: var(--spacer-5) !important; }

.px-0 { padding: 0 var(--spacer-0) !important; }
.px-1 { padding: 0 var(--spacer-1) !important; }
.px-2 { padding: 0 var(--spacer-2) !important; }
.px-3 { padding: 0 var(--spacer-3) !important; }
.px-4 { padding: 0 var(--spacer-4) !important; }
.px-5 { padding: 0 var(--spacer-5) !important; }

.py-0 { padding: var(--spacer-0) 0 !important; }
.py-1 { padding: var(--spacer-1) 0 !important; }
.py-2 { padding: var(--spacer-2) 0 !important; }
.py-3 { padding: var(--spacer-3) 0 !important; }
.py-4 { padding: var(--spacer-4) 0 !important; }
.py-5 { padding: var(--spacer-5) 0 !important; }

/* =========================
	 2. Colores de texto
	 ========================= */
.text-color {
	--tc: var(rgb(var(--c-text)));
	color: var(--tc) !important;
}
.text-color.tc-primary   { --tc: rgb(var(--c-primary)) !important; }
.text-color.tc-secondary { --tc: rgb(var(--c-secondary)) !important; }
.text-color.tc-tertiary  { --tc: rgb(var(--c-tertiary)) !important; }
.text-color.tc-success   { --tc: rgb(var(--c-success)) !important; }
.text-color.tc-danger    { --tc: rgb(var(--c-danger)) !important; }
.text-color.tc-warning   { --tc: rgb(var(--c-warning)) !important; }
.text-color.tc-info      { --tc: rgb(var(--c-info)) !important; }
.text-color.tc-light     { --tc: rgb(var(--c-light)) !important; }
.text-color.tc-dark      { --tc: rgb(var(--c-dark)) !important; }
.text-color.tc-background      { color: rgb(var(--c-background)) !important; }

.text-border {
	--tb: var(rgb(var(--c-text)), black);
	text-shadow: 1px 1px 0 var(--tb), -1px 1px 0 var(--tb), 1px -1px 0 var(--tb), -1px -1px 0 var(--tb);
}
.text-border.tb-primary   { --tb: rgb(var(--c-primary)); }
.text-border.tb-secondary { --tb: rgb(var(--c-secondary)); }
.text-border.tb-tertiary  { --tb: rgb(var(--c-tertiary)); }
.text-border.tb-success  { --tb: rgb(var(--c-success)); }
.text-border.tb-danger  { --tb: rgb(var(--c-danger)); }
.text-border.tb-warning  { --tb: rgb(var(--c-warning)); }
.text-border.tb-info  { --tb: rgb(var(--c-info)); }
.text-border.tb-light  { --tb: rgb(var(--c-light)); }
.text-border.tb-dark  { --tb: rgb(var(--c-dark)); }
.text-border.tb-background  { --tb: rgb(var(--c-background)); }

.text-gradient {
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;
	z-index: 1
}
.text-gradient.text-primary {
	background-image: linear-gradient(310deg, rgb(var(--c-secondary)), rgb(var(--c-primary)));
}
.text-gradient.text-info {
	background-image: linear-gradient(310deg, #2152ff, #21d4fd)
}
.text-gradient.text-success {
	background-image: linear-gradient(310deg, #17ad37, #c1e823)
}
.text-gradient.text-warning {
	background-image: linear-gradient(310deg, #f53939, #fbcf33)
}
.text-gradient.text-danger {
	background-image: linear-gradient(310deg, #d60808, #ff6690)
}
.text-gradient.text-dark {
	background-image: linear-gradient(310deg, #141727, #3a416f)
}
/* =========================
	 3. Colores de fondo
	 ========================= */
.bg {
	--bc: rgb(var(--c-background));
	background-color: var(--bc) !important;
}
.bg.bg-primary   { --bc: rgb(var(--c-primary)) !important; }
.bg.bg-secondary { --bc: rgb(var(--c-secondary)) !important; }
.bg.bg-tertiary { --bc: rgb(var(--c-tertiary)) !important; }
.bg.bg-success   { --bc: rgb(var(--c-success)) !important; }
.bg.bg-danger    { --bc: rgb(var(--c-danger)) !important; }
.bg.bg-warning   { --bc: rgb(var(--c-warning)) !important; }
.bg.bg-info      { --bc: rgb(var(--c-info)) !important; }
.bg.bg-dark      { --bc: rgb(var(--c-dark)) !important; }
.bg.bg-light     { --bc: rgb(var(--c-light)) !important; }

/* =========================
	 4. Display y alineación
	 ========================= */
/* ========================================
	 UTILIDADES DE DISPLAY Y ALINEACIÓN
	 ======================================== */

/* Display */
.d-none        { display: none !important; }
.d-inline      { display: inline !important; }
.d-inline-block{ display: inline-block !important; }
.d-block       { display: block !important; }
.d-flex        { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid        { display: grid !important; }

/* Flex dirección */
.flex-row       { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column    { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

/* Flex wrap */
.flex-wrap      { flex-wrap: wrap !important; }
.flex-nowrap    { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* Justificación de contenido */
.justify-start    { justify-content: flex-start !important; }
.justify-center   { justify-content: center !important; }
.justify-end      { justify-content: flex-end !important; }
.justify-between  { justify-content: space-between !important; }
.justify-around   { justify-content: space-around !important; }
.justify-evenly   { justify-content: space-evenly !important; }

/* Alineación en eje vertical (cross-axis) */
.align-start   { align-items: flex-start !important; }
.align-center  { align-items: center !important; }
.align-end     { align-items: flex-end !important; }
.align-stretch { align-items: stretch !important; }
.align-baseline{ align-items: baseline !important; }

/* Alineación de contenido en grid/flex (multi-line) */
.align-content-start   { align-content: flex-start !important; }
.align-content-center  { align-content: center !important; }
.align-content-end     { align-content: flex-end !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around  { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

/* Auto-alineación de items */
.align-self-start   { align-self: flex-start !important; }
.align-self-center  { align-self: center !important; }
.align-self-end     { align-self: flex-end !important; }
.align-self-stretch { align-self: stretch !important; }

/* Grid helpers */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr) !important; }

.grid-rows-1 { grid-template-rows: repeat(1, 1fr) !important; }
.grid-rows-2 { grid-template-rows: repeat(2, 1fr) !important; }
.grid-rows-3 { grid-template-rows: repeat(3, 1fr) !important; }
.grid-rows-4 { grid-template-rows: repeat(4, 1fr) !important; }
.grid-rows-5 { grid-template-rows: repeat(5, 1fr) !important; }
.grid-rows-6 { grid-template-rows: repeat(6, 1fr) !important; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

.vh25 { height: 25vh !important; } 
.vh50 { height: 50vh !important; } 
.vh75 { height: 75vh !important; } 
.vh100 { height: 100vh !important; } 

.w-100 { width: 100%; }

/* =====================================================
	 Mini Framework CSS - Fase 3: Componentes base
	 Autor: Jaime
	 Descripción: Botones, Grid y Tarjetas
	 ===================================================== */

/* =========================
	 1. Botones
	 ========================= */

.btn {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 0.375rem;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	background-color: transparent;
	color: rgb(var(--c-text));
	cursor: pointer;
	font-family: var(--body-font-family);
	font-size: 1rem;
	overflow: hidden;
	font-weight: 500;
	line-height: 1;
	/*border-width: 1px;*/
	/*border-style: solid;*/
}
/* Variantes de color */
.btn-primary   { background-color: rgb(var(--c-primary)); border-color: rgb(var(--c-primary)); }
.btn-secondary { background-color: rgb(var(--c-secondary)); border-color: rgb(var(--c-secondary)); }
.btn-success   { background-color: rgb(var(--c-success)); border-color: rgb(var(--c-success)); }
.btn-danger    { background-color: rgb(var(--c-danger)); border-color: rgb(var(--c-danger)); }
.btn-warning   { background-color: rgb(var(--c-warning)); border-color: rgb(var(--c-warning)); color: #000; }
.btn-info      { background-color: rgb(var(--c-info)); border-color: rgb(var(--c-info)); }
.btn-light     { background-color: rgb(var(--c-light)); border-color: rgb(var(--c-light)); color: #000; }
.btn-dark      { background-color: rgb(var(--c-dark)); border-color: rgb(var(--c-dark)); }

/* Botones contorneados (outline) */
.btn-outline  {
	border: 1px solid rgb(var(--c-text));
}
.btn-outline-primary   { color: rgb(var(--c-primary)); background-color: transparent; border-color: rgb(var(--c-primary)); }
.btn-outline-secondary { color: rgb(var(--c-secondary)); background-color: transparent; border-color: var(--c-secondary); }
.btn-outline-tertiary { color: var(--c-tertiary); background-color: transparent; border-color: var(--c-tertiary); }
.btn-outline-success   { color: var(--c-success); background-color: transparent; border-color: var(--c-success); }
.btn-outline-danger    { color: var(--c-danger); background-color: transparent; border-color: var(--c-danger); }
.btn-outline-warning   { color: var(--c-warning); background-color: transparent; border-color: var(--c-warning); }
.btn-outline-info      { color: var(--c-info); background-color: transparent; border-color: var(--c-info); }
.btn-outline-light     { color: var(--c-light); background-color: transparent; border-color: var(--c-light); }
.btn-outline-dark      { color: var(--c-dark); background-color: transparent; border-color: var(--c-dark); }

.btn-outline-primary:hover   { background-color: rgb(var(--c-primary)); color: #fff; }
.btn-outline-secondary:hover { background-color: rgb(var(--c-secondary)); color: #fff; }
.btn-outline-success:hover   { background-color: rgb(var(--c-success)); color: #fff; }
.btn-outline-danger:hover    { background-color: rgb(var(--c-danger)); color: #fff; }
.btn-outline-warning:hover   { background-color: rgb(var(--c-warning)); color: #000; }
.btn-outline-info:hover      { background-color: rgb(var(--c-info)); color: #fff; }
.btn-outline-light:hover     { background-color: rgb(var(--c-light)); color: #000; }
.btn-outline-dark:hover      { background-color: rgb(var(--c-dark)); color: #fff; }

/* Tamaños */
.btn-sm {
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	border-radius: 0.25rem;
}

.btn-lg {
	padding: 0.5rem 1rem;
	font-size: 1.25rem;
	border-radius: 0.5rem;
}

/* Bloque completo */
.btn-block {
	display: block;
	width: 100%;
}

/* Variantes de color */
.btn-primary:hover {
	background-color: rgba(var(--c-primary), 0.75);
}
.btn-secondary:hover {
	background-color: rgba(var(--c-secondary), 0.75);
}
.btn-tertiary:hover {
	background-color: rgba(var(--c-tertiary), 0.75);
}

.btn.active { background: rgb(var(--c-primary), .1); }
.btn:hover, .btn:focus-visible {/*filter: brightness(80%);*/ outline: none; }
.btn:active { transform: scale(0.97); }
.btn:disabled {	opacity: 0.6;	pointer-events: none; }
.btn:hover { background: rgb(var(--c-text), .15); }
.btn>.tki { vertical-align: middle; }


.btn.new {
	font-weight: 400;
	font-size: .85rem;
	letter-spacing: 1px;
	border: 2px solid rgb(var(--c-primary));
	color: rgb(var(--c-primary));
	background: rgb(var(--c-background), .75);
	margin: .25rem;
	box-shadow: 0 2px 4px 2px rgba(var(--c-primary), .15);
}
.btn.new:hover {
	box-shadow: 0 2px 4px 2px rgba(var(--c-primary), .5);
}
.btn.new:before, .btn.new:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.btn.new:before {
	/*border: 1px solid blue;*/
}
.btn.new:after {
	/*border: 1px solid red;*/
	/*background-color: red;*/
	z-index: -1;
}

.btn.glow {
	position: relative;
	overflow: hidden;
	border: 2px solid rgba(var(--c-primary));
	background: linear-gradient(to right, rgba(var(--c-primary), 0.1) 1%, transparent 40%,transparent 60% , rgba(var(--c-primary), 0.1) 100%);
	color: rgba(var(--c-primary));
	box-shadow: inset 0 0 10px rgba(var(--c-primary), 0.4), 0 0 9px 3px rgba(var(--c-primary), 0.1);
}
.btn.glow:hover {
	color: rgba(var(--c-primary), .85);
	box-shadow: inset 0 0 10px rgba(var(--c-primary), 0.6), 0 0 9px 3px rgba(var(--c-primary), 0.2);
}
.btn.glow:before {
	content: "";
	position: absolute;
	left: -4em;
	width: 4em;
	height: 100%;
	top: 0;
	transition: transform .4s ease-in-out;
	background: linear-gradient(to right, transparent 1%, rgba(var(--c-primary), 0.5) 40%,rgba(var(--c-primary), 0.1) 60% , transparent 100%);
}
.btn.glow:hover:before {
	transform: translateX(15em);
}


.btn.flyball {
	position: relative;
	--fb-color: var(--c-text);
	background: rgb(var(--c-background), .85);
	border: 2px solid rgba(var(--fb-color));
	overflow: hidden;
	color: rgba(var(--fb-color), .85);
	transition: all 0.5s ease-in-out;
}
.btn.flyball::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: .5rem;
	height: .5rem;
	transition: all 0.5s ease-in-out;
	background-color: rgba(var(--fb-color)) !important;
	border-radius: 50%;
	visibility: hidden;
	z-index: 0;
}
.btn.flyball>span {
	position: relative;
	z-index: 10;
}
.btn.flyball.primary {
	--fb-color: var(--c-primary);
}
.btn.flyball.secondary {
	--fb-color: var(--c-secondary);
}
.btn.flyball.tertiary {
	--fb-color: var(--c-tertiary);
}
.btn.flyball:hover {
	box-shadow: 1px 1px 5rem rgb(var(--fb-color));
	color: rgb(var(--c-background));
}
.btn.flyball:hover::after {
	visibility: visible;
	transform: scale(100) translateX(2px);
}



/* =========================
	 2. Grid (Sistema de columnas)
	 ========================= */

/* Contenedores */
.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	max-width: 1200px;
}
@media (min-width: 576px) {
	.container { max-width: 540px; }
}
@media (min-width: 768px) {
	.container { max-width: 720px; }
}
@media (min-width: 992px) {
	.container { max-width: 960px; }
}
@media (min-width: 1200px) {
	.container { max-width: 1140px; }
}
@media (min-width: 1400px) {
	.container { max-width: 1320px; }
}

.container-fluid {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
}

/* Filas */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -0.75rem;
	margin-left: -0.75rem;
}

[class*="col-"] {
	padding-right: 0.75rem;
	padding-left: 0.75rem;
}

/* Columnas básicas (12 columnas) */
.col { flex: 1 0 0%; }
.col-1 { flex: 0 0 8.333%; max-width: 8.333%; }
.col-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5 { flex: 0 0 41.666%; max-width: 41.666%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Offsets */
.offset-1 { margin-left: 8.333%; }
.offset-2 { margin-left: 16.666%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333%; }
.offset-5 { margin-left: 41.666%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.333%; }
.offset-8 { margin-left: 66.666%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.333%; }
.offset-11 { margin-left: 91.666%; }

/* Breakpoints */
@media (min-width: 576px) {
	.col-sm-1 { flex: 0 0 8.333%; max-width: 8.333%; }
	.col-sm-2 { flex: 0 0 16.666%; max-width: 16.666%; }
	.col-sm-3 { flex: 0 0 25%; max-width: 25%; }
	.col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; }
	.col-sm-5 { flex: 0 0 41.666%; max-width: 41.666%; }
	.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
	.col-sm-7 { flex: 0 0 58.333%; max-width: 58.333%; }
	.col-sm-8 { flex: 0 0 66.666%; max-width: 66.666%; }
	.col-sm-9 { flex: 0 0 75%; max-width: 75%; }
	.col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; }
	.col-sm-11 { flex: 0 0 91.666%; max-width: 91.666%; }
	.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
/* Medium devices (md) >= 768px */
@media (min-width: 768px) {
	.col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-md-3 { flex: 0 0 25%; max-width: 25%; }
	.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-md-6 { flex: 0 0 50%; max-width: 50%; }
	.col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-md-9 { flex: 0 0 75%; max-width: 75%; }
	.col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
/* Large devices (lg) >= 992px */
@media (min-width: 992px) {
	.col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
	.col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
	.col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-lg-9 { flex: 0 0 75%; max-width: 75%; }
	.col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}
/* Extra large devices (xl) >= 1200px */
@media (min-width: 1200px) {
	.col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-xl-3 { flex: 0 0 25%; max-width: 25%; }
	.col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-xl-6 { flex: 0 0 50%; max-width: 50%; }
	.col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-xl-9 { flex: 0 0 75%; max-width: 75%; }
	.col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}



/* Ejemplo: en el futuro podemos extender a col-1...col-12 */

/* =========================
	 3. Tarjetas (Cards)
	 ========================= */

.card {
	border: 1px solid rgb(var(--c-text), .1);
	border-radius: 0.5rem;
	background: rgb(var(--c-background));
	color: rgb(var(--c-text));
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Variantes */
.card-primary {
	border-color: var(--c-primary);
}

.card-secondary {
	border-color: var(--c-secondary);
}
.card-hover:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
	transition: all 0.3s ease;
}

.card-header, .card-footer {
	padding: 0.75rem 1rem;
	background: rgb(var(--c-background));
	font-weight: 500;
	border-bottom: 1px solid rgb(var(--c-text),.25);
}

.card-footer {
	border-top: 1px solid rgb(var(--c-text),.25);
	border-bottom: none;
}

.card-body {
	padding: 1rem;
	flex: 1;
}

.card-title {
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
}

.card-text {
	font-size: 1rem;
	color: #212529;
}

.card-img-top {
	width: 100%;
	height: auto;
	border-bottom: 1px solid #dee2e6;
}


.badge {
	padding: .25rem .25rem .15rem;
	font-size: .6rem;
	border-radius: .5rem;
	color: rgb(var(--c-light));
}
.badge.primary {
	background-color: rgb(var(--c-primary), .5);
}
.badge.secondary {
	background-color: rgb(var(--c-secondary), .5);
}
.badge.tertiary {
	background-color: rgb(var(--c-tertiary), .5);
}
.badge.success {
	background-color: rgb(var(--c-success), .5);
}
.badge.danger {
	background-color: rgb(var(--c-danger), .5);
}
.badge.warning {
	background-color: rgb(var(--c-warning), .5);
}
.badge.info {
	background-color: rgb(var(--c-info), .5);
}

.brand {
	width: auto;
	max-width: 15rem;
	margin: auto;
}
.brand.brand-h {
	aspect-ratio: 3 / 1;
}
.brand.brand-v {
	aspect-ratio: 1 / 1;
}

.dark-scheme .brand-h-p {
	content: url("/static/logo/brand-h-s.png");
}
.dark-scheme .brand-h-s {
	content: url("/static/logo/brand-h-p.png");
}
.dark-scheme .brand-h-w {
	content: url("/static/logo/brand-h-b.png");
}
.dark-scheme .brand-h-b {
	content: url("/static/logo/brand-h-w.png");
}

.dark-scheme .brand-v-p {
	content: url("/static/logo/brand-v-s.png");
}
.dark-scheme .brand-v-s {
	content: url("/static/logo/brand-v-s.png");
}
.dark-scheme .brand-v-w {
	content: url("/static/logo/brand-v-b.png");
}
.dark-scheme .brand-v-b {
	content: url("/static/logo/brand-v-w.png");
}
/*.danger {
	--n-color: #CC0000;
}
.warning {
	--n-color: #FF8800;
}
.success {
	--n-color: #007E33;
}
.info {
	--n-color: #0099CC;
}*/

.social-network {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.social-network>li>a {
	text-decoration: none;
}


.glass-card {
	/*--c-g: var();*/
	position: relative;
	width: calc(100% - 4rem);
	margin: 2rem;
	background: rgba(var(--g-c, var(--c-light)), 0.15);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 1rem;
	border: 1px solid rgba(var(--g-c, var(--c-light)), 0.3);
	/*box-shadow: 
		0 8px 2rem rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(var(--g-c, var(--c-light)), 0.5),
		inset 0 -1px 0 rgba(var(--g-c, var(--c-light)), 0.1),
		inset 0 0 20px 10px rgba(var(--g-c, var(--c-light)), 1);*/
	overflow: hidden;
}

.glass-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(var(--g-c, var(--c-light)), 0.8),
		transparent
	);
}

.glass-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background: linear-gradient(
		180deg,
		rgba(var(--g-c, var(--c-light)), 0.8),
		transparent,
		rgba(var(--g-c, var(--c-light)), 0.3)
	);
}
/* =========================
	 2. Reset / Form base
	 ========================= */
form { width: 100%; display: flex; flex-direction: column; gap: var(--spacer-3); font-family: var(--font-family-base); font-size: var(--font-size-base); color: rgb(var(--c-text)); }

/* builder legacy selector compatibility */
form.builder { position: relative; max-width: 100%; gap: 1rem; margin: 0; padding: 0; }
form.builder>.form-loading {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(var(--c-background));
	z-index: 10;
}
form.builder>* { 	margin: 0; width: 100%; }
form.builder>.btn.send {
	padding: .75rem;
	text-transform: uppercase;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: 2px;
}
form.builder.vertical {
	flex-direction: row;
	gap: 1rem;
}

input,
select,
textarea {
	font-family: var(--font-family-base);
}


/* =========================
	 3. Inputs / Selects / Textarea base
	 ========================= */
.form-control,
.form-select,
textarea {
	display: block;
	width: 100%;
	padding: 1rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: rgb(var(--c-text));
	background-color: rgb(var(--c-background), 0);
	border: var(--border-width) solid rgba(var(--c-dark), 0.12);
	border-radius: var(--border-radius);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* specific heights for floating */
.form-floating > .form-control,
.form-floating > .form-select {
	height: calc(3.5rem + 2px);
	padding: 1rem 1rem .25rem;
}

/* Select adjustments */
.form-select {
	padding-right: 2rem;
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
	background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(100,100,100)' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
}

/* Textarea */
textarea { min-height: 8rem; resize: vertical; padding: 1rem 0.75rem; }

/* File input */
input[type="file"] { padding: .4rem; border: none; background: transparent; }

/* Range */
input[type="range"] { width: 100%; }

/* Color */
input[type="color"] { height: 3rem; padding: .2rem; }

/* =========================
	 4. Placeholder / Autofill
	 ========================= */
.form-control::placeholder { color: rgba(var(--c-dark), 0.45); opacity: 1; }

/* Autofill handling (Chrome) */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
	-webkit-box-shadow: 0 0 0 30px white inset !important;
	-webkit-text-fill-color: rgb(var(--c-text)) !important;
}

/* =========================
	 5. Focus / Interaction states
	 ========================= */
.form-control:focus,
.form-select:focus,
textarea:focus {
	border-color: rgba(var(--c-primary), 1);
	box-shadow: 0 0 0 0.2rem rgba(var(--c-primary), 0.14);
	outline: none;
}

/* Disabled / readonly */
.form-control:disabled,
.form-select:disabled,
textarea:disabled,
.form-control[readonly],
.form-select[readonly],
textarea[readonly] {
	background-color: rgba(var(--c-light), 0.6);
	cursor: not-allowed;
	opacity: 0.9;
}

/* =========================
	 6. Visual validation states (native HTML5)
	 ========================= */

/* Éxito nativo */
.form-control:valid,
.form-select:valid,
textarea:valid {
  border-color: rgb(var(--c-success));
  box-shadow: 0 0 0 0.18rem rgba(var(--c-success), 0.12);
}

/* Select sin valor (estado inicial) */
.form-floating > .form-select:invalid:not(:focus) {
  border-color: rgb(var(--c-text), .5);
  box-shadow: none;
}

/* Select con focus o valor inválido */
.form-floating > .form-select:invalid:is(:focus),
.form-floating > .form-select:invalid:not([value=""]):not([value="0"]) {
  border-color: rgb(var(--c-danger));
  box-shadow: 0 0 0 0.18rem rgba(var(--c-danger), 0.12);
}

/* Input/Textarea - mantener como estaba */
.form-floating > .form-control:invalid:not(:focus):is(:placeholder-shown),
.form-floating > textarea:invalid:not(:focus):is(:placeholder-shown) {
  border-color: rgb(var(--c-primary), .5);
  box-shadow: none;
}

.form-floating > .form-control:invalid:is(:focus):not(:placeholder-shown),
.form-floating > textarea:invalid:is(:focus):not(:placeholder-shown),
.form-floating > .form-control:invalid:not(:focus):not(:placeholder-shown),
.form-floating > textarea:invalid:not(:focus):not(:placeholder-shown) {
  border-color: rgb(var(--c-danger));
  box-shadow: 0 0 0 0.18rem rgba(var(--c-danger), 0.12);
}

/* =========================
	 7. Floating label system (corrected)
	 ========================= */
.form-floating { position: relative; width: 100%; margin: 0.5rem 0; }

.form-floating > label {
	position: absolute;
	top: .85rem;
	left: 0.9rem;
	font-size: .95rem;
	color: rgba(var(--c-text), 0.7);
	pointer-events: none;
	transition: transform 0.18s ease, font-size 0.18s ease, top 0.18s ease, color 0.18s ease;
	transform-origin: left top;
	margin: 0;
	padding: 0 .25rem;
	background: transparent;
}

/* Float when focused OR when value present (placeholder-shown trick requires placeholder=" " on inputs) */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > textarea:focus ~ label,
.form-floating > textarea:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:not([value=""]) ~ label {
	top: .5rem;
	left: 0.85rem;
	font-size: .78rem;
	color: rgba(var(--c-primary), 1);
	opacity: 0.95;
	transform: translateY(-0.2rem) scale(.95);
}

/* for file/color where label should sit above */
.form-floating > input[type="file"] ~ label,
.form-floating > input[type="color"] ~ label {
	top: -0.4rem;
	font-size: .78rem;
}

/* =========================
	 8. Input groups
	 ========================= */
.input-group { display: flex; gap: 0; align-items: stretch; width: 100%; }

.input-group > .form-control { border-radius: 0; flex: 1 1 auto; }

.input-group > .addon {
	display: inline-flex;
	align-items: center;
	padding: .5rem .75rem;
	background: rgba(var(--c-light), 0.85);
	border: var(--border-width) solid rgba(var(--c-dark), 0.08);
	color: rgba(var(--c-text), 0.85);
	border-left: none;
}

/* avoid double borders between controls */
.input-group > :not(:first-child) { margin-left: -1px; }

/* =========================
	 9. Checkboxes / Radios / Switch
	 ========================= */
.form-check { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; }

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
	width: 1rem; height: 1rem;
	margin: 0;
	cursor: pointer;
	accent-color: rgb(var(--c-primary));
}

/* switch simple */
.form-switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.form-switch input { display: none; }
.form-switch .track {
	width: 2.2rem; height: 1.2rem; background: rgba(var(--c-dark), 0.15); border-radius: 999px; position: relative; transition: background 0.15s;
}
.form-switch .thumb {
	position: absolute; left: 0.1rem; top: 0.12rem; width: .95rem; height: .95rem; background: white; border-radius: 50%; box-shadow: 0 1px 2px rgba(var(--c-dark), 0.06); transition: transform 0.15s;
}
.form-switch input:checked + .track { background: rgba(var(--c-primary), 0.9); }
.form-switch input:checked + .track .thumb { transform: translateX(1.05rem); }

/* =========================
	 10. Password toggle helper
	 ========================= */
.password-toggle { position: relative; }
.password-toggle .toggle-password {
	position: absolute; top: 1.75rem; right: .75rem; transform: translateY(-50%); padding: .35rem; border-radius: 50%; cursor: pointer; opacity: 0.6;
}
.password-toggle .toggle-password.active { background: rgba(var(--c-primary), 0.12); opacity: 1; }

/* =========================
	 12. Feedback / helpers
	 ========================= */
.feedback {
	display: block;
	font-size: 0.75rem;
	color: rgb(var(--c-danger));
	width: 100%;
	line-height: 1.3;
	padding: 0.5rem 0.5rem 0px;
}
.feedback.error { color: rgb(var(--c-danger)); }
.feedback.success { color: rgb(var(--c-success)); }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 30px #1e1e1e inset !important; /* color de fondo personalizado */
	-webkit-text-fill-color: rgb(var(--c-text)) !important; /* color del texto */
	caret-color: rgb(var(--c-text)); /* color del cursor */
	transition: background-color 9999s ease-in-out 0s;
}app-dashboard {
	position: relative;
	width: 100dvw;
	height: 100dvh;
	display: grid;
	grid-template-columns: 18rem 1fr;
	grid-template-rows: 5rem 1fr;
	grid-template-areas:
		"brand content"
		"navigation content";
	grid-gap: 0;
	background: rgb(var(--c-background), 1);

	/*background-image: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);*/
	/*background-image: linear-gradient( 135deg, #F6416C 10%, #FFF6B7 100%);*/
	background-image: linear-gradient( 135deg, rgb(var(--c-tertiary)) 10%, rgb(var(--c-secondary)) 100%);
	overflow: hidden;
	z-index: 0;
}

app-dashboard.compact {
	grid-template-columns: 8rem 1fr;
}
app-dashboard.condensed {
	grid-template-columns: 5rem 1fr;
}

@media (max-width: 992px) {
	app-dashboard {
		grid-template-columns: 4rem 1fr !important;
		grid-template-rows: 4rem 1fr !important;
		grid-template-areas:
			"brand header"
			"content content";
	}
}
@media (max-width: 768px) {
	app-dashboard {
	}
}

/************************ HEADER ************************/

app-brand {
	grid-area: brand;
	overflow: hidden;
}
app-brand>.home {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
app-brand>.home>img {
	display: flex;
	transform-origin: center;
	aspect-ratio: 3 / 1;
	width: 65%;
	height: auto;
}
app-dashboard.compact>app-brand>.home>img {
	width: 90%;
}
app-dashboard.condensed>app-brand>.home>img {
	content: url("/static/logo/icon.png") !important;
	aspect-ratio: 1;
	width: 5rem;
	height: 5rem;
}

@media (max-width: 992px) {
	app-dashboard>app-brand>.home>img {
		content: url("/static/logo/icon.png") !important;
		aspect-ratio: 1;
		width: 4rem;
		height: auto;
	}
}
/************************ BAR ************************/

app-bar {
	position: fixed;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 1rem;
	z-index: 900;
}

app-bar>.menu {
	flex-basis: 4rem;
	height: 4rem;
	display: none;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	--c: var(--c-text);
	color: rgb(var(--c), .85);
	cursor: pointer;
	z-index: 1;
}
app-bar>.menu::before {
	content: "";
	position: absolute;
	width: 1rem;
	height: .1rem;
	background: rgb(var(--c));
	transform: translateY(-5px);
	box-shadow: 0 10px 0 rgb(var(--c));
}
app-bar>.menu::after {
	content: "";
	position: absolute;
	width: 1rem;
	height: .1rem;
	background: rgb(var(--c));
	transform: translateY(0px);
}
app-bar>.space {
	flex: 1;
	display: flex;
	justify-content: center;
}

@media (max-width: 992px) {
	app-bar {
		width: calc(100% - 4rem);
		padding: 0 .25rem 0 0;
		gap: 0;
	}
	app-bar>.menu {
		display: flex;
	}
}

/************************ HEADER ************************/
/*
app-header {
	grid-area: header;
	display: flex;
	align-items: center;
	z-index: 900;
}

app-header.granted {
	display: flex;	
}

app-header>.empty {
	flex-basis: 4rem;
	height: 4rem;
}

app-header>.menu {
	flex-basis: 4rem;
	height: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	--c: var(--c-text);
	color: rgb(var(--c), .85);
	cursor: pointer;
	z-index: 1;
}
app-header>.menu::before {
	content: "";
	position: absolute;
	width: 1rem;
	height: .1rem;
	background: rgb(var(--c));
	transform: translateY(-5px);
	box-shadow: 0 10px 0 rgb(var(--c));
}
app-header>.menu::after {
	content: "";
	position: absolute;
	width: 1rem;
	height: .1rem;
	background: rgb(var(--c));
	transform: translateY(0px);
}

app-header>.space {
	flex: 1;
	display: flex;
	justify-content: center;
}
app-header>.shortcuts {
	display: flex;
	gap: .5rem;
	padding: 1rem;
	height: 100%;
	align-items: center;
	justify-content: center;
}
app-header>.toggle, app-header>.space, app-header>.shortcuts {
	display: none;
}
app-header.granted {
	display: flex;
}
app-header.granted>.toggle {
	display: flex;
}
app-header.granted>.space, app-header.granted>.shortcuts {
	display: flex;
}

@media (max-width: 1024px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
	app-header>.shortcuts {
		gap: .1rem;
		padding: .5rem;
	}
}*/

/************************ NAVIGATION ************************/

app-navigation {
	grid-area: navigation;
	position: relative;
	display: flex;
	flex-direction: column;
	/*background: rgb(var(--c-text), .1);*/
	overflow-x: hidden;
	overflow-y: auto;
}
app-navigation::-webkit-scrollbar {
	width: .25rem;
}
app-navigation.granted {
	display: flex;
}


app-navigation>.shortcuts, app-navigation>.options {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	z-index: 5;
}
app-navigation>.shortcuts {
	/*margin: 1rem 1rem 0;*/
	padding: 1rem 1rem 0;
	flex: 1;
}
app-navigation>.options {
	/*margin: 0 1rem 1rem;*/
	padding: 0 1rem 1rem;
	flex-basis: 10rem;
	justify-content: flex-end;
}
app-navigation .btn {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	padding: .75rem 1.5rem;
	/*text-transform: uppercase;*/
	letter-spacing: 1px;
}
app-navigation .btn.active {
	pointer-events: none;
	background: rgb(var(--c-text), .2);
}
app-navigation .btn:disabled {
	opacity: 1;
}
app-navigation .btn:disabled>.name {
	color: rgb(var(--c-text), 1);
}
app-navigation .btn>.tki {
	flex-basis: 2rem;
	padding-right: .5rem;
}
app-navigation .btn>.name {
	flex: 1;
	text-align: start;
	font-size: .9rem;
}
app-navigation .btn>.badge {
	flex-basis: 1rem;
}

app-dashboard.compact>app-navigation>.shortcuts, app-dashboard.compact>app-navigation>.options {
	padding: .25rem;
	gap: .25rem;
}
app-dashboard.compact>app-navigation .btn {
	flex-direction: column;
	justify-content: center;
}
app-dashboard.compact>app-navigation .btn>.tki {
	flex: unset;
	padding: .5rem;
	font-size: 1.2rem;
}
app-dashboard.compact>app-navigation .btn>.name {
	flex: unset;
	text-align: center;
}
app-dashboard.compact>app-navigation .btn>.badge {
	position: absolute;
	top: 3px;
	right: 3px;
	line-height: .75rem;
	padding: .3rem .35rem .25rem;
}


app-dashboard.condensed>app-navigation>.shortcuts, app-dashboard.condensed>app-navigation>.options {
	padding: .1rem;
	gap: .1rem;
}
app-dashboard.condensed>app-navigation .btn {
	flex-direction: column;
	justify-content: center;
}
app-dashboard.condensed>app-navigation .btn>.tki {
	flex: unset;
	padding: .5rem;
	font-size: 1.2rem;
}
app-dashboard.condensed>app-navigation .btn>.name {
	display: none;
}
app-dashboard.condensed>app-navigation .btn>.badge {
	position: absolute;
	top: 2px;
	right: 2px;
	line-height: .75rem;
	padding: .2rem .2rem .2rem;
}

@media (max-width: 992px) {
	app-navigation {
		position: fixed;
		top: 0;
		left: 0;
		background: unset;
		width: 100vw;
		height: 100vh;
		z-index: 1000;
		pointer-events: none;
	}
	app-navigation>.shortcuts, app-navigation>.options {
		width: 15rem;
		background: rgb(var(--c-background));
		border-right: 1px solid rgb(var(--c-primary));
		transform: translateX(-15rem);
		pointer-events: auto;
	}

	app-navigation>.backdrop, app-navigation>.ghost {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: -1;
		inset: 0;
	}
	app-navigation>.ghost {
		left: 15rem;
		width: calc(100% - 15rem);
		z-index: 1;
	}
	app-navigation>.backdrop {
		opacity: 0;
		background: rgb(var(--c-background), .85);
		backdrop-filter: blur(4px);
	}


	app-navigation.open {
		left: 0;
	}
	app-navigation.open>.shortcuts, app-navigation.open>.options {
		transform: translateX(0);
	}
	app-navigation.open>.ghost {
		pointer-events: auto;
		cursor: unset;
	}
	app-navigation.open>.backdrop {
		opacity: 1;
	}
}

/************************ CONTENT ************************/

app-dashboard>app-content {
	position: relative;
	grid-area: content;
	align-items: center;
	overflow-x: hidden;
	overflow-y: auto;
}
app-dashboard>app-content.full {
	grid-area: 1 / 1 / 3 / 3;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
	overflow-y: auto;
}

/************************ SHORTCUTS ************************/
app-shortcuts {
	grid-area: footer;
	/*position: fixed;*/
	/*bottom: 0;*/
	/*left: 0;*/
	/*width: 100%;*/
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 100;
}
app-shortcuts.show>.shortcuts {
	transform: translateY(120%);
	opacity: 0;
}
app-shortcuts>.shortcuts {
	flex-basis: 5rem;
	position: relative;
	width: 100%;
	max-width: 40rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(var(--c-background), 1);
	border-width: 1px;
	border-style: solid;
	border-color: rgb(var(--c-primary), .1);
	border-radius: 2.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	z-index: 1;
}
app-shortcuts>.shortcuts>.btn {
	position: relative;
	flex-basis: 6rem;
	height: 100%;
	padding: .5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	color: rgb(var(--c-text), .75);
	background: rgb(var(--c-primary), 0);
	border-radius: 0;
	z-index: 1;
}
app-shortcuts>.shortcuts>.btn:hover {
	filter: unset;
	background: rgb(var(--c-primary), .25);
	/*transform: translateY(-3px) scale(1.1);*/
}
app-shortcuts>.shortcuts>.btn.active {
	/*border: 1px solid rgb(var(--c-primary));*/
	background: rgb(var(--c-primary), .1);
}
app-shortcuts>.shortcuts>.btn:disabled {
	opacity: 1;
}
app-shortcuts>.shortcuts>.btn:disabled>.title {
	color: rgb(var(--c-text), 1);
}
app-shortcuts>.shortcuts>.btn>.tki {
	font-size: 1.25rem;
	z-index: -1;
}
app-shortcuts>.shortcuts>.btn>.title {
	font-size: .7rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	z-index: -1;
}
app-shortcuts>.bar {
	display: flex;
	align-items: center;
	justify-content: center;
}
app-shortcuts>.bar>.btn {
	flex-basis: 5rem;
	width: 5rem;
	height: .5rem;
	bottom: -.5rem;
	padding: 0;
	background: rgb(var(--c-primary));
	z-index: 2;
}
app-shortcuts.mini>.shortcuts {
	flex-basis: 2.5rem;
	max-width: 30rem;
}
app-shortcuts.mini>.shortcuts>.btn {
	
}
app-shortcuts.mini>.shortcuts>.btn>.tki {
	font-size: 1rem;
}
app-shortcuts.mini>.shortcuts>.btn>.title {
	display: none;
}
@media (max-width: 992px) {
	app-shortcuts {
	}
	app-shortcuts.show>.shortcuts {
		/*transform: translateX(-120%);*/
	}
	app-shortcuts>.shortcuts {
		flex-basis: 4rem;
		border-radius: 0;
		padding: 0 .5rem;
	}
	app-shortcuts>.shortcuts>.btn {
		flex-basis: 5rem;
	}
	app-shortcuts>.shortcuts>.btn>.title {
		font-size: .5rem;
	}

	app-shortcuts>.bar {
		position: absolute;
		width: 100%;
		height: 4rem;
		justify-content: space-between;
	}

	app-shortcuts>.bar>.btn {
		flex-basis: .5rem;
		height: 100%;
	}

	app-shortcuts>.switch {
		position: absolute;
		left: 0;
		top: 0;
		width: .5rem;
		height: 100%;
	}
	app-shortcuts.mini>.bar {
		height: 2.5rem;
	}
	app-shortcuts.mini>.shortcuts {
		max-width: 100%;
		/*border: 0;*/
	}
}

/************************ MODULES ************************/
app-module {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

/************************ 404 ************************/
app-module#p404 {
	align-items: center;
	justify-content: center;
	padding: 5rem;
}
app-module#p404>.brand {
	margin: 1rem;
}
/************************ DASHBOARD ************************/
app-module#dashboard {
}

/************************ DASHBOARD ************************/
/*app-module#messages {
	display: grid;
	grid-template-columns: 15rem 1fr;
	grid-template-rows: 4rem 1fr 4rem;
	grid-template-areas:
		"profile header"
		"chats chat"
		"chats input";
	grid-gap: 0;
}
app-module#messages>.profile {
	grid-area: profile;
}
app-module#messages>.header {
	grid-area: header;
}
app-module#messages>.chats {
	grid-area: chats;
}
app-module#messages>.chat {
	grid-area: chat;
}




app-module#messages>.input {
	grid-area: input;
}
*/



/************************ SHORTCUT ************************/
app-shortcut>div[x-data="Modal"] {
}
app-shortcut>div[x-data="Modal"]>.btn {
	aspect-ratio: 1;
	border: unset;
	--fb-color: var(--c-text) !important;
}
app-shortcut>div[x-data="Modal"]>.btn>.badge {
	position: absolute;
	top: 0;
	right: 0;
	line-height: .75rem;
	padding: .3rem .35rem .25rem;
}
app-shortcut .list {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
app-shortcut .list::-webkit-scrollbar {
	width: .25rem;
}
app-shortcut .list>.item {
	display: grid;
	grid-template-columns: 3rem 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"avatar content";
	grid-gap: .5rem;
	width: calc(100% - .5rem);
	margin: 1rem .25rem;
	padding: 0;
}
app-shortcut .list>.item:hover {
	background: rgb(var(--c-primary), .25);
}
app-shortcut .list>.item>.avatar {
	grid-area: avatar;
	/*align-self: center;*/
	justify-self: center;
	width: 2.5rem;
	height: 2.5rem;
	/*margin: .25rem;*/
	border: 1px solid rgb(var(--c-primary), .25);
	border-radius: .5rem;
}
app-shortcut .list>.item>.content {
	grid-area: content;
	/*padding: .5rem;*/
	text-align: left;
}
app-shortcut .list>.item>.content>.sender {
	font-size: .75rem;
	opacity: .75;
	/*font-weight: 600;*/
}
app-shortcut .list>.item>.content>.title {
	font-size: .85rem;
	font-weight: 600;
}
app-shortcut .list>.item>.content>.preview {
	font-size: .75rem;
}
app-shortcut .list>.item>.content>.timestamp {
	font-size: .6rem;
	opacity: .75;
}
app-shortcut .empty {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
app-shortcut .goto {
	margin:.5rem;
}
@media (max-width: 768px) {
	app-shortcut {
		gap: .1rem;
		padding: .5rem;
	}
	app-shortcut>div[x-data="Modal"]>.btn {
		padding: .5rem .75rem;
	}
	app-shortcut>div[x-data="Modal"]>.btn>.badge {
		font-size: .65rem;
		padding: .2rem .3rem;
	}
}
/************************ SHORTCUT ************************/

app-shortcut#configuration .sidebar {
	display: flex;
	gap: .5rem;
	margin: 1rem;
}
app-shortcut#configuration .sidebar>.btn {
	border: 1px solid rgb(var(--c-primary));
	flex: 1 1 5rem;
	/*height: 5rem;*/
	padding: .5rem;
}
app-shortcut#configuration .sidebar>.btn>.title {
	text-transform: uppercase;
	font-size: .65rem;
}


app-shortcut#configuration .scheme {
	display: flex;
	gap: .5rem;
	margin: 1rem;
}
app-shortcut#configuration .scheme>.btn {
	border: 1px solid rgb(var(--c-primary));
	flex: 1 1 5rem;
}
app-shortcut#configuration .scheme>.btn>.title {
	text-transform: uppercase;
	font-size: .65rem;
}
app-shortcut#configuration .scheme_checkbox {
	position: relative;
	width: 100%;
	padding: .5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 768px) {
/*	app-navigation>.options>.scheme {
		width: 2rem;
		margin-right: 0.5rem;
	}
	app-navigation>.options>.scheme>label {
		--width-of-switch: 1.7em;
		--height-of-switch: 1.4em;
		--size-of-icon: 1em;
		--scheme-offset: .1em;
	}*/
}

.form-auth {
	width: 100%;
	max-width: 50rem;
	min-height: 30rem;
	max-height: 40rem;
	display: flex;
	gap: 2rem;
	border-radius: 2rem;
	box-shadow: 0 .25rem 2rem rgba(0, 0, 0, 0.33);
	border: 1px solid rgb(var(--c-background), .9);
	background: rgb(var(--c-background), 1);
	overflow: hidden;
	padding: 2rem;
}
.form-auth>* {
	flex: 1 0 calc(50% - 1rem);
}
.form-auth>.welcome {
	/*background: rgb(var(--c-text));*/
	/*border-radius: 1rem;*/
	padding: 1rem;
}
.form-auth>.form {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: .75rem;
	padding: 1rem 2rem;
}
.form-auth>.form>.title {
	font-size: 1.5rem;
	margin: 0;
	text-align: center;
}
.form-auth>.form>.description {
	margin: 0;
	text-align: center;
	line-height: 1.3;
}
.form-auth>.form>.formHtml {
	width: 100%;
}
.form-auth>.form>.links {
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: .5rem;
	width: 100%;
	padding: 1rem 0 0;
	text-align: center;
}
.form-auth>.form>.links>a {
	font-size: .9rem;
	opacity: .8;
}

.form-auth.signin {
	min-height: 30rem;
}
.form-auth.otp>.form {
	padding: 4rem;
}

@media (max-width: 992px) {
	.form-auth {
		/*flex-direction: column;*/
		margin: 1rem;
	}
	.form-auth>.welcome {
		/*display: none;*/
	}
	.form-auth>.form {
		padding: 0 2rem;
	}
}
@media (max-width: 576px) {
	.form-auth {
		flex-direction: column;
		margin: 1rem;
		gap: 1rem;
		max-width: 22rem;
		max-height: unset;
		border-radius: 1rem;
	}
	.form-auth>.welcome {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}
	.form-auth>.form {
		flex: 1;
		padding: 0;
	}
}.modal {
	border: 0;
	background: transparent;
	padding: 0;
	width: 80%;
	max-width: 30rem;
	color: rgb(var(--c-text));
	box-shadow: 0 .25rem .5rem rgba(var(--c-dark), 0.1);
	opacity: 0;
	outline: none;
	transform: translateY(-3rem) scale(0.75);
	transition: all 0.3s ease 0s;
}
.modal.show {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.modal::backdrop {
	background: rgb(var(--c-text), 0);
	transition: all 0.3s ease 0s;
	backdrop-filter: blur(4px);
}
.modal.show::backdrop {
	background: rgb(var(--c-background), .85);
}
.modal.show::focus-visible {
	border: 0;
}
/* Modal styles usando dialog */
.modal-dialog {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	/*max-width: 500px;*/
	border-color: rgb(var(--c-primary));
	border-radius: .5rem;
	border-style: solid;
	border-width: 1px;
	padding: .5rem;
	background: rgb(var(--c-background));
	margin: 0;
}

@media (max-width: 767px) {
	.modal-dialog {
		/*height: calc(100% - 6.5rem);*/
	}
}
.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	border-bottom: 1px solid rgb(var(--c-primary), .25);
}
.modal-header>.btn.close {
	background: rgb(var(--c-secondary));
	color: rgb(var(--c-text));
	padding: .5rem;
	width: 2rem;
	height: 2rem;
	line-height: 1;
}
.modal-header>.btn.close>.tki {
	vertical-align: unset;
}
.modal-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 500;
}
.modal-body {
	padding: 1rem;
	flex: 1;
	overflow-y: auto;
}
.modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 1rem;
	border-top: 1px solid rgb(var(--c-primary), .25);
}
/* Tamaños */
.modal.modal-sm {
	max-width: 20rem;
}
.modal.modal-lg {
	max-width: 800px;
}
.modal.modal-xl {
	max-width: 1140px;
}
.modal.modal-fullscreen {
	max-width: 100vw;
	max-height: 100vh;
	width: 100vw;
	height: 100vh;
	border-radius: 0;
}
.modal.offcanvas {
	position: fixed;
	top: 0;
	margin: 0;
	max-width: unset;
	border-width: 0;
	border-radius: 0;
	box-shadow: unset;
	transform: unset;
	z-index: 99999;
}
.modal.offcanvas>.modal-dialog {
	border-radius: 0;
}
.modal.offcanvas>.ghost {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	right: 0;
	background: rgb(var(--c-background), .85);
	backdrop-filter: blur(4px);
	z-index: -1;
}
.modal.offcanvas.oc-top {
	width: 100vw;
	height: 20rem;
	top: -20rem;
}
.modal.offcanvas.oc-top>.modal-dialog {
	border-width: 0 0 1px;
}
.modal.offcanvas.oc-right {
	width: 20rem;
	height: 100vh;
	left: unset;
	right: -20rem;
}
.modal.offcanvas.oc-right>.modal-dialog {
	border-width: 0 0 0 1px;
}
.modal.offcanvas.oc-bottom {
	width: 100vw;
	height: 20rem;
	top: unset;
	bottom: -20rem;
}
.modal.offcanvas.oc-bottom>.modal-dialog {
	border-width: 1px 0 0;
}
.modal.offcanvas.oc-left {
	width: 20rem;
	height: 100vh;
	left: -20rem;
}
.modal.offcanvas.oc-left>.modal-dialog {
	border-width: 0 1px 0 0;
}
.modal.offcanvas.oc-top.show {
	top: 0;
}
.modal.offcanvas.oc-right.show {
	right: 0;
}
.modal.offcanvas.oc-bottom.show {
	bottom: 0;
}
.modal.offcanvas.oc-left.show {
	left: 0;
}

.modal.offcanvas.oc-search {
	position: fixed;
	top: -20rem;
	left: calc(50% - 12rem);
	width: 24rem;
	height: unset;
	margin: 2rem 0 0 0;
}
.modal.offcanvas.oc-search>.modal-dialog {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	padding: .5rem 1rem;
	border-radius: 1rem;
}
.modal.offcanvas.oc-search>.modal-dialog>.tki {
	color: rgb(var(--c-primary));
	font-size: 1.6rem;
}
.modal.offcanvas.oc-search>.modal-dialog>input {
	font-size: 1.4rem;
	background: transparent;
	border: transparent;
	color: rgb(var(--c-primary));
	caret-color: rgb(var(--c-primary));
}
.modal.offcanvas.oc-search>.modal-dialog>input::placeholder {
	color: rgb(var(--c-text), .5);
	opacity: 1;
}
.modal.offcanvas.oc-search>.modal-dialog>input:focus {
	border-color: unset;
	box-shadow: unset;
}
.modal.offcanvas.oc-search.show {
	top: 0;
}

@media (max-width: 767px) {
	.modal.offcanvas.oc-search {
		width: 22rem;
		left: calc(50% - 11rem);
	}
}/************************ PAGE PROGRESS ************************/
.page-progress {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgb(var(--c-background));
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgb(var(--c-light));
	z-index: 99999;
}
.page-progress>.progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	background-color: rgb(var(--c-light));
	width: 0%;
	z-index: 9999;
	transition: width 0.2s ease;
}
/************************ DIALOG MODAL ************************/
div[x-data="Modal"] {
	position: relative;
	display: inline-block;
}



.switch-scheme {
	position: relative;
	display: block;
	/*--width-of-switch: 2.5rem;
	--height-of-switch: 1.5rem;
	--size-of-icon: 1.2rem;
	--scheme-offset: 0.25rem;*/
	width: var(--width-of-switch, 2.5rem);
	height: var(--height-of-switch, 1.25rem);
	margin: 0 auto;
}

.switch-scheme.name {
	display: flex;
	justify-content: center;
	align-items: center;
	/*margin: unset;*/
	width: auto;
}

.switch-scheme>input {
	opacity: 0;
	width: 0;
	height: 0;
}
.switch-scheme>.graphic {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: var(--width-of-switch, 100%);
	height: var(--height-of-switch, 100%);
	background-color: #4DA6FF;
	border: 1px solid rgb(var(--c-light), .5);
	border-radius: 1.5rem;
}
.switch-scheme>.graphic:before {
	position: absolute;
	content: "";
	height: var(--size-of-icon, 1rem);
	width: var(--size-of-icon, 1rem);
	border-radius: 20px;
	left: var(--scheme-offset, 0.25rem);
	top: 50%;
	transform: translateY(-50%);
	background: linear-gradient(135deg, #fff, #ff8c00 70%);
	transition: .4s;
}
.switch-scheme>.title {
	display: none;
	cursor: pointer;
	padding: 0 0 0 .5rem;
	/*text-transform: uppercase;*/
	font-size: .75rem;
	flex: 0 0 7rem;
	align-self: center;
}
.switch-scheme>input:checked+.graphic {
	background-color: #303136;
}
.switch-scheme>input:checked+.graphic:before {
	left: calc(100% - (var(--size-of-icon, 1.2rem) + var(--scheme-offset, 0.25rem)));
	background: #303136;
	box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}
.switch-scheme.name>.graphic {
	position: relative;
	flex: 0 0 2.5rem;
}
.switch-scheme.name>.title {
	display: block;
}
.spinner {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	--c: var(--c-primary);
	border: .25rem solid rgba(var(--c));
	border-left-color: transparent;
	border-radius: 50%;
	animation: spinner 1s linear infinite;
}

@keyframes spinner {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}



.toast {
	--n-color: var(--c-background);
	color: rgb(var(--c-text));
	background: rgb(var(--c-background));
	border-radius: .5rem;
	box-shadow: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, .5);
	padding: .5rem;
	margin: .5rem;
	overflow: hidden;
	min-width: 18rem;
	height: 0;
	opacity: 0;
	display: flex;
	gap: .5rem;
	flex-direction: column;
}
.toast.danger {
	--n-color: var(--c-danger);
}
.toast.warning {
	--n-color: var(--c-warning);
}
.toast.success {
	--n-color: var(--c-success);
}
.toast.info {
	--n-color: var(--c-info);
}
.toast.show {
	height: auto;
	opacity: 1;
}
.toast.animated {
	-webkit-animation-duration: .25s;
	animation-duration: .25s;
}
.toast>.toast-header {
	flex: 0 0 2.5rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: 0 .5rem;
	background: rgb(var(--n-color));
	border-radius: .5rem;
}
.toast>.toast-header>.icon {
	flex: 0 0 2rem;
	font-size: 1.25rem;
	line-height: 0;
}
.toast>.toast-header>.title {
	flex: 1;
}
.toast>.toast-header>.close {
	flex: 0 1 2rem;
	padding: .5rem;
}
.toast>.toast-body {
	padding: .5rem;
}

app-component.toasts {
	position: fixed;
	top: 0;
	right: 0;
	padding: 0;
	z-index: 1050;
}
@media (max-width: 768px) {
	app-component.toasts {
		width: 100%;
		padding: .5rem;
		text-align: center;
	}
	app-component.toasts .toast {
		--bs-toast-max-width: 100%;
		margin: .5rem 0;
		/*		width: 100%;*/
	}
}/*********************** MAZZ MODULE ***********************/
app-explorer {
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 5rem;
	grid-template-rows: 5rem 1fr 3rem;
	grid-template-areas:
		"header header"
		"body tools"
		"footer footer";
	overflow: hidden;
	z-index: 1;
}

@media (max-width: 992px) {
	app-explorer {
		grid-template-rows: 4rem 1fr 3rem;
	}
}
@media (max-width: 768px) {
	app-explorer {
		grid-template-columns: 1fr 3rem;
	}
}

/************************ LOADER ************************/
exp-loader {
	grid-area: 1 / 1 / 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(var(--c-background), 1);
	z-index: 100;
}
exp-loader.finish {
	opacity: 0;
	pointer-events: none;
}
/************************ HEADER ************************/
exp-header {
	grid-area: header;
	display: grid;
	grid-template-columns: 20rem 1fr; 
	grid-template-rows: 5rem;
	background: rgb(var(--c-text), .05);
}
exp-header>.headline {
	padding: 1rem;
}
exp-header>.headline>.name {
	color: rgb(var(--c-primary));
}
exp-header>.headline>.description {
	font-size: .65rem;
}

exp-header>.cards {
}
@media (max-width: 768px) {
	exp-header {
		grid-template-columns: 1fr 1fr; 
		grid-template-rows: unset;
	}
	exp-header>.headline {
		padding: .5rem;
	}
}


/************************ TOOLS ************************/

exp-tools {
	grid-area: tools;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	gap: .5rem;
	padding: .25rem;
}
exp-tools>.btn {
	flex: 0 0 4rem;
	width: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: .5rem;
	padding: .25rem;
	/*border: 1px solid red;*/
}
exp-tools>.btn:hover {
	background: rgb(var(--c-text), .25);
}
exp-tools>.btn>.name {
	text-transform: uppercase;
	font-size: .55rem;
	letter-spacing: 1px;
}
exp-tools>.btn>.tki {

}

@media (max-width: 768px) {
	exp-tools {
	}
	exp-tools>.btn {
		flex: 0 0 3rem;
		width: 100%;
	}
	exp-tools>.btn>.name {
		display: none;
	}
}
/************************ BODY ************************/
exp-body {
	grid-area: body;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 1;
}

exp-body>.items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1rem;
	padding: 1rem;
	counter-reset: n;
}

exp-body>.items>.item {
	position: relative;
	display: flex;
	flex-direction: column;
	font-size: 1rem;
	margin: 0.25rem 0;
	padding: 0.25rem 0.5rem 0.25rem 5rem;
	min-height: 5rem;
	background: rgba(var(--c-background), .25);
	color: rgb(var(--c-text));
	border: 1px solid rgb(var(--c-text), .1);
	border-radius: .5rem;
	transition: all 0.3s ease 0s;
	/* animacion de ingreso */
	counter-increment: n;
	--n: calc(counter(n) * 0.2s); /* aquí ya lo haces tiempo */
	animation: item-enter .5s ease-out var(--n) normal both;
}
@keyframes item-enter {
	from {
		transform: scale(.9);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
exp-body>.items>.item::after {
	content: var(--n);            /* ejemplo: mostrar el número */
}
exp-body>.items>.item>.i {
	position: absolute;
	top: 0;
	left: 0;
	width: 4rem;
	height: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(var(--c-background));
	margin: -.5rem .25rem .25rem .25rem;
	border: 1px solid rgb(var(--c-text), .25);
	border-radius: 1rem;
	font-size: 2rem;
	font-weight: 500;
	z-index: 0;
	overflow: hidden;
}
exp-body>.items>.item>.i>img {
	width: 100%;
}
exp-body>.items>.item>.i>p {
	margin: 0;
}
exp-body>.items>.item>.a, exp-body>.items>.item>.b, exp-body>.items>.item>.c {
	font-size: .8rem;
	font-weight: 600;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
exp-body>.items>.item>.a {
	font-size: 1rem;
}
exp-body>.items>.item>.b {
	font-weight: 400;
	opacity: .75;
}
exp-body>.items>.item>.c {
	font-size: .7rem;
	font-weight: 400;
	opacity: .5;
}
exp-body>.items>.item>.d {
	font-size: .7rem;
	font-weight: 400;
	opacity: .5;
}
exp-body>.items>.item>.ss {
	position: absolute;
	top: -0.75rem;
	left: 0;
	width: .7rem;
	height: .7rem;
	padding: 0.15rem;
	z-index: 10;
}
exp-body>.items>.item>.ss.a {
	--c: green;
}
exp-body>.items>.item>.ss.d {
	--c: red;
}
exp-body>.items>.item>.ss.r {
	--c: yellow;
}
exp-body>.items>.item>.ss.s {
	--c: orange;
}
exp-body>.items>.item>.ss:after {
	content: '';
	position: absolute;
	width: .7rem;
	height: .7rem;
	border-radius: 0.5rem;
	top: 0;
	left: 0;
	background: var(--c);
}

exp-body>.items>.item.header {
	display: none;
}
exp-body>.items>.item.select {
	box-shadow: 1rem 0 1rem 0 rgb(var(--c-primary), 1);
	box-shadow: 0 .25rem .5rem 0 rgb(var(--c-primary), .75);
}
exp-body>.items>.item.selected {
	background: rgba(var(--c-text), .1);
	border: 1px dashed rgba(var(--c-primary), 1);
}
exp-body>.items>.item.dashboard {
	padding: 0.25rem 1rem 0.25rem 5rem;
}
exp-body>.items>.item>a:link {
	color: rgb(var(--c-primary));
}
exp-body>.items>.item>a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

exp-body>.items>.item.hover>.icon {
	background: rgba(var(--c-secondary), 1);
}

exp-body.list-view {
	overflow-x: auto;
	overflow-y: scroll;
}
exp-body.list-view>.items {
	grid-template-columns: 1fr !important;
}
exp-body.list-view>.items>.item {
	flex-direction: row;
	min-height: 2rem;
	margin: 0;
	padding: .25rem;
	align-items: center;
	gap: 1rem;
	justify-content: space-between
}
exp-body.list-view>.items>.item>* {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 5rem;
	font-size: .8rem;
}
exp-body.list-view>.items>.item>.i {
	flex-basis: 3rem;
	flex-grow: 0;
	position: relative;
	top: unset;
	left: unset;
	margin: 0;
	width: unset;
	height: 3rem;
}
exp-body.list-view>.items>.item>.ss {
	position: inherit;
	top: inherit;
	flex: 0 0 2rem;
}
exp-body.list-view>.items>.item>.ss:after {
	left: calc(50% - .35rem);
}
exp-body.list-view>.items>.item>a {
	font-size: .8rem;
}

exp-body.list-view>.items>.item.header {
	display: flex;
	position: sticky;
	top: 0;
	width: calc(100% + 1rem);
	padding: 0 1rem;
	margin: -0.5rem -0.5rem 0;
	border-radius: 0;
	text-transform: uppercase;
	background: rgb(var(--c-background));
	z-index: 50;
}
exp-body.list-view>.items>.item.header:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgb(var(--c-primary), .15);
	z-index: -100;
}
exp-body.list-view>.items>.item.header>* {
	font-size: .6rem !important;
	font-weight: unset !important;
	height: unset;
	background: unset;
	border: unset;
}

exp-body>.items>.item:not(.header):not(.selected):not(.highlighted):hover {
	background: rgba(var(--c-dark), .05);
	border: 1px solid rgba(var(--c-primary), .5);
}
exp-body>.items>.item:not(.header):not(.selected):not(.highlighted):hover>.i {
	border: 1px solid rgba(var(--c-primary), .5);
}

exp-body>.items>.item.selected {
	background: rgba(var(--c-text), .1);
	border: 1px dashed rgba(var(--c-primary), 1);
}
exp-body>.items>.item.selected>.icon {
	border: 1px solid rgba(var(--c-primary), .5);
}
exp-body>.items>.item.highlighted {
	background: rgba(var(--c-primary), .2);
}

@media (max-width: 768px) {
	exp-body::-webkit-scrollbar {
		width: .2rem;
		height: .2rem;
	}
	exp-body.list-view>.items {
		width: 250%;
	}
	exp-body>.items {
		grid-template-columns: 1fr;
		width: 100%;
		padding: .75rem .5rem .5rem;
	}
}

/************************ TOOLBARS ************************/
exp-toolbars {
	position: absolute;
	right: 6rem;
	bottom: 4rem;
	width: fit-content;
	height: 3rem;
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	transition: all 0.3s ease 0s;
	z-index: 100;
}

exp-toolbars>.bar {
	display: flex;
	gap: 0.25rem;
}
exp-toolbars>.edition>.btn>.title {
	display: none;
}
exp-toolbars>.bar.active {
	display: flex;
}
exp-toolbars .bar>.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgb(var(--c-light), .5);
	width: 3rem;
	height: 3rem;
}
exp-toolbars .bar>.btn>.tki {
	color: white;
}
exp-toolbars .bar>.btn:after {
	content: '';
	position: absolute;
	width: 3rem;
	height: 3rem;
	background: rgb(var(--c-primary), 1);
	border-radius: 0.375rem;
	z-index: -1;
}
exp-toolbars.disabled {
	display: none;
}
exp-toolbars>.bar>.btn.create {
	width: 4rem;
	height: 4rem;
}

@media (max-width: 768px) {
	exp-toolbars {
		right: 4rem;
		bottom: 4rem;
	}
}
/************************ MAIN ************************/
exp-main {
	grid-area: 2 / 1 / 4 / 3;
	padding: 1rem;
	/*background: rgb(0, 125, 255, .1);*/
	overflow-x: hidden;
	overflow-y: auto;
}
/************************ FOOTER ************************/
exp-footer {
	grid-area: footer;
	background: rgb(0, 125, 255, .1);
}

exp-footer>.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
}

/************************ HEADER MODULE ************************/


.tags>.all {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	overflow-x: hidden;
	overflow-y: auto;
}
.tags>.all>.group {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.tags>.all>.group>.btn.edit {
	width: 2rem;
	padding: .35rem;
}
.tags>.all>.group>.btn.tag {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	padding: .35rem 1rem;
	background-image: linear-gradient(135deg, rgb(var(--cb), .25), rgb(var(--cb), .5));
	font-size: .9rem;
	text-shadow: 0 1px 2px black;
	opacity: .5;
	--bs-btn-active-bg: transparent !important;
}
.tags>.all>.group>.btn.tag.active {
	background-image: linear-gradient(135deg, rgb(var(--cb), 1), rgb(var(--cb), .75));
	opacity: 1;
}




/************************ HEADER MODULE ************************/
#offFilter {
	--bs-offcanvas-height: 12rem;
}
/*	--bs-offcanvas-bg: red;*/
/************************ HEADER MODULE ************************/
#offTags {
	--bs-offcanvas-height: 12rem;
/*	--bs-offcanvas-bg: red;*/
}
/************************ HEADER MODULE ************************/
#offDetails {
	--bs-offcanvas-height: 12rem;
/*	--bs-offcanvas-bg: red;*/
}

/************************ HEADER MODULE ************************/

@media (max-width: 124px) {

}
@media (max-width: 768px) {
	#offFilter {
		--bs-offcanvas-height: 20rem;
	}
}


/*********************** MAZZ FORM ***********************/
app-e-form {
	position: relative;
	width: 100%;
	height: calc(100% - 12rem);
	max-width: 1280px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 5rem 1fr;
	margin: 9rem auto 3rem;
	transition: all 0.3s;
	overflow: hidden;
	z-index: 1;
}
app-e-form>app-e-body, app-e-form>app-e-footer, {
	position: relative;
	display: flex;
	border-radius: .5rem;
}

@media (max-width: 1240px) {
	app-e-form {
		grid-template-rows: 4rem 1fr;
		height: calc(100% - 13rem);
		margin: 7rem auto 6rem;
	}
}
@media (max-width: 768px) {
	app-e-form {
		grid-template-rows: 5rem 10rem 1fr;
		height: 100%;
		width: 100vw;
		margin: 0;
	}
}

/************************ MAZZ FORM ************************/