/* ==========================================================================
   habitua.es — marca y paleta
   Fuente única de verdad para el color y el logotipo de la plataforma.
   Se carga en el portal, la landing, el registro y el panel de administración.
   El diseño original del logo está en docs/logo-src/.
   ========================================================================== */

:root{
	/* Paleta */
	--h-primary:#FF5C2B;        /* coral vivo (marca) */
	--h-primary-dark:#E0431A;   /* hover */
	--h-primary-light:#FFD9CB;  /* fondos suaves de acento */
	--h-primary-soft:#FFF3EA;   /* fondo cálido de la marca */
	--h-accent:#FFB53D;         /* acento (destacados, avisos positivos) */
	--h-text:#241C18;           /* tinta */
	--h-muted:#6B5B52;          /* texto secundario */
	--h-border:#F0DECF;         /* bordes cálidos */
	--h-bg:#FFF3EA;             /* fondo de sección */
	--h-dark:#241C18;           /* bloques oscuros */
	--h-sobre:#FFF7ED;          /* texto sobre coral */
	--h-exito:#2E9E6B;
	--h-error:#D64545;

	/* Logotipo */
	--h-logo-radio:.475em;
	--h-logo-padding:.2375em .4em .1875em;
	--h-fuente-marca:'Baloo 2','Avenir Next Rounded','Segoe UI Rounded',system-ui,sans-serif;
}

/* --------------------------------------------------------------------------
   Logotipo
   Uso: <span class="hlogo">habitua</span>  (caja coral, sobre fondo claro u oscuro)
        <span class="hlogo hlogo-texto">habitua</span>  (solo texto coral)
        <span class="hlogo hlogo-claro">habitua</span>  (solo texto crema, sobre coral/oscuro)
   El tamaño se controla con font-size en el contenedor.
   -------------------------------------------------------------------------- */
.hlogo{
	display:inline-flex; align-items:center; justify-content:center;
	font-family:var(--h-fuente-marca); font-weight:800; font-size:1.5rem; line-height:1;
	letter-spacing:-.01em; text-transform:lowercase;
	background:var(--h-primary); color:var(--h-sobre);
	border-radius:var(--h-logo-radio); padding:var(--h-logo-padding);
	text-decoration:none; white-space:nowrap;
}
a.hlogo:hover{ background:var(--h-primary-dark); color:var(--h-sobre); }
.hlogo-texto{ background:none; padding:0; color:var(--h-primary); border-radius:0; }
a.hlogo-texto:hover{ background:none; color:var(--h-primary-dark); }
.hlogo-claro{ background:none; padding:0; color:var(--h-sobre); border-radius:0; }
a.hlogo-claro:hover{ background:none; color:#fff; }
.hlogo-sm{ font-size:1.15rem; }
.hlogo-lg{ font-size:2.2rem; }

/* Isotipo (favicon, avatar, marcador) */
.hisotipo{
	display:inline-flex; align-items:center; justify-content:center;
	width:2em; height:2em; border-radius:.46em; background:var(--h-primary);
	font-family:var(--h-fuente-marca); font-weight:800; color:var(--h-sobre); line-height:1;
}

/* --------------------------------------------------------------------------
   Ajuste de Bootstrap a la marca (afecta sobre todo al panel)
   -------------------------------------------------------------------------- */
.btn-primary{ --bs-btn-bg:var(--h-primary); --bs-btn-border-color:var(--h-primary); --bs-btn-hover-bg:var(--h-primary-dark); --bs-btn-hover-border-color:var(--h-primary-dark); --bs-btn-active-bg:var(--h-primary-dark); --bs-btn-active-border-color:var(--h-primary-dark); --bs-btn-disabled-bg:var(--h-primary); --bs-btn-disabled-border-color:var(--h-primary); }
.btn-outline-primary{ --bs-btn-color:var(--h-primary); --bs-btn-border-color:var(--h-primary); --bs-btn-hover-bg:var(--h-primary); --bs-btn-hover-border-color:var(--h-primary); --bs-btn-active-bg:var(--h-primary); --bs-btn-active-border-color:var(--h-primary); }
.btn-success{ --bs-btn-bg:var(--h-exito); --bs-btn-border-color:var(--h-exito); --bs-btn-hover-bg:#26845a; --bs-btn-hover-border-color:#26845a; --bs-btn-active-bg:#26845a; --bs-btn-active-border-color:#26845a; --bs-btn-disabled-bg:var(--h-exito); --bs-btn-disabled-border-color:var(--h-exito); }
.btn-outline-success{ --bs-btn-color:var(--h-exito); --bs-btn-border-color:var(--h-exito); --bs-btn-hover-bg:var(--h-exito); --bs-btn-hover-border-color:var(--h-exito); }
.btn-warning{ --bs-btn-bg:var(--h-accent); --bs-btn-border-color:var(--h-accent); --bs-btn-color:var(--h-text); --bs-btn-hover-bg:#f0a52c; --bs-btn-hover-border-color:#f0a52c; --bs-btn-hover-color:var(--h-text); }
.btn-outline-warning{ --bs-btn-color:#b97900; --bs-btn-border-color:var(--h-accent); --bs-btn-hover-bg:var(--h-accent); --bs-btn-hover-border-color:var(--h-accent); --bs-btn-hover-color:var(--h-text); }
.bg-primary{ background-color:var(--h-primary)!important; }
.text-primary{ color:var(--h-primary)!important; }
.text-bg-primary{ background-color:var(--h-primary)!important; color:var(--h-sobre)!important; }
.bg-success{ background-color:var(--h-exito)!important; }
.text-success{ color:var(--h-exito)!important; }
.text-bg-success{ background-color:var(--h-exito)!important; color:#fff!important; }
.bg-warning{ background-color:var(--h-accent)!important; }
.text-warning{ color:#b97900!important; }
.text-bg-warning{ background-color:var(--h-accent)!important; color:var(--h-text)!important; }
.bg-dark, .text-bg-dark{ background-color:var(--h-dark)!important; }
.form-check-input:checked{ background-color:var(--h-primary); border-color:var(--h-primary); }
.form-control:focus, .form-select:focus{ border-color:var(--h-primary); box-shadow:0 0 0 .2rem rgba(255,92,43,.18); }
.btn-check:checked + .btn-outline-secondary{ background:var(--h-primary); border-color:var(--h-primary); color:var(--h-sobre); }
.alert-warning{ --bs-alert-bg:#FFF4E0; --bs-alert-border-color:#FFE0AE; --bs-alert-color:#7A4E00; }
.alert-success{ --bs-alert-bg:#E8F6EF; --bs-alert-border-color:#BFE6D4; --bs-alert-color:#1E6A47; }
.alert-danger{ --bs-alert-bg:#FDECEC; --bs-alert-border-color:#F6C9C9; --bs-alert-color:#8E2E2E; }

/* Enlaces (portal, landing, registro y panel; las webs de anunciantes usan su propio color) */
a{ color:var(--h-primary); }
a:hover{ color:var(--h-primary-dark); }
.dropdown-item:active{ background-color:var(--h-primary); }
.nav-tabs .nav-link.active{ color:var(--h-primary); border-bottom-color:#fff; }
.nav-tabs .nav-link{ color:#5A4A41; }
.page-link{ color:var(--h-primary); }