/*
 * Hoja de Estilos Personalizada - Turismo Pedernal
 * Aplica la identidad corporativa definida en el manual de marca.
 */

/* 1. Importación de Google Fonts (Alternativas a Cronera y Futura) */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Poppins:wght@400;600&display=swap');

/* 2. Definición de Variables de Marca (Colores y Fuentes) */
:root {
    --font-primary: 'Merriweather', serif; /* Para títulos y encabezados */
    --font-secondary: 'Poppins', sans-serif; /* Para el cuerpo del texto */
    
    --color-brand-primary: #9B1915;      /* Rojo Malbec */
    --color-brand-primary-hover: #7c1411; /* Tono más oscuro para hover */
    
    --color-accent: #8c7b75; /* Un tono neutro inspirado en la tierra */
}

/* 3. Aplicación de Estilos Base */
body {
    font-family: var(--font-secondary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
}

/* 4. Clases de utilidad para aplicar la marca fácilmente con Tailwind */
.bg-brand {
    background-color: var(--color-brand-primary);
}
.bg-brand:hover {
    background-color: var(--color-brand-primary-hover);
}

.text-brand {
    color: var(--color-brand-primary);
}
.hover\:text-brand:hover {
    color: var(--color-brand-primary);
}
.hover\:text-brand-hover:hover {
    color: var(--color-brand-primary-hover);
}

.border-brand {
    border-color: var(--color-brand-primary);
}

.text-accent {
    color: var(--color-accent);
}

/* Clases para los inputs de formulario con foco */
.focus\:ring-brand:focus {
    --tw-ring-color: var(--color-brand-primary);
}
.focus\:border-brand:focus {
    border-color: var(--color-brand-primary);
}

/* Clases para los file inputs */
.file\:text-brand {
    color: var(--color-brand-primary);
}
.file\:bg-red-50 {
    background-color: #fef2f2;
}
.hover\:file\:bg-red-100:hover {
    background-color: #fee2e2;
}

/* Estilos para el logo */
.logo {
    height: 50px;
    width: auto;
    transition: transform 0.3s ease;
    object-fit: contain;
}

.logo:hover {
    transform: scale(1.05);
}

/* Logo para el header principal */
.logo-header {
    height: 24px !important;
    width: auto !important;
    object-fit: contain;
    max-height: 24px !important;
}

/* Logo específico para admin */
.logo-admin {
    height: 40px;
    width: auto;
}

/* Logo específico para login */
.logo-login {
    height: 64px;
    width: auto;
    margin: 0 auto;
}