/* Estilos de Locura sobre Pico CSS v2. */

:root {
	--pico-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--pico-border-radius: 0.5rem;
	--pico-form-element-spacing-vertical: 0.65rem;

	--locura-topbar-alto: 3.5rem;
	--locura-sidebar-ancho: 15rem;
}

/* El acento se define con la misma especificidad que usa Pico para sus temas,
   para que estos overrides ganen al cargarse después de pico.min.css. */
[data-theme="light"],
:root:not([data-theme="dark"]) {
	--locura-acento: #6d4ee0;
	--locura-acento-hover: #5b3dcc;
	--locura-acento-suave: rgba(109, 78, 224, 0.12);

	--pico-primary: var(--locura-acento);
	--pico-primary-background: var(--locura-acento);
	--pico-primary-border: var(--locura-acento);
	--pico-primary-hover: var(--locura-acento-hover);
	--pico-primary-hover-background: var(--locura-acento-hover);
	--pico-primary-hover-border: var(--locura-acento-hover);
	--pico-primary-focus: rgba(109, 78, 224, 0.35);
	--pico-primary-underline: rgba(109, 78, 224, 0.5);
	--pico-primary-inverse: #ffffff;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--locura-acento: #9b85f0;
		--locura-acento-hover: #b3a1f5;
		--locura-acento-suave: rgba(155, 133, 240, 0.16);

		--pico-primary: var(--locura-acento);
		--pico-primary-background: #7559e8;
		--pico-primary-border: #7559e8;
		--pico-primary-hover: var(--locura-acento-hover);
		--pico-primary-hover-background: #8568ee;
		--pico-primary-hover-border: #8568ee;
		--pico-primary-focus: rgba(155, 133, 240, 0.35);
		--pico-primary-underline: rgba(155, 133, 240, 0.5);
		--pico-primary-inverse: #ffffff;
	}
}

/* Tema oscuro elegido manualmente (toggle), independiente del tema del sistema. */
[data-theme="dark"] {
	--locura-acento: #9b85f0;
	--locura-acento-hover: #b3a1f5;
	--locura-acento-suave: rgba(155, 133, 240, 0.16);

	--pico-primary: var(--locura-acento);
	--pico-primary-background: #7559e8;
	--pico-primary-border: #7559e8;
	--pico-primary-hover: var(--locura-acento-hover);
	--pico-primary-hover-background: #8568ee;
	--pico-primary-hover-border: #8568ee;
	--pico-primary-focus: rgba(155, 133, 240, 0.35);
	--pico-primary-underline: rgba(155, 133, 240, 0.5);
	--pico-primary-inverse: #ffffff;
}

h1, h2, h3 {
	letter-spacing: -0.02em;
}

/* ===== Marca ===== */

.marca {
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-decoration: none;
	background: linear-gradient(120deg, var(--locura-acento), #c06ee8);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

a.marca:hover {
	text-decoration: none;
}

/* ===== Topbar ===== */

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	height: var(--locura-topbar-alto);
	padding: 0 1.25rem;
	background: var(--pico-card-background-color);
	border-bottom: 1px solid var(--pico-muted-border-color);
}

/* ===== Selector de empresa (dropdown compacto en topbar) ===== */

.menu-empresa {
	margin: 0;
	flex-shrink: 1;
	min-width: 0;
	align-self: center;
}

.topbar details.dropdown.menu-empresa summary {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem;
	height: auto;
	width: auto;
	max-width: 11rem;
	margin: 0;
	padding: 0.25rem 0.55rem;
	border: 1px solid var(--pico-muted-border-color);
	border-radius: calc(var(--pico-border-radius) * 0.85);
	background: var(--pico-form-element-background-color);
	color: var(--pico-muted-color);
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: none;
}

.topbar details.dropdown.menu-empresa summary:hover,
.topbar details.dropdown.menu-empresa[open] summary {
	border-color: var(--locura-acento);
	color: var(--pico-color);
	background: var(--locura-acento-suave);
}

.topbar details.dropdown.menu-empresa summary::after {
	display: block;
	width: 0.7rem;
	height: 0.7rem;
	margin: 0;
	float: none;
	flex-shrink: 0;
	transform: none;
	background-size: 0.7rem auto;
}

.topbar details.dropdown.menu-empresa[open] summary::after {
	transform: rotate(180deg);
}

.topbar details.dropdown.menu-empresa summary + ul {
	min-width: 10rem;
	max-width: 16rem;
}

/* ===== Menú de usuario (dropdown de Pico con avatar de iniciales) ===== */

.menu-usuario {
	margin: 0 0 0 auto;
}

.topbar details.dropdown.menu-usuario summary {
	height: auto;
	width: auto;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
	line-height: 0;
	cursor: pointer;
}

.topbar details.dropdown.menu-usuario summary::after {
	display: none;
	content: none;
}

.topbar details.dropdown.menu-usuario summary + ul {
	left: auto;
	right: 0;
	min-width: 14rem;
}

.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--locura-acento-suave);
	color: var(--locura-acento);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
}

.menu-usuario summary:hover .avatar,
.menu-usuario[open] .avatar {
	background: var(--locura-acento);
	color: var(--pico-primary-inverse);
}

.menu-cabecera {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.5rem var(--pico-form-element-spacing-horizontal) 0.65rem;
	border-bottom: 1px solid var(--pico-muted-border-color);
	margin-bottom: 0.35rem;
}

