/* =========================================================================
   ThorPanel · Tema "default" MODERNIZADO
   Rediseño visual completo sobre el markup legacy (tablas).
   No requiere cambios en PHP: solo restilea las clases existentes.
   Paleta: índigo/violeta con tarjetas glass sobre degradado.
   ========================================================================= */

:root {
	--brand-1: #6366f1;   /* indigo  */
	--brand-2: #8b5cf6;   /* violeta */
	--brand-3: #a855f7;   /* púrpura */
	--ink:      #1e293b;   /* texto principal */
	--ink-soft: #64748b;   /* texto secundario */
	--line:     #e2e8f0;   /* bordes suaves */
	--card:     #ffffff;
	--ok:       #10b981;
	--danger:   #ef4444;
	--radius:   16px;
	--shadow:   0 10px 30px rgba(30, 27, 75, .18);
	--shadow-lg:0 24px 60px rgba(30, 27, 75, .35);
}

html { overflow-y: scroll; }

body {
	margin: 0;
	padding: 28px 16px 48px;
	background: #eef2ff;
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 48%, #9333ea 100%) fixed;
	color: var(--ink);
}

/* Tipografía base moderna (sustituye el viejo Verdana 9px) */
body, p, td, th, div, span, a, label, input, select, textarea, button {
	font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
}
body, p, td { font-size: 14px; line-height: 1.5; color: var(--ink); }

hr { display: none; }

/* ----------------------------------- HEADER ----------------------------- */
#tblHeader { width: 100% !important; margin: 0 auto 18px; max-width: 1180px; }

#tblHeader img {
	max-height: 64px;
	width: auto;
	padding: 10px 22px;
	background: rgba(255,255,255,.95);
	border-radius: 14px;
	box-shadow: var(--shadow);
}

/* Subtítulo bajo el logo */
#tblHeader font {
	font-size: 13px !important;
	color: rgba(255,255,255,.85);
	letter-spacing: .3px;
}

/* Barra de información del usuario logueado → tarjeta glass */
.infoBar {
	width: auto !important;
	max-width: 1180px;
	margin: 14px auto 4px;
	background: rgba(255,255,255,.14) !important;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 14px;
	color: #fff !important;
	box-shadow: var(--shadow);
}
.infoBar td { font-size: 13px !important; color: rgba(255,255,255,.92); padding: 10px 16px; }
.infoBar b  { color: #fff; font-weight: 700; }

/* ------------------------------- NAVEGACIÓN ----------------------------- */
/* Los enlaces del menú (header y footer) como píldoras */
#tblHeader a, #tblFooter a, .menuLink {
	display: inline-block;
	margin: 6px 4px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #fff !important;
	background: rgba(255,255,255,.16);
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 999px;
	text-decoration: none;
	transition: all .18s ease;
}
#tblHeader a:hover, #tblFooter a:hover, .menuLink:hover {
	background: #fff;
	color: var(--brand-1) !important;
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

/* ------------------------------- ÁREA PRINCIPAL ------------------------- */
.mainArea, #tblBody {
	width: auto !important;
	max-width: 1180px;
	margin: 0 auto !important;
	background: var(--card);
	border: none !important;
	border-radius: 22px;
	box-shadow: var(--shadow-lg);
	padding: 30px 36px !important;
}

/* En la página de login no hace falta el contenedor-tarjeta exterior:
   dejamos flotar solo la tarjeta del formulario sobre el degradado. */
.login-page .mainArea, .login-page #tblBody {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Enlaces dentro del contenido (no-nav) */
.mainArea a { color: var(--brand-1); font-weight: 600; text-decoration: none; }
.mainArea a:hover { color: var(--brand-3); text-decoration: underline; }

/* ------------------------------- TÍTULOS -------------------------------- */
.categoryTitle {
	font-size: 26px !important;
	font-weight: 800;
	color: var(--brand-1) !important;
	letter-spacing: -.5px;
	display: inline-block;
	padding-bottom: 6px;
}

.sectionTitle {
	font-size: 12px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--brand-2) !important;
	border-bottom: 2px solid var(--line) !important;
	padding: 14px 0 6px;
}

