/* ===========================================================================
   TEMA CLARO
   No es el tema oscuro con los colores invertidos: la profundidad se consigue
   con sombras suaves y tintadas en lugar de con superficies translúcidas.
   El atributo data-tema lo fija un script en el <head>, que resuelve antes de
   pintar la opción Sistema. Sin JavaScript el panel se queda en oscuro.
   =========================================================================== */

html[data-tema="claro"]{
	--fondo:   #eaeef6;
	--fondo-2: #f2f5fa;
	--fondo-3: #ffffff;
	--fondo-4: #ffffff;

	--superficie:   rgba(255,255,255,.78);
	--superficie-2: rgba(255,255,255,.92);
	--superficie-3: #ffffff;
	--superficie-honda: rgba(17,26,48,.035);

	--linea:        rgba(17,26,48,.10);
	--linea-fuerte: rgba(17,26,48,.18);
	--luz-superior: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.3) 48%, transparent);

	--texto:       #0e1526;
	--texto-suave: rgba(14,21,38,.68);
	--texto-tenue: rgba(14,21,38,.46);

	--tono-neutro: rgba(14,21,38,.38);
	--tono-baja:   rgba(14,21,38,.22);

	/* Sombras tintadas de azul: sobre blanco, el gris puro se ve sucio. */
	--sombra-1: 0 1px 2px rgba(17,26,48,.05), 0 6px 16px rgba(17,26,48,.07);
	--sombra-2: 0 2px 6px rgba(17,26,48,.06), 0 14px 34px rgba(17,26,48,.10);
	--sombra-3: 0 6px 14px rgba(17,26,48,.08), 0 28px 64px rgba(17,26,48,.14);
	--sombra-marca: 0 8px 24px rgba(var(--marca-1-rgb), .30);
	--sombra-interior: inset 0 1px 0 rgba(255,255,255,.9);

	--halo-lienzo:
		radial-gradient(1100px 580px at 8% -8%,  rgba(var(--marca-1-rgb), .13), transparent 58%),
		radial-gradient(900px 540px at 92% 2%,   rgba(var(--marca-2-rgb), .11), transparent 54%),
		radial-gradient(820px 520px at 62% 104%, rgba(var(--marca-3-rgb), .09), transparent 56%);
}

html[data-tema="claro"] body::before{
	background:
		var(--halo-lienzo),
		linear-gradient(170deg, var(--fondo), var(--fondo-2) 52%, #ffffff);
}
html[data-tema="claro"] body::after{ opacity: .018; }

html[data-tema="claro"] .lateral{
	background:
		linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.80));
	box-shadow: 1px 0 0 rgba(17,26,48,.05), 18px 0 46px rgba(17,26,48,.07);
}

html[data-tema="claro"] .superior{
	background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
	box-shadow: 0 1px 0 rgba(17,26,48,.05), 0 10px 28px rgba(17,26,48,.055);
}

html[data-tema="claro"] input,
html[data-tema="claro"] select,
html[data-tema="claro"] textarea{
	background: #ffffff;
	box-shadow: inset 0 1px 2px rgba(17,26,48,.06);
}
html[data-tema="claro"] input:focus,
html[data-tema="claro"] select:focus,
html[data-tema="claro"] textarea:focus{
	background: #ffffff;
	box-shadow: inset 0 1px 2px rgba(17,26,48,.04), 0 0 0 4px rgba(var(--marca-1-rgb), .14);
}
html[data-tema="claro"] select{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230e1526' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
}

html[data-tema="claro"] .segmentos,
html[data-tema="claro"] .tema-interruptor{
	background: rgba(17,26,48,.045);
	box-shadow: inset 0 1px 3px rgba(17,26,48,.07);
}
html[data-tema="claro"] .segmentos button[aria-pressed="true"],
html[data-tema="claro"] .segmentos a[aria-pressed="true"],
html[data-tema="claro"] .tema-interruptor button[aria-pressed="true"]{
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(17,26,48,.08), 0 3px 10px rgba(17,26,48,.10);
}

html[data-tema="claro"] table.tabla thead th{
	background: rgba(246,248,252,.94);
	color: var(--texto-tenue);
}
html[data-tema="claro"] table.tabla tbody td{ border-bottom-color: rgba(17,26,48,.065); }
html[data-tema="claro"] table.tabla tbody tr:hover{ background: rgba(var(--marca-1-rgb), .035); }
html[data-tema="claro"] .filtros,
html[data-tema="claro"] .panel-pie{ background: rgba(17,26,48,.022); }

html[data-tema="claro"] .nav-enlace.esta-activo{
	background:
		linear-gradient(100deg, rgba(var(--marca-1-rgb), .13), rgba(var(--marca-2-rgb), .07));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 10px rgba(17,26,48,.07);
}

html[data-tema="claro"] .persona-avatar,
html[data-tema="claro"] .usuario-avatar{ color: #fff; }

html[data-tema="claro"] .acceso-tarjeta{
	background: linear-gradient(180deg, #ffffff, rgba(255,255,255,.94));
}
html[data-tema="claro"] .acceso-separa span{ background: #ffffff; }
html[data-tema="claro"] .acceso-presenta::after{
	background-image:
		linear-gradient(rgba(17,26,48,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(17,26,48,.045) 1px, transparent 1px);
}

html[data-tema="claro"] ::-webkit-scrollbar-thumb{ background: rgba(17,26,48,.18); background-clip: content-box; }
html[data-tema="claro"] ::-webkit-scrollbar-thumb:hover{ background: rgba(17,26,48,.3); background-clip: content-box; }