/* Make SaaS: The Digital Curator - Core Design System */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {
    /* Colors - Stich "Curator" Palette */
    --primary: #005144;
    --primary-container: #006b5a;
    --secondary: #586062;
    --secondary-container: #dae1e3;
    --tertiary: #402aba;
    --tertiary-container: #5947d3;
    
    /* Surfaces - Tonal Transitions */
    --background: #f7faf8;
    --on-background: #181c1b;
    --surface: #f7faf8;
    --on-surface: #181c1b;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f1f4f2;
    --surface-container-medium: #ebefec;
    --surface-container-high: #e5e9e6;
    --surface-container-highest: #e0e3e1;
    
    /* Outlines & Variants */
    --outline: #6e7976;
    --outline-variant: rgba(190, 201, 197, 0.2); /* Ghost border */
    
    /* Effects */
    --glass-blur: blur(20px);
    --editorial-shadow: 0 24px 48px -12px rgba(0, 81, 68, 0.08);
}

body {
    background-color: var(--background);
    color: var(--on-background);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-headline {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Tonal Transition Containers (No borders) */
.surface-card {
    background-color: var(--surface-container-lowest);
    border-radius: 1.5rem;
    padding: 2rem;
    /* No border by default per "No-Line" rule */
    transition: all 0.3s ease;
}

.surface-card-subtle {
    background-color: var(--surface-container-low);
    border-radius: 1.5rem;
    padding: 2rem;
}

/* Glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--outline-variant);
}

/* Buttons */
.btn-primary {
    background-color: var(--primary);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary:hover {
    transform: scale(1.02);
    box-shadow: var(--editorial-shadow);
}

.btn-secondary {
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 600;
}

/* Utils */
.tracking-tight-custom { letter-spacing: -0.05em; }
.tracking-widest-custom { letter-spacing: 0.2em; }

/* ── ADMIN LEGIBILITY SYSTEM ────────────────────────────────────────── */
/* Darkened labels/captions across admin pages for readability          */
.admin-label,
form label,
fieldset label {
    color: #3d4f4c;
    font-weight: 700;
}

/* Section headings del panel: "ESTÉTICA DE MARCA", "INFO PÚBLICA", etc */
h4 {
    color: #2e3f3c;
}

/* Todos los textos "caption" con tracking muy amplio EN EL ADMIN
   EXCLUIR: sidebar-link y botones para no romper legibilidad */
[class*="tracking-widest"]:not(.sidebar-link):not(.sidebar-link *):not(.cat-pill):not(button):not(button *) {
    color: #3d4f4c;
}

/* Placeholders más visibles */
input::placeholder,
textarea::placeholder {
    color: #7a9590 !important;
    opacity: 1 !important;
}

/* Aumentar opacidad mínima de los textos fantasma /30 /40 /50
   EXCLUIR sidebar-link para preservar el diseño del menú lateral */
[class*="text-secondary/40"]:not(.sidebar-link):not(.sidebar-link *),
[class*="text-secondary/30"]:not(.sidebar-link):not(.sidebar-link *),
[class*="text-secondary/50"]:not(.sidebar-link):not(.sidebar-link *),
[class*="text-primary/40"]:not(.sidebar-link):not(.sidebar-link *),
[class*="text-primary/30"]:not(.sidebar-link):not(.sidebar-link *),
[class*="opacity-40"]:not(.sidebar-link):not(.sidebar-link *),
[class*="opacity-30"]:not(.sidebar-link):not(.sidebar-link *) {
    opacity: 0.75 !important;
}

/* ── SIDEBAR: Protección de colores ────────────────────────────────── */
/* El sidebar-link usa text-secondary (#586062) por defecto
   en hover se vuelve bg-surface-container-low (claro) con texto secundario
   en .active → bg-primary (#005144) con texto blanco                  */
.sidebar-link {
    color: #586062 !important;
}
.sidebar-link:hover {
    color: #181c1b !important; /* Oscuro sobre fondo claro en hover */
    background-color: #ebefec !important;
}
.sidebar-link.active,
.sidebar-link.active * {
    color: #ffffff !important;  /* Blanco sobre verde primario */
    background-color: var(--accent-color, #005144);
}

/* ── UNIFIED DESIGN TOKENS ─────────────────────────────────────────── */
/* Consistent sizing system across all pages                            */

/* Button Sizing Normalization */
.btn-sm { height: 36px; padding: 0 1rem; font-size: 0.625rem; border-radius: 0.75rem; }
.btn-md { height: 40px; padding: 0 1.25rem; font-size: 0.6875rem; border-radius: 0.75rem; }
.btn-lg { height: 44px; padding: 0 1.5rem; font-size: 0.75rem; border-radius: 0.75rem; }

/* Prevent buttons from stretching beyond reasonable width on desktop */
@media (min-width: 768px) {
    button[class*="uppercase"][class*="tracking-widest"] {
        max-width: 280px;
    }
    /* Allow full-width on grid/flex containers that need it */
    .flex-1 button, button.w-full.sm\:flex-1,
    button[type="submit"], form button {
        max-width: none;
    }
}

/* Uniform input heights for admin forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
select,
textarea {
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Micro-interaction: subtle lift on interactive cards */
[class*="editorial-shadow"]:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Consistent pill/badge sizing */
.cat-pill {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Modal overlay consistent blur */
[class*="backdrop-blur-3xl"] {
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

/* Toast notification uniform sizing */
#toast-container > div {
    max-width: 320px;
    border-radius: 0.75rem;
}

/* Loading skeleton consistent feel */
#admin-loader, #catalog-loader {
    background: var(--background, #f7faf8);
}