.fieldTitle {
	vertical-align: top;
	font-weight: 600;
	color: var(--ink-soft);
	padding: 6px 10px 6px 0;
}

/* ------------------------------- TARJETA LOGIN -------------------------- */
.subtleBackground {
	background: var(--card) !important;
	border: none !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow-lg) !important;
	padding: 38px 40px !important;
	width: 380px !important;
	height: auto !important;
}
.subtleBackground .fieldTitle { font-weight: 600; color: var(--ink); }

/* ------------------------------- LISTADOS / TABLAS --------------------- */
/* Nota: la tabla exterior suele tener class="listBackground" y la fila de
   encabezado class="listHeader". Usamos tr.listHeader td (mayor especificidad)
   para ganarle a .listBackground td y que el encabezado no quede blanco/blanco. */
.listHeader, tr.listHeader td, tr.listHeader th {
	background-color: #6366f1 !important;   /* respaldo sólido por si falla el degradado */
	background-image: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 12px 14px !important;
	border: none !important;
}
tr.listHeader td a, tr.listHeader th a { color: #fff !important; text-decoration: underline; }

.listBackground, .listBackground td {
	background: #fff !important;
	border-bottom: 1px solid var(--line) !important;
	padding: 11px 14px !important;
	transition: background .12s ease;
}
.listBackground:hover, .listBackground:hover td { background: #f5f3ff !important; }

.pagingBackground {
	background: #f8fafc !important;
	padding: 10px 14px !important;
	font-size: 13px;
	border-top: 1px solid var(--line);
}

/* ------------------------------- MENSAJES ------------------------------ */
.errorMessage {
	display: inline-block;
	color: var(--danger) !important;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 10px;
	padding: 8px 14px;
	font-weight: 600;
	font-size: 13px;
}

.successMessage {
	display: inline-block;
	color: var(--ok) !important;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 10px;
	padding: 8px 14px;
	font-weight: 600;
	font-size: 13px;
}

/* ------------------------------- FORMULARIOS --------------------------- */
input, select, textarea {
	border: 1.5px solid var(--line) !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	padding: 9px 12px !important;
	background: #fff;
	color: var(--ink);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
	border-color: var(--brand-1) !important;
	box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important;
}

input[type=checkbox], input[type=radio],
input.checkbox, input.radio {
	border: none !important;
	width: auto !important;
	padding: 0 !important;
	box-shadow: none !important;
	accent-color: var(--brand-1);
	transform: scale(1.2);
	margin: 0 6px;
}

/* Selects de idioma dentro de barras oscuras → legibles */
.infoBar select, #tblHeader select {
	background: rgba(255,255,255,.95);
	border: none !important;
	font-size: 12px !important;
	padding: 6px 8px !important;
}

/* ------------------------------- BOTONES ------------------------------- */
button,
input[type=submit], input[type=button], input[type=reset],
input.button, #boton {
	width: auto !important;
	height: auto !important;
	cursor: pointer;
	font-size: 14px !important;
	font-weight: 600;
	color: #fff !important;
	background: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 10px 22px !important;
	box-shadow: 0 6px 16px rgba(99,102,241,.35);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
button:hover,
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover,
input.button:hover, #boton:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(99,102,241,.45);
	filter: brightness(1.05);
	background: linear-gradient(135deg, var(--brand-1), var(--brand-3)) !important;
}
button:active, input.button:active, #boton:active { transform: translateY(0); }

button[disabled], button[disabled=disabled],
button.disabled, input.button.disabled, input[disabled] {
	background: #e2e8f0 !important;
	color: #94a3b8 !important;
	box-shadow: none !important;
	cursor: not-allowed;
	transform: none !important;
}

/* ------------------------------- FOOTER -------------------------------- */
#tblFooter {
	max-width: 1180px;
	margin: 22px auto 0;
}
#tblFooter td { color: rgba(255,255,255,.85); font-size: 12px; }

/* Espaciado general de celdas para que respire el contenido */
.mainArea td { padding: 7px 8px; }