/*
 * Tema corporativo Synersight (mismos tokens y componentes que la intranet).
 * Se carga DESPUES de main.css (plantilla "Dimension" de HTML5 UP) y la sobrescribe
 * por cascada, sin tocar sus ~1900 lineas.
 *
 * Gotchas de especificidad (ver TEMA.md de la intranet):
 *  - main.css estiliza input[type=submit|button] (elemento+atributo, 0-1-1), que gana a
 *    una clase sola: por eso .btn-accion va DOBLADA (.btn-accion.btn-accion, 0-2-0).
 *  - Las tarjetas de maquina viven bajo "section section div" de main.css (0-0-3):
 *    cualquier clase propia (0-1-0) ya le gana.
 *  - No escribir el cierre de comentario dentro de un comentario (se come la regla siguiente).
 */

:root {
	--c-primary: #002664;
	--c-primary-700: #013a99;
	--c-accent: #f6b600;
	--c-ink: #1b2238;
	--c-muted: #69718a;
	--c-line: #e3e6ee;
	--c-ok: #2e7d32;
	--c-danger: #b3261e;
	--c-fondo-suave: #f5f7fb;
}

/* Tipografia corporativa auto-alojada (un unico .woff2 variable, pesos 100-900). */
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat/montserrat-latin-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
body, input, textarea, select, button {
	font-family: 'Montserrat', sans-serif;
}
body {
	font-size: 15px;
}

/* ---------- Fondo: foto con velo azul corporativo ---------- */
#bg:before {
	background-image: linear-gradient(160deg, rgba(0, 38, 100, .80) 0%, rgba(0, 20, 55, .62) 100%);
}

/* ---------- Portada (cabecera de Dimension) ---------- */
#header > *:before {
	background: rgba(255, 255, 255, .85);
	width: 2px;
	left: calc(50% - 1px);
}
#header .logo {
	border: 2px solid #fff;
	background: rgba(0, 38, 100, .35);
	overflow: hidden;
}
#header .logo-img {
	width: 60%;
	height: 70%;
	margin-top: 18%;
	margin-left: 10%;
}
#header .content {
	border-color: rgba(255, 255, 255, .85);
	border-top-width: 2px;
	border-bottom-width: 2px;
}
#header .content h1 {
	color: #fff;
	letter-spacing: .35rem;
}
#header .content p {
	color: rgba(255, 255, 255, .9);
	font-weight: 600;
}
/* El menu aparece con un fundido desde configurador.js ($("nav").fadeIn). */
#header nav {
	display: none;
}
#header nav ul {
	border: 2px solid #fff;
	overflow: hidden;
}
#header nav ul li a {
	background: var(--c-primary);
	color: #fff;
	font-weight: 700;
	letter-spacing: .15rem;
}
#header nav ul li a:hover {
	background: var(--c-accent);
	color: var(--c-primary);
}
#footer .copyright,
#footer .copyright a {
	color: rgba(255, 255, 255, .8);
	letter-spacing: .1rem;
}

/* ---------- Paneles (login y configurador) como tarjeta clara ---------- */
#main article {
	background: #fff;
	color: var(--c-ink);
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(0, 10, 35, .45);
}
#main article .close:before {
	/* La X de la plantilla es blanca: sobre fondo claro se pinta en azul corporativo. */
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 20 20'%3E%3Cstyle%3Eline %7B stroke: %23002664%3B stroke-width: 1.6%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
}
#main article .close:hover:before {
	background-color: var(--c-fondo-suave);
}
#main h1, #main h2, #main h3, #main h4,
#main strong, #main b {
	color: var(--c-primary);
}
.titulo-panel {
	margin: 0;
	font-size: 1.35rem;
	letter-spacing: .12rem;
}

/* Etiquetas de formulario: en main.css son blancas (fondo oscuro) salvo en #tab2/#tab3. */
#main label,
#main form label,
#inicio label,
#tab2 label,
#tab3 label {
	color: var(--c-primary);
	font-size: .72rem;
	letter-spacing: .12rem;
}

/* Campos: estilo claro de la intranet en lugar del azul oscuro de main.css. */
#main input[type="text"],
#main input[type="password"],
#main input[type="email"],
#main input[type="number"],
#main select {
	background-color: var(--c-fondo-suave);
	color: var(--c-ink);
	border: 1px solid var(--c-line);
	border-radius: 6px;
	margin-top: .5rem;
	height: 2.75rem;
	font-size: .95rem;
	letter-spacing: normal;
	text-transform: none;
	font-weight: 500;
}
#main input[type="text"]:focus,
#main input[type="password"]:focus,
#main input[type="email"]:focus,
#main input[type="number"]:focus,
#main select:focus {
	background-color: #fff;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(0, 38, 100, .15);
}
#main select {
	/* Flecha del desplegable en azul (la de la plantilla es blanca). */
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23002664' /%3E%3C/svg%3E");
	background-size: 1rem;
	/* "select:focus { background: ... }" de main.css es un shorthand que resetea la
	   repeticion a "repeat" al abrir el desplegable (flecha en mosaico): se fija aqui. */
	background-repeat: no-repeat;
	background-position: calc(100% - 1rem) center;
}
/* Deshabilitado = opcion fija para esa maquina. Se distingue sin depender del cursor:
   fondo mas oscuro, borde discontinuo, texto apagado y candado en lugar de la flecha. */
