body { font-family: Arial, sans-serif; background: #f7f7f7; margin: 0; padding: 0; }
h2 { color: #333; }
form { background: #fff; padding: 20px; margin: 20px auto; width: 300px; border-radius: 8px; box-shadow: 0 2px 8px #ccc; }
table { background: #fff; margin: 20px auto; border-collapse: collapse; width: 80%; }
td, th { padding: 8px 12px; border: 1px solid #ccc; }
a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: underline; }
nav { margin: 20px; }
button { background: #007bff; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
button:hover { background: #0056b3; }
/* Inputs more pronounced and visible */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
	background: #ffffff;
	color: #222222;
	border: 1px solid #c7c7c7;
	padding: 8px 10px;
	border-radius: 6px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
	font-size: 14px;
}

/* Slight lift on hover to indicate interactivity */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover {
	transform: translateY(-1px);
}

/* Strong focus state for accessibility and clarity */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: #4d90fe;
	box-shadow: 0 0 0 4px rgba(77,144,254,0.15);
}

/* Visible focus for keyboard users */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid rgba(77,144,254,0.25);
	outline-offset: 2px;
}

/* Placeholder contrast */
::placeholder {
	color: #9b9b9b;
	opacity: 1;
}

/* Smaller inputs (inline) */
.form-inline input,
.form-inline select {
	display: inline-block;
	width: auto;
}

/* Make inputs more visible even when not focused: subtle bottom accent and stronger border */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
	border-color: #bfbfbf; /* slightly darker by default */
	background-image: linear-gradient(180deg, rgba(0,0,0,0.01), rgba(0,0,0,0.02));
	background-clip: padding-box;
}

/* subtle bottom line to indicate field area when not focused */
input[type="text"]::after,
input[type="email"]::after,
input[type="password"]::after,
input[type="number"]::after,
select::after,
textarea::after {
	content: '';
}

/* If you prefer underline style (alternative), uncomment this block:
input[type="text"], input[type="email"], textarea {
	border: none;
	border-bottom: 2px solid #e0e0e0;
	border-radius: 0;
}
*/

/* Invoice table inputs: set sensible fixed widths for price and quantity */
.priceInput {
	width: 100px !important; /* suficiente para 5 dígitos + decimales */
	max-width: 100px !important;
	min-width: 80px !important;
}
.qtyInput {
	width: 56px !important; /* suficiente para 2 dígitos */
	max-width: 56px !important;
	min-width: 48px !important;
}

/* Small action card overrides: evitar que inputs/selects ocupen 100% dentro de la tarjeta compacta */
.small-action-card select,
.small-action-card input,
.small-action-card button {
    width: auto !important;
}

/* Forzar que los enlaces no muestren subrayado en toda la app */
a, a:hover, a:focus, a:active { text-decoration: none !important; }

/* Narrow per-page select on products listing and search clear button */
.perPageSelect {
	width: 64px !important; /* narrow, fits 2 digits and small padding */
	min-width: 56px !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
}

.perPageLabel {
	color: #374151; /* gray-700 */
	font-size: 0.95rem;
	white-space: nowrap;
}

.search-wrap { position: relative; overflow: visible; }
.search-wrap input {
	/* asegurar suficiente padding a la derecha para el botón */
	padding-right: 3rem !important;
	/* Efecto 3D sutil: degradado, borde suave y sombra inferior */
	background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	border: 1px solid #d1d5db; /* gray-300 */
	border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 8px rgba(15,23,42,0.06), 0 8px 16px rgba(15,23,42,0.02);
	transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.search-wrap input:focus {
	outline: none;
	border-color: #4d90fe;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 30px rgba(77,144,254,0.12), 0 6px 12px rgba(15,23,42,0.06);
	transform: translateY(-2px);
	background: linear-gradient(180deg, #ffffff 0%, #f0f8ff 100%);
}

/* Evitar que el pequeño levantamiento rompa el layout en pantallas muy pequeñas */
@media (max-width: 640px){
  .search-wrap input:focus { transform: translateY(-1px); }
}
.search-wrap .search-clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 40;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	border: 1px solid #e5e7eb; /* light border so it sits above input */
	background: #ffffff; /* white background to contrast */
	color: #6b7280; /* gray-500 */
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.search-wrap .search-clear svg { display: block; }
.search-wrap .search-clear:hover { color: #111827; }
.search-wrap .search-clear.hidden { display: none !important; }

/* ---------- Login page styles ---------- */
.login-bg {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	/* más colorido: degradado dinámico y overlay sutil */
	background: radial-gradient(circle at 10% 20%, rgba(99,102,241,0.12), transparent 10%),
							radial-gradient(circle at 90% 80%, rgba(16,185,129,0.08), transparent 12%),
							linear-gradient(135deg, #f0f6ff 0%, #eef2ff 35%, #fff7ed 100%);
	background-attachment: fixed;
	padding: 48px 18px;
}
.login-wrapper { width: 100%; max-width: 420px; }

.login-card {
	position: relative;
	background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,251,255,0.95) 100%);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(2,6,23,0.12), 0 4px 12px rgba(2,6,23,0.06);
	padding: 30px 28px;
	border: 1px solid rgba(15,23,42,0.06);
	overflow: hidden;
}

/* accent decorative blob */
.login-card:before {
	content: '';
	position: absolute;
	right: -60px;
	top: -40px;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle at 30% 30%, rgba(37,99,235,0.14), transparent 35%);
	transform: rotate(12deg);
	filter: blur(20px);
	pointer-events: none;
}

.login-logo-wrap { text-align: center; margin-bottom: 10px; }
.login-logo { width: 210px; height: 107px; max-width: 100%; object-fit: contain; display: block; margin: 0 auto 10px; }

.login-title { text-align: center; font-size: 20px; margin: 6px 0 6px 0; color: #0b1220; font-weight: 800; letter-spacing: 0.2px; }
.login-sub { text-align: center; font-size: 13px; margin: 0 0 14px 0; color: #475569; }

.login-alert { padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 14px; }
.login-alert-error { background: #fff0f0; color: #9b1c1c; border: 1px solid #ffd6d6; }
.login-alert-success { background: #f0fff4; color: #064e3b; border: 1px solid #b7f5d6; }

.login-form { display: grid; gap: 12px; }
.login-form .form-label { font-size: 13px; color: #334155; margin-bottom: 6px; font-weight:600 }
.login-form input[type="text"], .login-form input[type="password"] {
	padding: 12px 14px;
	font-size: 15px;
	border-radius: 12px;
	border: 1px solid #e6e9ef;
	background: linear-gradient(180deg,#ffffff 0%, #fcfeff 100%);
	box-shadow: inset 0 4px 12px rgba(16,24,40,0.03);
	transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.12s ease;
}

.login-form input:focus {
	outline: none;
	border-color: #7c3aed;
	transform: translateY(-2px);
	box-shadow: 0 14px 40px rgba(124,58,237,0.12), 0 6px 18px rgba(16,24,40,0.06);
}

.login-btn {
	display: inline-block;
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	border-radius: 12px;
	/* degradado acorde al logo (azul -> morado -> cian) */
	background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #06b6d4 100%);
	background-size: 200% 100%;
	color: #fff;
	border: none;
	cursor: pointer;
	box-shadow: 0 18px 46px rgba(37,99,235,0.18), inset 0 -2px 12px rgba(0,0,0,0.04);
	transition: transform 0.18s ease, background-position 0.45s ease, box-shadow 0.18s ease;
}
.login-btn:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 24px 68px rgba(37,99,235,0.20); }

/* small screen tweaks */
@media (max-width: 480px) {
	.login-card { padding: 18px; }
	.login-logo { width: 160px; height: auto; }
}

/* small screen tweaks */
@media (max-width: 480px) {
	.login-card { padding: 18px; }
	.login-logo { max-width: 140px; }
}

/* Accessibility helpers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* End login styles */