@charset "UTF-8";

/**
 * base.css
 *
 * Definiciones generales que afectan a todo el sistema. Reglas generales, amplias y 
 * definición de variables. Paleta de colores e iconos generales. Debe cargarse primero, 
 * antes de layout y demás hojas de estilo.
 */

 @font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fx/assets/fonts/inter-latin-opsz-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fx/assets/fonts/inter-latin-opsz-italic.woff2') format('woff2');
}

:root {
	/* ============ Capa 1: PALETA ============ */

	/* --- Paleta: colores básicos --- */
	--fx-white: 		 #ffffff;
	--fx-black: 		 #000000;
	--fx-gris-claro-1:   #f2f2f2;
	--fx-gris-claro-2:   #e6e6e6;
	--fx-gris-medio: 	 #999999;
	--fx-gris-oscuro-1:  #555555;
	--fx-gris-oscuro-2:  #333333;
	--fx-azulado-claro:  #cbd4e0;
	--fx-azulado-medio:  #89abce;
	--fx-azulado-oscuro: #0d3d56;

	/* --- Paleta: acentos / estado --- */
	--fx-primary: 	#2299ff;
	--fx-danger: 	#ff0000;
	--fx-return: 	#339933;
	--fx-warning: 	#ff944d;
	--fx-link: 		#365899;
	--fx-custom:    #ecd473;

	/* --- Paleta: categóricas (celdas sin connotación buena/mala) --- */
	--fx-cat-1-fondo: #0375b4;
	--fx-cat-1-texto: var(--fx-white);

	--fx-cat-2-fondo: #dcd0d0;
	--fx-cat-2-texto: var(--fx-texto);

	--fx-cat-3-fondo: #373737;
	--fx-cat-3-texto: var(--fx-white);

	--fx-cat-4-fondo: #eeaa7b;
	--fx-cat-4-texto: var(--fx-white);

	--fx-cat-5-fondo: #66b9bf;
	--fx-cat-5-texto: var(--fx-white);

	/* ============ Capa 2: ROLES ============ */

	--fx-texto: 			var(--fx-gris-oscuro-2); /* texto normal: datos, leyendas, etc. */
	--fx-texto-action: 		var(--fx-gris-oscuro-1); /* texto de acción (botones) */
	--fx-texto-disabled: 	var(--fx-gris-medio); /* texto de menor relevancia: datos inactivos, botones deshabilitados, etc. */
	--fx-texto-input: 		var(--fx-azulado-oscuro); /* texto de inputs, comboboxes, etc. */
	--fx-texto-menu: 		var(--fx-gris-oscuro-2); /* texto del menú principal (y submenúes desplegables) */

		/* La barra superior contiene el nombre del sistema, datos del usuario y opciones generales */
	--fx-headbar-texto: 	#808080;
	--fx-headbar-fondo: 	var(--fx-gris-claro-2); /* headbar / whoami */
	--fx-headbar-borde: 	var(--fx-gris-medio);

	--fx-border: 			var(--fx-gris-claro-2);
	--fx-border-strong: 	var(--fx-gris-medio);
	--fx-border-cell: 		var(--fx-azulado-claro);
	--fx-border-input: 		var(--fx-azulado-claro);
	--fx-border-radius:     3px;

		/* la navegación de tabs en la pantalla SDetail */
	--fx-tab-borde: 		 var(--fx-azulado-medio);
	--fx-tab-fondo: 		 var(--fx-white); 			
	--fx-tab-selected-texto: var(--fx-texto);
	--fx-tab-selected-fondo: var(--fx-azulado-claro); 	

		/* totales en las grillas debajo de cada columna */
	--fx-grid-total-fondo: 	var(--fx-gris-claro-2); 
	--fx-grid-total-texto: 	var(--fx-texto); 		

	--fx-fondo: 			var(--fx-white);
	--fx-fondo-header: 		var(--fx-gris-claro-1); /* header de panel */
	--fx-fondo-menu: 		var(--fx-gris-claro-1); /* menú principal */
	--fx-fondo-zebra: 		var(--fx-gris-claro-1); /* fila par de grilla */
	--fx-fondo-th: 			var(--fx-gris-claro-2);
	--fx-fondo-tint: 		var(--fx-gris-claro-2); /* fondo de filtros, code, etc. */
	--fx-highlight: 		var(--fx-azulado-claro); /* tab activo / btn hover */
	--fx-title: 			var(--fx-azulado-medio);
	--fx-shadow: 			var(--fx-gris-claro-2);


	--fx-bg:        #f5f9fc;
	--fx-card-bg:   #ffffff;
	--fx-border:    #e2e8f0;
	--fx-title:     #0f172a;
	--fx-text:      #64748b;
	--fx-panel-bg:  #ffffff;
	--fx-anchor:    #3b82f6;
	--fx-radius:    16px;
	--fx-container: 1160px;
	--fx-header-h:  64px;
	--fx-sidebar-w: 264px;

		/* Grilla */
	--fx-grid-bar-icon-color: var(--fx-texto);
	--fx-grid-bar-icon-hover-color: var(--fx-highlight);

	/* ============ Tamaño de texto ============ */

	--fx-fs-xs: 0.75rem; 	/* 12 px */
	--fx-fs-s: 0.875rem; 	/* 14 px */
	--fx-fs-base:  1rem; 	/* 16 px */
	--fx-fs-l: 1.125rem; 	/* 18 px */
	--fx-fs-xl: 1.25rem; 	/* 20 px */
	--fx-fs-xxl: 1.5rem; 	/* 24 px */

	/* ============ Assets (íconos) ============ */

	--icons16: url("../images/icons16.png");
	--icons32: url("../images/icons32.png");

   --fx-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='1.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3Cline x1='1.5' y1='5.5' x2='14.5' y2='5.5' stroke='black' stroke-width='1.2'/%3E%3Cline x1='4.5' y1='1' x2='4.5' y2='3.5' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='11.5' y1='1' x2='11.5' y2='3.5' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");	
   --fx-icon-search:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cline x1='10.5' y1='10.5' x2='14' y2='14' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
   --fx-icon-plus:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='8' y1='3' x2='8' y2='13' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='3' y1='8' x2='13' y2='8' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");   
   --fx-icon-warning:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.7 15 14.3 1 14.3 Z' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cline x1='8' y1='6.2' x2='8' y2='10' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12' r='0.7' fill='black'/%3E%3C/svg%3E");   
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fx-bg);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--fx-fs-s);
  color: var(--fx-title);
  -webkit-font-smoothing: antialiased;
}

input, select, textarea, button {
    font-size: inherit;   /* toman tamaño de su contexto en vez del default del navegador */
	margin: 0; 
	padding: 0;
}

a {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
	color: inherit; 
}

a:visited {
	color: inherit; 
}


.fx-hidden 	{ display: none;			}
.italic 	{ font-style: italic;		}
.bold 		{ font-weight: bold;		}
.pre 		{ white-space: pre;			}
.monospace 	{ font-family: monospace;	}