#main select:disabled {
	opacity: 1;
	cursor: not-allowed;
	background-color: #e6e9f0;
	border: 1px dashed #aab2c5;
	color: #5a6380;
	-webkit-text-fill-color: #5a6380;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2' fill='none' stroke='%2369718a' stroke-width='1.6'/%3E%3Crect x='3' y='7' width='10' height='7.5' rx='1.5' fill='%2369718a'/%3E%3C/svg%3E");
	background-size: 14px;
}
#main select option {
	color: var(--c-ink);
	background: #fff;
}

/* ---------- Botones (componente de la intranet) ---------- */
.btn-accion.btn-accion {
	display: inline-block; width: auto; min-width: 0; height: auto;
	padding: 12px 24px; border: 0; border-radius: 6px;
	background: var(--c-primary); color: #fff !important; text-decoration: none; cursor: pointer;
	font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: normal;
	text-transform: none; box-shadow: none; vertical-align: middle;
}
.btn-accion.btn-accion:hover { background: var(--c-primary-700); }
.btn-accion.btn-secundario {
	background: #fff;
	color: var(--c-primary) !important;
	box-shadow: inset 0 0 0 1px var(--c-primary);
	padding: 8px 16px;
	font-size: 13px;
}
.btn-accion.btn-secundario:hover {
	background: var(--c-accent);
	box-shadow: inset 0 0 0 1px var(--c-accent);
}

/* ---------- Login ---------- */
#main article#login {
	width: 30rem;
}
#login .titulo-panel {
	margin-bottom: 1.5rem;
}
.form-login label {
	margin-bottom: 1.25rem;
}
/* Boton de acceso a todo el ancho de la tarjeta y mas alto que el .btn-accion normal.
   Tres clases (0-3-0) para ganar a ".btn-accion.btn-accion" (0-2-0). */
.form-login .btn-accion.btn-accion {
	display: block;
	width: 100%;
	height: 48px;
	margin-top: .5rem;
	font-size: 16px;
}

/* ---------- Cabecera del configurador ---------- */
.barra-usuario {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	margin-bottom: 1.5rem;
}
.barra-usuario .usuario {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	color: var(--c-muted);
	font-size: .9rem;
}

/* ---------- Pestañas ---------- */
ul.tabs,
ul.tabs li {
	border: 0;
	height: auto;
	line-height: 1;
}
ul.tabs {
	display: flex;
	gap: 4px;
	float: none;
	border-bottom: 3px solid var(--c-primary);
}
ul.tabs li {
	float: none;
	flex: 1 1 0;
	width: auto;
	margin: 0;
	background: var(--c-fondo-suave);
	border-radius: 8px 8px 0 0;
}
ul.tabs li a {
	display: block;
	padding: 1.1rem .5rem;
	color: var(--c-primary);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .05rem;
	border-bottom: 0;
}
ul.tabs li a:hover {
	background: #e8ecf5;
	border-radius: 8px 8px 0 0;
}
html ul.tabs li.active,
html ul.tabs li.active a:hover {
	background: var(--c-primary);
	border-bottom: 0;
}
ul.tabs li.active a {
	color: #fff;
	box-shadow: inset 0 -3px 0 var(--c-accent);
}
.tab_container {
	float: none;
	border: 1px solid var(--c-line);
	border-top: 0;
	border-radius: 0 0 10px 10px;
}
.tab_content {
	padding: 1.75rem;
	font-size: 1rem;
}

/* ---------- Pestaña 1: catalogo de maquinas ---------- */
.tab_content .maquinas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
	width: auto;
	height: auto;
	float: none;
	margin: 0;
	background: none;
}
.maquina-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: 14px 12px 10px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba(0, 38, 100, .06);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.maquina-card:hover {
	transform: translateY(-3px);
	border-color: var(--c-primary);
	box-shadow: 0 8px 22px rgba(0, 38, 100, .16);
}
.maquina-card img {
	width: 100%;
	max-width: 160px;
	height: 140px;
	object-fit: contain;
	background: none;
}
.maquina-card p {
	margin: 0;
	color: var(--c-primary);
	font-weight: 700;
	letter-spacing: .05rem;
	text-align: center;
}