.menu-cabecera small {
	color: var(--pico-muted-color);
}

.menu-separador {
	border-top: 1px solid var(--pico-muted-border-color);
	margin-top: 0.35rem;
	padding-top: 0.35rem;
}

.menu-usuario form {
	margin: 0;
}

/* Imita los enlaces del dropdown de Pico: el li tiene padding propio
   y los items lo cancelan con márgenes negativos. */
.menu-usuario summary + ul button {
	display: block;
	width: calc(100% + var(--pico-form-element-spacing-horizontal) * 2);
	margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
	padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--pico-dropdown-color, var(--pico-color));
	font-size: inherit;
	font-weight: 400;
	text-align: left;
}

.menu-usuario summary + ul button:hover {
	background: var(--pico-dropdown-hover-background-color, var(--locura-acento-suave));
}

.boton-menu {
	display: none;
	cursor: pointer;
	color: var(--pico-color);
}

.boton-menu svg {
	display: block;
	width: 1.4rem;
	height: 1.4rem;
}

.alternar-menu {
	display: none;
}

/* ===== Shell: sidebar + contenido ===== */

.shell {
	display: flex;
	min-height: calc(100vh - var(--locura-topbar-alto));
}

.sidebar {
	position: sticky;
	top: var(--locura-topbar-alto);
	flex-shrink: 0;
	width: var(--locura-sidebar-ancho);
	height: calc(100vh - var(--locura-topbar-alto));
	padding: 1.25rem 0.75rem;
	border-right: 1px solid var(--pico-muted-border-color);
	background: var(--pico-card-background-color);
}

.sidebar nav {
	margin: 0;
}

.sidebar ul {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar li {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar li::before {
	display: none;
	content: none;
	float: none;
}

.sidebar a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	padding: 0.6rem 0.85rem;
	min-height: 2.5rem;
	line-height: 1.25;
	border-radius: var(--pico-border-radius);
	color: var(--pico-muted-color);
	font-weight: 500;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.sidebar a:hover {
	background: var(--locura-acento-suave);
	color: var(--pico-color);
}

.sidebar a.activo {
	background: var(--locura-acento-suave);
	color: var(--locura-acento);
	font-weight: 600;
}

.sidebar svg {
	width: 1.15rem;
	height: 1.15rem;
	flex-shrink: 0;
}

.contenido {
	flex: 1;
	width: 100%;
	max-width: 64rem;
	padding: 2rem 2.5rem 3rem;
}

.contenido hgroup p {
	color: var(--pico-muted-color);
}

.velo-menu {
	display: none;
}

/* ===== Sidebar responsive (off-canvas en mobile) ===== */

@media (max-width: 768px) {
	.boton-menu {
		display: block;
	}

	.sidebar {
		position: fixed;
		top: var(--locura-topbar-alto);
		left: 0;
		bottom: 0;
		z-index: 15;
		height: auto;
		transform: translateX(-100%);
		transition: transform 0.2s ease;
		box-shadow: var(--pico-card-box-shadow);
	}

	.alternar-menu:checked ~ .shell .sidebar {
		transform: none;
	}

	.alternar-menu:checked ~ .shell .velo-menu {
		display: block;
		position: fixed;
		inset: var(--locura-topbar-alto) 0 0 0;
		z-index: 14;
		background: rgba(0, 0, 0, 0.45);
		cursor: pointer;
	}

	.contenido {
		padding: 1.5rem 1.25rem 2.5rem;
	}
}

/* ===== Páginas de autenticación ===== */

.auth {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 1.25rem;
	background:
		radial-gradient(40rem 24rem at 85% -10%, var(--locura-acento-suave), transparent),
		radial-gradient(32rem 20rem at 0% 110%, var(--locura-acento-suave), transparent);
}

.tarjeta-auth {
	width: 100%;
	max-width: 26rem;
	margin: 0;
	padding: 2.25rem 2rem;
	border-radius: 1rem;
}

.tarjeta-auth h1 {
	font-size: 1.45rem;
	margin-bottom: 0.5rem;
}

.marca-auth {
	display: block;
	font-size: 1.5rem;
	margin-bottom: 1.25rem;
}

.separador {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.25rem 0;
	color: var(--pico-muted-color);
	font-size: 0.85rem;
}

.separador::before,
.separador::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--pico-muted-border-color);
}

.mensaje-error {
	padding: 0.65rem 0.9rem;
	border-radius: var(--pico-border-radius);
	background: rgba(217, 60, 60, 0.1);
	border: 1px solid rgba(217, 60, 60, 0.35);
	color: #c53030;
	font-size: 0.9rem;
}

.mensaje-exito {
	padding: 0.65rem 0.9rem;
	border-radius: var(--pico-border-radius);
	background: rgba(56, 142, 60, 0.1);
	border: 1px solid rgba(56, 142, 60, 0.35);
	color: #2f7d32;
	font-size: 0.9rem;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mensaje-error {
		color: #f1aeae;
	}
}

[data-theme="dark"] .mensaje-error {
	color: #f1aeae;
}

.selector-empresas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 0.85rem;
}

.tarjeta-empresa {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--pico-muted-border-color);
	border-radius: var(--pico-border-radius);
	background: var(--pico-card-background-color);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tarjeta-empresa:hover {
	border-color: var(--locura-acento);
	box-shadow: 0 0 0 3px var(--locura-acento-suave);
}

.tarjeta-empresa small {
	color: var(--pico-muted-color);
}