/* Plan 34 — identidad visual propia de /soluciones (claro y cálido), separada
   del panel técnico. Se carga SOLO en las rutas /soluciones/* (landing, login,
   registro y la app de Guías) — nunca en /admin. Reescribe las mismas clases
   de Bootstrap que ya usan estas páginas (card, form-control, btn-*, badge-*,
   alert-*, table) en vez de tocar el markup de cada una, así el panel técnico
   (que sigue usando su propio CSS) queda intacto.

   Reemplaza al tema dark original (soluciones-dark.css) — mismo propósito
   (diferenciarse del panel admin), pero con una paleta clara/cálida en vez de
   oscura, a pedido explícito del usuario ("lo siento muy dark"). */

:root {
	--sol-bg: #faf7f2;
	--sol-surface: #ffffff;
	--sol-surface-alt: #f3efe8;
	--sol-border: rgba(27, 31, 34, 0.09);
	--sol-text: #1b1f22;
	--sol-text-muted: #5c6066;
	--sol-coral: #ef3546;
	--sol-coral-dark: #c4212f;
	--sol-indigo: #31315e;
	--sol-indigo-light: #4a4a8f;
	--sol-shadow: 0 2px 14px rgba(27, 31, 34, 0.06);
	--sol-radius: 14px;
}

body {
	background-color: var(--sol-bg);
	color: var(--sol-text);
}

a {
	color: var(--sol-indigo-light);
}
a:hover {
	color: var(--sol-coral);
}

.text-muted {
	color: var(--sol-text-muted) !important;
}
.text-black {
	color: var(--sol-text) !important;
}
.text-primary {
	color: var(--sol-coral) !important;
}
.text-danger {
	color: #d0333f !important;
}
.text-warning {
	color: #b9760b !important;
}

/* --- Cards / superficies --- */
.card {
	background-color: var(--sol-surface);
	border: 1px solid var(--sol-border);
	border-radius: var(--sol-radius);
	box-shadow: var(--sol-shadow);
	color: var(--sol-text);
}
.card-body {
	color: var(--sol-text);
}

/* --- Formularios --- */
.form-group label {
	color: var(--sol-text);
	font-weight: 500;
}
/* El patrón de este formulario envuelve el input/select DENTRO del propio
   label ("<label>Texto <input/></label>", sin un elemento aparte para el
   texto) — sin esto, el texto y el campo quedaban pegados (reportado en
   vivo: "los labels están pegados"). flex + gap separa el texto de su
   siguiente hijo (input/select/textarea) sin tocar el markup de cada página. */
.form-group label.w-100 {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 0;
}
.form-control,
.custom-select {
	background-color: var(--sol-surface-alt);
	border: 1px solid var(--sol-border);
	border-radius: 8px;
	color: var(--sol-text);
}
/* admin/css/style.css trae "select.form-control { color: #c9c8c8; }" — con
   selector de elemento+clase le gana en especificidad a nuestro ".form-control"
   de solo clase, sin importar el orden de carga (reportado en vivo: el texto
   ya elegido en un <select>, ej. "Venta", se veía gris apagado). Se iguala la
   especificidad acá para que nuestro color sí gane. */
select.form-control,
select.custom-select {
	color: var(--sol-text);
}
/* El navegador aplica su propia opacidad por defecto al placeholder (Firefox:
   ~0.54) que se multiplica con la nuestra — forzar opacity:1 y prefijos
   propios evita que el color termine más lavado de lo que se ve en el CSS
   (reportado en vivo dos veces: "casi no se ven" / "sigue sin verse bien"). */
/* Un navegador descarta la regla COMPLETA si algún selector de la lista no lo
   reconoce (ej. Chrome con "::-moz-placeholder") — por eso cada prefijo va en
   su propia regla separada, no en una sola lista con comas. */
.form-control::placeholder {
	color: var(--sol-indigo) !important;
	opacity: 1 !important;
}
.form-control::-webkit-input-placeholder {
	color: var(--sol-indigo) !important;
	opacity: 1 !important;
}
.form-control::-moz-placeholder {
	color: var(--sol-indigo) !important;
	opacity: 1 !important;
}
.form-control:-ms-input-placeholder {
	color: var(--sol-indigo) !important;
	opacity: 1 !important;
}
.form-control:focus,
.custom-select:focus {
	background-color: var(--sol-surface);
	border-color: var(--sol-coral);
	color: var(--sol-text);
	box-shadow: 0 0 0 0.2rem rgba(239, 53, 70, 0.15);
}
.form-control[readonly],
.form-control:disabled {
	background-color: var(--sol-surface-alt);
	color: var(--sol-text-muted);
}
.form-text.text-muted {
	color: var(--sol-text-muted) !important;
}
.input-group-append .btn-dark {
	background-color: var(--sol-surface-alt);
	border-color: var(--sol-border);
	color: var(--sol-text);
}
select.form-control option {
	background-color: var(--sol-surface);
	color: var(--sol-text);
}