/* ---------- Pestaña 2: formulario de configuracion ---------- */
#selectedAGV {
	text-align: center;
	margin-bottom: 1.5rem;
}
/* Dos columnas en escritorio. La clase gana a "section section div" de main.css. */
#tab2 .config-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.75rem;
	width: auto;
	height: auto;
	float: none;
	margin: 0 0 1.75rem;
	background: none;
}
#tab2 .config-grid > section {
	margin: 0;
}
#tab2 .config-grid label {
	margin: 0;
}
#tab2 img.imagen,
#tab2 img {
	max-width: 200px;
	max-height: 160px;
	width: auto;
	height: auto;
	margin: .75rem auto 0;
	background: none;
	border-radius: 6px;
}

/* ---------- Pestaña 3: resumen ---------- */
#cAGV {
	text-align: center;
	font-size: 1rem;
	letter-spacing: .05rem;
	margin-bottom: 1.25rem;
}
.tabla-datos {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 38, 100, .1);
	font-weight: 500;
}
.tabla-datos th,
.tabla-datos td {
	border: none;
	border-bottom: 1px solid var(--c-line);
	padding: 10px 14px;
	color: var(--c-ink);
}
/* #tab3 por delante: main.css colorea "#tab3 th" y "#tab3 td" (con ID, 1-0-1). */
#tab3 .tabla-datos thead th {
	background: var(--c-primary);
	color: #fff;
	font-weight: 600;
	letter-spacing: .05rem;
}
.tabla-datos tbody tr {
	border: 0;
}
.tabla-datos tbody tr:nth-child(odd) {
	background: #fff;
}
.tabla-datos tbody tr:nth-child(even) {
	background: var(--c-fondo-suave);
}
.tabla-datos tbody tr:hover {
	background: #eef1f8;
}
.tabla-datos tr:last-child > td {
	border-bottom: 0;
}
#tab3 .tabla-resumen td:first-child {
	color: var(--c-muted);
	text-align: left;
}
#tab3 .tabla-resumen td:last-child {
	color: var(--c-primary);
	font-weight: 600;
	text-align: left;
}

.envio {
	display: grid;
	grid-template-columns: 2fr 1fr 2fr auto;
	gap: 1rem;
	align-items: end;
	/* Anula "section section div" de main.css (tamaño fijo y fondo gris de las tarjetas viejas). */
	width: auto;
	height: auto;
	float: none;
	background: none;
	margin: 1.5rem 0 0;
}
.envio label {
	margin: 0;
}

/* ---------- Movil ---------- */
@media screen and (max-width: 736px) {
	.tab_content {
		padding: 1rem;
	}
	ul.tabs li a {
		padding: .9rem .25rem;
		font-size: .8rem;
	}
	.tab_content .maquinas-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.maquina-card img {
		height: 100px;
	}
	#tab2 .config-grid,
	.envio {
		grid-template-columns: 1fr;
	}
	.envio .btn-accion {
		width: 100%;
	}
}

/* ---------- Avisos (SweetAlert2) con el tema corporativo ----------
   main.css da a todos los <button> mayusculas, letter-spacing y un borde turquesa
   (selector de elemento): con ".swal2-popup ..." (clases) ya se le gana. */
.swal2-popup {
	font-family: 'Montserrat', sans-serif;
	border-radius: 12px;
	color: var(--c-ink);
}
.swal2-popup .swal2-html-container,
.swal2-popup .swal2-content {
	color: var(--c-ink);
	font-size: 1rem;
}
.swal2-popup .swal2-styled.swal2-confirm,
.swal2-popup .swal2-styled.swal2-cancel {
	height: auto;
	padding: 11px 26px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
}
.swal2-popup .swal2-styled.swal2-confirm {
	background: var(--c-primary);
}
.swal2-popup .swal2-styled.swal2-confirm:hover {
	background: var(--c-primary-700);
}
.swal2-popup .swal2-styled.swal2-cancel {
	background: #fff;
	color: var(--c-primary) !important;
	box-shadow: inset 0 0 0 1px var(--c-primary);
}
.swal2-popup .swal2-styled:focus {
	box-shadow: 0 0 0 3px rgba(0, 38, 100, .25);
}
/* Iconos con los colores de estado del tema. */
.swal2-icon.swal2-error {
	border-color: var(--c-danger);
	color: var(--c-danger);
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
	background-color: var(--c-danger);
}
.swal2-icon.swal2-warning {
	border-color: var(--c-accent);
	color: var(--c-accent);
}
.swal2-icon.swal2-success {
	border-color: var(--c-ok);
	color: var(--c-ok);
}
.swal2-icon.swal2-success .swal2-success-ring {
	border-color: rgba(46, 125, 50, .3);
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
	background-color: var(--c-ok);
}