/*
 * primordial.css — Shared base styles and theme variables for ldeluipy.es apps
 * (note, check, and any app using this design system).
 *
 * Physical location: /var/www/primordial.css (Apache root, outside site DocumentRoots).
 * Sites include it via symlink inside their DocumentRoot, e.g.:
 *   ln -s /var/www/primordial.css /var/www/note.ldeluipy.es/primordial.css
 * So the browser requests /primordial.css from the same origin; no request outside DocumentRoot.
 * See project rules for details.
 */

/* Default (fallback when no data-theme): verde. Debe ir primero para que [data-theme] lo sobrescriba. */
:root {
	--negro: #0c100e;
	--gris-oscuro: #131a17;
	--gris-card: #1a2220;
	--gris-borde: #2a3530;
	--blanco: #f0f0f0;
	--blanco-muted: rgba(240, 240, 240, 0.75);
	--accent: #00ffa6;
	--accent-hover: #5cffb8;
	--accent-glow: rgba(0, 255, 166, 0.15);
	--radius: 12px;
	--radius-sm: 8px;
	--danger: #e06c75;
	--danger-hover: rgba(224, 108, 117, 0.2);
}

/* --- Theme: oscuro (neutral dark) --- */
[data-theme="oscuro"] {
	--negro: #0c0c0c;
	--gris-oscuro: #161616;
	--gris-card: #1a1a1a;
	--gris-borde: #2a2a2a;
	--blanco: #f0f0f0;
	--blanco-muted: rgba(240, 240, 240, 0.75);
	--accent: #00ffa6;
	--accent-hover: #5cffb8;
	--accent-glow: rgba(0, 255, 166, 0.15);
	--radius: 12px;
	--radius-sm: 8px;
	--danger: #e06c75;
	--danger-hover: rgba(224, 108, 117, 0.2);
}

/* --- Theme: verde (green tint) --- */
[data-theme="verde"] {
	--negro: #0c100e;
	--gris-oscuro: #131a17;
	--gris-card: #1a2220;
	--gris-borde: #2a3530;
	--blanco: #f0f0f0;
	--blanco-muted: rgba(240, 240, 240, 0.75);
	--accent: #00ffa6;
	--accent-hover: #5cffb8;
	--accent-glow: rgba(0, 255, 166, 0.15);
	--radius: 12px;
	--radius-sm: 8px;
	--danger: #e06c75;
	--danger-hover: rgba(224, 108, 117, 0.2);
}


* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
	background: var(--negro);
	color: var(--blanco);
	min-height: 100vh;
	padding: 1.5rem;
	line-height: 1.55;
}

.wrap { max-width: 720px; margin: 0 auto; }

header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--gris-borde);
}

header h1 {
	margin: 0;
	font-size: 1.5rem;
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
	color: var(--accent);
	letter-spacing: -0.03em;
}

header h1 a { color: var(--accent); text-decoration: none; }
header h1 a:hover { color: var(--accent-hover); }
header .btn-sm { margin-left: auto; }

.theme-switcher { margin-left: auto; }
.theme-switcher select {
	padding: 0.25rem 0.5rem;
	font-size: 0.8rem;
	border-radius: 4px;
	border: 1px solid var(--gris-borde);
	background: var(--gris-card);
	color: var(--blanco);
	font-family: inherit;
	cursor: pointer;
}
.theme-switcher select:hover { background: var(--gris-borde); }
.theme-switcher select:focus { border-color: var(--accent); outline: none; }

.btn {
	padding: 0.5rem 1rem;
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: 0.9rem;
	border: 1px solid var(--gris-borde);
	color: var(--blanco);
	background: var(--gris-card);
	display: inline-block;
	font-family: inherit;
}
.btn:hover { background: var(--gris-borde); color: var(--blanco); }
.btn.primary {
	background: var(--accent);
	color: var(--negro);
	border-color: var(--accent);
}
.btn.primary:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	box-shadow: 0 0 20px var(--accent-glow);
}
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.danger:hover { background: var(--danger-hover); }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }

.empty { color: var(--blanco-muted); font-style: italic; }

main.form {
	background: var(--gris-card);
	border-radius: var(--radius);
	padding: 1.5rem;
	border: 1px solid var(--gris-borde);
}
main.form h2 { margin: 0 0 1rem; font-size: 1.25rem; color: var(--accent); }
main.form label { display: block; margin-bottom: 0.25rem; color: var(--blanco-muted); font-size: 0.9rem; }
main.form input[type="text"],
main.form textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--gris-borde);
	border-radius: var(--radius-sm);
	background: var(--negro);
	color: var(--blanco);
	font-size: 1rem;
	font-family: inherit;
}
main.form textarea { resize: vertical; min-height: 120px; }
main.form p { margin-bottom: 1rem; }
main.form .error { color: var(--danger); margin-bottom: 1rem; }