/* Certificado/logo (svelte-file-dropzone) — CSS interno del paquete, se
   necesita !important para ganarle a su especificidad de estilo scoped. */
.dropzone {
	background-color: var(--sol-surface-alt) !important;
	border-color: var(--sol-border) !important;
	border-radius: 8px !important;
	color: var(--sol-text-muted) !important;
}
.dropzone p {
	color: var(--sol-text-muted) !important;
}

/* --- Botones --- */
.btn {
	border-radius: 8px;
}
.btn-gradient-primary,
.btn-primary {
	background-image: linear-gradient(to right, var(--sol-coral) 0%, var(--sol-coral-dark) 100%);
	border: none;
	color: #fff;
}
.btn-gradient-primary:hover,
.btn-primary:hover {
	background-image: linear-gradient(to right, var(--sol-coral-dark) 0%, var(--sol-coral) 100%);
	color: #fff;
}
.btn-gradient-dark,
.btn-dark {
	background-color: var(--sol-surface-alt);
	border: 1px solid var(--sol-border);
	color: var(--sol-text);
}
.btn-gradient-dark:hover,
.btn-dark:hover {
	background-color: #e8e2d6;
	color: var(--sol-text);
}
.btn-success {
	background-color: #1f9d55;
	border-color: #1f9d55;
	color: #fff;
}
.btn-success:hover {
	background-color: #197f45;
	border-color: #197f45;
}
.btn-outline-secondary {
	color: var(--sol-text);
	border-color: var(--sol-border);
}
.btn-outline-secondary:hover {
	background-color: var(--sol-surface-alt);
	color: var(--sol-text);
	border-color: var(--sol-border);
}
.btn-outline-primary {
	color: var(--sol-coral);
	border-color: var(--sol-coral);
}
.btn-outline-primary:hover {
	background-color: var(--sol-coral);
	color: #fff;
}
.btn-outline-success {
	color: #1f9d55;
	border-color: #1f9d55;
}
.btn-outline-success:hover {
	background-color: #1f9d55;
	color: #fff;
}
.btn-outline-danger {
	color: #d0333f;
	border-color: #d0333f;
}
.btn-outline-danger:hover {
	background-color: #d0333f;
	color: #fff;
}
.btn-link {
	color: var(--sol-indigo-light);
}
.btn-link:hover {
	color: var(--sol-coral);
}
.btn:disabled {
	opacity: 0.55;
}

/* --- Badges --- */
.badge-primary {
	background-color: var(--sol-coral);
	color: #fff;
}
.badge-secondary {
	background-color: var(--sol-surface-alt);
	color: var(--sol-text-muted);
}
.badge-success {
	background-color: #1f9d55;
	color: #fff;
}
.badge-warning {
	background-color: #f2b84b;
	color: #1b1f22;
}
.badge-danger {
	background-color: var(--sol-coral);
	color: #fff;
}
.badge.border {
	border-color: var(--sol-border) !important;
}
.badge-light {
	background-color: var(--sol-surface-alt);
	color: var(--sol-text-muted);
}

/* --- Alertas --- */
.alert-info {
	background-color: rgba(74, 74, 143, 0.1);
	border-color: var(--sol-indigo-light);
	color: var(--sol-text);
}
.alert-success {
	background-color: rgba(31, 157, 85, 0.1);
	border-color: #1f9d55;
	color: var(--sol-text);
}
.alert-danger {
	background-color: rgba(239, 53, 70, 0.08);
	border-color: var(--sol-coral);
	color: var(--sol-text);
}

/* --- Tablas --- */
.table {
	color: var(--sol-text);
}
.table thead th {
	border-color: var(--sol-border);
	color: var(--sol-text-muted);
	font-weight: 600;
}
.table td,
.table th {
	border-color: var(--sol-border);
}
.table-hover tbody tr:hover {
	background-color: var(--sol-surface-alt);
	color: var(--sol-text);
}

/* --- Iconos de estado (dashboard "aún no configuraste tu empresa") --- */
.mdi {
	color: inherit;
}